Merge branch 'feature/internal-eth-transfer-usd' into develop

src/TransactionPageContent.tsx

@@ -10,7 +10,6 @@ import { useInternalOperations, useTxData } from "./useErigonHooks";
 import { SelectionContext, useSelection } from "./useSelection";
 import { SelectedTransactionContext } from "./useSelectedTransaction";
 import { BlockNumberContext } from "./useBlockTagContext";
-import { useETHUSDOracle } from "./usePriceOracle";
 import { useAppConfigContext } from "./useAppConfig";
 import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
 
@@ -60,11 +59,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
 
   const selectionCtx = useSelection();
 
-  const blockETHUSDPrice = useETHUSDOracle(
-    provider,
-    txData?.confirmedData?.blockNumber
-  );
-
   const { sourcifySource } = useAppConfigContext();
   const metadata = useSourcify(
     txData?.to,
@@ -114,7 +108,6 @@ const TransactionPageContent: React.FC<TransactionPageContentProps> = ({
                         devDoc={metadata?.output.devdoc}
                         internalOps={internalOps}
                         sendsEthToMiner={sendsEthToMiner}
-                        ethUSDPrice={blockETHUSDPrice}
                       />
                     }
                   />

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

@@ -1,7 +1,6 @@
 import React, { useContext, useMemo, useState } from "react";
 import { Tab } from "@headlessui/react";
 import { TransactionDescription } from "@ethersproject/abi";
-import { BigNumber } from "@ethersproject/bignumber";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@@ -47,6 +46,7 @@ import { RuntimeContext } from "../useRuntime";
 import { useContractsMetadata } from "../hooks";
 import { useTransactionError } from "../useErigonHooks";
 import { useChainInfo } from "../useChainInfo";
+import { useETHUSDOracle } from "../usePriceOracle";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -56,7 +56,6 @@ type DetailsProps = {
   devDoc?: DevDoc | undefined;
   internalOps?: InternalOperation[];
   sendsEthToMiner: boolean;
-  ethUSDPrice: BigNumber | undefined;
 };
 
 const Details: React.FC<DetailsProps> = ({
@@ -67,7 +66,6 @@ const Details: React.FC<DetailsProps> = ({
   devDoc,
   internalOps,
   sendsEthToMiner,
-  ethUSDPrice,
 }) => {
   const hasEIP1559 =
     txData.confirmedData?.blockBaseFeePerGas !== undefined &&
@@ -90,6 +88,12 @@ const Details: React.FC<DetailsProps> = ({
   const {
     nativeCurrency: { name, symbol },
   } = useChainInfo();
+
+  const blockETHUSDPrice = useETHUSDOracle(
+    provider,
+    txData?.confirmedData?.blockNumber
+  );
+
   const addresses = useMemo(() => {
     const _addresses: ChecksummedAddress[] = [];
     if (txData.to) {
@@ -294,6 +298,7 @@ const Details: React.FC<DetailsProps> = ({
                 key={i}
                 txData={txData}
                 internalOp={op}
+                ethUSDPrice={blockETHUSDPrice}
               />
             ))}
           </div>
@@ -318,9 +323,12 @@ const Details: React.FC<DetailsProps> = ({
       )}
       <InfoRow title="Value">
         <FormattedBalance value={txData.value} /> {symbol}{" "}
-        {!txData.value.isZero() && ethUSDPrice && (
+        {!txData.value.isZero() && blockETHUSDPrice && (
           <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
-            <ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
+            <ETH2USDValue
+              ethAmount={txData.value}
+              eth2USDValue={blockETHUSDPrice}
+            />
           </span>
         )}
       </InfoRow>
@@ -409,11 +417,11 @@ const Details: React.FC<DetailsProps> = ({
             <div className="space-y-3">
               <div>
                 <FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
-                {ethUSDPrice && (
+                {blockETHUSDPrice && (
                   <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
                     <ETH2USDValue
                       ethAmount={txData.confirmedData.fee}
-                      eth2USDValue={ethUSDPrice}
+                      eth2USDValue={blockETHUSDPrice}
                     />
                   </span>
                 )}
@@ -422,7 +430,7 @@ const Details: React.FC<DetailsProps> = ({
             </div>
           </InfoRow>
           <InfoRow title={`${name} Price`}>
-            <USDValue value={ethUSDPrice} />
+            <USDValue value={blockETHUSDPrice} />
           </InfoRow>
         </>
       )}