Merge branch 'refactor/move-modal-animation-to-css' into refactor/con…

…vert-to-swaps-naming-changes

Dockerfile.canary

@@ -1,4 +1,5 @@
 FROM node:20-bookworm
+RUN apt update && apt install -y awscli
 
 WORKDIR /src
 
@@ -12,4 +13,4 @@ RUN npm run playwright:install
 
 ENV TIMING_LOGS=true
 
-CMD ["npm", "run", "playwright:test:canary"]
+CMD ["bash", "./docker-canary.sh"]

apps/laboratory/docker-canary.sh

@@ -0,0 +1,7 @@
+# Not adding `set -e` so that S3 upload happens regardless
+
+npm run playwright:test:canary
+
+destination="s3://$TEST_RESULTS_BUCKET/web3modal-canary/$(date --iso-8601=seconds)/test-results/"
+echo "Uploading test results to $destination"
+aws s3 cp ./test-results/ $destination --recursive

apps/laboratory/playwright.config.ts

@@ -28,8 +28,8 @@ export default defineConfig<ModalFixture>({
     /* Take a screenshot when the test fails */
     screenshot: 'only-on-failure',
 
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    /* Collect trace regardless so we can debug latency regressions. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on',
 
     video: 'retain-on-failure'
   },

apps/laboratory/tests/email.spec.ts

@@ -46,3 +46,12 @@ testMEmail('it should disconnect correctly', async ({ modalPage, modalValidator
   await modalPage.disconnect()
   await modalValidator.expectDisconnected()
 })
+
+testMEmail('it should update email', async ({ modalPage }) => {
+  const mailsacApiKey = process.env['MAILSAC_API_KEY']
+  if (!mailsacApiKey) {
+    throw new Error('MAILSAC_API_KEY is not set')
+  }
+
+  await modalPage.updateEmail(mailsacApiKey)
+})

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

@@ -5,11 +5,6 @@ import { ModalWalletPage } from '../pages/ModalWalletPage'
 import { ModalWalletValidator } from '../validators/ModalWalletValidator'
 import type { ModalPage } from '../pages/ModalPage'
 
-const mailsacApiKey = process.env['MAILSAC_API_KEY']
-if (!mailsacApiKey) {
-  throw new Error('MAILSAC_API_KEY is not set')
-}
-
 // Test Modal + Smart Account
 export const testModalSmartAccount = base.extend<ModalFixture & { slowModalPage: ModalPage }>({
   library: ['wagmi', { option: true }],
@@ -18,6 +13,10 @@ export const testModalSmartAccount = base.extend<ModalFixture & { slowModalPage:
       const modalPage = new ModalWalletPage(page, library)
       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)
 

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

@@ -13,6 +13,7 @@ export class ModalPage {
 
   private readonly connectButton: Locator
   private readonly url: string
+  private emailAddress = ''
 
   constructor(
     public readonly page: Page,
@@ -61,6 +62,8 @@ export class ModalPage {
   ): Promise<void> {
     await this.load()
 
+    this.emailAddress = emailAddress
+
     const email = new Email(mailsacApiKey)
 
     await email.deleteAllMessages(emailAddress)
@@ -90,9 +93,11 @@ export class ModalPage {
         otp = email.getOtpCodeFromBody(emailBody)
       }
     }
-    if (otp.replace(' ', '').length !== 6) {
+
+    if (otp === '') {
       otp = email.getOtpCodeFromBody(emailBody)
     }
+
     await this.enterOTP(otp)
   }
 
@@ -114,16 +119,15 @@ export class ModalPage {
     })
   }
 
-  async enterOTP(otp: string) {
-    await expect(this.page.getByText('Confirm Email')).toBeVisible({
+  async enterOTP(otp: string, headerTitle = 'Confirm Email') {
+    await expect(this.page.getByText(headerTitle)).toBeVisible({
       timeout: 10_000
     })
     await expect(this.page.getByText('Enter the code we sent')).toBeVisible({
       timeout: 10_000
     })
+
     const splitted = otp.split('')
-    // Remove empy space in OTP code 111 111
-    splitted.splice(3, 1)
 
     // eslint-disable-next-line no-plusplus
     for (let i = 0; i < splitted.length; i++) {
@@ -143,18 +147,18 @@ export class ModalPage {
       await input.fill(digit)
     }
 
-    await expect(this.page.getByText('Confirm Email')).not.toBeVisible()
+    await expect(this.page.getByText(headerTitle)).not.toBeVisible()
   }
 
   async disconnect() {
     const accountBtn = this.page.getByTestId('account-button')
     await expect(accountBtn, 'Account button should be visible').toBeVisible()
     await expect(accountBtn, 'Account button should be enabled').toBeEnabled()
-    await accountBtn.click({ force: true })
+    await accountBtn.click()
     const disconnectBtn = this.page.getByTestId('disconnect-button')
     await expect(disconnectBtn, 'Disconnect button should be visible').toBeVisible()
     await expect(disconnectBtn, 'Disconnect button should be enabled').toBeEnabled()
-    await disconnectBtn.click({ force: true })
+    await disconnectBtn.click()
   }
 
   async sign() {
@@ -207,9 +211,14 @@ export class ModalPage {
   }
 
   async switchNetwork(network: string) {
+    const switchNetworkButton = this.page.getByTestId('w3m-account-select-network')
     await this.page.getByTestId('account-button').click()
     await this.page.getByTestId('w3m-account-select-network').click()
     await this.page.getByTestId(`w3m-network-switch-${network}`).click()
+    await expect(switchNetworkButton, `Switched network should include ${network}`).toContainText(
+      network,
+      { timeout: 5000 }
+    )
   }
 
   async clickWalletDeeplink() {
@@ -227,4 +236,48 @@ export class ModalPage {
     // Wait for the modal fade out animation
     await this.page.waitForTimeout(300)
   }
+
+  async updateEmail(mailsacApiKey: string) {
+    const email = new Email(mailsacApiKey)
+    const newEmailAddress = email.getEmailAddressToUse(1)
+
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('w3m-account-email-update').click()
+    await this.page.getByTestId('wui-email-input').locator('input').focus()
+    await this.page.getByTestId('wui-email-input').locator('input').fill(newEmailAddress)
+
+    // Clear messages before putting new email
+    await email.deleteAllMessages(this.emailAddress)
+    await this.page.getByTestId('wui-email-input').locator('input').press('Enter')
+
+    // Wait until the next screen appears
+    await expect(this.page.getByText('Enter the code we sent')).toBeVisible({
+      timeout: 10_000
+    })
+    const confirmCurrentEmail = await this.page.getByText('Confirm Current Email').isVisible()
+    if (confirmCurrentEmail) {
+      await this.updateOtpFlow(this.emailAddress, mailsacApiKey, 'Confirm Current Email')
+    }
+
+    await this.updateOtpFlow(newEmailAddress, mailsacApiKey, 'Confirm New Email')
+
+    expect(
+      this.page.getByTestId('w3m-account-email-update'),
+      `Expected to go to the account screen after the update`
+    ).toBeVisible()
+  }
+
+  async updateOtpFlow(emailAddress: string, mailsacApiKey: string, headerTitle: string) {
+    const email = new Email(mailsacApiKey)
+
+    const messageId = await email.getLatestMessageId(emailAddress)
+
+    if (!messageId) {
+      throw new Error('No messageId found')
+    }
+    const emailBody = await email.getEmailBody(emailAddress, messageId)
+    const otp = email.getOtpCodeFromBody(emailBody)
+
+    await this.enterOTP(otp, headerTitle)
+  }
 }

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

@@ -16,22 +16,27 @@ export class ModalWalletPage extends ModalPage {
   }
 
   override async switchNetwork(network: string) {
+    const switchNetworkButton = this.page.getByTestId('account-switch-network-button')
     await this.page.getByTestId('account-switch-network-button').click()
     await this.page.getByTestId(`w3m-network-switch-${network}`).click()
-    await this.page.waitForTimeout(2000)
+    await expect(switchNetworkButton, `Switched network should include ${network}`).toContainText(
+      network,
+      { timeout: 5000 }
+    )
   }
 
   async togglePreferredAccountType() {
     await this.page.getByTestId('account-toggle-preferred-account-type').click()
-    await this.page.waitForTimeout(2500)
+    await this.page.waitForTimeout(1000)
   }
 
   override async disconnect(): Promise<void> {
-    this.openSettings()
     const disconnectBtn = this.page.getByTestId('disconnect-button')
     await expect(disconnectBtn, 'Disconnect button should be visible').toBeVisible()
     await expect(disconnectBtn, 'Disconnect button should be enabled').toBeEnabled()
-    await disconnectBtn.click({ force: true })
+    await disconnectBtn.click()
+    await this.page.getByTestId('connect-button').waitFor({ state: 'visible', timeout: 5000 })
+    await this.page.waitForTimeout(2000)
   }
 
   async getAddress(): Promise<string> {

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

@@ -70,7 +70,8 @@ export class Email {
   getOtpCodeFromBody(body: string): string {
     const match = body.match(OTP_CODE_REGEX)
     if (match) {
-      return match[0]
+      // Remove empty space in OTP code 111 111
+      return match[0].replace(' ', '')
     }
 
     throw new Error(`No code found in email: ${body}`)

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

@@ -79,7 +79,6 @@ testModalSmartAccount(
     await walletModalPage.openSettings()
     await walletModalPage.togglePreferredAccountType()
     await walletModalPage.disconnect()
-    await walletModalPage.page.waitForTimeout(1500)
 
     await walletModalPage.emailFlow(
       email.getEmailAddressToUse(parallelIndex, NOT_ENABLED_DOMAIN),