fix: sign modal not appearing when going through siwe flow (#2213)

apps/laboratory/package.json

@@ -13,12 +13,14 @@
     "playwright:test:wallet": "playwright test --grep 'connect-qr.spec.ts|wallet.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
     "playwright:test:siwe": "playwright test --grep siwe.spec.ts",
+    "playwright:test:siwe-email": "playwright test --grep siwe-email.spec.ts",
     "playwright:test:sa": "playwright test --grep smart-account.spec.ts",
     "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
     "playwright:debug": "npm run playwright:test -- --debug",
     "playwright:debug:wallet": "npm run playwright:test:wallet -- --debug",
     "playwright:debug:email": "npm run playwright:test:email -- --debug",
     "playwright:debug:siwe": "npm run playwright:test:siwe -- --debug",
+    "playwright:debug:siwe-email": "npm run playwright:test:siwe-email -- --debug",
     "playwright:debug:sa": "npm run playwright:test:sa -- --debug",
     "playwright:debug:canary": "npm run playwright:test:canary -- --debug"
   },

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

@@ -1,8 +1,11 @@
 import type { ModalFixture } from './w3m-fixture'
+import { testMSiwe as siwe } from './w3m-fixture'
 import { ModalPage } from '../pages/ModalPage'
 import { ModalValidator } from '../validators/ModalValidator'
 import { Email } from '../utils/email'
+import { ModalWalletValidator } from '../validators/ModalWalletValidator'
 import { timingFixture } from './timing-fixture'
+import { ModalWalletPage } from '../pages/ModalWalletPage'
 
 export const testMEmail = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],
@@ -25,3 +28,28 @@ export const testMEmail = timingFixture.extend<ModalFixture>({
     await use(modalValidator)
   }
 })
+
+export const testMEmailSiwe = siwe.extend<ModalFixture>({
+  modalPage: async ({ page, library, context }, use, testInfo) => {
+    const modalPage = new ModalWalletPage(page, library, 'all')
+    await modalPage.load()
+
+    const mailsacApiKey = process.env['MAILSAC_API_KEY']
+    if (!mailsacApiKey) {
+      throw new Error('MAILSAC_API_KEY is not set')
+    }
+    const email = new Email(mailsacApiKey)
+    const tempEmail = email.getEmailAddressToUse(testInfo.parallelIndex)
+
+    await modalPage.emailFlow(tempEmail, context, mailsacApiKey)
+    await modalPage.promptSiwe()
+    await modalPage.approveSign()
+    await modalPage.page.waitForTimeout(1000)
+
+    await use(modalPage)
+  },
+  modalValidator: async ({ modalPage }, use) => {
+    const modalValidator = new ModalWalletValidator(modalPage.page)
+    await use(modalValidator)
+  }
+})

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

@@ -7,7 +7,7 @@ import { Email } from '../utils/email'
 import { DeviceRegistrationPage } from './DeviceRegistrationPage'
 import type { TimingRecords } from '../fixtures/timing-fixture'
 
-export type ModalFlavor = 'default' | 'siwe' | 'email' | 'wallet'
+export type ModalFlavor = 'default' | 'siwe' | 'email' | 'wallet' | 'all'
 
 export class ModalPage {
   private readonly baseURL = BASE_URL
@@ -170,7 +170,9 @@ export class ModalPage {
   }
 
   async sign() {
-    await this.page.getByTestId('sign-message-button').click()
+    const signButton = this.page.getByTestId('sign-message-button')
+    await signButton.scrollIntoViewIfNeeded()
+    await signButton.click()
   }
 
   async signatureRequestFrameShouldVisible() {
@@ -210,6 +212,9 @@ export class ModalPage {
 
   async promptSiwe() {
     const siweSign = this.page.getByTestId('w3m-connecting-siwe-sign')
+    await expect(siweSign, 'Siwe prompt sign button should be visible').toBeVisible({
+      timeout: 10_000
+    })
     await expect(siweSign, 'Siwe prompt sign button should be enabled').toBeEnabled()
     await siweSign.click()
   }

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

@@ -6,9 +6,10 @@ import { ModalPage } from './ModalPage'
 export class ModalWalletPage extends ModalPage {
   constructor(
     public override readonly page: Page,
-    public override readonly library: string
+    public override readonly library: string,
+    public override readonly flavor: 'wallet' | 'all' = 'wallet'
   ) {
-    super(page, library, 'wallet')
+    super(page, library, flavor)
   }
 
   async openSettings() {

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

@@ -35,19 +35,19 @@ const braveOptions: UseOptions = {
 }
 
 const customProjectProperties: CustomProjectProperties = {
-  'Desktop Brave/wagmi': {
+  'Desktop Brave/ethers': {
     testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts).*$/u,
     useOptions: braveOptions
   },
-  'Desktop Brave/ethers': {
-    testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts).*$/u,
+  'Desktop Brave/wagmi': {
+    testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts|siwe-email\.spec\.ts).*$/u,
     useOptions: braveOptions
   },
   'Desktop Chrome/wagmi': {
-    testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts).*$/u
+    testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts|siwe-email\.spec\.ts).*$/u
   },
   'Desktop Firefox/wagmi': {
-    testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts).*$/u
+    testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts|siwe-email\.spec\.ts).*$/u
   },
   // Exclude email.spec.ts, siwe.spec.ts, and canary.spec.ts from solana, not yet implemented
   'Desktop Chrome/solana': {

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

@@ -0,0 +1,62 @@
+import { testMEmailSiwe } from './shared/fixtures/w3m-email-fixture'
+import type { ModalWalletPage } from './shared/pages/ModalWalletPage'
+import { ModalWalletValidator } from './shared/validators/ModalWalletValidator'
+
+testMEmailSiwe.beforeEach(async ({ modalValidator }) => {
+  const modalWaletValidator = modalValidator as ModalWalletValidator
+  await modalWaletValidator.expectConnected()
+})
+
+testMEmailSiwe('it should sign with email', async ({ modalPage, modalValidator }) => {
+  const modalWaletValidator = modalValidator as ModalWalletValidator
+  await modalPage.sign()
+  await modalPage.approveSign()
+  await modalWaletValidator.expectAcceptedSign()
+})
+
+testMEmailSiwe('it should reject sign in with email', async ({ modalPage, modalValidator }) => {
+  const modalWaletValidator = modalValidator as ModalWalletValidator
+  await modalPage.sign()
+  await modalPage.rejectSign()
+  await modalWaletValidator.expectRejectedSign()
+})
+
+testMEmailSiwe('it should switch network and sign', async ({ modalPage, modalValidator }) => {
+  const modalWalletValidator = modalValidator as ModalWalletValidator
+  const modalWalletPage = modalPage as ModalWalletPage
+  let targetChain = 'Polygon'
+  await modalWalletPage.openAccount()
+  await modalWalletPage.openSettings()
+  await modalWalletPage.switchNetwork(targetChain)
+  await modalWalletPage.promptSiwe()
+  await modalWalletPage.approveSign()
+  await modalWalletValidator.expectSwitchedNetwork(targetChain)
+  await modalWalletPage.closeModal()
+
+  await modalWalletPage.sign()
+  await modalWalletPage.approveSign()
+  await modalWalletValidator.expectAcceptedSign()
+
+  targetChain = 'Ethereum'
+  await modalWalletPage.openAccount()
+  await modalWalletPage.openSettings()
+  await modalWalletPage.switchNetwork(targetChain)
+  await modalWalletPage.promptSiwe()
+  await modalWalletPage.approveSign()
+  await modalWalletValidator.expectSwitchedNetwork(targetChain)
+  await modalWalletPage.closeModal()
+
+  await modalWalletPage.sign()
+  await modalWalletPage.approveSign()
+  await modalWalletValidator.expectAcceptedSign()
+})
+
+testMEmailSiwe('it should disconnect correctly', async ({ modalPage, modalValidator }) => {
+  const modalWaletValidator = modalValidator as ModalWalletValidator
+  const modalWalletPage = modalPage as ModalWalletPage
+
+  await modalWalletPage.openAccount()
+  await modalWalletPage.openSettings()
+  await modalWalletPage.disconnect()
+  await modalWaletValidator.expectDisconnected()
+})

apps/laboratory/tests/siwe.spec.ts

@@ -1,12 +1,14 @@
 import { DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMWSiwe } from './shared/fixtures/w3m-wallet-fixture'
 
+// Setup
 testMWSiwe.beforeEach(async ({ modalPage, walletPage }) => {
   const uri = await modalPage.getConnectUri()
   await walletPage.connectWithUri(uri)
   await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
 })
 
+// Cleanup
 testMWSiwe.afterEach(async ({ modalValidator, walletValidator, browserName }) => {
   if (browserName === 'firefox') {
     return

packages/core/src/controllers/ConnectorController.ts

@@ -37,7 +37,6 @@ export const ConnectorController = {
       const optionsState = snapshot(OptionsController.state) as typeof OptionsController.state
       const themeMode = ThemeController.getSnapshot().themeMode
       const themeVariables = ThemeController.getSnapshot().themeVariables
-
       emailConnector?.provider?.syncDappData?.({
         metadata: optionsState.metadata,
         sdkVersion: optionsState.sdkVersion,

packages/core/src/controllers/OptionsController.ts

@@ -1,5 +1,5 @@
 import { subscribeKey as subKey } from 'valtio/vanilla/utils'
-import { proxy } from 'valtio/vanilla'
+import { proxy, snapshot } from 'valtio/vanilla'
 import type { CustomWallet, Metadata, ProjectId, SdkVersion, Tokens } from '../utils/TypeUtil.js'
 
 // -- Types --------------------------------------------- //
@@ -97,5 +97,9 @@ export const OptionsController = {
 
   setWalletFeaturesEnabled(enableWalletFeatures: OptionsControllerState['enableWalletFeatures']) {
     state.enableWalletFeatures = enableWalletFeatures
+  },
+
+  getSnapshot() {
+    return snapshot(state)
   }
 }

packages/scaffold/src/client.ts

@@ -264,8 +264,6 @@ export class Web3ModalScaffold {
     OptionsController.setEnableAnalytics(options.enableAnalytics)
     OptionsController.setSdkVersion(options._sdkVersion)
 
-    ConnectionController.setClient(options.connectionControllerClient)
-
     if (options.siweControllerClient) {
       const { SIWEController } = await import('@web3modal/siwe')
 
@@ -295,6 +293,7 @@ export class Web3ModalScaffold {
     if (options.allowUnsupportedChain) {
       NetworkController.setAllowUnsupportedChain(options.allowUnsupportedChain)
     }
+    ConnectionController.setClient(options.connectionControllerClient)
   }
 
   private async initOrContinue() {

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

@@ -13,7 +13,7 @@ import { UiHelperUtil, customElement, initializeTheming } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { state } from 'lit/decorators.js'
 import styles from './styles.js'
-import type { AccountControllerState } from '@web3modal/core'
+import type { CaipAddress } from '@web3modal/core'
 
 // -- Helpers --------------------------------------------- //
 const SCROLL_LOCK = 'scroll-lock'
@@ -34,13 +34,16 @@ export class W3mModal extends LitElement {
 
   @state() private isSiweEnabled = OptionsController.state.isSiweEnabled
 
+  @state() private connected = AccountController.state.isConnected
+
   public constructor() {
     super()
     this.initializeTheming()
     ApiController.prefetch()
     this.unsubscribe.push(
       ModalController.subscribeKey('open', val => (val ? this.onOpen() : this.onClose())),
-      AccountController.subscribe(newAccountState => this.onNewAccountState(newAccountState))
+      AccountController.subscribeKey('isConnected', val => (this.connected = val)),
+      AccountController.subscribeKey('caipAddress', val => this.onNewAddress(val))
     )
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' })
   }
@@ -153,30 +156,28 @@ export class W3mModal extends LitElement {
     this.abortController = undefined
   }
 
-  private async onNewAccountState(newState: AccountControllerState) {
-    const { isConnected, caipAddress: newCaipAddress } = newState
-
+  private async onNewAddress(caipAddress?: CaipAddress) {
     if (this.isSiweEnabled) {
       const { SIWEController } = await import('@web3modal/siwe')
 
-      if (isConnected && !this.caipAddress) {
-        this.caipAddress = newCaipAddress
+      if (this.connected && !this.caipAddress) {
+        this.caipAddress = caipAddress
       }
-      if (isConnected && newCaipAddress && this.caipAddress !== newCaipAddress) {
+      if (this.connected && caipAddress && this.caipAddress !== caipAddress) {
         await SIWEController.signOut()
         this.onSiweNavigation()
-        this.caipAddress = newCaipAddress
+        this.caipAddress = caipAddress
       }
 
       try {
         const session = await SIWEController.getSession()
-        if (session && !isConnected) {
+        if (session && !this.connected) {
           await SIWEController.signOut()
-        } else if (isConnected && !session) {
+        } else if (this.connected && !session) {
           this.onSiweNavigation()
         }
       } catch (error) {
-        if (isConnected) {
+        if (this.connected) {
           this.onSiweNavigation()
         }
       }

packages/siwe/src/client.ts

@@ -109,7 +109,10 @@ export class Web3ModalSIWEClient {
     })
     const type = StorageUtil.getConnectedConnector()
     if (type === 'EMAIL') {
-      RouterController.push('ApproveTransaction')
+      RouterController.pushTransactionStack({
+        view: null,
+        goBack: true
+      })
     }
     const signature = await ConnectionController.signMessage(message)
     const isValid = await this.methods.verifyMessage({ message, signature })

packages/ui/src/utils/UiHelperUtil.ts

@@ -17,9 +17,13 @@ export const UiHelperUtil = {
   },
 
   getHostName(url: string) {
-    const newUrl = new URL(url)
+    try {
+      const newUrl = new URL(url)
 
-    return newUrl.hostname
+      return newUrl.hostname
+    } catch (error) {
+      return ''
+    }
   },
 
   getTruncateString({ string, charsStart, charsEnd, truncate }: TruncateOptions) {