fix: email update

apps/laboratory/tests/email.spec.ts

@@ -2,6 +2,11 @@ import { expect } from '@playwright/test'
 import { testMEmail } from './shared/fixtures/w3m-email-fixture'
 import { SECURE_WEBSITE_URL } from './shared/constants'
 
+const mailsacApiKey = process.env['MAILSAC_API_KEY']
+if (!mailsacApiKey) {
+  throw new Error('MAILSAC_API_KEY is not set')
+}
+
 testMEmail.beforeEach(async ({ modalValidator }) => {
   await modalValidator.expectConnected()
 })
@@ -48,3 +53,7 @@ testMEmail('it should disconnect correctly', async ({ modalPage, modalValidator
   await modalPage.disconnect()
   await modalValidator.expectDisconnected()
 })
+
+testMEmail('it should update email', async ({ modalPage }) => {
+  await modalPage.updateEmail(mailsacApiKey)
+})

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,7 +147,7 @@ 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() {
@@ -226,4 +230,48 @@ export class ModalPage {
   async closeModal() {
     await this.page.getByTestId('w3m-header-close')?.click?.()
   }
+
+  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/utils/email.ts

@@ -69,7 +69,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}`)

packages/scaffold/src/partials/w3m-account-default-widget/index.ts

@@ -232,6 +232,7 @@ export class W3mAccountDefaultWidget extends LitElement {
         iconVariant="overlay"
         icon="mail"
         iconSize="sm"
+        data-testid="w3m-account-email-update"
         ?chevron=${true}
         @click=${() => this.onGoToUpdateEmail(email)}
       >

packages/scaffold/src/views/w3m-update-email-wallet-view/index.ts

@@ -84,12 +84,20 @@ export class W3mUpdateEmailWalletView extends LitElement {
         throw new Error('w3m-update-email-wallet: Email connector not found')
       }
 
-      await emailConnector.provider.updateEmail({ email: this.email })
+      const response = await emailConnector.provider.updateEmail({ email: this.email })
       EventsController.sendEvent({ type: 'track', event: 'EMAIL_EDIT' })
-      RouterController.replace('UpdateEmailPrimaryOtp', {
-        email: this.initialEmail,
-        newEmail: this.email
-      })
+
+      if (response.action === 'VERIFY_SECONDARY_OTP') {
+        RouterController.push('UpdateEmailSecondaryOtp', {
+          email: this.initialEmail,
+          newEmail: this.email
+        })
+      } else {
+        RouterController.push('UpdateEmailPrimaryOtp', {
+          email: this.initialEmail,
+          newEmail: this.email
+        })
+      }
     } catch (error) {
       SnackController.showError(error)
       this.loading = false

packages/wallet/src/W3mFrameProvider.ts

@@ -15,7 +15,7 @@ type IsConnectedResolver = Resolver<W3mFrameTypes.Responses['FrameIsConnectedRes
 type GetChainIdResolver = Resolver<W3mFrameTypes.Responses['FrameGetChainIdResponse']>
 type SwitchChainResolver = Resolver<W3mFrameTypes.Responses['FrameSwitchNetworkResponse']>
 type RpcRequestResolver = Resolver<W3mFrameTypes.RPCResponse>
-type UpdateEmailResolver = Resolver<undefined>
+type UpdateEmailResolver = Resolver<W3mFrameTypes.Responses['FrameUpdateEmailResponse']>
 type UpdateEmailPrimaryOtpResolver = Resolver<undefined>
 type UpdateEmailSecondaryOtpResolver = Resolver<
   W3mFrameTypes.Responses['FrameUpdateEmailSecondaryOtpResolver']
@@ -109,7 +109,7 @@ export class W3mFrameProvider {
         case W3mFrameConstants.FRAME_SESSION_UPDATE:
           return this.onSessionUpdate(event)
         case W3mFrameConstants.FRAME_UPDATE_EMAIL_SUCCESS:
-          return this.onUpdateEmailSuccess()
+          return this.onUpdateEmailSuccess(event)
         case W3mFrameConstants.FRAME_UPDATE_EMAIL_ERROR:
           return this.onUpdateEmailError(event)
         case W3mFrameConstants.FRAME_UPDATE_EMAIL_PRIMARY_OTP_SUCCESS:
@@ -210,7 +210,7 @@ export class W3mFrameProvider {
     W3mFrameHelpers.checkIfAllowedToTriggerEmail()
     this.w3mFrame.events.postAppEvent({ type: W3mFrameConstants.APP_UPDATE_EMAIL, payload })
 
-    return new Promise((resolve, reject) => {
+    return new Promise<W3mFrameTypes.Responses['FrameUpdateEmailResponse']>((resolve, reject) => {
       this.updateEmailResolver = { resolve, reject }
     })
   }
@@ -523,8 +523,10 @@ export class W3mFrameProvider {
     }
   }
 
-  private onUpdateEmailSuccess() {
-    this.updateEmailResolver?.resolve(undefined)
+  private onUpdateEmailSuccess(
+    event: Extract<W3mFrameTypes.FrameEvent, { type: '@w3m-frame/UPDATE_EMAIL_SUCCESS' }>
+  ) {
+    this.updateEmailResolver?.resolve(event.payload)
     this.setNewLastEmailLoginTime()
   }
 

packages/wallet/src/W3mFrameSchema.ts

@@ -65,6 +65,9 @@ export const AppSetPreferredAccountRequest = z.object({ type: z.string() })
 export const FrameConnectEmailResponse = z.object({
   action: z.enum(['VERIFY_DEVICE', 'VERIFY_OTP'])
 })
+export const FrameUpdateEmailResponse = z.object({
+  action: z.enum(['VERIFY_PRIMARY_OTP', 'VERIFY_SECONDARY_OTP'])
+})
 export const FrameGetUserResponse = z.object({
   email: z.string().email(),
   address: z.string(),
@@ -406,7 +409,7 @@ export const W3mFrameSchema = {
 
     .or(z.object({ type: zType('FRAME_UPDATE_EMAIL_ERROR'), payload: zError }))
 
-    .or(z.object({ type: zType('FRAME_UPDATE_EMAIL_SUCCESS') }))
+    .or(z.object({ type: zType('FRAME_UPDATE_EMAIL_SUCCESS'), payload: FrameUpdateEmailResponse }))
 
     .or(z.object({ type: zType('FRAME_UPDATE_EMAIL_PRIMARY_OTP_ERROR'), payload: zError }))
 

packages/wallet/src/W3mFrameTypes.ts

@@ -55,7 +55,8 @@ import {
   RpcEthChainId,
   FrameSwitchNetworkResponse,
   AppSyncDappDataRequest,
-  FrameGetSmartAccountEnabledNetworksResponse
+  FrameGetSmartAccountEnabledNetworksResponse,
+  FrameUpdateEmailResponse
 } from './W3mFrameSchema.js'
 import type { W3mFrameRpcConstants } from './W3mFrameConstants.js'
 
@@ -86,6 +87,7 @@ export namespace W3mFrameTypes {
     FrameGetSmartAccountEnabledNetworksResponse: z.infer<
       typeof FrameGetSmartAccountEnabledNetworksResponse
     >
+    FrameUpdateEmailResponse: z.infer<typeof FrameUpdateEmailResponse>
   }
 
   export interface Network {