fix: error handling swap button (#3583)

Co-authored-by: tomiir <[email protected]>
reown-com · Jan 8, 2025 · 34ed47e · 34ed47e
1 parent 7703d40
commit 34ed47e
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 25 deletions.
diff --git a/.changeset/spotty-cheetahs-return.md b/.changeset/spotty-cheetahs-return.md
@@ -0,0 +1,23 @@
+---
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fix an issue where swap button shows an infinite spinner
diff --git a/packages/core/src/controllers/SwapController.ts b/packages/core/src/controllers/SwapController.ts
@@ -17,6 +17,7 @@ import { W3mFrameRpcConstants } from '@reown/appkit-wallet'
 import { StorageUtil } from '../utils/StorageUtil.js'
 import { ChainController } from './ChainController.js'
 import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
+import { AlertController } from './AlertController.js'
 
 // -- Constants ---------------------------------------- //
 export const INITIAL_GAS_LIMIT = 150000
@@ -501,39 +502,52 @@ export const SwapController = {
       .multipliedBy(10 ** sourceToken.decimals)
       .integerValue()
 
-    const quoteResponse = await BlockchainApiController.fetchSwapQuote({
-      userAddress: address,
-      projectId: OptionsController.state.projectId,
-      from: sourceToken.address,
-      to: toToken.address,
-      gasPrice: state.gasFee,
-      amount: amountDecimal.toString()
-    })
+    try {
+      const quoteResponse = await BlockchainApiController.fetchSwapQuote({
+        userAddress: address,
+        projectId: OptionsController.state.projectId,
+        from: sourceToken.address,
+        to: toToken.address,
+        gasPrice: state.gasFee,
+        amount: amountDecimal.toString()
+      })
 
-    state.loadingQuote = false
+      state.loadingQuote = false
 
-    const quoteToAmount = quoteResponse?.quotes?.[0]?.toAmount
+      const quoteToAmount = quoteResponse?.quotes?.[0]?.toAmount
 
-    if (!quoteToAmount) {
-      return
-    }
+      if (!quoteToAmount) {
+        AlertController.open(
+          {
+            shortMessage: 'Incorrect amount',
+            longMessage: 'Please enter a valid amount'
+          },
+          'error'
+        )
 
-    const toTokenAmount = NumberUtil.bigNumber(quoteToAmount)
-      .dividedBy(10 ** toToken.decimals)
-      .toString()
+        return
+      }
 
-    this.setToTokenAmount(toTokenAmount)
+      const toTokenAmount = NumberUtil.bigNumber(quoteToAmount)
+        .dividedBy(10 ** toToken.decimals)
+        .toString()
 
-    const isInsufficientToken = this.hasInsufficientToken(
-      state.sourceTokenAmount,
-      sourceToken.address
-    )
+      this.setToTokenAmount(toTokenAmount)
+
+      const isInsufficientToken = this.hasInsufficientToken(
+        state.sourceTokenAmount,
+        sourceToken.address
+      )
 
-    if (isInsufficientToken) {
+      if (isInsufficientToken) {
+        state.inputError = 'Insufficient balance'
+      } else {
+        state.inputError = undefined
+        this.setTransactionDetails()
+      }
+    } catch (error) {
+      state.loadingQuote = false
       state.inputError = 'Insufficient balance'
-    } else {
-      state.inputError = undefined
-      this.setTransactionDetails()
     }
   },
 

diff --git a/packages/core/tests/controllers/SwapController.test.ts b/packages/core/tests/controllers/SwapController.test.ts
@@ -102,6 +102,25 @@ describe('SwapController', () => {
     expect(SwapController.state.maxSlippage).toEqual(0.0001726)
   })
 
+  it('should handle fetchSwapQuote error correctly', async () => {
+    SwapController.resetState()
+
+    const mockFetchQuote = vi.spyOn(BlockchainApiController, 'fetchSwapQuote')
+    mockFetchQuote.mockRejectedValueOnce(new Error('Quote error'))
+
+    const sourceToken = SwapController.state.tokens?.[0]
+    const toToken = SwapController.state.tokens?.[1]
+    SwapController.setSourceToken(sourceToken)
+    SwapController.setToToken(toToken)
+    SwapController.setSourceTokenAmount('1')
+
+    await SwapController.swapTokens()
+
+    expect(mockFetchQuote).toHaveBeenCalled()
+    expect(SwapController.state.loadingQuote).toBe(false)
+    expect(SwapController.state.inputError).toBe('Insufficient balance')
+  })
+
   it('should reset values as expected', () => {
     SwapController.resetValues()
     expect(SwapController.state.toToken).toEqual(undefined)