Merge branch 'release/v2021.12.02-otterscan'

package-lock.json

@@ -22,7 +22,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/react-fontawesome": "^0.1.16",
         "@headlessui/react": "^1.4.2",
-        "@testing-library/jest-dom": "^5.15.1",
+        "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "@types/jest": "^26.0.24",
@@ -32,8 +32,8 @@
         "@types/react-dom": "^17.0.11",
         "@types/react-highlight": "^0.12.5",
         "@types/react-syntax-highlighter": "^13.5.2",
-        "chart.js": "^3.6.0",
+        "chart.js": "^3.6.2",
-        "ethers": "^5.5.1",
+        "ethers": "^5.5.2",
         "highlightjs-solidity": "^2.0.2",
         "react": "^17.0.2",
         "react-blockies": "^1.4.1",
@@ -1672,9 +1672,9 @@
       ]
     },
     "node_modules/@ethersproject/networks": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.5.1.tgz",
-      "integrity": "sha512-KWfP3xOnJeF89Uf/FCJdV1a2aDJe5XTN2N52p4fcQ34QhDqQFkgQKZ39VGtiqUgHcLI8DfT0l9azC3KFTunqtA==",
+      "integrity": "sha512-tYRDM4zZtSUcKnD4UMuAlj7SeXH/k5WC4SP2u1Pn57++JdXHkRu2zwNkgNogZoxHzhm9Q6qqurDBVptHOsW49Q==",
       "funding": [
         {
           "type": "individual",
@@ -1727,9 +1727,9 @@
       }
     },
     "node_modules/@ethersproject/providers": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.5.1.tgz",
-      "integrity": "sha512-xqMbDnS/FPy+J/9mBLKddzyLLAQFjrVff5g00efqxPzcAwXiR+SiCGVy6eJ5iAIirBOATjx7QLhDNPGV+AEQsw==",
+      "integrity": "sha512-2zdD5sltACDWhjUE12Kucg2PcgM6V2q9JMyVvObtVGnzJu+QSmibbP+BHQyLWZUBfLApx2942+7DC5D+n4wBQQ==",
       "funding": [
         {
           "type": "individual",
@@ -1985,9 +1985,9 @@
       }
     },
     "node_modules/@ethersproject/web": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/web/-/web-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersproject/web/-/web-5.5.1.tgz",
-      "integrity": "sha512-BEgY0eL5oH4mAo37TNYVrFeHsIXLRxggCRG/ksRIxI2X5uj5IsjGmcNiRN/VirQOlBxcUhCgHhaDLG4m6XAVoA==",
+      "integrity": "sha512-olvLvc1CB12sREc1ROPSHTdFCdvMh0J5GSJYiQg2D0hdD4QmJDy8QYDb1CvoqD/bF1c++aeKv2sR5uduuG9dQg==",
       "funding": [
         {
           "type": "individual",
@@ -2867,13 +2867,13 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "5.15.1",
+      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.15.1.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz",
-      "integrity": "sha512-kmj8opVDRE1E4GXyLlESsQthCXK7An28dFWxhiMwD7ZUI7ZxA6sjdJRxLerD9Jd8cHX4BDc1jzXaaZKqzlUkvg==",
+      "integrity": "sha512-ajUJdfDIuTCadB79ukO+0l8O+QwN0LiSxDaYUTI4LndbbUsGi6rWU1SCexXzBA2NSjlVB9/vbkasQIL3tmPBjw==",
       "dependencies": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
-        "aria-query": "^4.2.2",
+        "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
         "css": "^3.0.0",
         "css.escape": "^1.5.1",
@@ -2897,6 +2897,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@testing-library/jest-dom/node_modules/aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/@testing-library/jest-dom/node_modules/chalk": {
       "version": "3.0.0",
       "license": "MIT",
@@ -5558,9 +5566,9 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "3.6.0",
+      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.2.tgz",
-      "integrity": "sha512-iOzzDKePL+bj+ccIsVAgWQehCXv8xOKGbaU2fO/myivH736zcx535PGJzQGanvcSGVOqX6yuLZsN3ygcQ35UgQ=="
+      "integrity": "sha512-Xz7f/fgtVltfQYWq0zL1Xbv7N2inpG+B54p3D5FSvpCdy3sM+oZhbqa42eNuYXltaVvajgX5UpKCU2GeeJIgxg=="
     },
     "node_modules/check-types": {
       "version": "11.1.2",
@@ -8074,9 +8082,9 @@
       }
     },
     "node_modules/ethers": {
-      "version": "5.5.1",
+      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.5.2.tgz",
-      "integrity": "sha512-RodEvUFZI+EmFcE6bwkuJqpCYHazdzeR1nMzg+YWQSmQEsNtfl1KHGfp/FWZYl48bI/g7cgBeP2IlPthjiVngw==",
+      "integrity": "sha512-EF5W+6Wwcu6BqVwpgmyR5U2+L4c1FQzlM/02dkZOugN3KF0cG9bzHZP+TDJglmPm2/IzCEJDT7KBxzayk7SAHw==",
       "funding": [
         {
           "type": "individual",
@@ -8103,10 +8111,10 @@
         "@ethersproject/json-wallets": "5.5.0",
         "@ethersproject/keccak256": "5.5.0",
         "@ethersproject/logger": "5.5.0",
-        "@ethersproject/networks": "5.5.0",
+        "@ethersproject/networks": "5.5.1",
         "@ethersproject/pbkdf2": "5.5.0",
         "@ethersproject/properties": "5.5.0",
-        "@ethersproject/providers": "5.5.0",
+        "@ethersproject/providers": "5.5.1",
         "@ethersproject/random": "5.5.0",
         "@ethersproject/rlp": "5.5.0",
         "@ethersproject/sha2": "5.5.0",
@@ -8116,7 +8124,7 @@
         "@ethersproject/transactions": "5.5.0",
         "@ethersproject/units": "5.5.0",
         "@ethersproject/wallet": "5.5.0",
-        "@ethersproject/web": "5.5.0",
+        "@ethersproject/web": "5.5.1",
         "@ethersproject/wordlists": "5.5.0"
       }
     },
@@ -20533,9 +20541,9 @@
       "integrity": "sha512-rIY/6WPm7T8n3qS2vuHTUBPdXHl+rGxWxW5okDfo9J4Z0+gRRZT0msvUdIJkE4/HS29GUMziwGaaKO2bWONBrg=="
     },
     "@ethersproject/networks": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersproject/networks/-/networks-5.5.1.tgz",
-      "integrity": "sha512-KWfP3xOnJeF89Uf/FCJdV1a2aDJe5XTN2N52p4fcQ34QhDqQFkgQKZ39VGtiqUgHcLI8DfT0l9azC3KFTunqtA==",
+      "integrity": "sha512-tYRDM4zZtSUcKnD4UMuAlj7SeXH/k5WC4SP2u1Pn57++JdXHkRu2zwNkgNogZoxHzhm9Q6qqurDBVptHOsW49Q==",
       "requires": {
         "@ethersproject/logger": "^5.5.0"
       }
@@ -20558,9 +20566,9 @@
       }
     },
     "@ethersproject/providers": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersproject/providers/-/providers-5.5.1.tgz",
-      "integrity": "sha512-xqMbDnS/FPy+J/9mBLKddzyLLAQFjrVff5g00efqxPzcAwXiR+SiCGVy6eJ5iAIirBOATjx7QLhDNPGV+AEQsw==",
+      "integrity": "sha512-2zdD5sltACDWhjUE12Kucg2PcgM6V2q9JMyVvObtVGnzJu+QSmibbP+BHQyLWZUBfLApx2942+7DC5D+n4wBQQ==",
       "requires": {
         "@ethersproject/abstract-provider": "^5.5.0",
         "@ethersproject/abstract-signer": "^5.5.0",
@@ -20704,9 +20712,9 @@
       }
     },
     "@ethersproject/web": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@ethersproject/web/-/web-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ethersproject/web/-/web-5.5.1.tgz",
-      "integrity": "sha512-BEgY0eL5oH4mAo37TNYVrFeHsIXLRxggCRG/ksRIxI2X5uj5IsjGmcNiRN/VirQOlBxcUhCgHhaDLG4m6XAVoA==",
+      "integrity": "sha512-olvLvc1CB12sREc1ROPSHTdFCdvMh0J5GSJYiQg2D0hdD4QmJDy8QYDb1CvoqD/bF1c++aeKv2sR5uduuG9dQg==",
       "requires": {
         "@ethersproject/base64": "^5.5.0",
         "@ethersproject/bytes": "^5.5.0",
@@ -21248,13 +21256,13 @@
       }
     },
     "@testing-library/jest-dom": {
-      "version": "5.15.1",
+      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.15.1.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz",
-      "integrity": "sha512-kmj8opVDRE1E4GXyLlESsQthCXK7An28dFWxhiMwD7ZUI7ZxA6sjdJRxLerD9Jd8cHX4BDc1jzXaaZKqzlUkvg==",
+      "integrity": "sha512-ajUJdfDIuTCadB79ukO+0l8O+QwN0LiSxDaYUTI4LndbbUsGi6rWU1SCexXzBA2NSjlVB9/vbkasQIL3tmPBjw==",
       "requires": {
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
-        "aria-query": "^4.2.2",
+        "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
         "css": "^3.0.0",
         "css.escape": "^1.5.1",
@@ -21269,6 +21277,11 @@
             "regenerator-runtime": "^0.13.4"
           }
         },
+        "aria-query": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+          "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg=="
+        },
         "chalk": {
           "version": "3.0.0",
           "requires": {
@@ -23135,9 +23148,9 @@
       "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
     },
     "chart.js": {
-      "version": "3.6.0",
+      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.2.tgz",
-      "integrity": "sha512-iOzzDKePL+bj+ccIsVAgWQehCXv8xOKGbaU2fO/myivH736zcx535PGJzQGanvcSGVOqX6yuLZsN3ygcQ35UgQ=="
+      "integrity": "sha512-Xz7f/fgtVltfQYWq0zL1Xbv7N2inpG+B54p3D5FSvpCdy3sM+oZhbqa42eNuYXltaVvajgX5UpKCU2GeeJIgxg=="
     },
     "check-types": {
       "version": "11.1.2"
@@ -24795,9 +24808,9 @@
       "version": "1.8.1"
     },
     "ethers": {
-      "version": "5.5.1",
+      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.5.2.tgz",
-      "integrity": "sha512-RodEvUFZI+EmFcE6bwkuJqpCYHazdzeR1nMzg+YWQSmQEsNtfl1KHGfp/FWZYl48bI/g7cgBeP2IlPthjiVngw==",
+      "integrity": "sha512-EF5W+6Wwcu6BqVwpgmyR5U2+L4c1FQzlM/02dkZOugN3KF0cG9bzHZP+TDJglmPm2/IzCEJDT7KBxzayk7SAHw==",
       "requires": {
         "@ethersproject/abi": "5.5.0",
         "@ethersproject/abstract-provider": "5.5.1",
@@ -24814,10 +24827,10 @@
         "@ethersproject/json-wallets": "5.5.0",
         "@ethersproject/keccak256": "5.5.0",
         "@ethersproject/logger": "5.5.0",
-        "@ethersproject/networks": "5.5.0",
+        "@ethersproject/networks": "5.5.1",
         "@ethersproject/pbkdf2": "5.5.0",
         "@ethersproject/properties": "5.5.0",
-        "@ethersproject/providers": "5.5.0",
+        "@ethersproject/providers": "5.5.1",
         "@ethersproject/random": "5.5.0",
         "@ethersproject/rlp": "5.5.0",
         "@ethersproject/sha2": "5.5.0",
@@ -24827,7 +24840,7 @@
         "@ethersproject/transactions": "5.5.0",
         "@ethersproject/units": "5.5.0",
         "@ethersproject/wallet": "5.5.0",
-        "@ethersproject/web": "5.5.0",
+        "@ethersproject/web": "5.5.1",
         "@ethersproject/wordlists": "5.5.0"
       }
     },

package.json

@@ -17,7 +17,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@headlessui/react": "^1.4.2",
-    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.24",
@@ -27,8 +27,8 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-highlight": "^0.12.5",
     "@types/react-syntax-highlighter": "^13.5.2",
-    "chart.js": "^3.6.0",
+    "chart.js": "^3.6.2",
-    "ethers": "^5.5.1",
+    "ethers": "^5.5.2",
     "highlightjs-solidity": "^2.0.2",
     "react": "^17.0.2",
     "react-blockies": "^1.4.1",

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">
-          </span>
+                <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];
+};