Extract custom hook; simplify code

src/Transaction.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useContext,
-} from "react";
+import React, { useState, useEffect, useMemo, useContext } from "react";
 import { Route, Switch, useParams } from "react-router-dom";
 import { BigNumber, ethers } from "ethers";
 import StandardFrame from "./StandardFrame";
@@ -13,9 +7,10 @@ import Tab from "./components/Tab";
 import Details from "./transaction/Details";
 import Logs from "./transaction/Logs";
 import erc20 from "./erc20.json";
-import { TokenMetas, TokenTransfer, TransactionData, Transfer } from "./types";
+import { TokenMetas, TokenTransfer, TransactionData } from "./types";
 import { RuntimeContext } from "./useRuntime";
 import { SelectionContext, useSelection } from "./useSelection";
+import { useInternalTransfers } from "./useErigonHooks";
 
 const TRANSFER_TOPIC =
   "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
@@ -110,7 +105,7 @@ const Transaction: React.FC = () => {
     readBlock();
   }, [provider, txhash]);
 
-  const [transfers, setTransfers] = useState<Transfer[]>();
+  const transfers = useInternalTransfers(provider, txData);
   const sendsEthToMiner = useMemo(() => {
     if (!txData || !transfers) {
       return false;
@@ -124,29 +119,6 @@ const Transaction: React.FC = () => {
     return false;
   }, [txData, transfers]);
 
-  const traceTransfers = useCallback(async () => {
-    if (!provider || !txData) {
-      return;
-    }
-
-    const r = await provider.send("ots_getTransactionTransfers", [
-      txData.transactionHash,
-    ]);
-    const _transfers: Transfer[] = [];
-    for (const t of r) {
-      _transfers.push({
-        from: ethers.utils.getAddress(t.from),
-        to: ethers.utils.getAddress(t.to),
-        value: t.value,
-      });
-    }
-
-    setTransfers(_transfers);
-  }, [provider, txData]);
-  useEffect(() => {
-    traceTransfers();
-  }, [traceTransfers]);
-
   const selectionCtx = useSelection();
 
   return (

src/nodeFunctions.ts

@@ -0,0 +1,21 @@
+import { ethers } from "ethers";
+import { TransactionData, Transfer } from "./types";
+
+export const getTransactionTransfers = async (
+  provider: ethers.providers.JsonRpcProvider,
+  txData: TransactionData
+) => {
+  const r = await provider.send("ots_getTransactionTransfers", [
+    txData.transactionHash,
+  ]);
+
+  const _transfers: Transfer[] = [];
+  for (const t of r) {
+    _transfers.push({
+      from: ethers.utils.getAddress(t.from),
+      to: ethers.utils.getAddress(t.to),
+      value: t.value,
+    });
+  }
+  return _transfers;
+};

src/useErigonHooks.ts

@@ -0,0 +1,25 @@
+import { ethers } from "ethers";
+import { useState, useEffect } from "react";
+import { getTransactionTransfers } from "./nodeFunctions";
+import { TransactionData, Transfer } from "./types";
+
+export const useInternalTransfers = (
+  provider: ethers.providers.JsonRpcProvider | undefined,
+  txData: TransactionData | undefined
+) => {
+  const [transfers, setTransfers] = useState<Transfer[]>();
+
+  useEffect(() => {
+    const traceTransfers = async () => {
+      if (!provider || !txData) {
+        return;
+      }
+
+      const _transfers = await getTransactionTransfers(provider, txData);
+      setTransfers(_transfers);
+    };
+    traceTransfers();
+  }, [provider, txData]);
+
+  return transfers;
+};