Dedup and optimize 4bytes calls for really huge traces

This commit is contained in:
Willian Mitsuda 2021-10-28 17:21:01 -03:00
parent 05953de053
commit cbab64cd99
5 changed files with 122 additions and 7 deletions

View File

@ -1,9 +1,14 @@
import React, { useContext } from "react"; import React, { useContext, useMemo } from "react";
import AddressHighlighter from "../components/AddressHighlighter"; import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink"; import DecoratedAddressLink from "../components/DecoratedAddressLink";
import ContentFrame from "../ContentFrame"; import ContentFrame from "../ContentFrame";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
import { useTraceTransaction } from "../useErigonHooks"; import { rawInputTo4Bytes, useBatch4Bytes } from "../use4Bytes";
import {
TraceGroup,
useTraceTransaction,
useUniqueSignatures,
} from "../useErigonHooks";
import { RuntimeContext } from "../useRuntime"; import { RuntimeContext } from "../useRuntime";
import TraceItem from "./TraceItem"; import TraceItem from "./TraceItem";
@ -14,6 +19,8 @@ type TraceProps = {
const Trace: React.FC<TraceProps> = ({ txData }) => { const Trace: React.FC<TraceProps> = ({ txData }) => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const traces = useTraceTransaction(provider, txData.transactionHash); const traces = useTraceTransaction(provider, txData.transactionHash);
const uniqueSignatures = useUniqueSignatures(traces);
const sigMap = useBatch4Bytes(uniqueSignatures);
return ( return (
<ContentFrame tabs> <ContentFrame tabs>
@ -37,6 +44,7 @@ const Trace: React.FC<TraceProps> = ({ txData }) => {
t={t} t={t}
txData={txData} txData={txData}
last={i === a.length - 1} last={i === a.length - 1}
fourBytesMap={sigMap}
/> />
))} ))}
</div> </div>

View File

@ -4,18 +4,24 @@ import DecoratedAddressLink from "../components/DecoratedAddressLink";
import FormattedBalance from "../components/FormattedBalance"; import FormattedBalance from "../components/FormattedBalance";
import FunctionSignature from "./FunctionSignature"; import FunctionSignature from "./FunctionSignature";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes"; import { FourBytesEntry, rawInputTo4Bytes } from "../use4Bytes";
import { TraceGroup } from "../useErigonHooks"; import { TraceGroup } from "../useErigonHooks";
type TraceItemProps = { type TraceItemProps = {
t: TraceGroup; t: TraceGroup;
txData: TransactionData; txData: TransactionData;
last: boolean; last: boolean;
fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
}; };
const TraceItem: React.FC<TraceItemProps> = ({ t, txData, last }) => { const TraceItem: React.FC<TraceItemProps> = ({
t,
txData,
last,
fourBytesMap,
}) => {
const raw4Bytes = rawInputTo4Bytes(t.input); const raw4Bytes = rawInputTo4Bytes(t.input);
const fourBytesEntry = use4Bytes(raw4Bytes); const fourBytesEntry = fourBytesMap[raw4Bytes];
return ( return (
<> <>
@ -67,6 +73,7 @@ const TraceItem: React.FC<TraceItemProps> = ({ t, txData, last }) => {
t={tc} t={tc}
txData={txData} txData={txData}
last={i === a.length - 1} last={i === a.length - 1}
fourBytesMap={fourBytesMap}
/> />
))} ))}
</div> </div>

View File

@ -7,6 +7,8 @@ export type FourBytesEntry = {
signature: string | undefined; signature: string | undefined;
}; };
export type FourBytesMap = Record<string, FourBytesEntry | null | undefined>;
const simpleTransfer: FourBytesEntry = { const simpleTransfer: FourBytesEntry = {
name: "Transfer", name: "Transfer",
signature: undefined, signature: undefined,
@ -16,6 +18,67 @@ const fullCache = new Map<string, FourBytesEntry | null>();
export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10); export const rawInputTo4Bytes = (rawInput: string) => rawInput.slice(0, 10);
const fetch4Bytes = async (
assetsURLPrefix: string,
fourBytes: string
): Promise<FourBytesEntry | null> => {
const signatureURL = fourBytesURL(assetsURLPrefix, fourBytes);
try {
const res = await fetch(signatureURL);
if (!res.ok) {
console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
return null;
}
// Get only the first occurrence, for now ignore alternative param names
const sigs = await res.text();
const sig = sigs.split(";")[0];
const cut = sig.indexOf("(");
const method = sig.slice(0, cut);
const entry: FourBytesEntry = {
name: method,
signature: sig,
};
return entry;
} catch (err) {
console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
return null;
}
};
export const useBatch4Bytes = (
rawFourByteSigs: string[] | undefined
): FourBytesMap => {
const runtime = useContext(RuntimeContext);
const assetsURLPrefix = runtime.config?.assetsURLPrefix;
const [fourBytesMap, setFourBytesMap] = useState<FourBytesMap>({});
useEffect(() => {
if (!rawFourByteSigs || !assetsURLPrefix) {
setFourBytesMap({});
return;
}
const loadSigs = async () => {
const promises = rawFourByteSigs.map((s) =>
fetch4Bytes(assetsURLPrefix, s.slice(2))
);
const results = await Promise.all(promises);
const _fourBytesMap: Record<string, FourBytesEntry | null> = {};
for (let i = 0; i < rawFourByteSigs.length; i++) {
_fourBytesMap[rawFourByteSigs[i]] = results[i];
}
setFourBytesMap(_fourBytesMap);
};
loadSigs();
}, [assetsURLPrefix, rawFourByteSigs]);
return fourBytesMap;
};
/** /**
* Extract 4bytes DB info * Extract 4bytes DB info
* *

View File

@ -1,10 +1,11 @@
import { useState, useEffect } from "react"; import { useState, useEffect, useMemo } from "react";
import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider"; import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
import { JsonRpcProvider } from "@ethersproject/providers"; import { JsonRpcProvider } from "@ethersproject/providers";
import { getAddress } from "@ethersproject/address"; import { getAddress } from "@ethersproject/address";
import { Contract } from "@ethersproject/contracts"; import { Contract } from "@ethersproject/contracts";
import { BigNumber } from "@ethersproject/bignumber"; import { BigNumber } from "@ethersproject/bignumber";
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes"; import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
import { rawInputTo4Bytes } from "./use4Bytes";
import { getInternalOperations } from "./nodeFunctions"; import { getInternalOperations } from "./nodeFunctions";
import { import {
TokenMetas, TokenMetas,
@ -398,3 +399,38 @@ export const useTraceTransaction = (
return traceGroups; 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<string>();
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"
) {
sigs.add(rawInputTo4Bytes(t.input));
}
if (t.children) {
nextTraces.push(...t.children);
}
}
}
return [...sigs];
}, [traces]);
return uniqueSignatures;
};

View File

@ -14,7 +14,8 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx",
"downlevelIteration": true
}, },
"include": ["src"] "include": ["src"]
} }