Extract custom hook

src/BlockTransactions.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect, useState, useMemo, useContext } from "react";
+import React, { useMemo, useContext } from "react";
 import { useParams, useLocation } from "react-router";
 import { ethers } from "ethers";
 import queryString from "query-string";
 import StandardFrame from "./StandardFrame";
 import BlockTransactionHeader from "./block/BlockTransactionHeader";
 import BlockTransactionResults from "./block/BlockTransactionResults";
-import { OperationType, ProcessedTransaction } from "./types";
 import { PAGE_SIZE } from "./params";
 import { RuntimeContext } from "./useRuntime";
-import { getInternalOperations } from "./nodeFunctions";
+import { useBlockTransactions } from "./useErigonHooks";
 
 type BlockParams = {
   blockNumber: string;
@@ -35,72 +34,7 @@ const BlockTransactions: React.FC = () => {
     [params.blockNumber]
   );
 
-  const [txs, setTxs] = useState<ProcessedTransaction[]>();
+  const txs = useBlockTransactions(provider, blockNumber.toNumber());
-  useEffect(() => {
-    if (!provider) {
-      return;
-    }
-
-    const readBlock = async () => {
-      const [_block, _receipts] = await Promise.all([
-        provider.getBlockWithTransactions(blockNumber.toNumber()),
-        provider.send("eth_getBlockReceipts", [blockNumber.toNumber()]),
-      ]);
-
-      const responses = _block.transactions
-        .map(
-          (t, i): ProcessedTransaction => ({
-            blockNumber: blockNumber.toNumber(),
-            timestamp: _block.timestamp,
-            miner: _block.miner,
-            idx: i,
-            hash: t.hash,
-            from: t.from,
-            to: t.to,
-            createdContractAddress: _receipts[i].contractAddress,
-            value: t.value,
-            fee:
-              t.type !== 2
-                ? provider.formatter
-                    .bigNumber(_receipts[i].gasUsed)
-                    .mul(t.gasPrice!)
-                : provider.formatter
-                    .bigNumber(_receipts[i].gasUsed)
-                    .mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)),
-            gasPrice:
-              t.type !== 2
-                ? t.gasPrice!
-                : t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!),
-            data: t.data,
-            status: provider.formatter.number(_receipts[i].status),
-          })
-        )
-        .reverse();
-      setTxs(responses);
-
-      const checkTouchMinerAddr = await Promise.all(
-        responses.map(async (res) => {
-          const ops = await getInternalOperations(provider, res.hash);
-          return (
-            ops.findIndex(
-              (op) =>
-                op.type === OperationType.TRANSFER &&
-                res.miner !== undefined &&
-                res.miner === ethers.utils.getAddress(op.to)
-            ) !== -1
-          );
-        })
-      );
-      const processedResponses = responses.map(
-        (r, i): ProcessedTransaction => ({
-          ...r,
-          internalMinerInteraction: checkTouchMinerAddr[i],
-        })
-      );
-      setTxs(processedResponses);
-    };
-    readBlock();
-  }, [provider, blockNumber]);
 
   const page = useMemo(() => {
     if (!txs) {

src/useErigonHooks.ts

@@ -6,6 +6,8 @@ import {
   TokenTransfer,
   TransactionData,
   InternalOperation,
+  ProcessedTransaction,
+  OperationType,
 } from "./types";
 import erc20 from "./erc20.json";
 
@@ -65,6 +67,81 @@ export const readBlock = async (
   return extBlock;
 };
 
+export const useBlockTransactions = (
+  provider: ethers.providers.JsonRpcProvider | undefined,
+  blockNumber: number
+) => {
+  const [txs, setTxs] = useState<ProcessedTransaction[]>();
+
+  useEffect(() => {
+    if (!provider) {
+      return;
+    }
+
+    const readBlock = async () => {
+      const [_block, _receipts] = await Promise.all([
+        provider.getBlockWithTransactions(blockNumber),
+        provider.send("eth_getBlockReceipts", [blockNumber]),
+      ]);
+
+      const responses = _block.transactions
+        .map(
+          (t, i): ProcessedTransaction => ({
+            blockNumber: blockNumber,
+            timestamp: _block.timestamp,
+            miner: _block.miner,
+            idx: i,
+            hash: t.hash,
+            from: t.from,
+            to: t.to,
+            createdContractAddress: _receipts[i].contractAddress,
+            value: t.value,
+            fee:
+              t.type !== 2
+                ? provider.formatter
+                    .bigNumber(_receipts[i].gasUsed)
+                    .mul(t.gasPrice!)
+                : provider.formatter
+                    .bigNumber(_receipts[i].gasUsed)
+                    .mul(t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!)),
+            gasPrice:
+              t.type !== 2
+                ? t.gasPrice!
+                : t.maxPriorityFeePerGas!.add(_block.baseFeePerGas!),
+            data: t.data,
+            status: provider.formatter.number(_receipts[i].status),
+          })
+        )
+        .reverse();
+      setTxs(responses);
+
+      const checkTouchMinerAddr = await Promise.all(
+        responses.map(async (res) => {
+          const ops = await getInternalOperations(provider, res.hash);
+          return (
+            ops.findIndex(
+              (op) =>
+                op.type === OperationType.TRANSFER &&
+                res.miner !== undefined &&
+                res.miner === ethers.utils.getAddress(op.to)
+            ) !== -1
+          );
+        })
+      );
+      const processedResponses = responses.map(
+        (r, i): ProcessedTransaction => ({
+          ...r,
+          internalMinerInteraction: checkTouchMinerAddr[i],
+        })
+      );
+      setTxs(processedResponses);
+    };
+    readBlock();
+  }, [provider, blockNumber]);
+
+  return txs;
+};
+
 export const useBlockData = (
   provider: ethers.providers.JsonRpcProvider | undefined,
   blockNumberOrHash: string