a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract InputDecoder component

This commit is contained in:
Willian Mitsuda 2021-11-08 07:49:30 -03:00
parent c63a25ad6d
commit 25f821548e
2 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/transaction/Details.tsx
View File

@ -6,7 +6,6 @@ import {
} from "@ethersproject/abi"; } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber"; import { BigNumber } from "@ethersproject/bignumber";
import { toUtf8String } from "@ethersproject/strings"; import { toUtf8String } from "@ethersproject/strings";
import { Tab } from "@headlessui/react";
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";
@ -33,8 +32,7 @@ import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink"; import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition"; import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition"; import PercentagePosition from "../components/PercentagePosition";
import ModeTab from "../components/ModeTab"; import InputDecoder from "./decoder/InputDecoder";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes"; import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
import { DevDoc, UserDoc } from "../useSourcify"; import { DevDoc, UserDoc } from "../useSourcify";
import { ResolvedAddresses } from "../api/address-resolver"; import { ResolvedAddresses } from "../api/address-resolver";
@ -338,48 +336,16 @@ const Details: React.FC<DetailsProps> = ({
</> </>
)} )}
<InfoRow title="Input Data"> <InfoRow title="Input Data">
<Tab.Group> <InputDecoder
<Tab.List className="flex space-x-1 mb-1"> fourBytes={fourBytes}
<ModeTab>Decoded</ModeTab> resolvedTxDesc={resolvedTxDesc}
<ModeTab>Raw</ModeTab> txDesc={txDesc}
<ModeTab>UTF-8</ModeTab> txData={txData}
</Tab.List> userMethod={userMethod}
<Tab.Panels> devMethod={devMethod}
<Tab.Panel> utfInput={utfInput}
{fourBytes === "0x" ? ( resolvedAddresses={resolvedAddresses}
<>No parameters</> />
) : resolvedTxDesc === undefined ? (
<>Waiting for data...</>
) : resolvedTxDesc === null ? (
<>Can't decode data</>
) : (
<DecodedParamsTable
args={resolvedTxDesc.args}
paramTypes={resolvedTxDesc.functionFragment.inputs}
txData={txData}
hasParamNames={resolvedTxDesc === txDesc}
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> </InfoRow>
</ContentFrame> </ContentFrame>
); );

75
src/transaction/decoder/InputDecoder.tsx Normal file
View File

@ -0,0 +1,75 @@
import React from "react";
import { TransactionDescription } from "@ethersproject/abi";
import { Tab } from "@headlessui/react";
import ModeTab from "../../components/ModeTab";
import DecodedParamsTable from "./DecodedParamsTable";
import { TransactionData } from "../../types";
import { DevMethod, UserMethod } from "../../useSourcify";
import { ResolvedAddresses } from "../../api/address-resolver";
type InputDecoderProps = {
fourBytes: string;
resolvedTxDesc: TransactionDescription | null | undefined;
txDesc: TransactionDescription | null | undefined;
txData: TransactionData;
userMethod: UserMethod | undefined;
devMethod: DevMethod | undefined;
utfInput: string;
resolvedAddresses: ResolvedAddresses | undefined;
};
const InputDecoder: React.FC<InputDecoderProps> = ({
fourBytes,
resolvedTxDesc,
txDesc,
txData,
userMethod,
devMethod,
utfInput,
resolvedAddresses,
}) => (
<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}
hasParamNames={resolvedTxDesc === txDesc}
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>
);
export default InputDecoder;