chore: improve sa + siwe flow. Add loading for auth connector setup i…

…n ethers

apps/laboratory/package.json

@@ -24,7 +24,7 @@
     "playwright:debug:social": "npm run playwright:test:social -- --debug",
     "playwright:debug:siwe": "npm run playwright:test:siwe -- --debug",
     "playwright:debug:siwe-email": "npm run playwright:test:siwe-email -- --debug",
-    "playwright:debug:siwe-sa": "npm run playwright:test:siwe-smart-account -- --debug",
+    "playwright:debug:siwe-sa": "npm run playwright:test:siwe-sa -- --debug",
     "playwright:debug:sa": "npm run playwright:test:sa -- --debug",
     "playwright:debug:canary": "npm run playwright:test:canary -- --debug"
   },

apps/laboratory/src/utils/SiweUtils.ts

@@ -10,7 +10,8 @@ export const siweConfig = createSIWEConfig({
     domain: window.location.host,
     uri: window.location.origin,
     chains: WagmiConstantsUtil.chains.map(chain => chain.id),
-    statement: 'Please sign with your account'
+    statement: 'Please sign with your account',
+    iat: new Date().toISOString()
   }),
   createMessage: ({ address, ...args }: SIWECreateMessageArgs) => formatMessage(args, address),
   getNonce: async () => {

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

@@ -29,25 +29,29 @@ export const testMEmail = timingFixture.extend<ModalFixture>({
   }
 })
 
-export const testMEmailSiwe = siwe.extend<ModalFixture>({
-  modalPage: async ({ page, library, context }, use, testInfo) => {
-    const modalPage = new ModalWalletPage(page, library, 'all')
-    await modalPage.load()
+export const testMEmailSiwe = timingFixture.extend<ModalFixture>({
+  library: ['wagmi', { option: true }],
+  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)
+      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 modalPage.emailFlow(tempEmail, context, mailsacApiKey)
+      await modalPage.promptSiwe()
+      await modalPage.approveSign()
+      await modalPage.page.waitForTimeout(1000)
 
-    await use(modalPage)
-  },
+      await use(modalPage)
+    },
+    { timeout: 90_000 }
+  ],
   modalValidator: async ({ modalPage }, use) => {
     const modalValidator = new ModalWalletValidator(modalPage.page)
     await use(modalValidator)

packages/ethers/src/client.ts

@@ -772,6 +772,7 @@ export class Web3Modal extends Web3ModalScaffold {
     window?.localStorage.setItem(EthersConstantsUtil.WALLET_ID, ConstantsUtil.AUTH_CONNECTOR_ID)
 
     if (this.authProvider) {
+      super.setLoading(true)
       const { address, chainId, smartAccountDeployed, preferredAccountType } =
         await this.authProvider.connect({ chainId: this.getChainId() })
 
@@ -1010,12 +1011,13 @@ export class Web3Modal extends Web3ModalScaffold {
         if (!address) {
           return
         }
+        super.setLoading(true)
         const chainId = NetworkUtil.caipNetworkIdToNumber(this.getCaipNetwork()?.id)
         EthersStoreUtil.setAddress(address as Address)
         EthersStoreUtil.setChainId(chainId)
         EthersStoreUtil.setIsConnected(true)
         EthersStoreUtil.setPreferredAccountType(type as W3mFrameTypes.AccountType)
-        this.syncAccount()
+        this.syncAccount().then(() => super.setLoading(false))
       })
     }
   }
@@ -1282,6 +1284,7 @@ export class Web3Modal extends Web3ModalScaffold {
       } else if (providerType === ConstantsUtil.AUTH_CONNECTOR_ID) {
         if (this.authProvider && chain?.chainId) {
           try {
+            super.setLoading(true)
             await this.authProvider.switchNetwork(chain?.chainId)
             EthersStoreUtil.setChainId(chain.chainId)
 
@@ -1296,6 +1299,8 @@ export class Web3Modal extends Web3ModalScaffold {
             await this.syncAccount()
           } catch {
             throw new Error('Switching chain failed')
+          } finally {
+            super.setLoading(false)
           }
         }
       }

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

@@ -36,12 +36,18 @@ export class W3mModal extends LitElement {
 
   @state() private connected = AccountController.state.isConnected
 
+  @state() private loading = ModalController.state.loading
+
   public constructor() {
     super()
     this.initializeTheming()
     ApiController.prefetch()
     this.unsubscribe.push(
       ModalController.subscribeKey('open', val => (val ? this.onOpen() : this.onClose())),
+      ModalController.subscribeKey('loading', val => {
+        this.loading = val
+        this.onNewAddress(AccountController.state.caipAddress)
+      }),
       AccountController.subscribeKey('isConnected', val => (this.connected = val)),
       AccountController.subscribeKey('caipAddress', val => this.onNewAddress(val)),
       OptionsController.subscribeKey('isSiweEnabled', val => (this.isSiweEnabled = val))
@@ -158,12 +164,17 @@ export class W3mModal extends LitElement {
   }
 
   private async onNewAddress(caipAddress?: CaipAddress) {
-    if (!this.connected) {
+    console.log('on new address loading', this.loading)
+    if (!this.connected || this.loading) {
       return
     }
+    console.log('prev caip address', this.caipAddress)
+    console.log('new caip address', caipAddress)
     const hasNetworkChanged = this.caipAddress && this.caipAddress !== caipAddress
+    console.log('has network changed', hasNetworkChanged)
     this.caipAddress = caipAddress
     if (this.isSiweEnabled) {
+      // Case 2: Siwe session exists and network has changed
       const { SIWEController } = await import('@web3modal/siwe')
       const session = await SIWEController.getSession()
 

packages/scaffold/src/views/w3m-account-settings-view/index.ts

@@ -242,8 +242,10 @@ export class W3mAccountSettingsView extends LitElement {
     }
 
     this.loading = true
+    ModalController.setLoading(true)
     await authConnector?.provider.setPreferredAccount(accountTypeTarget)
     await ConnectionController.reconnectExternal(authConnector)
+    ModalController.setLoading(false)
 
     this.text =
       accountTypeTarget === W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT

packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts

@@ -2,6 +2,7 @@ import { customElement } from '@web3modal/ui'
 import {
   ConnectionController,
   ConnectorController,
+  ModalController,
   RouterController,
   RouterUtil,
   SnackController
@@ -84,10 +85,12 @@ export class W3mUpgradeToSmartAccountView extends LitElement {
     if (this.authConnector) {
       try {
         this.loading = true
+        ModalController.setLoading(true)
         await this.authConnector.provider.setPreferredAccount(
           W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT
         )
         await ConnectionController.reconnectExternal(this.authConnector)
+        ModalController.setLoading(false)
         this.loading = false
         RouterUtil.navigateAfterPreferredAccountTypeSelect()
       } catch (e) {

packages/siwe/core/utils/TypeUtils.ts

@@ -21,6 +21,7 @@ export interface SIWECreateMessageArgs {
   requestId?: string
   resources?: string[]
   expiry?: number
+  iat?: string
 }
 export type SIWEMessageArgs = {
   chains: number[]