fix: Connector image mismatch (#2745)

apps/laboratory/tests/basic-tests.spec.ts

@@ -14,7 +14,7 @@ testM.describe('Modal only tests', () => {
     await expect(modalPage.page.getByTestId('all-wallets')).toBeVisible()
   })
 
-  testM.only('Should show socials enabled by default', async ({ modalPage }) => {
+  testM('Should show socials enabled by default', async ({ modalPage }) => {
     const modalValidator = new ModalValidator(modalPage.page)
     await modalPage.page.getByTestId('connect-button').click()
     await modalValidator.expectSocialsVisible()

apps/laboratory/tests/email.spec.ts

@@ -19,11 +19,11 @@ const emailTest = test.extend<{ library: string }>({
 emailTest.describe.configure({ mode: 'serial' })
 
 emailTest.beforeAll(async ({ browser, library }) => {
-  emailTest.setTimeout(180000)
+  emailTest.setTimeout(300000)
   context = await browser.newContext()
   browserPage = await context.newPage()
 
-  page = new ModalWalletPage(browserPage, library, 'email')
+  page = new ModalWalletPage(browserPage, library, 'default')
   validator = new ModalWalletValidator(browserPage)
 
   await page.load()
@@ -80,10 +80,9 @@ emailTest('it should switch network and sign', async ({ library }) => {
   targetChain = 'Ethereum'
   await page.goToSettings()
   await page.switchNetwork(targetChain)
-  if (library === 'wagmi') {
-    // In wagmi, after switching network, it closes the modal
-    await page.goToSettings()
-  }
+  // After switching network, it closes the modal
+  await page.goToSettings()
+
   await validator.expectSwitchedNetwork(targetChain)
   await page.closeModal()
   await page.sign()

apps/laboratory/tests/shared/fixtures/w3m-fixture.ts

@@ -27,7 +27,7 @@ export const testM = timingFixture.extend<ModalFixture>({
 export const testMSiwe = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],
   modalPage: async ({ page, library }, use) => {
-    const modalPage = new ModalPage(page, library, 'siwe')
+    const modalPage = new ModalPage(page, library, 'all')
     await modalPage.load()
     await use(modalPage)
   }

apps/laboratory/tests/shared/fixtures/w3m-social-fixture.ts

@@ -10,7 +10,7 @@ export const testMSocial = timingFixture.extend<
   library: ['wagmi', { option: true }],
   social: ['github'],
   modalPage: async ({ page, library }, use) => {
-    const modalPage = new ModalPage(page, library, 'email')
+    const modalPage = new ModalPage(page, library, 'default')
     await modalPage.load()
 
     const socialMail = process.env['SOCIAL_TEST_EMAIL']

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -14,9 +14,6 @@ const maliciousUrl = 'https://malicious-app-verify-simulation.vercel.app'
 
 export type ModalFlavor =
   | 'default'
-  | 'siwe'
-  | 'email'
-  | 'wallet'
   | 'external'
   | 'verify-valid'
   | 'verify-domain-mismatch'

apps/laboratory/tests/shared/pages/ModalWalletPage.ts

@@ -7,7 +7,7 @@ export class ModalWalletPage extends ModalPage {
   constructor(
     public override readonly page: Page,
     public override readonly library: string,
-    public override readonly flavor: 'email' | 'all' = 'email'
+    public override readonly flavor: 'default' | 'all'
   ) {
     super(page, library, flavor)
   }

apps/laboratory/tests/shared/utils/project.ts

@@ -47,7 +47,16 @@ const SOLANA_DISABLED_TESTS = [
 ]
 const WAGMI_DISABLED_TESTS = ['metamask.spec.ts', 'smart-account.spec.ts', 'verify.spec.ts']
 const ETHERS_DISABLED_TESTS = ['metamask.spec.ts', 'verify.spec.ts']
-const ETHERS5_DISABLED_TESTS = ['metamask.spec.ts', 'verify.spec.ts', 'smart-account.spec.ts']
+const ETHERS5_DISABLED_TESTS = [
+  'metamask.spec.ts',
+  'verify.spec.ts',
+  'smart-account.spec.ts',
+  'email.spec.ts',
+  'smart-account.spec.ts',
+  'wallet-features.spec.ts',
+  'siwe-email.spec.ts',
+  'siwe-sa.spec.ts'
+]
 
 const ETHERS_EMAIL_BASED_REGEX = new RegExp(ETHERS_DISABLED_TESTS.join('|'), 'u')
 const ETHERS5_EMAIL_BASED_REGEX = new RegExp(ETHERS5_DISABLED_TESTS.join('|'), 'u')

apps/laboratory/tests/siwe-email.spec.ts

@@ -18,7 +18,7 @@ const emailSiweTest = test.extend<{ library: string }>({
 emailSiweTest.describe.configure({ mode: 'serial' })
 
 emailSiweTest.beforeAll(async ({ browser, library }) => {
-  emailSiweTest.setTimeout(180000)
+  emailSiweTest.setTimeout(300000)
   context = await browser.newContext()
   const browserPage = await context.newPage()
 

apps/laboratory/tests/siwe-sa.spec.ts

@@ -18,7 +18,7 @@ const smartAccountSiweTest = test.extend<{ library: string }>({
 smartAccountSiweTest.describe.configure({ mode: 'serial' })
 
 smartAccountSiweTest.beforeAll(async ({ browser, library }) => {
-  smartAccountSiweTest.setTimeout(180000)
+  smartAccountSiweTest.setTimeout(300000)
   context = await browser.newContext()
   const browserPage = await context.newPage()
 

apps/laboratory/tests/siwe.spec.ts

@@ -21,7 +21,7 @@ siweWalletTest.beforeAll(async ({ browser, library }) => {
   context = await browser.newContext()
   const browserPage = await context.newPage()
 
-  modalPage = new ModalPage(browserPage, library, 'siwe')
+  modalPage = new ModalPage(browserPage, library, 'all')
   walletPage = new WalletPage(await context.newPage())
   modalValidator = new ModalValidator(browserPage)
 

apps/laboratory/tests/smart-account.spec.ts

@@ -17,11 +17,11 @@ const smartAccountTest = test.extend<{ library: string }>({
 smartAccountTest.describe.configure({ mode: 'serial' })
 
 smartAccountTest.beforeAll(async ({ browser, library }) => {
-  smartAccountTest.setTimeout(180000)
+  smartAccountTest.setTimeout(300000)
   context = await browser.newContext()
   const browserPage = await context.newPage()
 
-  page = new ModalWalletPage(browserPage, library)
+  page = new ModalWalletPage(browserPage, library, 'default')
   validator = new ModalWalletValidator(browserPage)
 
   await page.load()

apps/laboratory/tests/wallet-features.spec.ts

@@ -17,11 +17,11 @@ const walletFeaturesTest = test.extend<{ library: string }>({
 walletFeaturesTest.describe.configure({ mode: 'serial' })
 
 walletFeaturesTest.beforeAll(async ({ browser, library }) => {
-  walletFeaturesTest.setTimeout(180000)
+  walletFeaturesTest.setTimeout(300000)
   context = await browser.newContext()
   const browserPage = await context.newPage()
 
-  page = new ModalWalletPage(browserPage, library, 'email')
+  page = new ModalWalletPage(browserPage, library, 'default')
   validator = new ModalWalletValidator(browserPage)
 
   await page.load()

dangerfile.ts

@@ -284,13 +284,15 @@ async function checkScaffoldHtmlPackage() {
 checkScaffoldHtmlPackage()
 
 // -- Client(s) Package Checks ----------------------------------------------------
+
 // -- Helper functions
-const isRelativeImport = (addition: string | undefined) => {
+function isRelativeImport(addition: string | undefined) {
   const sameDir = addition?.includes(RELATIVE_IMPORT_SAME_DIR)
   const parentDir = addition?.includes(RELATIVE_IMPORT_PARENT_DIR)
+
   return sameDir || parentDir
 }
-const containsRelativeImportWithoutJSExtension = (addition: string | undefined) => {
+function containsRelativeImportWithoutJSExtension(addition: string | undefined) {
   const hasImportStatement = addition?.includes('import')
   const lacksJSExtension = !addition?.includes(RELATIVE_IMPORT_EXTENSION)
   const hasRelativePath = isRelativeImport(addition)
@@ -352,6 +354,15 @@ async function checkLaboratory() {
       warn('Testing spec changed')
     }
   }
+
+  // Check that no .only is present in tests
+  const test_files = lab_files.filter(f => f.includes('.spec.ts'))
+  for (const f of test_files) {
+    const fileContent = await danger.github.utils.fileContents(f)
+    if (fileContent.includes('.only')) {
+      fail(`${f} contains .only, please remove it`)
+    }
+  }
 }
 
 checkLaboratory()

packages/base/adapters/evm/ethers/client.ts

@@ -817,6 +817,7 @@ export class EVMEthersClient {
       EthersStoreUtil.setProvider(WalletConnectProvider as unknown as Provider)
       EthersStoreUtil.setStatus('connected')
       EthersStoreUtil.setIsConnected(true)
+
       this.appKit?.setAllAccounts(
         WalletConnectProvider.accounts.map(address => ({ address, type: 'eoa' })),
         this.chain
@@ -1336,7 +1337,6 @@ export class EVMEthersClient {
       }
     } else if (providerType === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID) {
       const provider = EthersStoreUtil.state.provider as unknown as EthereumProvider
-
       if (provider.session) {
         this.appKit?.setConnectedWalletInfo(
           {
@@ -1347,6 +1347,18 @@ export class EVMEthersClient {
           this.chain
         )
       }
+    } else if (providerType === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID) {
+      const connector = this.appKit
+        ?.getConnectors()
+        .find(c => c.id === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID)
+
+      this.appKit?.setConnectedWalletInfo(
+        {
+          name: 'Coinbase Wallet',
+          icon: this.appKit?.getConnectorImage(connector)
+        },
+        this.chain
+      )
     } else if (currentActiveWallet) {
       this.appKit?.setConnectedWalletInfo({ name: currentActiveWallet }, this.chain)
     }

packages/base/adapters/evm/wagmi/client.ts

@@ -624,8 +624,12 @@ export class EVMWagmiClient {
         )
       }
     } else {
+      const wagmiConnector = this.appKit?.getConnectors().find(c => c.id === connector.id)
       this.appKit?.setConnectedWalletInfo(
-        { name: connector.name, icon: connector.icon },
+        {
+          name: connector.name,
+          icon: connector.icon || this.appKit.getConnectorImage(wagmiConnector)
+        },
         this.chain
       )
     }

packages/base/adapters/solana/web3js/client.ts

@@ -301,6 +301,27 @@ export class SolanaWeb3JsClient {
   }
 
   // -- Private -----------------------------------------------------------------
+  private syncConnectedWalletInfo() {
+    const currentActiveWallet = window?.localStorage.getItem(SolConstantsUtil.WALLET_ID)
+    const provider = SolStoreUtil.state.provider
+
+    if (provider?.type === 'WALLET_CONNECT') {
+      const wcProvider = provider as WalletConnectProvider
+      if (wcProvider.session) {
+        this.appKit?.setConnectedWalletInfo(
+          {
+            ...wcProvider.session.peer.metadata,
+            name: wcProvider.session.peer.metadata.name,
+            icon: wcProvider.session.peer.metadata.icons?.[0]
+          },
+          this.chain
+        )
+      }
+    } else if (currentActiveWallet) {
+      this.appKit?.setConnectedWalletInfo({ name: currentActiveWallet }, this.chain)
+    }
+  }
+
   private async syncAccount() {
     const address = SolStoreUtil.state.address
     const chainId = SolStoreUtil.state.currentChain?.chainId
@@ -309,6 +330,7 @@ export class SolanaWeb3JsClient {
       const caipAddress: CaipAddress = `${ConstantsUtil.INJECTED_CONNECTOR_ID}:${chainId}:${address}`
       this.appKit?.setCaipAddress(caipAddress, this.chain)
       await this.syncBalance(address)
+      this.syncConnectedWalletInfo()
 
       this.hasSyncedConnectedAccount = true
     } else if (this.hasSyncedConnectedAccount) {

packages/base/adapters/solana/web3js/providers/WalletConnectProvider.ts

@@ -32,7 +32,7 @@ export class WalletConnectProvider extends ProviderEventEmitter implements Provi
     'https://imagedelivery.net/_aTEfDRm7z3tKgu9JhfeKA/05338e12-4f75-4982-4e8a-83c67b826b00/md'
 
   private provider: UniversalProvider
-  private session?: SessionTypes.Struct
+  public session?: SessionTypes.Struct
   private readonly requestedChains: Chain[]
   private readonly getActiveChain: WalletConnectProviderConfig['getActiveChain']
 

packages/base/src/client.ts

@@ -23,7 +23,8 @@ import {
   RouterController,
   EnsController,
   OptionsController,
-  NetworkController
+  NetworkController,
+  AssetUtil
 } from '@web3modal/core'
 import { setColorTheme, setThemeVariables } from '@web3modal/ui'
 import { ConstantsUtil, type Chain } from '@web3modal/common'
@@ -298,6 +299,9 @@ export class AppKit {
     BlockchainApiController.setClientId(clientId)
   }
 
+  public getConnectorImage: (typeof AssetUtil)['getConnectorImage'] = connector =>
+    AssetUtil.getConnectorImage(connector)
+
   // -- Private ------------------------------------------------------------------
   private async initControllers(options: AppKitOptions) {
     OptionsController.setProjectId(options.projectId)

packages/core/src/controllers/ConnectionController.ts

@@ -184,7 +184,6 @@ export const ConnectionController = {
 
     try {
       await client.disconnect()
-      StorageUtil.removeConnectedWalletImageUrl()
       this.resetWcConnection()
     } catch (error) {
       throw new Error('Failed to disconnect')

packages/core/src/utils/StorageUtil.ts

@@ -4,7 +4,6 @@ import type { WcWallet, ConnectorType, SocialProvider } from './TypeUtil.js'
 // -- Helpers -----------------------------------------------------------------
 const WC_DEEPLINK = 'WALLETCONNECT_DEEPLINK_CHOICE'
 const W3M_RECENT = '@w3m/recent'
-const W3M_CONNECTED_WALLET_IMAGE_URL = '@w3m/connected_wallet_image_url'
 const W3M_CONNECTED_CONNECTOR = '@w3m/connected_connector'
 const W3M_CONNECTED_SOCIAL = '@w3m/connected_social'
 const W3M_CONNECTED_SOCIAL_USERNAME = '@w3m-storage/SOCIAL_USERNAME'
@@ -68,32 +67,6 @@ export const StorageUtil = {
     return []
   },
 
-  setConnectedWalletImageUrl(imageUrl: string) {
-    try {
-      localStorage.setItem(W3M_CONNECTED_WALLET_IMAGE_URL, imageUrl)
-    } catch {
-      console.info('Unable to set Connected Wallet Image Url')
-    }
-  },
-
-  removeConnectedWalletImageUrl() {
-    try {
-      localStorage.removeItem(W3M_CONNECTED_WALLET_IMAGE_URL)
-    } catch {
-      console.info('Unable to remove Connected Wallet Image Url')
-    }
-  },
-
-  getConnectedWalletImageUrl() {
-    try {
-      return localStorage.getItem(W3M_CONNECTED_WALLET_IMAGE_URL)
-    } catch {
-      console.info('Unable to set Connected Wallet Image Url')
-    }
-
-    return undefined
-  },
-
   setConnectedConnector(connectorType: ConnectorType) {
     try {
       localStorage.setItem(W3M_CONNECTED_CONNECTOR, connectorType)

packages/scaffold-ui/src/partials/w3m-connect-coinbase-widget/index.ts

@@ -6,8 +6,7 @@ import {
   EventsController,
   ModalController,
   OptionsController,
-  RouterController,
-  StorageUtil
+  RouterController
 } from '@web3modal/core'
 import { ConstantsUtil } from '@web3modal/scaffold-utils'
 import { customElement } from '@web3modal/ui'
@@ -68,10 +67,6 @@ export class W3mConnectCoinbaseWidget extends LitElement {
     try {
       ConnectionController.setWcError(false)
 
-      if (connector.imageUrl) {
-        StorageUtil.setConnectedWalletImageUrl(connector.imageUrl)
-      }
-
       await ConnectionController.connectExternal(connector, connector.chain)
 
       if (OptionsController.state.isSiweEnabled) {

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

@@ -4,8 +4,7 @@ import {
   EventsController,
   ModalController,
   OptionsController,
-  RouterController,
-  StorageUtil
+  RouterController
 } from '@web3modal/core'
 import { ConstantsUtil } from '@web3modal/scaffold-utils'
 import { customElement } from '@web3modal/ui'
@@ -37,9 +36,6 @@ export class W3mConnectingExternalView extends W3mConnectingWidget {
     try {
       this.error = false
       if (this.connector) {
-        if (this.connector.imageUrl) {
-          StorageUtil.setConnectedWalletImageUrl(this.connector.imageUrl)
-        }
         /**
          * Coinbase SDK works with popups and popups requires user interaction to be opened since modern browsers block popups which triggered programmatically.
          * Instead of opening a popup in first render for `W3mConnectingWidget`, we need to trigger connection for Coinbase connector specifically when users select it.