fix: Do not show error message if payWithExchange is not enabled (#4908)

Author: tomiir

.changeset/khaki-experts-yell.md

@@ -0,0 +1,5 @@
+---
+'@reown/appkit-controllers': patch
+---
+
+Fixes issue where an error snack would be shown on non-enabled pay with exchange projects

packages/controllers/src/controllers/ExchangeController.ts

@@ -4,6 +4,7 @@ import { subscribeKey as subKey } from 'valtio/vanilla/utils'
 import { type CaipNetworkId } from '@reown/appkit-common'
 
 import { getActiveNetworkTokenAddress } from '../utils/ChainControllerUtil.js'
+import { ConstantsUtil } from '../utils/ConstantsUtil.js'
 import { CoreHelperUtil } from '../utils/CoreHelperUtil.js'
 import {
   type GetBuyStatusResult,
@@ -16,7 +17,9 @@ import {
 import type { CurrentPayment, Exchange, PayUrlParams, PaymentAsset } from '../utils/ExchangeUtil.js'
 import { AccountController } from './AccountController.js'
 import { BlockchainApiController } from './BlockchainApiController.js'
+import { ChainController } from './ChainController.js'
 import { EventsController } from './EventsController.js'
+import { OptionsController } from './OptionsController.js'
 import { SnackController } from './SnackController.js'
 
 // -- Constants ----------------------------------------- //
@@ -135,10 +138,30 @@ export const ExchangeController = {
     state.paymentAsset = asset
   },
 
+  isPayWithExchangeEnabled() {
+    return (
+      OptionsController.state.remoteFeatures?.payWithExchange ||
+      OptionsController.state.remoteFeatures?.payments ||
+      OptionsController.state.features?.pay
+    )
+  },
+
+  isPayWithExchangeSupported() {
+    return (
+      ExchangeController.isPayWithExchangeEnabled() &&
+      ChainController.state.activeCaipNetwork &&
+      ConstantsUtil.PAY_WITH_EXCHANGE_SUPPORTED_CHAIN_NAMESPACES.includes(
+        ChainController.state.activeCaipNetwork.chainNamespace
+      )
+    )
+  },
+
   // -- Getters ----------------------------------------- //
   async fetchExchanges() {
     try {
-      if (!state.paymentAsset) {
+      const isPayWithExchangeSupported = ExchangeController.isPayWithExchangeSupported()
+
+      if (!state.paymentAsset || !isPayWithExchangeSupported) {
         state.exchanges = []
         state.isLoading = false
 

packages/controllers/tests/controllers/ExchangeController.test.ts

@@ -1,8 +1,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { ChainController } from '../../exports'
 import { AccountController } from '../../src/controllers/AccountController'
 import { EventsController } from '../../src/controllers/EventsController'
 import { ExchangeController } from '../../src/controllers/ExchangeController'
+import { OptionsController } from '../../src/controllers/OptionsController'
 import { SnackController } from '../../src/controllers/SnackController'
 import { CoreHelperUtil } from '../../src/utils/CoreHelperUtil'
 import * as ExchangeUtil from '../../src/utils/ExchangeUtil'
@@ -43,6 +45,30 @@ describe('ExchangeController', () => {
   })
 
   describe('fetchExchanges', () => {
+    beforeEach(() => {
+      vi.restoreAllMocks()
+      vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+        remoteFeatures: { payWithExchange: true },
+        features: { pay: true }
+      } as any)
+      ChainController.state.activeCaipNetwork = {
+        caipNetworkId: 'eip155:1',
+        chainNamespace: 'eip155',
+        id: 1,
+        name: 'Ethereum',
+        nativeCurrency: { name: 'Ethereum', symbol: 'ETH', decimals: 18 },
+        rpcUrls: {
+          default: {
+            http: ['https://rpc.ankr.com/eth']
+          }
+        }
+      }
+      vi.spyOn(ExchangeUtil, 'getExchanges').mockResolvedValue({
+        exchanges: [],
+        total: 0
+      })
+    })
+
     it('loads exchanges and truncates to two', async () => {
       const mockResponse = {
         exchanges: [
@@ -95,6 +121,62 @@ describe('ExchangeController', () => {
       expect(SnackController.showError).toHaveBeenCalledWith('Unable to get exchanges')
       expect(ExchangeController.state.isLoading).toBe(false)
     })
+
+    it('does not fetch exchanges when pay with exchange is not enabled', async () => {
+      vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+        remoteFeatures: { payWithExchange: false },
+        features: { pay: false }
+      } as any)
+      vi.spyOn(ExchangeUtil, 'getExchanges')
+      await ExchangeController.fetchExchanges()
+      expect(ExchangeUtil.getExchanges).not.toHaveBeenCalled()
+    })
+
+    it('does not fetch exchanges when pay with exchange is not supported', async () => {
+      vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+        remoteFeatures: { payWithExchange: true },
+        features: { pay: true }
+      } as any)
+      vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
+        activeCaipNetwork: { chainNamespace: 'bip122' }
+      } as any)
+      vi.spyOn(ExchangeUtil, 'getExchanges')
+      await ExchangeController.fetchExchanges()
+      expect(ExchangeUtil.getExchanges).not.toHaveBeenCalled()
+    })
+    it('fetches exchanges when pay is enabled but pay with exchange is not', async () => {
+      vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+        remoteFeatures: { payWithExchange: false },
+        features: { pay: true }
+      } as any)
+      vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
+        activeCaipNetwork: { chainNamespace: 'eip155' }
+      } as any)
+      vi.spyOn(ExchangeUtil, 'getExchanges')
+      await ExchangeController.fetchExchanges()
+      expect(ExchangeUtil.getExchanges).toHaveBeenCalled()
+    })
+    it('fetches exchanges when pay with exchange is enabled but pay is not', async () => {
+      vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+        remoteFeatures: { payWithExchange: true },
+        features: { pay: false }
+      } as any)
+      vi.spyOn(ChainController, 'state', 'get').mockReturnValue({
+        activeCaipNetwork: { chainNamespace: 'eip155' }
+      } as any)
+      vi.spyOn(ExchangeUtil, 'getExchanges')
+      await ExchangeController.fetchExchanges()
+      expect(ExchangeUtil.getExchanges).toHaveBeenCalled()
+    })
+    it('fetches exchanges when payments is enabled and pay with exchange is not', async () => {
+      vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+        remoteFeatures: { payWithExchange: false, payments: true },
+        features: { pay: false }
+      } as any)
+      vi.spyOn(ExchangeUtil, 'getExchanges')
+      await ExchangeController.fetchExchanges()
+      expect(ExchangeUtil.getExchanges).toHaveBeenCalled()
+    })
   })
 
   describe('getPayUrl', () => {

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

@@ -46,8 +46,11 @@ export class W3mFundWalletView extends LitElement {
   }
 
   public override async firstUpdated() {
-    await this.setDefaultPaymentAsset()
-    await ExchangeController.fetchExchanges()
+    const isPayWithExchangeSupported = ExchangeController.isPayWithExchangeSupported()
+    if (isPayWithExchangeSupported) {
+      await this.setDefaultPaymentAsset()
+      await ExchangeController.fetchExchanges()
+    }
   }
 
   // -- Render -------------------------------------------- //
@@ -104,13 +107,8 @@ export class W3mFundWalletView extends LitElement {
       return null
     }
 
-    const isPayWithExchangeEnabled =
-      this.remoteFeatures?.payWithExchange &&
-      CoreConstantsUtil.PAY_WITH_EXCHANGE_SUPPORTED_CHAIN_NAMESPACES.includes(
-        this.activeCaipNetwork.chainNamespace
-      )
-
-    if (!isPayWithExchangeEnabled) {
+    const isPayWithExchangeSupported = ExchangeController.isPayWithExchangeSupported()
+    if (!isPayWithExchangeSupported) {
       return null
     }