feat: friendly ARC56 error messages

.nsprc

@@ -1,7 +1,7 @@
 {
-  "1100556": {
+  "1100563": {
     "active": true,
     "notes": "Waiting for https://github.com/npm/cli/issues/7902 to be resolved",
     "expiry": "2024-12-31"
   }
-}
+}

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@algorandfoundation/algokit-subscriber": "^2.0.4",
-    "@algorandfoundation/algokit-utils": "^7.0.0-beta.20",
+    "@algorandfoundation/algokit-utils": "^7.0.0-beta.22",
     "@auth0/auth0-react": "^2.2.4",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
@@ -193,7 +193,7 @@
   },
   "overrides": {
     "ws@>7.0.0 <7.5.9": "7.5.10",
-    "@algorandfoundation/algokit-utils@<7.0.0": "^7.0.0-beta.20",
+    "@algorandfoundation/algokit-utils@<7.0.0": "^7.0.0-beta.22",
     "path-to-regexp@>= 0.2.0 <8.0.0": "8.0.0",
     "cross-spawn": "^7.0.6"
   }

src/features/abi-methods/utils/parse-errors.ts

@@ -0,0 +1,102 @@
+import { getApplicationResultAtom } from '@/features/applications/data'
+import { dataStore } from '@/features/common/data/data-store'
+import { BuildableTransactionType, BuildMethodCallTransactionResult, BuildTransactionResult } from '@/features/transaction-wizard/models'
+import { base64ToBytes } from '@/utils/base64-to-bytes'
+import { asError } from '@/utils/error'
+import { AppClient } from '@algorandfoundation/algokit-utils/types/app-client'
+import algosdk from 'algosdk'
+
+type URLTokenBaseHTTPError = {
+  name: 'URLTokenBaseHTTPError'
+  response: {
+    body: {
+      data: {
+        ['app-index']: number
+        ['group-index']: number
+      }
+    }
+  }
+}
+
+type SimulateError = Error & {
+  simulateResponse: algosdk.modelsv2.SimulateResponse
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isURLTokenBaseHTTPError = (e: any): e is URLTokenBaseHTTPError => {
+  return (
+    e.name === 'URLTokenBaseHTTPError' &&
+    e.response?.body?.data &&
+    e.response.body.data['app-index'] !== undefined &&
+    e.response.body.data['group-index'] !== undefined
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isSimulateError = (e: any): e is SimulateError => {
+  return e.simulateResponse !== undefined
+}
+
+export const parseCallAbiMethodError = async (e: unknown, transactions: BuildTransactionResult[]): Promise<Error> => {
+  if (!isURLTokenBaseHTTPError(e)) {
+    return asError(e)
+  }
+
+  const groupIndex = e.response.body.data['group-index']
+  const transaction = transactions[groupIndex]
+  if (!transaction || transaction.type !== BuildableTransactionType.MethodCall) {
+    return asError(e)
+  }
+
+  return parseErrorForTransaction(e, groupIndex, transaction)
+}
+
+export const parseSimulateAbiMethodError = async (e: unknown, transactions: BuildTransactionResult[]): Promise<Error> => {
+  if (
+    !isSimulateError(e) ||
+    e.simulateResponse.txnGroups.length === 0 ||
+    e.simulateResponse.txnGroups[0].failedAt === undefined ||
+    e.simulateResponse.txnGroups[0].failedAt.length === 0
+  ) {
+    return asError(e)
+  }
+
+  // When there are multiple errors, the failedAt array will only have one element
+  const groupIndex = Number(e.simulateResponse.txnGroups[0].failedAt[0])
+  const transaction = transactions[groupIndex]
+  if (!transaction || transaction.type !== BuildableTransactionType.MethodCall) {
+    return asError(e)
+  }
+
+  return parseErrorForTransaction(e, groupIndex, transaction)
+}
+
+const parseErrorForTransaction = async (e: unknown, groupIndex: number, transaction: BuildMethodCallTransactionResult) => {
+  const applicationResult = await dataStore.get(getApplicationResultAtom(transaction.applicationId))
+  const logicError = AppClient.exposeLogicError(
+    asError(e),
+    transaction.appSpec,
+    transaction.onComplete === algosdk.OnApplicationComplete.ClearStateOC
+      ? {
+          isClearStateProgram: true,
+          program: base64ToBytes(applicationResult.params['clear-state-program']),
+        }
+      : {
+          isClearStateProgram: false,
+          program: base64ToBytes(applicationResult.params['approval-program']),
+        }
+  )
+
+  const tealErrorMessage = extractErrorMessage(logicError.message)
+  if (!tealErrorMessage) {
+    return asError(e)
+  }
+
+  return new Error(`Error in transaction ${groupIndex + 1}: ${tealErrorMessage}`)
+}
+
+const extractErrorMessage = (errorString: string): string | undefined => {
+  const regex = /Runtime error.+: (.+)$/
+  const match = errorString.match(regex)
+  return match?.[1] || undefined
+}

src/features/transaction-wizard/components/transactions-builder.tsx

@@ -34,6 +34,7 @@ import { asAbiTransactionType } from '../mappers'
 import AlgoKitComposer, { SimulateOptions } from '@algorandfoundation/algokit-utils/types/composer'
 import { Label } from '@/features/common/components/label'
 import { Checkbox } from '@/features/common/components/checkbox'
+import { parseCallAbiMethodError, parseSimulateAbiMethodError } from '@/features/abi-methods/utils/parse-errors'
 
 export const transactionTypeLabel = 'Transaction type'
 export const sendButtonLabel = 'Send'
@@ -143,10 +144,11 @@ export function TransactionsBuilder({
       ensureThereIsNoPlaceholderTransaction(transactions)
 
       await onSendTransactions(transactions)
-    } catch (error) {
+    } catch (err) {
       // eslint-disable-next-line no-console
-      console.error(error)
-      setErrorMessage(asError(error).message)
+      console.error(err)
+      const error = await parseCallAbiMethodError(err, transactions)
+      setErrorMessage(error.message)
     }
   }, [activeAddress, onSendTransactions, transactions])
 
@@ -172,10 +174,11 @@ export function TransactionsBuilder({
           }))
 
       return onSimulated?.(result)
-    } catch (error) {
+    } catch (err) {
       // eslint-disable-next-line no-console
-      console.error(error)
-      setErrorMessage(asError(error).message)
+      console.error(err)
+      const error = await parseSimulateAbiMethodError(err, transactions)
+      setErrorMessage(error.message)
     }
   }, [onSimulated, requireSignaturesOnSimulate, transactions])