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

Merge branch 'feature/error-cause' into develop

This commit is contained in:
Willian Mitsuda 2021-12-14 17:31:37 -03:00
parent 8b33337e49 da50c7b4ac
commit 9a0de4affe
7 changed files with 229 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Transaction.tsx
View File

@ -113,6 +113,7 @@ const Transaction: React.FC = () => {
<Details
txData={txData}
txDesc={txDesc}
toMetadata={metadata}
userDoc={metadata?.output.userdoc}
devDoc={metadata?.output.devdoc}
internalOps={internalOps}

22
src/components/ExpanderSwitch.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import { Switch } from "@headlessui/react";
type ExpanderSwitchProps = {
expanded: boolean;
setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
};
const ExpanderSwitch: React.FC<ExpanderSwitchProps> = ({
expanded,
setExpanded,
}) => (
<Switch
className="text-xs font-code"
checked={expanded}
onChange={setExpanded}
>
{expanded ? <span className="text-gray-400">[-]</span> : <>[...]</>}
</Switch>
);
export default ExpanderSwitch;

2
src/params.ts
View File

@ -1,3 +1,3 @@
export const MIN_API_LEVEL = 4;
export const MIN_API_LEVEL = 5;
export const PAGE_SIZE = 25;

37
src/sourcify/useSourcify.ts
View File

@ -1,5 +1,6 @@
import { useState, useEffect, useMemo } from "react";
import { Interface } from "@ethersproject/abi";
import { ErrorDescription } from "@ethersproject/abi/lib/interface";
import { ChecksummedAddress, TransactionData } from "../types";
import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "../url";
@ -11,12 +12,19 @@ export type UserEvent = {
notice?: string | undefined;
};
export type UserError = [
{
notice?: string | undefined;
}
];
export type UserDoc = {
kind: "user";
version?: number | undefined;
notice?: string | undefined;
methods: Record<string, UserMethod>;
events: Record<string, UserEvent>;
errors?: Record<string, UserError> | undefined;
};
export type DevMethod = {
@ -24,10 +32,17 @@ export type DevMethod = {
returns?: Record<string, string>;
};
export type DevError = [
{
params?: Record<string, string>;
}
];
export type DevDoc = {
kind: "dev";
version?: number | undefined;
methods: Record<string, DevMethod>;
errors?: Record<string, DevError> | undefined;
};
export type Metadata = {
@ -236,3 +251,25 @@ export const useTransactionDescription = (
return txDesc;
};
export const useError = (
metadata: Metadata | null | undefined,
output: string | null | undefined
): ErrorDescription | null | undefined => {
const err = useMemo(() => {
if (!metadata || !output) {
return undefined;
}
const abi = metadata.output.abi;
const intf = new Interface(abi as any);
try {
return intf.parseError(output);
} catch (err) {
console.warn("Couldn't find error signature", err);
return null;
}
}, [metadata, output]);
return err;
};

110
src/transaction/Details.tsx
View File

@ -1,4 +1,5 @@
import React, { useContext, useMemo } from "react";
import React, { useContext, useMemo, useState } from "react";
import { Tab } from "@headlessui/react";
import { TransactionDescription } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -8,6 +9,8 @@ import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow";
import BlockLink from "../components/BlockLink";
import ModeTab from "../components/ModeTab";
import ExpanderSwitch from "../components/ExpanderSwitch";
import BlockConfirmations from "../components/BlockConfirmations";
import TransactionAddress from "../components/TransactionAddress";
import Copy from "../components/Copy";
@ -31,20 +34,23 @@ import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition";
import DecodedParamsTable from "./decoder/DecodedParamsTable";
import InputDecoder from "./decoder/InputDecoder";
import {
rawInputTo4Bytes,
use4Bytes,
useTransactionDescription,
} from "../use4Bytes";
import { DevDoc, UserDoc } from "../sourcify/useSourcify";
import { DevDoc, Metadata, useError, UserDoc } from "../sourcify/useSourcify";
import { ResolvedAddresses } from "../api/address-resolver";
import { RuntimeContext } from "../useRuntime";
import { useContractsMetadata } from "../hooks";
import { useTransactionError } from "../useErigonHooks";
type DetailsProps = {
txData: TransactionData;
txDesc: TransactionDescription | null | undefined;
toMetadata: Metadata | null | undefined;
userDoc?: UserDoc | undefined;
devDoc?: DevDoc | undefined;
internalOps?: InternalOperation[];
@ -56,6 +62,7 @@ type DetailsProps = {
const Details: React.FC<DetailsProps> = ({
txData,
txDesc,
toMetadata,
userDoc,
devDoc,
internalOps,
@ -96,6 +103,21 @@ const Details: React.FC<DetailsProps> = ({
return _addresses;
}, [txData]);
const metadatas = useContractsMetadata(addresses, provider);
const [errorMsg, outputData, isCustomError] = useTransactionError(
provider,
txData.transactionHash
);
const errorDescription = useError(
toMetadata,
isCustomError ? outputData : undefined
);
const userError = errorDescription
? userDoc?.errors?.[errorDescription.signature]?.[0]
: undefined;
const devError = errorDescription
? devDoc?.errors?.[errorDescription.signature]?.[0]
: undefined;
const [expanded, setExpanded] = useState<boolean>(false);
return (
<ContentFrame tabs>
@ -109,15 +131,89 @@ const Details: React.FC<DetailsProps> = ({
{txData.confirmedData === undefined ? (
<span className="italic text-gray-400">Pending</span>
) : txData.confirmedData.status ? (
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
<FontAwesomeIcon icon={faCheckCircle} size="1x" />
<span className="flex items-baseline w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
<FontAwesomeIcon
className="self-center"
icon={faCheckCircle}
size="1x"
/>
<span>Success</span>
</span>
) : (
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
<FontAwesomeIcon icon={faTimesCircle} size="1x" />
<span>Fail</span>
<>
<div className="flex space-x-1 items-baseline">
<div className="flex items-baseline rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
<FontAwesomeIcon
className="self-center"
icon={faTimesCircle}
size="1x"
/>
<span>
Fail
{errorMsg && (
<>
{" "}
with revert message: '
<span className="font-bold underline">{errorMsg}</span>'
</>
)}
{isCustomError && (
<>
{" "}
with custom error
{errorDescription && (
<>
{" '"}
<span className="font-code font-bold underline">
{errorDescription.name}
</span>
{"'"}
</>
)}
</>
)}
</span>
</div>
{isCustomError && (
<ExpanderSwitch expanded={expanded} setExpanded={setExpanded} />
)}
</div>
{expanded && (
<Tab.Group>
<Tab.List className="flex space-x-1 mt-2 mb-1">
<ModeTab disabled={!errorDescription}>Decoded</ModeTab>
<ModeTab>Raw</ModeTab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
{errorDescription === undefined ? (
<>Waiting for data...</>
) : errorDescription === null ? (
<>Can't decode data</>
) : errorDescription.args.length === 0 ? (
<>No parameters</>
) : (
<DecodedParamsTable
args={errorDescription.args}
paramTypes={errorDescription.errorFragment.inputs}
hasParamNames
userMethod={userError}
devMethod={devError}
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={outputData}
readOnly
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
)}
</>
)}
</InfoRow>
{txData.confirmedData && (

17
src/transaction/TraceInput.tsx
View File

@ -1,11 +1,11 @@
import React, { useState } from "react";
import { Switch } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBomb } from "@fortawesome/free-solid-svg-icons/faBomb";
import TransactionAddress from "../components/TransactionAddress";
import FormattedBalance from "../components/FormattedBalance";
import FunctionSignature from "./FunctionSignature";
import InputDecoder from "./decoder/InputDecoder";
import ExpanderSwitch from "../components/ExpanderSwitch";
import { TraceEntry } from "../useErigonHooks";
import { ResolvedAddresses } from "../api/address-resolver";
import {
@ -71,17 +71,10 @@ const TraceInput: React.FC<TraceInputProps> = ({
<span className="whitespace-nowrap">
(
{hasParams && (
<Switch
className="text-xs"
checked={expanded}
onChange={setExpanded}
>
{expanded ? (
<span className="text-gray-400">[-]</span>
) : (
<>[...]</>
)}
</Switch>
<ExpanderSwitch
expanded={expanded}
setExpanded={setExpanded}
/>
)}
{(!hasParams || !expanded) && <>)</>}
</span>

59
src/useErigonHooks.ts
View File

@ -3,6 +3,7 @@ import { Block, BlockWithTransactions } from "@ethersproject/abstract-provider";
import { JsonRpcProvider } from "@ethersproject/providers";
import { getAddress } from "@ethersproject/address";
import { Contract } from "@ethersproject/contracts";
import { defaultAbiCoder } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber";
import { arrayify, hexDataSlice, isHexString } from "@ethersproject/bytes";
import { extract4Bytes } from "./use4Bytes";
@ -484,3 +485,61 @@ export const useAddressesWithCode = (
return results;
};
// Error(string)
const ERROR_MESSAGE_SELECTOR = "0x08c379a0";
export const useTransactionError = (
provider: JsonRpcProvider | undefined,
txHash: string
): [string | undefined, string | undefined, boolean | undefined] => {
const [errorMsg, setErrorMsg] = useState<string | undefined>();
const [data, setData] = useState<string | undefined>();
const [isCustomError, setCustomError] = useState<boolean | undefined>();
useEffect(() => {
// Reset
setErrorMsg(undefined);
setData(undefined);
setCustomError(undefined);
if (provider === undefined) {
return;
}
const readCodes = async () => {
const result = (await provider.send("ots_getTransactionError", [
txHash,
])) as string;
// Empty or success
if (result === "0x") {
setErrorMsg(undefined);
setData(result);
setCustomError(false);
return;
}
// Filter hardcoded Error(string) selector because ethers don't let us
// construct it
const selector = result.substr(0, 10);
if (selector === ERROR_MESSAGE_SELECTOR) {
const msg = defaultAbiCoder.decode(
["string"],
"0x" + result.substr(10)
);
setErrorMsg(msg[0]);
setData(result);
setCustomError(false);
return;
}
setErrorMsg(undefined);
setData(result);
setCustomError(true);
};
readCodes();
}, [provider, txHash]);
return [errorMsg, data, isCustomError];
};