diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 3f450e9..773901e 100644 --- a/src/Transaction.tsx +++ b/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(); + 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 ( diff --git a/src/nodeFunctions.ts b/src/nodeFunctions.ts new file mode 100644 index 0000000..9ddd788 --- /dev/null +++ b/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; +}; diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts new file mode 100644 index 0000000..2d3aa9b --- /dev/null +++ b/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(); + + useEffect(() => { + const traceTransfers = async () => { + if (!provider || !txData) { + return; + } + + const _transfers = await getTransactionTransfers(provider, txData); + setTransfers(_transfers); + }; + traceTransfers(); + }, [provider, txData]); + + return transfers; +};