Merge branch 'develop' into feature/trace-tx
This commit is contained in:
Willian Mitsuda
commit
eb22a227f1
28
package-lock.json
generated
28
package-lock.json
generated
@ -27,9 +27,9 @@
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/node": "^14.17.5",
|
||||
"@types/react": "^17.0.33",
|
||||
"@types/react": "^17.0.34",
|
||||
"@types/react-blockies": "^1.4.1",
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-highlight": "^0.12.5",
|
||||
"@types/react-router-dom": "^5.3.2",
|
||||
"@types/react-syntax-highlighter": "^13.5.2",
|
||||
@ -3127,9 +3127,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "17.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
|
||||
"integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
|
||||
"version": "17.0.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
|
||||
"integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
@ -3145,9 +3145,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "17.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
|
||||
"integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
|
||||
"version": "17.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
|
||||
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
@ -21796,9 +21796,9 @@
|
||||
"version": "1.5.4"
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
|
||||
"integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
|
||||
"version": "17.0.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
|
||||
"integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
@ -21814,9 +21814,9 @@
|
||||
}
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"version": "17.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
|
||||
"integrity": "sha512-8oz3NAUId2z/zQdFI09IMhQPNgIbiP8Lslhv39DIDamr846/0spjZK0vnrMak0iB8EKb9QFTTIdg2Wj2zH5a3g==",
|
||||
"version": "17.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
|
||||
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/node": "^14.17.5",
|
||||
"@types/react": "^17.0.33",
|
||||
"@types/react": "^17.0.34",
|
||||
"@types/react-blockies": "^1.4.1",
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-highlight": "^0.12.5",
|
||||
"@types/react-router-dom": "^5.3.2",
|
||||
"@types/react-syntax-highlighter": "^13.5.2",
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import React, { useMemo } from "react";
|
||||
import React from "react";
|
||||
import { TransactionDescription } 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";
|
||||
@ -29,8 +27,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,
|
||||
@ -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 = useTransactionDescription(
|
||||
@ -331,47 +318,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}
|
||||
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>
|
||||
<InputDecoder
|
||||
fourBytes={fourBytes}
|
||||
resolvedTxDesc={resolvedTxDesc}
|
||||
hasParamNames={resolvedTxDesc === txDesc}
|
||||
data={txData.data}
|
||||
userMethod={userMethod}
|
||||
devMethod={devMethod}
|
||||
resolvedAddresses={resolvedAddresses}
|
||||
/>
|
||||
</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,
|
||||
|
||||
@ -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}
|
||||
|
||||
84
src/transaction/decoder/InputDecoder.tsx
Normal file
84
src/transaction/decoder/InputDecoder.tsx
Normal file
@ -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
Block a user