Add failed tx error msg support; depends on ots_getTransactionError custom API

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/transaction/Details.tsx

@@ -41,6 +41,7 @@ import { DevDoc, 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;
@@ -96,6 +97,7 @@ const Details: React.FC<DetailsProps> = ({
     return _addresses;
   }, [txData]);
   const metadatas = useContractsMetadata(addresses, provider);
+  const errorMsg = useTransactionError(provider, txData.transactionHash);
 
   return (
     <ContentFrame tabs>
@@ -114,10 +116,19 @@ const Details: React.FC<DetailsProps> = ({
             <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">
+          <div className="inline-flex justify-start items-center 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>
-          </span>
+            <span>
+              Fail
+              {errorMsg && (
+                <>
+                  {" "}
+                  with revert message: '
+                  <span className="font-bold underline">{errorMsg}</span>'
+                </>
+              )}
+            </span>
+          </div>
         )}
       </InfoRow>
       {txData.confirmedData && (

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,37 @@ export const useAddressesWithCode = (
 
   return results;
 };
+
+export const useTransactionError = (
+  provider: JsonRpcProvider | undefined,
+  txHash: string
+): string | undefined => {
+  const [errorMsg, setErrorMsg] = useState<string | undefined>();
+
+  useEffect(() => {
+    // Reset
+    setErrorMsg(undefined);
+
+    if (provider === undefined) {
+      return;
+    }
+
+    const readCodes = async () => {
+      const result = (await provider.send("ots_getTransactionError", [
+        txHash,
+      ])) as string;
+
+      // Filter hardcoded Error(string) selector because ethers don't let us
+      // construct it
+      if (result.substr(0, 10) !== "0x08c379a0") {
+        return;
+      }
+
+      const msg = defaultAbiCoder.decode(["string"], "0x" + result.substr(10));
+      setErrorMsg(msg[0]);
+    };
+    readCodes();
+  }, [provider, txHash]);
+
+  return errorMsg;
+};