otterscan/src/transaction/decoder/InputDecoder.tsx

80 lines
2.2 KiB
TypeScript

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 "../../sourcify/useSourcify";
type InputDecoderProps = {
fourBytes: string;
resolvedTxDesc: TransactionDescription | null | undefined;
hasParamNames: boolean;
data: string;
userMethod: UserMethod | undefined;
devMethod: DevMethod | undefined;
};
const InputDecoder: React.FC<InputDecoderProps> = ({
fourBytes,
resolvedTxDesc,
hasParamNames,
data,
userMethod,
devMethod,
}) => {
const utfInput = useMemo(() => {
try {
return toUtf8String(data);
} catch (err) {
// Silently ignore on purpose
return undefined;
}
}, [data]);
return (
<Tab.Group>
<Tab.List className="flex space-x-1 mb-1">
<ModeTab disabled={!resolvedTxDesc}>Decoded</ModeTab>
<ModeTab>Raw</ModeTab>
<ModeTab disabled={utfInput === undefined}>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}
/>
)}
</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;