Remove unnecessary attributes; simplify code

This commit is contained in:
Willian Mitsuda 2021-11-08 08:02:05 -03:00
parent 25f821548e
commit c0f934b190
6 changed files with 62 additions and 79 deletions

View File

@ -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>

View File

@ -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}
/> />

View File

@ -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}

View File

@ -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}
/> />
))} ))}

View File

@ -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}
/> />

View File

@ -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;