Apply USD oracle to internal ETH transfers section

src/components/InternalTransactionOperation.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { BigNumber } from "@ethersproject/bignumber";
 import InternalTransfer from "./InternalTransfer";
 import InternalSelfDestruct from "./InternalSelfDestruct";
 import InternalCreate from "./InternalCreate";
@@ -7,22 +8,29 @@ import { TransactionData, InternalOperation, OperationType } from "../types";
 type InternalTransactionOperationProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
+  // TODO: migrate all this logic to SWR
+  ethUSDPrice: BigNumber | undefined;
 };
 
-const InternalTransactionOperation: React.FC<InternalTransactionOperationProps> =
-  ({ txData, internalOp }) => (
-    <>
-      {internalOp.type === OperationType.TRANSFER && (
-        <InternalTransfer txData={txData} internalOp={internalOp} />
-      )}
-      {internalOp.type === OperationType.SELF_DESTRUCT && (
-        <InternalSelfDestruct txData={txData} internalOp={internalOp} />
-      )}
-      {(internalOp.type === OperationType.CREATE ||
-        internalOp.type === OperationType.CREATE2) && (
-        <InternalCreate internalOp={internalOp} />
-      )}
-    </>
-  );
+const InternalTransactionOperation: React.FC<
+  InternalTransactionOperationProps
+> = ({ txData, internalOp, ethUSDPrice }) => (
+  <>
+    {internalOp.type === OperationType.TRANSFER && (
+      <InternalTransfer
+        txData={txData}
+        internalOp={internalOp}
+        ethUSDPrice={ethUSDPrice}
+      />
+    )}
+    {internalOp.type === OperationType.SELF_DESTRUCT && (
+      <InternalSelfDestruct txData={txData} internalOp={internalOp} />
+    )}
+    {(internalOp.type === OperationType.CREATE ||
+      internalOp.type === OperationType.CREATE2) && (
+      <InternalCreate internalOp={internalOp} />
+    )}
+  </>
+);
 
 export default React.memo(InternalTransactionOperation);

src/components/InternalTransfer.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { BigNumber } from "@ethersproject/bignumber";
 import { formatEther } from "@ethersproject/units";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
@@ -6,6 +7,7 @@ import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
 import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
 import AddressHighlighter from "./AddressHighlighter";
 import DecoratedAddressLink from "./DecoratedAddressLink";
+import USDAmount from "./USDAmount";
 import { RuntimeContext } from "../useRuntime";
 import { useHasCode } from "../useErigonHooks";
 import { useChainInfo } from "../useChainInfo";
@@ -14,14 +16,17 @@ import { TransactionData, InternalOperation } from "../types";
 type InternalTransferProps = {
   txData: TransactionData;
   internalOp: InternalOperation;
+  // TODO: migrate all this logic to SWR
+  ethUSDPrice: BigNumber | undefined;
 };
 
 const InternalTransfer: React.FC<InternalTransferProps> = ({
   txData,
   internalOp,
+  ethUSDPrice,
 }) => {
   const {
-    nativeCurrency: { symbol },
+    nativeCurrency: { symbol, decimals },
   } = useChainInfo();
   const fromMiner =
     txData.confirmedData?.miner !== undefined &&
@@ -94,6 +99,17 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
           <span>
             {formatEther(internalOp.value)} {symbol}
           </span>
+          {ethUSDPrice && (
+            <span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
+              <USDAmount
+                amount={internalOp.value}
+                amountDecimals={decimals}
+                quote={ethUSDPrice}
+                // TODO: migrate to SWR and standardize this magic number
+                quoteDecimals={8}
+              />
+            </span>
+          )}
         </div>
       </div>
     </div>

src/transaction/Details.tsx

@@ -298,6 +298,7 @@ const Details: React.FC<DetailsProps> = ({
                 key={i}
                 txData={txData}
                 internalOp={op}
+                ethUSDPrice={blockETHUSDPrice}
               />
             ))}
           </div>