Merge branch 'feature/swr-everything-2' into develop

src/Address.tsx

@@ -21,7 +21,6 @@ import SourcifyLogo from "./sourcify/SourcifyLogo";
 import AddressTransactionResults from "./address/AddressTransactionResults";
 import Contracts from "./address/Contracts";
 import { RuntimeContext } from "./useRuntime";
-import { useAppConfigContext } from "./useAppConfig";
 import { useAddressOrENS } from "./useResolvedAddresses";
 import { useSourcifyMetadata } from "./sourcify/useSourcify";
 import { ChecksummedAddress } from "./types";
@@ -66,11 +65,9 @@ const Address: React.FC = () => {
   }, [addressOrName, checksummedAddress, isENS]);
 
   const hasCode = useHasCode(provider, checksummedAddress, "latest");
-  const { sourcifySource } = useAppConfigContext();
   const addressMetadata = useSourcifyMetadata(
     hasCode ? checksummedAddress : undefined,
-    provider?.network.chainId,
-    sourcifySource
+    provider?.network.chainId
   );
 
   const { network, faucets } = useChainInfo();

src/Block.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
-import { BigNumber } from "@ethersproject/bignumber";
 import { commify } from "@ethersproject/units";
 import { toUtf8String } from "@ethersproject/strings";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -12,13 +11,13 @@ import ContentFrame from "./ContentFrame";
 import BlockNotFound from "./components/BlockNotFound";
 import InfoRow from "./components/InfoRow";
 import Timestamp from "./components/Timestamp";
+import BlockReward from "./BlockReward";
 import GasValue from "./components/GasValue";
 import PercentageBar from "./components/PercentageBar";
 import BlockLink from "./components/BlockLink";
 import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TransactionValue from "./components/TransactionValue";
 import FormattedBalance from "./components/FormattedBalance";
-import ETH2USDValue from "./components/ETH2USDValue";
 import USDValue from "./components/USDValue";
 import HexValue from "./components/HexValue";
 import { RuntimeContext } from "./useRuntime";
@@ -55,7 +54,6 @@ const Block: React.FC = () => {
   }, [block]);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
-  const netFeeReward = block?.feeReward ?? BigNumber.from(0);
   const gasUsedPerc =
     block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
 
@@ -100,25 +98,7 @@ const Block: React.FC = () => {
             <DecoratedAddressLink address={block.miner} miner />
           </InfoRow>
           <InfoRow title="Block Reward">
-            <TransactionValue value={block.blockReward.add(netFeeReward)} />
-            {!netFeeReward.isZero() && (
-              <>
-                {" "}
-                (<TransactionValue value={block.blockReward} hideUnit /> +{" "}
-                <TransactionValue value={netFeeReward} hideUnit />)
-              </>
-            )}
-            {blockETHUSDPrice && (
-              <>
-                {" "}
-                <span className="px-2 border-amber-200 border rounded-lg bg-amber-100 text-amber-600">
-                  <ETH2USDValue
-                    ethAmount={block.blockReward.add(netFeeReward)}
-                    eth2USDValue={blockETHUSDPrice}
-                  />
-                </span>
-              </>
-            )}
+            <BlockReward block={block} />
           </InfoRow>
           <InfoRow title="Uncles Reward">
             <TransactionValue value={block.unclesReward} />

src/BlockReward.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from "react";
+import { BigNumber } from "@ethersproject/bignumber";
+import TransactionValue from "./components/TransactionValue";
+import FiatValue from "./components/FiatValue";
+import { RuntimeContext } from "./useRuntime";
+import { ExtendedBlock } from "./useErigonHooks";
+import { useETHUSDOracle } from "./usePriceOracle";
+
+type BlockRewardProps = {
+  block: ExtendedBlock;
+};
+
+const BlockReward: React.FC<BlockRewardProps> = ({ block }) => {
+  const { provider } = useContext(RuntimeContext);
+  const eth2USDValue = useETHUSDOracle(provider, block.number);
+
+  const netFeeReward = block?.feeReward ?? BigNumber.from(0);
+  const value = eth2USDValue
+    ? block.blockReward
+        .add(netFeeReward)
+        .mul(eth2USDValue)
+        .div(10 ** 8)
+    : undefined;
+
+  return (
+    <>
+      <TransactionValue value={block.blockReward.add(netFeeReward)} />
+      {!netFeeReward.isZero() && (
+        <>
+          {" "}
+          (<TransactionValue value={block.blockReward} hideUnit /> +{" "}
+          <TransactionValue value={netFeeReward} hideUnit />)
+        </>
+      )}
+      {value && (
+        <>
+          {" "}
+          <span className="px-2 border-amber-200 border rounded-lg bg-amber-100 text-amber-600">
+            <FiatValue value={value} />
+          </span>
+        </>
+      )}
+    </>
+  );
+};
+
+export default BlockReward;

src/BlockTransactions.tsx

@@ -40,7 +40,6 @@ const BlockTransactions: React.FC = () => {
     <StandardFrame>
       <BlockTransactionHeader blockTag={blockNumber.toNumber()} />
       <BlockTransactionResults
-        blockTag={blockNumber.toNumber()}
         page={txs}
         total={totalTxs ?? 0}
         pageNumber={pageNumber}

src/Home.tsx

@@ -7,7 +7,7 @@ import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode";
 import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
 import { RuntimeContext } from "./useRuntime";
-import { useLatestBlock } from "./useLatestBlock";
+import { useLatestBlockHeader } from "./useLatestBlock";
 import { blockURL } from "./url";
 import { useGenericSearch } from "./search/search";
 
@@ -17,7 +17,7 @@ const Home: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
   const [searchRef, handleChange, handleSubmit] = useGenericSearch();
 
-  const latestBlock = useLatestBlock(provider);
+  const latestBlock = useLatestBlockHeader(provider);
   const [isScanning, setScanning] = useState<boolean>(false);
 
   document.title = "Home | Otterscan";

src/PriceBox.tsx

@@ -6,7 +6,7 @@ import { faGasPump } from "@fortawesome/free-solid-svg-icons/faGasPump";
 import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json";
 import { RuntimeContext } from "./useRuntime";
 import { formatValue } from "./components/formatter";
-import { useLatestBlock } from "./useLatestBlock";
+import { useLatestBlockHeader } from "./useLatestBlock";
 import { useChainInfo } from "./useChainInfo";
 
 const ETH_FEED_DECIMALS = 8;
@@ -17,7 +17,7 @@ const PriceBox: React.FC = () => {
   const {
     nativeCurrency: { symbol },
   } = useChainInfo();
-  const latestBlock = useLatestBlock(provider);
+  const latestBlock = useLatestBlockHeader(provider);
 
   const maybeOutdated: boolean =
     latestBlock !== undefined &&

src/address/AddressBalance.tsx

@@ -0,0 +1,32 @@
+import React, { useContext } from "react";
+import { BigNumber } from "@ethersproject/bignumber";
+import TransactionValue from "../components/TransactionValue";
+import FiatValue from "../components/FiatValue";
+import { RuntimeContext } from "../useRuntime";
+import { useETHUSDOracle } from "../usePriceOracle";
+
+type AddressBalanceProps = {
+  balance: BigNumber;
+};
+
+const AddressBalance: React.FC<AddressBalanceProps> = ({ balance }) => {
+  const { provider } = useContext(RuntimeContext);
+  const eth2USDValue = useETHUSDOracle(provider, "latest");
+  const fiatValue =
+    !balance.isZero() && eth2USDValue !== undefined
+      ? balance.mul(eth2USDValue).div(10 ** 8)
+      : undefined;
+
+  return (
+    <>
+      <TransactionValue value={balance} />
+      {fiatValue && (
+        <span className="px-2 border-emerald-200 border rounded-lg bg-emerald-100 text-emerald-600">
+          <FiatValue value={fiatValue} />
+        </span>
+      )}
+    </>
+  );
+};
+
+export default AddressBalance;

src/address/AddressTransactionResults.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { BlockTag } from "@ethersproject/providers";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
-import TransactionValue from "../components/TransactionValue";
-import ETH2USDValue from "../components/ETH2USDValue";
+import AddressBalance from "./AddressBalance";
 import TransactionAddress from "../components/TransactionAddress";
 import Copy from "../components/Copy";
 import TransactionLink from "../components/TransactionLink";
@@ -14,7 +12,6 @@ import TransactionItem from "../search/TransactionItem";
 import UndefinedPageControl from "../search/UndefinedPageControl";
 import { useFeeToggler } from "../search/useFeeToggler";
 import { SelectionContext, useSelection } from "../useSelection";
-import { useMultipleETHUSDOracle } from "../usePriceOracle";
 import { RuntimeContext } from "../useRuntime";
 import { useParams, useSearchParams } from "react-router-dom";
 import { ChecksummedAddress, ProcessedTransaction } from "../types";
@@ -98,19 +95,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
 
   const page = useMemo(() => controller?.getPage(), [controller]);
 
-  // Extract block number from all txs on current page
-  // TODO: dedup blockTags
-  const blockTags: BlockTag[] = useMemo(() => {
-    if (!page) {
-      return ["latest"];
-    }
-
-    const blockTags: BlockTag[] = page.map((t) => t.blockNumber);
-    blockTags.push("latest");
-    return blockTags;
-  }, [page]);
-  const priceMap = useMultipleETHUSDOracle(provider, blockTags);
-
   const balance = useAddressBalance(provider, address);
   const creator = useContractCreator(provider, address);
 
@@ -121,15 +105,7 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
           {balance && (
             <InfoRow title="Balance">
               <div className="space-x-2">
-                <TransactionValue value={balance} />
-                {!balance.isZero() && priceMap["latest"] !== undefined && (
-                  <span className="px-2 border-emerald-200 border rounded-lg bg-emerald-100 text-emerald-600">
-                    <ETH2USDValue
-                      ethAmount={balance}
-                      eth2USDValue={priceMap["latest"]}
-                    />
-                  </span>
-                )}
+                <AddressBalance balance={balance} />
               </div>
             </InfoRow>
           )}
@@ -163,7 +139,6 @@ const AddressTransactionResults: React.FC<AddressTransactionResultsProps> = ({
                 tx={tx}
                 selectedAddress={address}
                 feeDisplay={feeDisplay}
-                priceMap={priceMap}
               />
             ))}
             <NavBar address={address} page={page} controller={controller} />

src/block/BlockTransactionResults.tsx

@@ -1,35 +1,27 @@
-import React, { useContext, useMemo } from "react";
-import { BlockTag } from "@ethersproject/abstract-provider";
+import React from "react";
 import ContentFrame from "../ContentFrame";
 import PageControl from "../search/PageControl";
 import ResultHeader from "../search/ResultHeader";
 import PendingResults from "../search/PendingResults";
 import TransactionItem from "../search/TransactionItem";
 import { useFeeToggler } from "../search/useFeeToggler";
-import { RuntimeContext } from "../useRuntime";
 import { SelectionContext, useSelection } from "../useSelection";
 import { ProcessedTransaction } from "../types";
 import { PAGE_SIZE } from "../params";
-import { useMultipleETHUSDOracle } from "../usePriceOracle";
 
 type BlockTransactionResultsProps = {
-  blockTag: BlockTag;
   page?: ProcessedTransaction[];
   total: number;
   pageNumber: number;
 };
 
 const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
-  blockTag,
   page,
   total,
   pageNumber,
 }) => {
-  const { provider } = useContext(RuntimeContext);
   const selectionCtx = useSelection();
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
-  const blockTags = useMemo(() => [blockTag], [blockTag]);
-  const priceMap = useMultipleETHUSDOracle(provider, blockTags);
 
   return (
     <ContentFrame>
@@ -54,12 +46,7 @@ const BlockTransactionResults: React.FC<BlockTransactionResultsProps> = ({
       {page ? (
         <SelectionContext.Provider value={selectionCtx}>
           {page.map((tx) => (
-            <TransactionItem
-              key={tx.hash}
-              tx={tx}
-              feeDisplay={feeDisplay}
-              priceMap={priceMap}
-            />
+            <TransactionItem key={tx.hash} tx={tx} feeDisplay={feeDisplay} />
           ))}
           <div className="flex justify-between items-baseline py-3">
             <div className="text-sm text-gray-500">

src/components/DecoratedAddressLink.tsx

@@ -9,7 +9,6 @@ import { faCoins } from "@fortawesome/free-solid-svg-icons/faCoins";
 import SourcifyLogo from "../sourcify/SourcifyLogo";
 import PlainAddress from "./PlainAddress";
 import { RuntimeContext } from "../useRuntime";
-import { useAppConfigContext } from "../useAppConfig";
 import { useSourcifyMetadata } from "../sourcify/useSourcify";
 import { useResolvedAddress } from "../useResolvedAddresses";
 import { AddressContext, ChecksummedAddress, ZERO_ADDRESS } from "../types";
@@ -39,12 +38,7 @@ const DecoratedAddressLink: React.FC<DecoratedAddressLinkProps> = ({
   eoa,
 }) => {
   const { provider } = useContext(RuntimeContext);
-  const { sourcifySource } = useAppConfigContext();
-  const metadata = useSourcifyMetadata(
-    address,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadata = useSourcifyMetadata(address, provider?.network.chainId);
 
   const mint = addressCtx === AddressContext.FROM && address === ZERO_ADDRESS;
   const burn = addressCtx === AddressContext.TO && address === ZERO_ADDRESS;

src/components/ETH2USDValue.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
-import { commify } from "@ethersproject/units";
-
-type ETH2USDValueProps = {
-  ethAmount: BigNumber;
-  eth2USDValue: BigNumber;
-};
-
-/**
- * Basic display of ETH -> USD values WITHOUT box decoration, only
- * text formatting.
- *
- * USD amounts are displayed commified with 2 decimals places and $ prefix,
- * i.e., "$1,000.00".
- */
-const ETH2USDValue: React.FC<ETH2USDValueProps> = ({
-  ethAmount,
-  eth2USDValue,
-}) => {
-  const value = ethAmount.mul(eth2USDValue).div(10 ** 8);
-
-  return (
-    <span className="text-xs">
-      $
-      <span className="font-balance">
-        {commify(FixedNumber.fromValue(value, 18).round(2).toString())}
-      </span>
-    </span>
-  );
-};
-
-export default React.memo(ETH2USDValue);

src/components/FiatValue.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { BigNumber, FixedNumber } from "@ethersproject/bignumber";
+import { commify } from "@ethersproject/units";
+
+type FiatValueProps = {
+  value: BigNumber;
+};
+
+/**
+ * Basic display of ETH -> USD values WITHOUT box decoration, only
+ * text formatting.
+ *
+ * USD amounts are displayed commified with 2 decimals places and $ prefix,
+ * i.e., "$1,000.00".
+ */
+const FiatValue: React.FC<FiatValueProps> = ({ value }) => (
+  <span className="text-xs">
+    $
+    <span className="font-balance">
+      {commify(FixedNumber.fromValue(value, 18).round(2).toString())}
+    </span>
+  </span>
+);
+
+export default FiatValue;

src/components/InternalTransactionOperation.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { BigNumber } from "@ethersproject/bignumber";
 import InternalTransfer from "./InternalTransfer";
 import InternalSelfDestruct from "./InternalSelfDestruct";
 import InternalCreate from "./InternalCreate";
@@ -8,20 +7,14 @@ 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, ethUSDPrice }) => (
+> = ({ txData, internalOp }) => (
   <>
     {internalOp.type === OperationType.TRANSFER && (
-      <InternalTransfer
-        txData={txData}
-        internalOp={internalOp}
-        ethUSDPrice={ethUSDPrice}
-      />
+      <InternalTransfer txData={txData} internalOp={internalOp} />
     )}
     {internalOp.type === OperationType.SELF_DESTRUCT && (
       <InternalSelfDestruct txData={txData} internalOp={internalOp} />

src/components/InternalTransfer.tsx

@@ -1,5 +1,4 @@
 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";
@@ -11,19 +10,17 @@ import USDAmount from "./USDAmount";
 import { RuntimeContext } from "../useRuntime";
 import { useHasCode } from "../useErigonHooks";
 import { useChainInfo } from "../useChainInfo";
+import { useETHUSDOracle } from "../usePriceOracle";
 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, decimals },
@@ -36,6 +33,10 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
     internalOp.to === txData.confirmedData.miner;
 
   const { provider } = useContext(RuntimeContext);
+  const blockETHUSDPrice = useETHUSDOracle(
+    provider,
+    txData.confirmedData?.blockNumber
+  );
   const fromHasCode = useHasCode(
     provider,
     internalOp.from,
@@ -99,12 +100,12 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
           <span>
             {formatEther(internalOp.value)} {symbol}
           </span>
-          {ethUSDPrice && (
+          {blockETHUSDPrice && (
             <span className="px-2 border-gray-200 border rounded-lg bg-gray-100 text-gray-600">
               <USDAmount
                 amount={internalOp.value}
                 amountDecimals={decimals}
-                quote={ethUSDPrice}
+                quote={blockETHUSDPrice}
                 // TODO: migrate to SWR and standardize this magic number
                 quoteDecimals={8}
               />

src/components/TransactionDetailsValue.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { BlockTag } from "@ethersproject/providers";
+import { BigNumber } from "@ethersproject/bignumber";
+import FormattedBalance from "./FormattedBalance";
+import { RuntimeContext } from "../useRuntime";
+import { useChainInfo } from "../useChainInfo";
+import { useETHUSDOracle } from "../usePriceOracle";
+import FiatValue from "./FiatValue";
+
+type TransactionDetailsValueProps = {
+  blockTag: BlockTag | undefined;
+  value: BigNumber;
+};
+
+const TransactionDetailsValue: React.FC<TransactionDetailsValueProps> = ({
+  blockTag,
+  value,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const blockETHUSDPrice = useETHUSDOracle(provider, blockTag);
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
+  const fiatValue =
+    !value.isZero() && blockETHUSDPrice !== undefined
+      ? value.mul(blockETHUSDPrice).div(10 ** 8)
+      : undefined;
+
+  return (
+    <>
+      <FormattedBalance value={value} /> {symbol}{" "}
+      {fiatValue && (
+        <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
+          <FiatValue value={fiatValue} />
+        </span>
+      )}
+    </>
+  );
+};
+
+export default TransactionDetailsValue;

src/search/TransactionItem.tsx

@@ -1,6 +1,4 @@
 import React, { useContext } from "react";
-import { BlockTag } from "@ethersproject/abstract-provider";
-import { BigNumber } from "@ethersproject/bignumber";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 import MethodName from "../components/MethodName";
@@ -14,25 +12,23 @@ import TransactionDirection, {
   Flags,
 } from "../components/TransactionDirection";
 import TransactionValue from "../components/TransactionValue";
+import TransactionItemFiatFee from "./TransactionItemFiatFee";
 import { ProcessedTransaction } from "../types";
 import { FeeDisplay } from "./useFeeToggler";
 import { RuntimeContext } from "../useRuntime";
 import { useHasCode } from "../useErigonHooks";
 import { formatValue } from "../components/formatter";
-import ETH2USDValue from "../components/ETH2USDValue";
 
 type TransactionItemProps = {
   tx: ProcessedTransaction;
   selectedAddress?: string;
   feeDisplay: FeeDisplay;
-  priceMap: Record<BlockTag, BigNumber>;
 };
 
 const TransactionItem: React.FC<TransactionItemProps> = ({
   tx,
   selectedAddress,
   feeDisplay,
-  priceMap,
 }) => {
   const { provider } = useContext(RuntimeContext);
   const toHasCode = useHasCode(
@@ -130,15 +126,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
       </span>
       <span className="font-balance text-xs text-gray-500 truncate">
         {feeDisplay === FeeDisplay.TX_FEE && formatValue(tx.fee, 18)}
-        {feeDisplay === FeeDisplay.TX_FEE_USD &&
-          (priceMap[tx.blockNumber] ? (
-            <ETH2USDValue
-              ethAmount={tx.fee}
-              eth2USDValue={priceMap[tx.blockNumber]}
-            />
-          ) : (
-            "N/A"
-          ))}
+        {feeDisplay === FeeDisplay.TX_FEE_USD && (
+          <TransactionItemFiatFee blockTag={tx.blockNumber} fee={tx.fee} />
+        )}
         {feeDisplay === FeeDisplay.GAS_PRICE && formatValue(tx.gasPrice, 9)}
       </span>
     </div>

src/search/TransactionItemFiatFee.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { BlockTag } from "@ethersproject/providers";
+import { BigNumber } from "@ethersproject/bignumber";
+import FiatValue from "../components/FiatValue";
+import { RuntimeContext } from "../useRuntime";
+import { useETHUSDOracle } from "../usePriceOracle";
+
+type TransactionItemFiatFeeProps = {
+  blockTag: BlockTag;
+  fee: BigNumber;
+};
+
+const TransactionItemFiatFee: React.FC<TransactionItemFiatFeeProps> = ({
+  blockTag,
+  fee,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const eth2USDValue = useETHUSDOracle(provider, blockTag);
+  const fiatValue =
+    eth2USDValue !== undefined ? fee.mul(eth2USDValue).div(10 ** 8) : undefined;
+
+  return fiatValue ? <FiatValue value={fiatValue} /> : <>N/A</>;
+};
+
+export default TransactionItemFiatFee;

src/sourcify/useSourcify.ts

@@ -4,6 +4,7 @@ import { ErrorDescription } from "@ethersproject/abi/lib/interface";
 import useSWRImmutable from "swr/immutable";
 import { ChecksummedAddress, TransactionData } from "../types";
 import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "../url";
+import { useAppConfigContext } from "../useAppConfig";
 
 export type UserMethod = {
   notice?: string | undefined;
@@ -98,13 +99,13 @@ const sourcifyFetcher = async (url: string) => {
 
 export const useSourcifyMetadata = (
   address: ChecksummedAddress | undefined,
-  chainId: number | undefined,
-  source: SourcifySource
+  chainId: number | undefined
 ): Metadata | null | undefined => {
+  const { sourcifySource } = useAppConfigContext();
   const metadataURL = () =>
     address === undefined || chainId === undefined
       ? null
-      : sourcifyMetadata(address, chainId, source);
+      : sourcifyMetadata(address, chainId, sourcifySource);
   const { data, error } = useSWRImmutable<Metadata>(
     metadataURL,
     sourcifyFetcher

src/special/london/London.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { useLatestBlock } from "../../useLatestBlock";
+import { useLatestBlockHeader } from "../../useLatestBlock";
 import { RuntimeContext } from "../../useRuntime";
 import Countdown from "./Countdown";
 import Blocks from "./Blocks";
@@ -7,7 +7,7 @@ import { londonBlockNumber } from "./params";
 
 const London: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
-  const block = useLatestBlock(provider);
+  const block = useLatestBlockHeader(provider);
   if (!provider || !block) {
     return <div className="grow"></div>;
   }

src/transaction/Details.tsx

@@ -17,12 +17,13 @@ import NavNonce from "./NavNonce";
 import Timestamp from "../components/Timestamp";
 import InternalTransactionOperation from "../components/InternalTransactionOperation";
 import MethodName from "../components/MethodName";
+import TransactionDetailsValue from "../components/TransactionDetailsValue";
 import TransactionType from "../components/TransactionType";
+import TransactionFee from "./TransactionFee";
 import RewardSplit from "./RewardSplit";
 import GasValue from "../components/GasValue";
 import USDValue from "../components/USDValue";
 import FormattedBalance from "../components/FormattedBalance";
-import ETH2USDValue from "../components/ETH2USDValue";
 import TokenTransferItem from "../TokenTransferItem";
 import { TransactionData } from "../types";
 import PercentageBar from "../components/PercentageBar";
@@ -36,7 +37,6 @@ import {
   use4Bytes,
   useTransactionDescription,
 } from "../use4Bytes";
-import { useAppConfigContext } from "../useAppConfig";
 import {
   useError,
   useSourcifyMetadata,
@@ -81,12 +81,7 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
     return false;
   }, [txData, internalOps]);
 
-  const { sourcifySource } = useAppConfigContext();
-  const metadata = useSourcifyMetadata(
-    txData?.to,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadata = useSourcifyMetadata(txData?.to, provider?.network.chainId);
 
   const txDesc = useSourcifyTransactionDescription(metadata, txData);
   const userDoc = metadata?.output.userdoc;
@@ -285,7 +280,6 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
                 key={i}
                 txData={txData}
                 internalOp={op}
-                ethUSDPrice={blockETHUSDPrice}
               />
             ))}
           </div>
@@ -308,15 +302,10 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
         </InfoRow>
       )}
       <InfoRow title="Value">
-        <FormattedBalance value={txData.value} /> {symbol}{" "}
-        {!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={blockETHUSDPrice}
-            />
-          </span>
-        )}
+        <TransactionDetailsValue
+          blockTag={txData.confirmedData?.blockNumber}
+          value={txData.value}
+        />
       </InfoRow>
       <InfoRow
         title={
@@ -402,15 +391,7 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
           <InfoRow title="Transaction Fee">
             <div className="space-y-3">
               <div>
-                <FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
-                {blockETHUSDPrice && (
-                  <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
-                    <ETH2USDValue
-                      ethAmount={txData.confirmedData.fee}
-                      eth2USDValue={blockETHUSDPrice}
-                    />
-                  </span>
-                )}
+                <TransactionFee confirmedData={txData.confirmedData} />
               </div>
               {hasEIP1559 && <RewardSplit txData={txData} />}
             </div>

src/transaction/LogEntry.tsx

@@ -9,7 +9,6 @@ import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import DecodedLogSignature from "./decoder/DecodedLogSignature";
 import { useTopic0 } from "../useTopic0";
 import { RuntimeContext } from "../useRuntime";
-import { useAppConfigContext } from "../useAppConfig";
 import { useSourcifyMetadata } from "../sourcify/useSourcify";
 
 type LogEntryProps = {
@@ -18,12 +17,7 @@ type LogEntryProps = {
 
 const LogEntry: React.FC<LogEntryProps> = ({ log }) => {
   const { provider } = useContext(RuntimeContext);
-  const { sourcifySource } = useAppConfigContext();
-  const metadata = useSourcifyMetadata(
-    log.address,
-    provider?.network.chainId,
-    sourcifySource
-  );
+  const metadata = useSourcifyMetadata(log.address, provider?.network.chainId);
 
   const logDesc = useMemo(() => {
     if (!metadata) {

src/transaction/NavButton.tsx

@@ -1,5 +1,7 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useContext, useState } from "react";
 import { NavLink } from "react-router-dom";
+import { RuntimeContext } from "../useRuntime";
+import { useTransactionBySenderAndNonce } from "../useErigonHooks";
 import { ChecksummedAddress } from "../types";
 import { addressByNonceURL } from "../url";
 
@@ -16,6 +18,8 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
   disabled,
   children,
 }) => {
+  const [prefetch, setPrefetch] = useState<boolean>(false);
+
   if (disabled) {
     return (
       <span className="bg-link-blue/10 text-gray-300 rounded px-2 py-1 text-xs">
@@ -25,13 +29,36 @@ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
   }
 
   return (
-    <NavLink
-      className="bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white rounded px-2 py-1 text-xs"
-      to={addressByNonceURL(sender, nonce)}
-    >
-      {children}
-    </NavLink>
+    <>
+      <NavLink
+        className="bg-link-blue/10 text-link-blue hover:bg-link-blue/100 hover:text-white rounded px-2 py-1 text-xs"
+        to={addressByNonceURL(sender, nonce)}
+        onMouseOver={() => setPrefetch(true)}
+      >
+        {children}
+      </NavLink>
+      {prefetch && <Prefetcher checksummedAddress={sender} nonce={nonce} />}
+    </>
   );
 };
 
+type PrefetcherProps = {
+  checksummedAddress: ChecksummedAddress;
+  nonce: number;
+};
+
+const Prefetcher: React.FC<PrefetcherProps> = ({
+  checksummedAddress,
+  nonce,
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const _txHash = useTransactionBySenderAndNonce(
+    provider,
+    checksummedAddress,
+    nonce
+  );
+
+  return <></>;
+};
+
 export default NavButton;

src/transaction/NavNonce.tsx

@@ -1,15 +1,11 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
 import NavButton from "./NavButton";
 import { ChecksummedAddress } from "../types";
 import { RuntimeContext } from "../useRuntime";
-import {
-  prefetchTransactionBySenderAndNonce,
-  useTransactionCount,
-} from "../useErigonHooks";
-import { useSWRConfig } from "swr";
+import { useTransactionCount } from "../useErigonHooks";
 
 type NavNonceProps = {
   sender: ChecksummedAddress;
@@ -20,25 +16,6 @@ const NavNonce: React.FC<NavNonceProps> = ({ sender, nonce }) => {
   const { provider } = useContext(RuntimeContext);
   const count = useTransactionCount(provider, sender);
 
-  // Prefetch
-  const swrConfig = useSWRConfig();
-  useEffect(() => {
-    if (!provider || !sender || nonce === undefined || count === undefined) {
-      return;
-    }
-
-    prefetchTransactionBySenderAndNonce(swrConfig, provider, sender, nonce - 1);
-    prefetchTransactionBySenderAndNonce(swrConfig, provider, sender, nonce + 1);
-    if (count > 0) {
-      prefetchTransactionBySenderAndNonce(
-        swrConfig,
-        provider,
-        sender,
-        count - 1
-      );
-    }
-  }, [swrConfig, provider, sender, nonce, count]);
-
   return (
     <div className="pl-2 self-center flex space-x-1">
       <NavButton sender={sender} nonce={nonce - 1} disabled={nonce === 0}>

src/transaction/TransactionFee.tsx

@@ -0,0 +1,36 @@
+import React, { useContext } from "react";
+import FormattedBalance from "../components/FormattedBalance";
+import FiatValue from "../components/FiatValue";
+import { RuntimeContext } from "../useRuntime";
+import { useETHUSDOracle } from "../usePriceOracle";
+import { useChainInfo } from "../useChainInfo";
+import { ConfirmedTransactionData } from "../types";
+
+type TransactionFeeProps = {
+  confirmedData: ConfirmedTransactionData;
+};
+
+const TransactionFee: React.FC<TransactionFeeProps> = ({ confirmedData }) => {
+  const { provider } = useContext(RuntimeContext);
+  const blockETHUSDPrice = useETHUSDOracle(provider, confirmedData.blockNumber);
+  const {
+    nativeCurrency: { symbol },
+  } = useChainInfo();
+  const fiatValue =
+    blockETHUSDPrice !== undefined
+      ? confirmedData.fee.mul(blockETHUSDPrice).div(10 ** 8)
+      : undefined;
+
+  return (
+    <>
+      <FormattedBalance value={confirmedData.fee} /> {symbol}{" "}
+      {fiatValue && (
+        <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
+          <FiatValue value={fiatValue} />
+        </span>
+      )}
+    </>
+  );
+};
+
+export default TransactionFee;

src/useChainInfo.ts

@@ -1,4 +1,5 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext } from "react";
+import useSWRImmutable from "swr/immutable";
 import { chainInfoURL } from "./url";
 import { OtterscanRuntime } from "./useRuntime";
 
@@ -24,40 +25,33 @@ export const defaultChainInfo: ChainInfo = {
 
 export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined);
 
+const chainInfoFetcher = async (assetsURLPrefix: string, chainId: number) => {
+  const url = chainInfoURL(assetsURLPrefix, chainId);
+  const res = await fetch(url);
+  if (!res.ok) {
+    return defaultChainInfo;
+  }
+
+  const info: ChainInfo = await res.json();
+  return info;
+};
+
 export const useChainInfoFromMetadataFile = (
   runtime: OtterscanRuntime | undefined
 ): ChainInfo | undefined => {
   const assetsURLPrefix = runtime?.config?.assetsURLPrefix;
   const chainId = runtime?.provider?.network.chainId;
 
-  const [chainInfo, setChainInfo] = useState<ChainInfo | undefined>(undefined);
-
-  useEffect(() => {
-    if (assetsURLPrefix === undefined || chainId === undefined) {
-      setChainInfo(undefined);
-      return;
-    }
-
-    const readChainInfo = async () => {
-      try {
-        const res = await fetch(chainInfoURL(assetsURLPrefix, chainId));
-        if (!res.ok) {
-          setChainInfo(defaultChainInfo);
-          return;
-        }
-
-        const info: ChainInfo = await res.json();
-        setChainInfo(info);
-      } catch (err) {
-        // ignore
-        setChainInfo(defaultChainInfo);
-        return;
-      }
-    };
-    readChainInfo();
-  }, [assetsURLPrefix, chainId]);
-
-  return chainInfo;
+  const { data, error } = useSWRImmutable(
+    assetsURLPrefix !== undefined && chainId !== undefined
+      ? [assetsURLPrefix, chainId]
+      : null,
+    chainInfoFetcher
+  );
+  if (error) {
+    return defaultChainInfo;
+  }
+  return data;
 };
 
 export const useChainInfo = (): ChainInfo => {

src/useErigonHooks.ts

@@ -10,7 +10,7 @@ import { Contract } from "@ethersproject/contracts";
 import { defaultAbiCoder } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
-import useSWR, { useSWRConfig } from "swr";
+import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
 import { getInternalOperations } from "./nodeFunctions";
 import {
@@ -527,25 +527,6 @@ const getTransactionBySenderAndNonceFetcher =
     return result;
   };
 
-export const prefetchTransactionBySenderAndNonce = (
-  { mutate }: ReturnType<typeof useSWRConfig>,
-  provider: JsonRpcProvider,
-  sender: ChecksummedAddress,
-  nonce: number
-) => {
-  const key: TransactionBySenderAndNonceKey = {
-    network: provider.network.chainId,
-    sender,
-    nonce,
-  };
-  mutate(key, (curr: any) => {
-    if (curr) {
-      return curr;
-    }
-    return getTransactionBySenderAndNonceFetcher(provider)(key);
-  });
-};
-
 export const useTransactionBySenderAndNonce = (
   provider: JsonRpcProvider | undefined,
   sender: ChecksummedAddress | undefined,

src/useLatestBlock.ts

@@ -2,7 +2,12 @@ import { useState, useEffect } from "react";
 import { Block } from "@ethersproject/abstract-provider";
 import { JsonRpcProvider } from "@ethersproject/providers";
 
-export const useLatestBlock = (provider?: JsonRpcProvider) => {
+/**
+ * Returns the latest block header AND hook an internal listener
+ * that'll update and trigger a component render as a side effect
+ * every time it is notified of a new block by the web3 provider.
+ */
+export const useLatestBlockHeader = (provider?: JsonRpcProvider) => {
   const [latestBlock, setLatestBlock] = useState<Block>();
 
   useEffect(() => {
@@ -10,15 +15,7 @@ export const useLatestBlock = (provider?: JsonRpcProvider) => {
       return;
     }
 
-    const readLatestBlock = async () => {
-      const blockNum = await provider.getBlockNumber();
-      const _raw = await provider.send("erigon_getHeaderByNumber", [blockNum]);
-      const _block = provider.formatter.block(_raw);
-      setLatestBlock(_block);
-    };
-    readLatestBlock();
-
-    const listener = async (blockNumber: number) => {
+    const getAndSetBlockHeader = async (blockNumber: number) => {
       const _raw = await provider.send("erigon_getHeaderByNumber", [
         blockNumber,
       ]);
@@ -26,15 +23,31 @@ export const useLatestBlock = (provider?: JsonRpcProvider) => {
       setLatestBlock(_block);
     };
 
-    provider.on("block", listener);
+    // Immediately read and set the latest block header
+    const readLatestBlock = async () => {
+      const blockNum = await provider.getBlockNumber();
+      await getAndSetBlockHeader(blockNum);
+    };
+    readLatestBlock();
+
+    // Hook a listener that'll update the latest block header
+    // every time it is notified of a new block
+    provider.on("block", getAndSetBlockHeader);
     return () => {
-      provider.removeListener("block", listener);
+      provider.removeListener("block", getAndSetBlockHeader);
     };
   }, [provider]);
 
   return latestBlock;
 };
 
+/**
+ * Returns the latest block number AND hook an internal listener
+ * that'll update and trigger a component render as a side effect
+ * every time it is notified of a new block by the web3 provider.
+ *
+ * This hook is cheaper than useLatestBlockHeader.
+ */
 export const useLatestBlockNumber = (provider?: JsonRpcProvider) => {
   const [latestBlock, setLatestBlock] = useState<number>();
 
@@ -43,12 +56,15 @@ export const useLatestBlockNumber = (provider?: JsonRpcProvider) => {
       return;
     }
 
+    // Immediately read and set the latest block number
     const readLatestBlock = async () => {
       const blockNum = await provider.getBlockNumber();
       setLatestBlock(blockNum);
     };
     readLatestBlock();
 
+    // Hook a listener that'll update the latest block number
+    // every time it is notified of a new block
     const listener = async (blockNumber: number) => {
       setLatestBlock(blockNumber);
     };

src/usePriceOracle.ts

@@ -1,4 +1,3 @@
-import { useEffect, useMemo, useState } from "react";
 import { JsonRpcProvider, BlockTag } from "@ethersproject/providers";
 import { Contract } from "@ethersproject/contracts";
 import { BigNumber } from "@ethersproject/bignumber";
@@ -70,77 +69,34 @@ export const useTokenUSDOracle = (
   return data ?? [undefined, undefined];
 };
 
+const ethUSDFetcherKey = (blockTag: BlockTag | undefined) => {
+  if (blockTag === undefined) {
+    return null;
+  }
+  return ["ethusd", blockTag];
+};
+
+const ethUSDFetcher =
+  (
+    provider: JsonRpcProvider | undefined
+  ): Fetcher<BigNumber | undefined, ["ethusd", BlockTag | undefined]> =>
+  async (_, blockTag) => {
+    if (provider?.network.chainId !== 1) {
+      return undefined;
+    }
+    const c = new Contract("eth-usd.data.eth", AggregatorV3Interface, provider);
+    const priceData = await c.latestRoundData({ blockTag });
+    return BigNumber.from(priceData.answer);
+  };
+
 export const useETHUSDOracle = (
   provider: JsonRpcProvider | undefined,
   blockTag: BlockTag | undefined
-) => {
-  const blockTags = useMemo(() => [blockTag], [blockTag]);
-  const priceMap = useMultipleETHUSDOracle(provider, blockTags);
-
-  if (blockTag === undefined) {
+): BigNumber | undefined => {
+  const fetcher = ethUSDFetcher(provider);
+  const { data, error } = useSWRImmutable(ethUSDFetcherKey(blockTag), fetcher);
+  if (error) {
     return undefined;
   }
-  return priceMap[blockTag];
-};
-
-export const useMultipleETHUSDOracle = (
-  provider: JsonRpcProvider | undefined,
-  blockTags: (BlockTag | undefined)[]
-) => {
-  const ethFeed = useMemo(() => {
-    // TODO: it currently is hardcoded to support only mainnet
-    if (!provider || provider.network.chainId !== 1) {
-      return undefined;
-    }
-
-    try {
-      return new Contract("eth-usd.data.eth", AggregatorV3Interface, provider);
-    } catch (err) {
-      console.error(err);
-      return undefined;
-    }
-  }, [provider]);
-
-  const [latestPriceData, setLatestPriceData] = useState<
-    Record<BlockTag, BigNumber>
-  >({});
-  useEffect(() => {
-    if (!ethFeed) {
-      return;
-    }
-
-    const priceReaders: Promise<BigNumber | undefined>[] = [];
-    for (const blockTag of blockTags) {
-      priceReaders.push(
-        (async () => {
-          try {
-            const priceData = await ethFeed.latestRoundData({ blockTag });
-            return BigNumber.from(priceData.answer);
-          } catch (err) {
-            // Silently ignore on purpose; it means the network or block number does
-            // not contain the chainlink feed contract
-            return undefined;
-          }
-        })()
-      );
-    }
-    const readData = async () => {
-      const results = await Promise.all(priceReaders);
-      const priceMap: Record<BlockTag, BigNumber> = {};
-      for (let i = 0; i < blockTags.length; i++) {
-        const blockTag = blockTags[i];
-        const result = results[i];
-        if (blockTag === undefined || result === undefined) {
-          continue;
-        }
-
-        priceMap[blockTag] = result;
-      }
-
-      setLatestPriceData(priceMap);
-    };
-    readData();
-  }, [ethFeed, blockTags]);
-
-  return latestPriceData;
+  return data;
 };