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,13 +8,20 @@ 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 }) => (
+const InternalTransactionOperation: React.FC<
+  InternalTransactionOperationProps
+> = ({ txData, internalOp, ethUSDPrice }) => (
   <>
     {internalOp.type === OperationType.TRANSFER && (
-        <InternalTransfer txData={txData} internalOp={internalOp} />
+      <InternalTransfer
+        txData={txData}
+        internalOp={internalOp}
+        ethUSDPrice={ethUSDPrice}
+      />
     )}
     {internalOp.type === OperationType.SELF_DESTRUCT && (
       <InternalSelfDestruct txData={txData} internalOp={internalOp} />
@@ -23,6 +31,6 @@ const InternalTransactionOperation: React.FC<InternalTransactionOperationProps>
       <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>