Add input decoding to trace

This commit is contained in:
Willian Mitsuda 2021-11-06 15:54:34 -03:00
parent 8c46eaabb1
commit 42b585bc40
4 changed files with 110 additions and 49 deletions

View File

@ -1,9 +1,5 @@
import React, { useMemo } from "react";
import {
TransactionDescription,
Fragment,
Interface,
} from "@ethersproject/abi";
import { TransactionDescription } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { toUtf8String } from "@ethersproject/strings";
import { Tab } from "@headlessui/react";
@ -40,7 +36,11 @@ import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition";
import ModeTab from "../components/ModeTab";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
import {
rawInputTo4Bytes,
use4Bytes,
useTransactionDescription,
} from "../use4Bytes";
import { DevDoc, UserDoc } from "../useSourcify";
import { ResolvedAddresses } from "../api/address-resolver";
@ -81,18 +81,11 @@ const Details: React.FC<DetailsProps> = ({
const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
const fourBytesEntry = use4Bytes(fourBytes);
const fourBytesTxDesc = useMemo(() => {
if (!fourBytesEntry) {
return fourBytesEntry;
}
if (!txData || !fourBytesEntry.signature) {
return undefined;
}
const sig = fourBytesEntry?.signature;
const functionFragment = Fragment.fromString(`function ${sig}`);
const intf = new Interface([functionFragment]);
return intf.parseTransaction({ data: txData.data, value: txData.value });
}, [txData, fourBytesEntry]);
const fourBytesTxDesc = useTransactionDescription(
fourBytesEntry,
txData.data,
txData.value
);
const resolvedTxDesc = txDesc ?? fourBytesTxDesc;
const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;

View File

@ -1,12 +1,18 @@
import React from "react";
import React, { useState } from "react";
import { Switch } from "@headlessui/react";
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
import FormattedBalance from "../components/FormattedBalance";
import FunctionSignature from "./FunctionSignature";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import { TraceEntry } from "../useErigonHooks";
import { TransactionData } from "../types";
import { toTransactionContext, TransactionData } from "../types";
import { ResolvedAddresses } from "../api/address-resolver";
import { extract4Bytes, FourBytesEntry } from "../use4Bytes";
import {
extract4Bytes,
FourBytesEntry,
useTransactionDescription,
} from "../use4Bytes";
type TraceInputProps = {
t: TraceEntry;
@ -22,35 +28,69 @@ const TraceInput: React.FC<TraceInputProps> = ({
resolvedAddresses,
}) => {
const raw4Bytes = extract4Bytes(t.input);
const fourBytes = raw4Bytes !== null ? fourBytesMap[raw4Bytes] : null;
const sigText =
raw4Bytes === null
? "<fallback>"
: fourBytesMap[raw4Bytes]?.name ?? raw4Bytes;
raw4Bytes === null ? "<fallback>" : fourBytes?.name ?? raw4Bytes;
const hasParams = t.input.length > 10;
const fourBytesTxDesc = useTransactionDescription(
fourBytes,
t.input,
t.value
);
const [expanded, setExpanded] = useState<boolean>(false);
return (
<div className="ml-5 flex items-baseline border rounded px-1 py-px">
<span className="text-xs text-gray-400 lowercase">{t.type}</span>
<span>
<AddressHighlighter address={t.to}>
<DecoratedAddressLink
address={t.to}
miner={t.to === txData.confirmedData?.miner}
txFrom={t.to === txData.from}
txTo={t.to === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</span>
<span>.</span>
<FunctionSignature callType={t.type} sig={sigText} />
{t.value && !t.value.isZero() && (
<span className="text-red-700 whitespace-nowrap">
{"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
<div className="ml-5 border rounded px-1 py-px">
<div className="flex items-baseline">
<span className="text-xs text-gray-400 lowercase">{t.type}</span>
<span>
<AddressHighlighter address={t.to}>
<DecoratedAddressLink
address={t.to}
miner={t.to === txData.confirmedData?.miner}
txFrom={t.to === txData.from}
txTo={t.to === txData.to}
resolvedAddresses={resolvedAddresses}
/>
</AddressHighlighter>
</span>
<span>.</span>
<FunctionSignature callType={t.type} sig={sigText} />
{t.value && !t.value.isZero() && (
<span className="text-red-700 whitespace-nowrap">
{"{"}value: <FormattedBalance value={t.value} /> ETH{"}"}
</span>
)}
<span className="whitespace-nowrap">
(
{hasParams && (
<Switch checked={expanded} onChange={setExpanded}>
{expanded ? (
<span className="text-gray-400">[-]</span>
) : (
<>[...]</>
)}
</Switch>
)}
{(!hasParams || !expanded) && <>)</>}
</span>
</div>
{hasParams && expanded && fourBytesTxDesc && (
<>
<div className="ml-5 my-5 mr-5">
<DecodedParamsTable
args={fourBytesTxDesc.args}
paramTypes={fourBytesTxDesc.functionFragment.inputs}
txContext={toTransactionContext(txData)}
hasParamNames={false}
resolvedAddresses={resolvedAddresses}
/>
</div>
<div>)</div>
</>
)}
<span className="whitespace-nowrap">
({t.input.length > 10 && <>input=[0x{t.input.slice(10)}]</>})
</span>
</div>
);
};

View File

@ -28,10 +28,10 @@ const TraceItem: React.FC<TraceItemProps> = ({
return (
<>
<div className="flex relative items-center">
<div className="absolute border-l border-b w-5 h-full transform -translate-y-1/2"></div>
<div className="flex relative">
<div className="absolute border-l border-b w-5 h-6 transform -translate-y-3"></div>
{!last && (
<div className="absolute left-0 border-l w-5 h-full transform translate-y-1/2"></div>
<div className="absolute left-0 border-l w-5 h-full transform translate-y-3"></div>
)}
{t.children && (
<Switch

View File

@ -1,6 +1,12 @@
import { useState, useEffect, useContext } from "react";
import { useState, useEffect, useContext, useMemo } from "react";
import {
Fragment,
Interface,
TransactionDescription,
} from "@ethersproject/abi";
import { RuntimeContext } from "./useRuntime";
import { fourBytesURL } from "./url";
import { BigNumberish } from "@ethersproject/bignumber";
export type FourBytesEntry = {
name: string;
@ -143,3 +149,25 @@ export const use4Bytes = (
fullCache.set(fourBytes, entry);
return entry;
};
export const useTransactionDescription = (
fourBytesEntry: FourBytesEntry | null | undefined,
data: string | undefined,
value: BigNumberish | undefined
): TransactionDescription | null | undefined => {
const txDesc = useMemo(() => {
if (!fourBytesEntry) {
return fourBytesEntry;
}
if (!fourBytesEntry.signature || !data || !value) {
return undefined;
}
const sig = fourBytesEntry?.signature;
const functionFragment = Fragment.fromString(`function ${sig}`);
const intf = new Interface([functionFragment]);
return intf.parseTransaction({ data, value });
}, [fourBytesEntry, data, value]);
return txDesc;
};