Display failed transactions

src/components/views/CallContractsView.tsx

@@ -2,6 +2,7 @@
 import { Box, Text, Button, TextInput, Spinner } from "@0xsequence/design-system"
 import { SetStateAction, useState } from "react"
 import { sequence } from "../../main"
+import { isSentTransactionResponse } from "@0xsequence/waas"
 
 export function CallContractsView() {
   const [contractAddress, setContractAddress] = useState<string>('')
@@ -10,10 +11,13 @@ export function CallContractsView() {
   const [contractMethodArgs, setContractMethodArgs] = useState<string>('')
   const [transactionHash, setTransactionHash] = useState<string>()
   const [inProgress, setInProgress] = useState<boolean>(false)
+  const [sendTransactionError, setSendTransactionError] = useState<string>()
 
   const callContract = async () => {
     try {
+      setSendTransactionError(undefined)
       setInProgress(true)
+
       const tx = await sequence.callContract({
         to: contractAddress,
         abi: contractAbi,
@@ -22,7 +26,12 @@ export function CallContractsView() {
         value: 0
       })
 
-      setTransactionHash(tx.data.txHash)
+      if (isSentTransactionResponse(tx)) {
+        setTransactionHash(tx.data.txHash)
+      } else {
+        setSendTransactionError(tx.data.error)
+      }
+
       setInProgress(false)
     } catch (e) {
       console.error(e)
@@ -89,6 +98,11 @@ export function CallContractsView() {
           data-id="nativeTokenSendAmount"
         />
       </Box>
+      {sendTransactionError && (
+        <Box marginTop="3">
+          Transaction failed: {sendTransactionError}
+        </Box>
+      )}
       {!inProgress ? (
         <Button
           marginTop="5"

src/components/views/SendTransactionsView.tsx

@@ -2,13 +2,15 @@ import { Box, Text, Button, TextInput, Spinner } from "@0xsequence/design-system
 import { ethers } from "ethers"
 import { SetStateAction, useEffect, useState } from "react"
 import { node, sequence } from "../../main"
+import { isSentTransactionResponse } from "@0xsequence/waas"
 
 export function SendTransactionsView() {
   const [nativeTokenBalance, setNativeTokenBalance] = useState<ethers.BigNumber>()
   const [nativeTokenSendAddress, setNativeTokenSendAddress] = useState<string>('')
   const [nativeTokenSendAmount, setNativeTokenSendAmount] = useState<string>('')
   const [nativeTokenSendTxHash, setNativeTokenSendTxHash] = useState<string>()
   const [isNativeTokenSendTxInProgress, setIsNativeTokenSendTxInProgress] = useState<boolean>(false)
+  const [sendTransactionError, setSendTransactionError] = useState<string>()
 
   useEffect(() => { fetchNativeTokenBalance() }, [])
 
@@ -19,13 +21,21 @@ export function SendTransactionsView() {
 
   const sendNativeToken = async (to: string, amount: string) => {
     try {
+      setSendTransactionError(undefined)
+
       setIsNativeTokenSendTxInProgress(true)
       const tx = await sequence.sendTransaction({
         transactions: [{
           to, value: ethers.utils.parseEther(amount)
         }]
       })
-      setNativeTokenSendTxHash(tx.data.txHash)
+
+      if (isSentTransactionResponse(tx)) {
+        setNativeTokenSendTxHash(tx.data.txHash)
+      } else {
+        setSendTransactionError(tx.data.error)
+      }
+
       setIsNativeTokenSendTxInProgress(false)
     } catch (e) {
       console.error(e)
@@ -70,6 +80,11 @@ export function SendTransactionsView() {
           data-id="nativeTokenSendAmount"
         />
       </Box>
+      {sendTransactionError && (
+        <Box marginTop="3">
+          Transaction failed: {sendTransactionError}
+        </Box>
+      )}
       {!isNativeTokenSendTxInProgress ? (
         <Button
           marginTop="5"

src/main.tsx

@@ -17,7 +17,7 @@ export const node = new ethers.providers.JsonRpcProvider('https://nodes.sequence
 export const sequence = new Sequence({
   network: 'polygon',
   secret: 'this-is-a-secret',
-  tenant: 48,
+  tenant: 52,
 
   identityPoolId: 'us-east-2:42c9f39d-c935-4d5c-a845-5c8815c79ee3',