fix: various email issues from w3i testing (#1933)

reown-com · Feb 19, 2024 · 033bbf1 · 033bbf1
1 parent 0c3510d
commit 033bbf1
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/packages/scaffold/src/utils/w3m-email-otp-widget/index.ts b/packages/scaffold/src/utils/w3m-email-otp-widget/index.ts
@@ -88,7 +88,7 @@ export class W3mEmailOtpWidget extends LitElement {
               ></wui-otp>
               ${this.error
                 ? html`
-                    <wui-text variant="small-400" color="error-100">
+                    <wui-text variant="small-400" align="center" color="error-100">
                       ${this.error}. Try Again
                     </wui-text>
                   `

diff --git a/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts b/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts
@@ -78,10 +78,15 @@ export class W3mEmailVerifyDeviceView extends LitElement {
   // -- Private ------------------------------------------- //
   private async listenForDeviceApproval() {
     if (this.emailConnector) {
-      await this.emailConnector.provider.connectDevice()
-      EventsController.sendEvent({ type: 'track', event: 'DEVICE_REGISTERED_FOR_EMAIL' })
-      EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_SENT' })
-      RouterController.replace('EmailVerifyOtp', { email: this.email })
+      try {
+        await this.emailConnector.provider.connectDevice()
+        EventsController.sendEvent({ type: 'track', event: 'DEVICE_REGISTERED_FOR_EMAIL' })
+        EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_SENT' })
+        RouterController.replace('EmailVerifyOtp', { email: this.email })
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        RouterController.goBack()
+      }
     }
   }
 

diff --git a/packages/scaffold/src/views/w3m-update-email-secondary-otp-view/index.ts b/packages/scaffold/src/views/w3m-update-email-secondary-otp-view/index.ts
@@ -17,7 +17,7 @@ export class W3mUpdateEmailSecondaryOtpView extends W3mEmailOtpWidget {
       if (this.emailConnector) {
         await this.emailConnector.provider.updateEmailSecondaryOtp({ otp })
         EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_PASS' })
-        RouterController.replace('Account', { email: this.email })
+        RouterController.reset('Account')
       }
     } catch (error) {
       EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_FAIL' })

diff --git a/packages/ui/src/composites/wui-list-accordion/index.ts b/packages/ui/src/composites/wui-list-accordion/index.ts
@@ -29,10 +29,12 @@ export class WuiListAccordion extends LitElement {
   public override firstUpdated() {
     setTimeout(() => {
       const heightElement = this.shadowRoot?.querySelector('.heightContent')
+      const textElement = this.shadowRoot?.querySelector('.textContent')
 
-      if (heightElement) {
+      if (heightElement && textElement) {
         this.scrollElement = heightElement
-        const scrollHeight = heightElement?.scrollHeight
+        const scrollHeight = textElement?.scrollHeight
+
         if (scrollHeight && scrollHeight > MAX_HEIGHT) {
           this.enableAccordion = true
           this.scrollHeightElement = scrollHeight
@@ -55,7 +57,7 @@ export class WuiListAccordion extends LitElement {
           class="overflowedContent"
         >
           <div class="heightContent">
-            <wui-text variant="paragraph-400" color="fg-200">
+            <wui-text class="textContent" variant="paragraph-400" color="fg-200">
               <pre>${this.overflowedContent}</pre>
             </wui-text>
           </div>

diff --git a/packages/ui/src/composites/wui-otp/index.ts b/packages/ui/src/composites/wui-otp/index.ts
@@ -40,6 +40,7 @@ export class WuiOtp extends LitElement {
           (_, index: number) => html`
             <wui-input-numeric
               @input=${(e: InputEvent) => this.handleInput(e, index)}
+              @click=${(e: MouseEvent) => this.selectInput(e)}
               @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, index)}
               .disabled=${!this.shouldInputBeEnabled(index)}
               .value=${this.values[index] || ''}
@@ -57,11 +58,20 @@ export class WuiOtp extends LitElement {
     const input = element || (numeric ? this.getInputElement(numeric) : undefined)
     if (input) {
       input.value = value
+
       // Need to update the whole reference else lit-html won't re-render
       this.values = this.values.map((val, i) => (i === index ? value : val))
     }
   }
 
+  private selectInput(e: MouseEvent) {
+    const targetElement = e.target as HTMLElement
+    if (targetElement) {
+      const inputElement = this.getInputElement(targetElement)
+      inputElement?.select()
+    }
+  }
+
   private handleInput(e: InputEvent, index: number) {
     const inputElement = e.target as HTMLElement
     const input = this.getInputElement(inputElement)
@@ -136,6 +146,7 @@ export class WuiOtp extends LitElement {
 
   private handlePaste(input: HTMLInputElement, inputValue: string, index: number) {
     const value = inputValue[0]
+
     const isValid = value && UiHelperUtil.isNumber(value)
     if (isValid) {
       this.updateInput(input, index, value)