fix: wallet images broken (#3802)

packages/appkit/src/client.ts

@@ -216,7 +216,7 @@ export class AppKit {
       ConnectorController.setFilterByNamespace(options.namespace)
     }
 
-    ModalController.open(options)
+    await ModalController.open(options)
   }
 
   public async close() {

packages/core/src/controllers/ApiController.ts

@@ -270,14 +270,21 @@ export const ApiController = {
     state.search = ApiController._filterOutExtensions(data)
   },
 
-  prefetchWalletImages() {
+  prefetch() {
+    if (state.prefetchPromise) {
+      return state.prefetchPromise
+    }
+
     const promises = [
       ApiController.fetchFeaturedWallets(),
       ApiController.fetchRecommendedWallets(),
-      ApiController.fetchConnectorImages()
+      ApiController.fetchConnectorImages(),
+      ApiController.prefetchNetworkImages()
     ]
 
     state.prefetchPromise = Promise.allSettled(promises)
+
+    return state.prefetchPromise
   },
 
   prefetchAnalyticsConfig() {

packages/core/src/controllers/ModalController.ts

@@ -46,7 +46,7 @@ export const ModalController = {
   },
 
   async open(options?: ModalControllerArguments['open']) {
-    await ApiController.state.prefetchPromise
+    await ApiController.prefetch()
     const caipAddress = ChainController.state.activeCaipAddress
 
     const noAdapters = ChainController.state.noAdapters

packages/core/tests/controllers/ModalController.test.ts

@@ -1,9 +1,13 @@
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { ModalController } from '../../exports/index.js'
+import { ApiController, ModalController } from '../../exports/index.js'
 
 // -- Tests --------------------------------------------------------------------
 describe('ModalController', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   it('should have valid default state', () => {
     expect(ModalController.state.open).toEqual(false)
   })
@@ -18,4 +22,18 @@ describe('ModalController', () => {
     ModalController.close()
     expect(ModalController.state.open).toEqual(false)
   })
+
+  it('should prefetch when open() is called', async () => {
+    vi.spyOn(ApiController, 'fetchFeaturedWallets')
+    vi.spyOn(ApiController, 'fetchRecommendedWallets')
+    vi.spyOn(ApiController, 'fetchConnectorImages')
+    vi.spyOn(ApiController, 'prefetchNetworkImages')
+
+    await ModalController.open()
+
+    expect(ApiController.fetchFeaturedWallets).toHaveBeenCalledOnce()
+    expect(ApiController.fetchRecommendedWallets).toHaveBeenCalledOnce()
+    expect(ApiController.fetchConnectorImages).toHaveBeenCalledOnce()
+    expect(ApiController.prefetchNetworkImages).toHaveBeenCalledOnce()
+  })
 })

packages/scaffold-ui/src/modal/w3m-modal/index.ts

@@ -270,8 +270,7 @@ export class W3mModal extends LitElement {
   private prefetch() {
     if (!this.hasPrefetched) {
       this.hasPrefetched = true
-      ApiController.prefetchWalletImages()
-      ApiController.prefetchNetworkImages()
+      ApiController.prefetch()
     }
   }
 }

packages/scaffold-ui/src/partials/w3m-connector-list/index.ts

@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { ApiController, ConnectorController, OptionsController } from '@reown/appkit-core'
+import { ConnectorController, OptionsController } from '@reown/appkit-core'
 import { customElement } from '@reown/appkit-ui'
 
 import { ConnectorUtil } from '../../utils/ConnectorUtil.js'
@@ -23,12 +23,7 @@ export class W3mConnectorList extends LitElement {
   public constructor() {
     super()
     this.unsubscribe.push(
-      ...[
-        ConnectorController.subscribeKey('connectors', val => (this.connectors = val)),
-        ApiController.subscribeKey('featured', () => this.requestUpdate()),
-        ApiController.subscribeKey('recommended', () => this.requestUpdate()),
-        ApiController.subscribeKey('excludedRDNS', () => this.requestUpdate())
-      ]
+      ConnectorController.subscribeKey('connectors', val => (this.connectors = val))
     )
   }
 

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

@@ -6,7 +6,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { ConstantsUtil } from '@reown/appkit-common'
 import {
-  ApiController,
   ChainController,
   ConnectionController,
   type Connector,
@@ -71,8 +70,7 @@ export class W3mConnectView extends LitElement {
       OptionsController.subscribeKey('enableWallets', val => (this.enableWallets = val)),
       ChainController.subscribeKey('noAdapters', val =>
         this.setEmailAndSocialEnableCheck(this.features, val)
-      ),
-      ApiController.subscribeKey('excludedRDNS', () => this.requestUpdate())
+      )
     )
   }
 

packages/scaffold-ui/test/modal/w3m-account-button.test.ts

@@ -1,4 +1,4 @@
-import { expect, fixture, html } from '@open-wc/testing'
+import { expect, fixture, html, waitUntil } from '@open-wc/testing'
 import { afterEach, describe, it, vi } from 'vitest'
 
 import type { CaipNetwork } from '@reown/appkit-common'
@@ -86,7 +86,7 @@ describe('W3mAccountButton', () => {
 
       await accountButton?.click()
 
-      expect(RouterController.state.view).to.equal('Account')
+      await waitUntil(() => RouterController.state.view === 'Account')
     })
 
     it('should open modal normally when chain is not supported and allowUnsupportedChain is true', async () => {

packages/scaffold-ui/test/modal/w3m-connect-button.test.ts

@@ -65,7 +65,7 @@ describe('W3mConnectButton', () => {
     })
 
     it('updates button text when modal is open', async () => {
-      ModalController.open()
+      await ModalController.open()
       element.requestUpdate()
       await elementUpdated(element)
 

packages/scaffold-ui/test/modal/w3m-modal.test.ts

@@ -32,8 +32,7 @@ describe('W3mModal', () => {
 
     beforeEach(async () => {
       Element.prototype.animate = vi.fn().mockReturnValue({ finished: true })
-      vi.spyOn(ApiController, 'prefetchWalletImages').mockImplementation(() => Promise.resolve())
-      vi.spyOn(ApiController, 'prefetchNetworkImages').mockImplementation(() => Promise.resolve())
+      vi.spyOn(ApiController, 'prefetch').mockImplementation(() => Promise.resolve())
       vi.spyOn(ApiController, 'prefetchAnalyticsConfig').mockImplementation(() => Promise.resolve())
       OptionsController.setEnableEmbedded(true)
       ModalController.close()
@@ -68,19 +67,18 @@ describe('W3mModal', () => {
       expect(ModalController.state.open).toBe(false)
     })
 
-    it('should prefetch wallet and network images when modal is open', async () => {
+    it('should prefetch when modal is open', async () => {
       element = await fixture(html`<w3m-modal .enableEmbedded=${true}></w3m-modal>`)
 
-      expect(ApiController.prefetchWalletImages).toHaveBeenCalled()
-      expect(ApiController.prefetchNetworkImages).toHaveBeenCalled()
+      expect(ApiController.prefetch).toHaveBeenCalled()
     })
   })
 
   describe('Standard Mode', () => {
     let element: W3mModal
 
     beforeEach(async () => {
-      vi.spyOn(ApiController, 'prefetchWalletImages').mockImplementation(() => Promise.resolve())
+      vi.spyOn(ApiController, 'prefetch').mockImplementation(() => Promise.resolve())
       vi.spyOn(ApiController, 'prefetchAnalyticsConfig').mockImplementation(() => Promise.resolve())
       OptionsController.setEnableEmbedded(false)
       ModalController.close()
@@ -95,14 +93,13 @@ describe('W3mModal', () => {
       expect(HelpersUtil.getByTestId(element, 'w3m-modal-overlay')).toBeNull()
     })
 
-    it('should prefetch wallet and network images when modal is open', async () => {
+    it('should prefetch when modal is open', async () => {
       await ModalController.open()
 
       element.requestUpdate()
       await elementUpdated(element)
 
-      expect(ApiController.prefetchWalletImages).toHaveBeenCalled()
-      expect(ApiController.prefetchNetworkImages).toHaveBeenCalled()
+      expect(ApiController.prefetch).toHaveBeenCalled()
     })
 
     it('should be visible when opened', async () => {
@@ -163,8 +160,7 @@ describe('W3mModal', () => {
     let element: W3mModal
 
     beforeEach(async () => {
-      vi.spyOn(ApiController, 'prefetchWalletImages').mockImplementation(() => Promise.resolve())
-      vi.spyOn(ApiController, 'prefetchAnalyticsConfig').mockImplementation(() => Promise.resolve())
+      vi.spyOn(ApiController, 'prefetch').mockImplementation(() => Promise.resolve())
       element = await fixture(html`<w3m-modal></w3m-modal>`)
     })