:chore improve send flow + ui tests swaps / send (#3499)

.changeset/sixty-foxes-raise.md

@@ -0,0 +1,22 @@
+---
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Improve send flow UX with better error handling

packages/core/src/controllers/SendController.ts

@@ -1,6 +1,6 @@
 import { subscribeKey as subKey } from 'valtio/vanilla/utils'
 import { proxy, ref, subscribe as sub } from 'valtio/vanilla'
-import { type Balance, type CaipAddress } from '@reown/appkit-common'
+import { NumberUtil, type Balance, type CaipAddress } from '@reown/appkit-common'
 import { ContractUtil } from '@reown/appkit-common'
 import { RouterController } from './RouterController.js'
 import { AccountController } from './AccountController.js'
@@ -10,6 +10,7 @@ import { CoreHelperUtil } from '../utils/CoreHelperUtil.js'
 import { EventsController } from './EventsController.js'
 import { W3mFrameRpcConstants } from '@reown/appkit-wallet'
 import { ChainController } from './ChainController.js'
+import { SwapApiUtil } from '../utils/SwapApiUtil.js'
 
 // -- Types --------------------------------------------- //
 
@@ -34,6 +35,7 @@ export interface SendControllerState {
   receiverProfileImageUrl?: string
   gasPrice?: bigint
   gasPriceInUSD?: number
+  networkBalanceInUSD?: string
   loading: boolean
 }
 
@@ -88,6 +90,10 @@ export const SendController = {
     state.gasPriceInUSD = gasPriceInUSD
   },
 
+  setNetworkBalanceInUsd(networkBalanceInUSD: SendControllerState['networkBalanceInUSD']) {
+    state.networkBalanceInUSD = networkBalanceInUSD
+  },
+
   setLoading(loading: SendControllerState['loading']) {
     state.loading = loading
   },
@@ -154,6 +160,54 @@ export const SendController = {
     }
   },
 
+  async fetchNetworkBalance() {
+    const balances = await SwapApiUtil.getMyTokensWithBalance()
+
+    if (!balances) {
+      return
+    }
+
+    const networkToken = balances.find(
+      token => token.address === ChainController.getActiveNetworkTokenAddress()
+    )
+
+    if (!networkToken) {
+      return
+    }
+
+    state.networkBalanceInUSD = networkToken
+      ? NumberUtil.multiply(networkToken.quantity.numeric, networkToken.price).toString()
+      : '0'
+  },
+
+  isInsufficientNetworkTokenForGas(networkBalanceInUSD: string, gasPriceInUSD: number | undefined) {
+    const gasPrice = gasPriceInUSD || '0'
+
+    if (NumberUtil.bigNumber(networkBalanceInUSD).isZero()) {
+      return true
+    }
+
+    return NumberUtil.bigNumber(NumberUtil.bigNumber(gasPrice)).isGreaterThan(networkBalanceInUSD)
+  },
+
+  hasInsufficientGasFunds() {
+    let insufficientNetworkTokenForGas = true
+    if (
+      AccountController.state.preferredAccountType ===
+      W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT
+    ) {
+      // Smart Accounts may pay gas in any ERC20 token
+      insufficientNetworkTokenForGas = false
+    } else if (state.networkBalanceInUSD) {
+      insufficientNetworkTokenForGas = this.isInsufficientNetworkTokenForGas(
+        state.networkBalanceInUSD,
+        state.gasPriceInUSD
+      )
+    }
+
+    return insufficientNetworkTokenForGas
+  },
+
   async sendNativeToken(params: TxParams) {
     RouterController.pushTransactionStack({
       view: 'Account',

packages/scaffold-ui/src/views/w3m-wallet-send-view/index.ts

@@ -39,6 +39,7 @@ export class W3mWalletSendView extends LitElement {
     | 'Add Amount'
     | 'Insufficient Funds'
     | 'Incorrect Value'
+    | 'Insufficient Gas Funds'
     | 'Invalid Address' = 'Preview Send'
 
   public constructor() {
@@ -106,6 +107,8 @@ export class W3mWalletSendView extends LitElement {
   private async fetchNetworkPrice() {
     await SwapController.getNetworkTokenPrice()
     const gas = await SwapController.getInitialGasPrice()
+    await SendController.fetchNetworkBalance()
+
     if (gas?.gasPrice && gas?.gasPriceInUSD) {
       SendController.setGasPrice(gas.gasPrice)
       SendController.setGasPriceInUsd(gas.gasPriceInUSD)
@@ -130,6 +133,10 @@ export class W3mWalletSendView extends LitElement {
       this.message = 'Add Address'
     }
 
+    if (SendController.hasInsufficientGasFunds()) {
+      this.message = 'Insufficient Gas Funds'
+    }
+
     if (
       this.sendTokenAmount &&
       this.token &&