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