Extract token transfers logic

src/transaction/Details.tsx

@@ -43,7 +43,11 @@ import {
   useTransactionDescription as useSourcifyTransactionDescription,
 } from "../sourcify/useSourcify";
 import { RuntimeContext } from "../useRuntime";
-import { useSendsToMiner, useTransactionError } from "../useErigonHooks";
+import {
+  useSendsToMiner,
+  useTokenTransfers,
+  useTransactionError,
+} from "../useErigonHooks";
 import { useChainInfo } from "../useChainInfo";
 import { useETHUSDOracle } from "../usePriceOracle";
 
@@ -73,6 +77,8 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
     txData.confirmedData?.miner
   );
 
+  const tokenTransfers = useTokenTransfers(txData);
+
   const metadata = useSourcifyMetadata(txData?.to, provider?.network.chainId);
 
   const txDesc = useSourcifyTransactionDescription(metadata, txData);
@@ -282,9 +288,9 @@ const Details: React.FC<DetailsProps> = ({ txData }) => {
           <MethodName data={txData.data} />
         </InfoRow>
       )}
-      {txData.tokenTransfers.length > 0 && (
-        <InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
-          {txData.tokenTransfers.map((t, i) => (
+      {tokenTransfers && tokenTransfers.length > 0 && (
+        <InfoRow title={`Tokens Transferred (${tokenTransfers.length})`}>
+          {tokenTransfers.map((t, i) => (
             <TokenTransferItem key={i} t={t} />
           ))}
         </InfoRow>

src/types.ts

@@ -36,7 +36,6 @@ export type TransactionData = {
   from: string;
   to?: string;
   value: BigNumber;
-  tokenTransfers: TokenTransfer[];
   type: number;
   maxFeePerGas?: BigNumber | undefined;
   maxPriorityFeePerGas?: BigNumber | undefined;

src/useErigonHooks.ts

@@ -198,31 +198,11 @@ export const useTxData = (
 
         document.title = `Transaction ${_response.hash} | Otterscan`;
 
-        // Extract token transfers
-        const tokenTransfers: TokenTransfer[] = [];
-        if (_receipt) {
-          for (const l of _receipt.logs) {
-            if (l.topics.length !== 3) {
-              continue;
-            }
-            if (l.topics[0] !== TRANSFER_TOPIC) {
-              continue;
-            }
-            tokenTransfers.push({
-              token: l.address,
-              from: getAddress(hexDataSlice(arrayify(l.topics[1]), 12)),
-              to: getAddress(hexDataSlice(arrayify(l.topics[2]), 12)),
-              value: BigNumber.from(l.data),
-            });
-          }
-        }
-
         setTxData({
           transactionHash: _response.hash,
           from: _response.from,
           to: _response.to,
           value: _response.value,
-          tokenTransfers,
           type: _response.type ?? 0,
           maxFeePerGas: _response.maxFeePerGas,
           maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
@@ -260,6 +240,35 @@ export const useTxData = (
   return txData;
 };
 
+export const useTokenTransfers = (
+  txData: TransactionData
+): TokenTransfer[] | undefined => {
+  const transfers = useMemo(() => {
+    if (!txData.confirmedData) {
+      return undefined;
+    }
+
+    const _transfers: TokenTransfer[] = [];
+    for (const l of txData.confirmedData.logs) {
+      if (l.topics.length !== 3) {
+        continue;
+      }
+      if (l.topics[0] !== TRANSFER_TOPIC) {
+        continue;
+      }
+      _transfers.push({
+        token: l.address,
+        from: getAddress(hexDataSlice(arrayify(l.topics[1]), 12)),
+        to: getAddress(hexDataSlice(arrayify(l.topics[2]), 12)),
+        value: BigNumber.from(l.data),
+      });
+    }
+    return _transfers;
+  }, [txData]);
+
+  return transfers;
+};
+
 export const useInternalOperations = (
   provider: JsonRpcProvider | undefined,
   txHash: string | undefined