Merge pull request #43 from dwhiffing/error-transaction-link

Shows link to transaction when it fails and support different blockchain explorers based on chainId
magiclabs · Sep 5, 2024 · b167603 · b167603
2 parents 066b359 + 4d29622
commit b167603
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 29 deletions.
diff --git a/components/ChatMessageBubble.tsx b/components/ChatMessageBubble.tsx
@@ -11,6 +11,7 @@ import { Badge } from "./ui/badge";
 import { ToolArgsTable } from "./ToolArgsTable";
 import { useContracts } from "@/utils/useContracts";
 import { CHAINS } from "@/constants";
+import { IContract } from "@/types";
 
 type IToolCall = {
   name: string;
@@ -61,8 +62,10 @@ type IToolCallResponse = {
 
 function ToolCallSuccessBadge({
   toolCallResponse,
+  contract,
 }: {
   toolCallResponse: IToolCallResponse | null;
+  contract: IContract | null;
 }) {
   // Hack to just get around ts for now.
   if (!toolCallResponse)
@@ -76,33 +79,30 @@ function ToolCallSuccessBadge({
     return (
       <div>
         <Badge className="bg-rose-500">Error</Badge>
-        <br />
-        <span className="mt-2 text-xs opacity-70 break-all">
+        {toolCallResponse.payload.transactionHash && contract && (
+          <TransactionLink
+            hash={toolCallResponse.payload.transactionHash}
+            contract={contract}
+          />
+        )}
+        <div className="mt-2 text-xs opacity-70 break-all">
           {toolCallResponse.message}
-        </span>
-        <br />
-        <span className="mt-2 text-xs opacity-70 break-all">
+        </div>
+        <div className="mt-2 text-xs opacity-70 break-all">
           {JSON.stringify(toolCallResponse.payload)}
-        </span>
+        </div>
       </div>
     );
   }
   return (
     <div>
       <Badge className="bg-emerald-500">Success</Badge>
-      <span className="mt-2 text-xs opacity-70 break-all">
-        {toolCallResponse.payload.transactionHash && (
-          <div className="mt-2">
-            <Link
-              target="_blank"
-              href={`https://sepolia.etherscan.io/tx/${toolCallResponse.payload.transactionHash}`}
-              className="underline"
-            >
-              View your Transaction
-            </Link>
-          </div>
-        )}
-      </span>
+      {toolCallResponse.payload.transactionHash && contract && (
+        <TransactionLink
+          hash={toolCallResponse.payload.transactionHash}
+          contract={contract}
+        />
+      )}
     </div>
   );
 }
@@ -202,7 +202,10 @@ export function ToolCallMessageBubble(props: { message: Message }) {
                 )}
               </Button>
             ) : (
-              <ToolCallSuccessBadge toolCallResponse={toolCallResponse} />
+              <ToolCallSuccessBadge
+                toolCallResponse={toolCallResponse}
+                contract={contract}
+              />
             )}
           </div>
         </>
@@ -236,3 +239,14 @@ export function ChatMessageBubble(props: { message: Message }) {
       return <ToolCallMessageBubble {...props} />;
   }
 }
+
+const TransactionLink = (props: { hash: string; contract: IContract }) => {
+  const uri = CHAINS[props.contract.chainId].explorerURI;
+  return (
+    <div className="mt-2 text-xs opacity-70 break-all">
+      <Link target="_blank" href={`${uri}/${props.hash}`} className="underline">
+        View your Transaction
+      </Link>
+    </div>
+  );
+};
diff --git a/constants/index.ts b/constants/index.ts
@@ -1,10 +1,19 @@
 import { IContract } from "@/types";
 
 export const CHAINS = {
-  11155111: { name: "ETH Sepolia" },
-  1: { name: "ETH Mainnet" },
-  137: { name: "POLY Mainnet" },
-  80001: { name: "POLY Mubai" },
+  11155111: {
+    name: "ETH Sepolia",
+    explorerURI: "https://sepolia.etherscan.io/tx/",
+  },
+  1: { name: "ETH Mainnet", explorerURI: "https://etherscan.io/tx/" },
+  137: {
+    name: "POLY Mainnet",
+    explorerURI: "https://polygonscan.com/tx/",
+  },
+  80002: {
+    name: "POLY Amoy",
+    explorerURI: "https://amoy.polygonscan.com/tx/",
+  },
 };
 
 export const FEATURED_CONTRACTS: IContract[] = [

diff --git a/utils/abi/polygonscan.ts b/utils/abi/polygonscan.ts
@@ -30,5 +30,5 @@ export const getABIFromPolygonscan = async (
 
 export const polygonscanChains: Record<number, string> = {
   137: "mainnet",
-  80001: "mumbai",
+  80002: "amoy",
 };
diff --git a/utils/generateToolFromABI.ts b/utils/generateToolFromABI.ts
@@ -102,12 +102,13 @@ export const generateToolFromABI =
             )
           ) {
             // Just to get around TS
-            if (error instanceof Error) {
+            if (error instanceof TransactionError) {
               console.error(`${error.constructor.name}:`, error.message);
+              const transactionHash = error.context.hash;
               return JSON.stringify({
                 message: error.message,
                 status: "failure",
-                payload: {},
+                payload: transactionHash ? { transactionHash } : {},
               });
             }
           }

diff --git a/utils/tee.ts b/utils/tee.ts
@@ -207,8 +207,9 @@ export async function getTransactionReceipt({
 
     console.log({ signedTx });
 
+    let tx: ethers.ethers.TransactionResponse | null = null;
     try {
-      const tx = await provider.broadcastTransaction(signedTx);
+      tx = await provider.broadcastTransaction(signedTx);
       const txReceipt = await tx.wait();
       const transactionHash = txReceipt?.hash ?? "";
       return {
@@ -219,7 +220,7 @@ export async function getTransactionReceipt({
     } catch (error) {
       console.error("Error Broadcasting or waiting for transaction", error);
       if (error instanceof Error) {
-        throw new TransactionError(error.message);
+        throw new TransactionError(error.message, tx);
       }
       throw error;
     }