fix: sign modal not appearing when going through siwe flow

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,29 @@ 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.page.waitForTimeout(1000)
+    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
@@ -173,7 +173,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() {
@@ -213,6 +215,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,64 @@
+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.page.waitForTimeout(1000)
+  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.page.waitForTimeout(1000)
+  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)
   }
 }