diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json index f9d32e214a..d084248584 100644 --- a/apps/laboratory/package.json +++ b/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" }, diff --git a/apps/laboratory/src/utils/SiweUtils.ts b/apps/laboratory/src/utils/SiweUtils.ts index b8dcc9f541..18498eceb0 100644 --- a/apps/laboratory/src/utils/SiweUtils.ts +++ b/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 () => { diff --git a/apps/laboratory/tests/shared/fixtures/w3m-email-fixture.ts b/apps/laboratory/tests/shared/fixtures/w3m-email-fixture.ts index ba53e53852..09250a4644 100644 --- a/apps/laboratory/tests/shared/fixtures/w3m-email-fixture.ts +++ b/apps/laboratory/tests/shared/fixtures/w3m-email-fixture.ts @@ -29,25 +29,29 @@ export const testMEmail = timingFixture.extend({ } }) -export const testMEmailSiwe = siwe.extend({ - modalPage: async ({ page, library, context }, use, testInfo) => { - const modalPage = new ModalWalletPage(page, library, 'all') - await modalPage.load() +export const testMEmailSiwe = timingFixture.extend({ + 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) diff --git a/packages/ethers/src/client.ts b/packages/ethers/src/client.ts index 232d229869..b39f78d93d 100644 --- a/packages/ethers/src/client.ts +++ b/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) } } } diff --git a/packages/scaffold/src/modal/w3m-modal/index.ts b/packages/scaffold/src/modal/w3m-modal/index.ts index 67aa42e30c..ac2528a310 100644 --- a/packages/scaffold/src/modal/w3m-modal/index.ts +++ b/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() diff --git a/packages/scaffold/src/views/w3m-account-settings-view/index.ts b/packages/scaffold/src/views/w3m-account-settings-view/index.ts index 429ad0a583..330b2b8b3f 100644 --- a/packages/scaffold/src/views/w3m-account-settings-view/index.ts +++ b/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 diff --git a/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts b/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts index 4e4af49e25..30f76eecfe 100644 --- a/packages/scaffold/src/views/w3m-upgrade-to-smart-account-view/index.ts +++ b/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) { diff --git a/packages/siwe/core/utils/TypeUtils.ts b/packages/siwe/core/utils/TypeUtils.ts index e1f35753cb..47acbbb03b 100644 --- a/packages/siwe/core/utils/TypeUtils.ts +++ b/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[]