Fix wallet widget txn sending (#410)

* Decrease confirmation requirement

* Fix wallet widget txn sending issue

Author: tolgahan-arikan

packages/connect/src/constants/transactions.ts

@@ -1 +1 @@
-export const TRANSACTION_CONFIRMATIONS_DEFAULT = 4
+export const TRANSACTION_CONFIRMATIONS_DEFAULT = 1

packages/connect/src/styles.ts

@@ -307,6 +307,9 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -382,6 +385,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -472,6 +478,9 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -565,12 +574,21 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-top {
     transform-origin: top;
   }
@@ -939,6 +957,9 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1221,6 +1242,9 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
   }
@@ -1256,6 +1280,10 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

packages/wallet-widget/src/views/Send/SendCoin.tsx

@@ -33,7 +33,7 @@ import {
 import { ContractVerificationStatus, TokenBalance } from '@0xsequence/indexer'
 import { useState, ChangeEvent, useRef, useEffect } from 'react'
 import { encodeFunctionData, formatUnits, parseUnits, toHex, zeroAddress, Hex } from 'viem'
-import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction, usePublicClient } from 'wagmi'
+import { useAccount, useChainId, useSwitchChain, useConfig, usePublicClient, useWalletClient } from 'wagmi'
 
 import { WalletSelect } from '../../components/Select/WalletSelect'
 import { SendItemInfo } from '../../components/SendItemInfo'
@@ -68,7 +68,7 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
   const { fiatCurrency } = useSettings()
   const [amount, setAmount] = useState<string>('0')
   const [toAddress, setToAddress] = useState<string>('')
-  const { sendTransaction } = useSendTransaction()
+  const { data: walletClient } = useWalletClient()
   const [isSendTxnPending, setIsSendTxnPending] = useState(false)
   const [showConfirmation, setShowConfirmation] = useState(false)
   const [feeOptions, setFeeOptions] = useState<
@@ -229,57 +229,90 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
       }
     })
 
+    if (!walletClient) {
+      console.error('Wallet client not found')
+      toast({
+        title: 'Error',
+        description: 'Wallet client not available. Please ensure your wallet is connected.',
+        variant: 'error'
+      })
+      setIsSendTxnPending(false)
+      return
+    }
+
     setIsSendTxnPending(true)
 
     const sendAmount = parseUnits(amountToSendFormatted, decimals)
+    let txHash: Hex | undefined
 
-    const txOptions = {
-      onSettled: async (hash: `0x${string}` | undefined) => {
-        setIsBackButtonEnabled(true)
+    try {
+      if (isNativeCoin) {
+        console.log('Sending native coin via walletClient')
+        txHash = await walletClient.sendTransaction({
+          account: accountAddress as `0x${string}`,
+          to: toAddress as `0x${string}`,
+          value: BigInt(sendAmount.toString()),
+          chain: chains.find(c => c.id === chainId)
+        })
+      } else {
+        console.log('Sending ERC20 coin via walletClient')
+        txHash = await walletClient.sendTransaction({
+          account: accountAddress as `0x${string}`,
+          to: tokenBalance?.contractAddress as `0x${string}`,
+          data: encodeFunctionData({ abi: ERC_20_ABI, functionName: 'transfer', args: [toAddress, toHex(sendAmount)] }),
+          chain: chains.find(c => c.id === chainId)
+        })
+      }
 
-        if (hash) {
-          setNavigation({
-            location: 'home'
-          })
-          setIsSendTxnPending(false)
-          if (publicClient) {
-            await waitForTransactionReceipt({
-              indexerClient,
-              txnHash: hash as Hex,
-              publicClient,
-              confirmations: TRANSACTION_CONFIRMATIONS_DEFAULT
-            })
-            clearCachedBalances()
-          }
-        }
-        setIsSendTxnPending(false)
+      // Handle successful transaction submission
+      setIsBackButtonEnabled(true)
+      if (txHash) {
+        setNavigation({
+          location: 'home'
+        })
+        setIsSendTxnPending(false) // Set pending to false immediately after getting hash
 
         toast({
           title: 'Transaction sent',
           description: `Successfully sent ${amountToSendFormatted} ${symbol} to ${toAddress}`,
           variant: 'success'
         })
-      }
-    }
 
-    if (isNativeCoin) {
-      sendTransaction(
-        {
-          to: toAddress as `0x${string}`,
-          value: BigInt(sendAmount.toString()),
-          gas: null
-        },
-        txOptions
-      )
-    } else {
-      sendTransaction(
-        {
-          to: tokenBalance?.contractAddress as `0x${string}`,
-          data: encodeFunctionData({ abi: ERC_20_ABI, functionName: 'transfer', args: [toAddress, toHex(sendAmount)] }),
-          gas: null
-        },
-        txOptions
-      )
+        // Wait for receipt in the background
+        if (publicClient) {
+          waitForTransactionReceipt({
+            indexerClient,
+            txnHash: txHash,
+            publicClient,
+            confirmations: TRANSACTION_CONFIRMATIONS_DEFAULT
+          })
+            .then(() => {
+              clearCachedBalances()
+              console.log('Transaction confirmed and balances cleared:', txHash)
+            })
+            .catch(error => {
+              console.error('Error waiting for transaction receipt:', error)
+              // Optionally show another toast for confirmation failure
+            })
+        }
+      } else {
+        // Handle case where txHash is unexpectedly undefined
+        setIsSendTxnPending(false)
+        toast({
+          title: 'Transaction Error',
+          description: 'Transaction submitted but no hash received.',
+          variant: 'error'
+        })
+      }
+    } catch (error: any) {
+      console.error('Transaction failed:', error)
+      setIsSendTxnPending(false)
+      setIsBackButtonEnabled(true)
+      toast({
+        title: 'Transaction Failed',
+        description: error?.shortMessage || error?.message || 'An unknown error occurred.',
+        variant: 'error'
+      })
     }
   }