Merge branch 'feature/error-cause' into develop

src/Transaction.tsx

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

src/components/ExpanderSwitch.tsx

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

src/params.ts

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

src/sourcify/useSourcify.ts

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

src/transaction/Details.tsx

@@ -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">
+          <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 icon={faCheckCircle} size="1x" />
+            <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" />
+            <div className="flex space-x-1 items-baseline">
-            <span>Fail</span>
+              <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 && (

src/transaction/TraceInput.tsx

@@ -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
+                    <ExpanderSwitch
-                      className="text-xs"
+                      expanded={expanded}
-                      checked={expanded}
+                      setExpanded={setExpanded}
-                      onChange={setExpanded}
+                    />
-                    >
-                      {expanded ? (
-                        <span className="text-gray-400">[-]</span>
-                      ) : (
-                        <>[...]</>
-                      )}
-                    </Switch>
                   )}
                   {(!hasParams || !expanded) && <>)</>}
                 </span>

src/useErigonHooks.ts

@@ -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];
+};