Merge branch 'feature/refactor-input-decoder-component' into develop
This commit is contained in:
commit
157c6b5457
src/transaction
|
@ -5,8 +5,6 @@ import {
|
|||
Interface,
|
||||
} from "@ethersproject/abi";
|
||||
import { BigNumber } from "@ethersproject/bignumber";
|
||||
import { toUtf8String } from "@ethersproject/strings";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
|
||||
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
|
||||
|
@ -33,8 +31,7 @@ import PercentageBar from "../components/PercentageBar";
|
|||
import ExternalLink from "../components/ExternalLink";
|
||||
import RelativePosition from "../components/RelativePosition";
|
||||
import PercentagePosition from "../components/PercentagePosition";
|
||||
import ModeTab from "../components/ModeTab";
|
||||
import DecodedParamsTable from "./decoder/DecodedParamsTable";
|
||||
import InputDecoder from "./decoder/InputDecoder";
|
||||
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
|
||||
import { DevDoc, UserDoc } from "../useSourcify";
|
||||
import { ResolvedAddresses } from "../api/address-resolver";
|
||||
|
@ -64,16 +61,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
|
||||
txData.confirmedData?.blockBaseFeePerGas !== null;
|
||||
|
||||
const utfInput = useMemo(() => {
|
||||
try {
|
||||
return txData && toUtf8String(txData.data);
|
||||
} catch (err) {
|
||||
console.warn("Error while converting input data to string");
|
||||
console.warn(err);
|
||||
return "<can't decode>";
|
||||
}
|
||||
}, [txData]);
|
||||
|
||||
const fourBytes = txData.to !== null ? rawInputTo4Bytes(txData.data) : "0x";
|
||||
const fourBytesEntry = use4Bytes(fourBytes);
|
||||
const fourBytesTxDesc = useMemo(() => {
|
||||
|
@ -338,48 +325,15 @@ const Details: React.FC<DetailsProps> = ({
|
|||
</>
|
||||
)}
|
||||
<InfoRow title="Input Data">
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 mb-1">
|
||||
<ModeTab>Decoded</ModeTab>
|
||||
<ModeTab>Raw</ModeTab>
|
||||
<ModeTab>UTF-8</ModeTab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
{fourBytes === "0x" ? (
|
||||
<>No parameters</>
|
||||
) : resolvedTxDesc === undefined ? (
|
||||
<>Waiting for data...</>
|
||||
) : resolvedTxDesc === null ? (
|
||||
<>Can't decode data</>
|
||||
) : (
|
||||
<DecodedParamsTable
|
||||
args={resolvedTxDesc.args}
|
||||
paramTypes={resolvedTxDesc.functionFragment.inputs}
|
||||
txData={txData}
|
||||
<InputDecoder
|
||||
fourBytes={fourBytes}
|
||||
resolvedTxDesc={resolvedTxDesc}
|
||||
hasParamNames={resolvedTxDesc === txDesc}
|
||||
data={txData.data}
|
||||
userMethod={userMethod}
|
||||
devMethod={devMethod}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
/>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<textarea
|
||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||
value={txData.data}
|
||||
readOnly
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<textarea
|
||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||
value={utfInput}
|
||||
readOnly
|
||||
/>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</InfoRow>
|
||||
</ContentFrame>
|
||||
);
|
||||
|
|
|
@ -7,19 +7,16 @@ import Copy from "../components/Copy";
|
|||
import ModeTab from "../components/ModeTab";
|
||||
import DecodedParamsTable from "./decoder/DecodedParamsTable";
|
||||
import DecodedLogSignature from "./decoder/DecodedLogSignature";
|
||||
import { TransactionData } from "../types";
|
||||
import { useTopic0 } from "../useTopic0";
|
||||
import { ResolvedAddresses } from "../api/address-resolver";
|
||||
|
||||
type LogEntryProps = {
|
||||
txData: TransactionData;
|
||||
log: Log;
|
||||
logDesc: LogDescription | null | undefined;
|
||||
resolvedAddresses: ResolvedAddresses | undefined;
|
||||
};
|
||||
|
||||
const LogEntry: React.FC<LogEntryProps> = ({
|
||||
txData,
|
||||
log,
|
||||
logDesc,
|
||||
resolvedAddresses,
|
||||
|
@ -106,7 +103,6 @@ const LogEntry: React.FC<LogEntryProps> = ({
|
|||
<DecodedParamsTable
|
||||
args={resolvedLogDesc.args}
|
||||
paramTypes={resolvedLogDesc.eventFragment.inputs}
|
||||
txData={txData}
|
||||
hasParamNames={resolvedLogDesc === logDesc}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
/>
|
||||
|
|
|
@ -69,7 +69,6 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata, resolvedAddresses }) => {
|
|||
{txData.confirmedData.logs.map((l, i) => (
|
||||
<LogEntry
|
||||
key={i}
|
||||
txData={txData}
|
||||
log={l}
|
||||
logDesc={logDescs?.[i]}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
|
|
|
@ -8,7 +8,6 @@ import Uint256Decoder from "./Uint256Decoder";
|
|||
import AddressDecoder from "./AddressDecoder";
|
||||
import BooleanDecoder from "./BooleanDecoder";
|
||||
import BytesDecoder from "./BytesDecoder";
|
||||
import { TransactionData } from "../../types";
|
||||
import { ResolvedAddresses } from "../../api/address-resolver";
|
||||
|
||||
type DecodedParamRowProps = {
|
||||
|
@ -16,7 +15,6 @@ type DecodedParamRowProps = {
|
|||
i?: number | undefined;
|
||||
r: any;
|
||||
paramType: ParamType;
|
||||
txData: TransactionData;
|
||||
arrayElem?: number | undefined;
|
||||
help?: string | undefined;
|
||||
resolvedAddresses?: ResolvedAddresses | undefined;
|
||||
|
@ -27,7 +25,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
|
|||
i,
|
||||
r,
|
||||
paramType,
|
||||
txData,
|
||||
arrayElem,
|
||||
help,
|
||||
resolvedAddresses,
|
||||
|
@ -102,7 +99,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
|
|||
i={idx}
|
||||
r={e}
|
||||
paramType={paramType.components[idx]}
|
||||
txData={txData}
|
||||
/>
|
||||
))}
|
||||
{paramType.baseType === "array" &&
|
||||
|
@ -112,7 +108,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
|
|||
prefix={paramType.name ?? <span className="italic">param_{i}</span>}
|
||||
r={e}
|
||||
paramType={paramType.arrayChildren}
|
||||
txData={txData}
|
||||
arrayElem={idx}
|
||||
/>
|
||||
))}
|
||||
|
|
|
@ -1,14 +1,12 @@
|
|||
import React from "react";
|
||||
import { ParamType, Result } from "@ethersproject/abi";
|
||||
import DecodedParamRow from "./DecodedParamRow";
|
||||
import { TransactionData } from "../../types";
|
||||
import { DevMethod, UserMethod } from "../../useSourcify";
|
||||
import { ResolvedAddresses } from "../../api/address-resolver";
|
||||
|
||||
type DecodedParamsTableProps = {
|
||||
args: Result;
|
||||
paramTypes: ParamType[];
|
||||
txData: TransactionData;
|
||||
hasParamNames?: boolean;
|
||||
userMethod?: UserMethod | undefined;
|
||||
devMethod?: DevMethod | undefined;
|
||||
|
@ -18,7 +16,6 @@ type DecodedParamsTableProps = {
|
|||
const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
|
||||
args,
|
||||
paramTypes,
|
||||
txData,
|
||||
hasParamNames = true,
|
||||
devMethod,
|
||||
resolvedAddresses,
|
||||
|
@ -49,7 +46,6 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
|
|||
i={i}
|
||||
r={r}
|
||||
paramType={paramTypes[i]}
|
||||
txData={txData}
|
||||
help={devMethod?.params?.[paramTypes[i].name]}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
/>
|
||||
|
|
|
@ -0,0 +1,84 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { TransactionDescription } from "@ethersproject/abi";
|
||||
import { toUtf8String } from "@ethersproject/strings";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import ModeTab from "../../components/ModeTab";
|
||||
import DecodedParamsTable from "./DecodedParamsTable";
|
||||
import { DevMethod, UserMethod } from "../../useSourcify";
|
||||
import { ResolvedAddresses } from "../../api/address-resolver";
|
||||
|
||||
type InputDecoderProps = {
|
||||
fourBytes: string;
|
||||
resolvedTxDesc: TransactionDescription | null | undefined;
|
||||
hasParamNames: boolean;
|
||||
data: string;
|
||||
userMethod: UserMethod | undefined;
|
||||
devMethod: DevMethod | undefined;
|
||||
resolvedAddresses: ResolvedAddresses | undefined;
|
||||
};
|
||||
|
||||
const InputDecoder: React.FC<InputDecoderProps> = ({
|
||||
fourBytes,
|
||||
resolvedTxDesc,
|
||||
hasParamNames,
|
||||
data,
|
||||
userMethod,
|
||||
devMethod,
|
||||
resolvedAddresses,
|
||||
}) => {
|
||||
const utfInput = useMemo(() => {
|
||||
try {
|
||||
return toUtf8String(data);
|
||||
} catch (err) {
|
||||
console.warn("Error while converting input data to string");
|
||||
console.warn(err);
|
||||
return "<can't decode>";
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 mb-1">
|
||||
<ModeTab>Decoded</ModeTab>
|
||||
<ModeTab>Raw</ModeTab>
|
||||
<ModeTab>UTF-8</ModeTab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
{fourBytes === "0x" ? (
|
||||
<>No parameters</>
|
||||
) : resolvedTxDesc === undefined ? (
|
||||
<>Waiting for data...</>
|
||||
) : resolvedTxDesc === null ? (
|
||||
<>Can't decode data</>
|
||||
) : (
|
||||
<DecodedParamsTable
|
||||
args={resolvedTxDesc.args}
|
||||
paramTypes={resolvedTxDesc.functionFragment.inputs}
|
||||
hasParamNames={hasParamNames}
|
||||
userMethod={userMethod}
|
||||
devMethod={devMethod}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
/>
|
||||
)}
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<textarea
|
||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||
value={data}
|
||||
readOnly
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<textarea
|
||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||
value={utfInput}
|
||||
readOnly
|
||||
/>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputDecoder;
|
Loading…
Reference in New Issue