From a934282ab0bfcb2506a3d6348ef245209dcbbd49 Mon Sep 17 00:00:00 2001 From: Willian Mitsuda Date: Sat, 18 Dec 2021 21:13:35 -0300 Subject: [PATCH] Remove fourBytesMap usage; replace everything by swr --- src/transaction/Trace.tsx | 12 ++-------- src/transaction/TraceInput.tsx | 7 +++--- src/transaction/TraceItem.tsx | 34 ++++++++++----------------- src/use4Bytes.ts | 36 +--------------------------- src/useErigonHooks.ts | 43 +--------------------------------- 5 files changed, 19 insertions(+), 113 deletions(-) diff --git a/src/transaction/Trace.tsx b/src/transaction/Trace.tsx index 565192e..a04bcdb 100644 --- a/src/transaction/Trace.tsx +++ b/src/transaction/Trace.tsx @@ -3,8 +3,7 @@ import ContentFrame from "../ContentFrame"; import TransactionAddress from "../components/TransactionAddress"; import TraceItem from "./TraceItem"; import { TransactionData } from "../types"; -import { useBatch4Bytes } from "../use4Bytes"; -import { useTraceTransaction, useUniqueSignatures } from "../useErigonHooks"; +import { useTraceTransaction } from "../useErigonHooks"; import { RuntimeContext } from "../useRuntime"; type TraceProps = { @@ -14,8 +13,6 @@ type TraceProps = { const Trace: React.FC = ({ txData }) => { const { provider } = useContext(RuntimeContext); const traces = useTraceTransaction(provider, txData.transactionHash); - const uniqueSignatures = useUniqueSignatures(traces); - const sigMap = useBatch4Bytes(uniqueSignatures); return ( @@ -27,12 +24,7 @@ const Trace: React.FC = ({ txData }) => {
{traces.map((t, i, a) => ( - + ))}
diff --git a/src/transaction/TraceInput.tsx b/src/transaction/TraceInput.tsx index a13234d..0524501 100644 --- a/src/transaction/TraceInput.tsx +++ b/src/transaction/TraceInput.tsx @@ -9,18 +9,17 @@ import ExpanderSwitch from "../components/ExpanderSwitch"; import { TraceEntry } from "../useErigonHooks"; import { extract4Bytes, - FourBytesEntry, + use4Bytes, useTransactionDescription, } from "../use4Bytes"; type TraceInputProps = { t: TraceEntry; - fourBytesMap: Record; }; -const TraceInput: React.FC = ({ t, fourBytesMap }) => { +const TraceInput: React.FC = ({ t }) => { const raw4Bytes = extract4Bytes(t.input); - const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null; + const fourBytes = use4Bytes(raw4Bytes); const sigText = raw4Bytes === null ? "" : fourBytes?.name ?? raw4Bytes; const hasParams = t.input.length > 10; diff --git a/src/transaction/TraceItem.tsx b/src/transaction/TraceItem.tsx index 9b91d0e..d6a4d7d 100644 --- a/src/transaction/TraceItem.tsx +++ b/src/transaction/TraceItem.tsx @@ -3,17 +3,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlusSquare } from "@fortawesome/free-regular-svg-icons/faPlusSquare"; import { faMinusSquare } from "@fortawesome/free-regular-svg-icons/faMinusSquare"; import { Switch } from "@headlessui/react"; -import { FourBytesEntry } from "../use4Bytes"; import { TraceGroup } from "../useErigonHooks"; import TraceInput from "./TraceInput"; type TraceItemProps = { t: TraceGroup; last: boolean; - fourBytesMap: Record; }; -const TraceItem: React.FC = ({ t, last, fourBytesMap }) => { +const TraceItem: React.FC = ({ t, last }) => { const [expanded, setExpanded] = useState(true); return ( @@ -35,7 +33,7 @@ const TraceItem: React.FC = ({ t, last, fourBytesMap }) => { /> )} - + {t.children && (
= ({ t, last, fourBytesMap }) => { expanded ? "" : "hidden" }`} > - +
)} @@ -52,24 +50,16 @@ const TraceItem: React.FC = ({ t, last, fourBytesMap }) => { type TraceChildrenProps = { c: TraceGroup[]; - fourBytesMap: Record; }; -const TraceChildren: React.FC = React.memo( - ({ c, fourBytesMap }) => { - return ( - <> - {c.map((tc, i, a) => ( - - ))} - - ); - } -); +const TraceChildren: React.FC = React.memo(({ c }) => { + return ( + <> + {c.map((tc, i, a) => ( + + ))} + + ); +}); export default TraceItem; diff --git a/src/use4Bytes.ts b/src/use4Bytes.ts index a1adfdb..85f4e98 100644 --- a/src/use4Bytes.ts +++ b/src/use4Bytes.ts @@ -1,4 +1,4 @@ -import { useState, useEffect, useContext, useMemo } from "react"; +import { useContext, useMemo } from "react"; import { Fragment, Interface, @@ -14,8 +14,6 @@ export type FourBytesEntry = { signature: string | undefined; }; -export type FourBytesMap = Record; - /** * Given a hex input data; extract the method selector * @@ -61,38 +59,6 @@ const fetch4Bytes = async ( } }; -// TODO: migrate to swr and merge with use4Bytes -export const useBatch4Bytes = ( - rawFourByteSigs: string[] | undefined -): FourBytesMap => { - const runtime = useContext(RuntimeContext); - const assetsURLPrefix = runtime.config?.assetsURLPrefix; - - const [fourBytesMap, setFourBytesMap] = useState({}); - useEffect(() => { - if (!rawFourByteSigs || assetsURLPrefix === undefined) { - setFourBytesMap({}); - return; - } - - const loadSigs = async () => { - const promises = rawFourByteSigs.map((s) => - fetch4Bytes(assetsURLPrefix, s.slice(2)) - ); - const results = await Promise.all(promises); - - const _fourBytesMap: Record = {}; - for (let i = 0; i < rawFourByteSigs.length; i++) { - _fourBytesMap[rawFourByteSigs[i]] = results[i]; - } - setFourBytesMap(_fourBytesMap); - }; - loadSigs(); - }, [assetsURLPrefix, rawFourByteSigs]); - - return fourBytesMap; -}; - /** * Extract 4bytes DB info * diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts index 66fe480..e63a718 100644 --- a/src/useErigonHooks.ts +++ b/src/useErigonHooks.ts @@ -1,4 +1,4 @@ -import { useState, useEffect, useMemo } from "react"; +import { useState, useEffect } from "react"; import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider"; import { JsonRpcProvider } from "@ethersproject/providers"; import { getAddress } from "@ethersproject/address"; @@ -6,7 +6,6 @@ import { Contract } from "@ethersproject/contracts"; import { defaultAbiCoder } from "@ethersproject/abi"; import { BigNumber } from "@ethersproject/bignumber"; import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes"; -import { extract4Bytes } from "./use4Bytes"; import { getInternalOperations } from "./nodeFunctions"; import { TokenMetas, @@ -408,46 +407,6 @@ export const useTraceTransaction = ( return traceGroups; }; -/** - * Flatten a trace tree and extract and dedup 4byte function signatures - */ -export const useUniqueSignatures = (traces: TraceGroup[] | undefined) => { - const uniqueSignatures = useMemo(() => { - if (!traces) { - return undefined; - } - - const sigs = new Set(); - let nextTraces: TraceGroup[] = [...traces]; - while (nextTraces.length > 0) { - const traces = nextTraces; - nextTraces = []; - - for (const t of traces) { - if ( - t.type === "CALL" || - t.type === "DELEGATECALL" || - t.type === "STATICCALL" || - t.type === "CALLCODE" - ) { - const fourBytes = extract4Bytes(t.input); - if (fourBytes) { - sigs.add(fourBytes); - } - } - - if (t.children) { - nextTraces.push(...t.children); - } - } - } - - return [...sigs]; - }, [traces]); - - return uniqueSignatures; -}; - const hasCode = async ( provider: JsonRpcProvider, address: ChecksummedAddress