From 0dbdeb8c42bc645bc21255afa20746c1cbe71751 Mon Sep 17 00:00:00 2001
From: tomiir <rocchitomas@gmail.com>
Date: Wed, 3 Jan 2024 08:57:42 -0600
Subject: [PATCH] fix: email +  UI responsive issues (#1676)

---
 .../composites/wui-account-button.stories.ts  |  6 +-
 .../src/modal/w3m-account-button/index.ts     |  6 ++
 .../scaffold/src/modal/w3m-button/index.ts    |  6 ++
 .../partials/w3m-email-login-widget/index.ts  | 35 +++++------
 .../partials/w3m-email-login-widget/styles.ts |  2 +-
 .../scaffold/src/partials/w3m-header/index.ts |  5 +-
 .../w3m-email-verify-device-view/index.ts     |  2 +-
 .../views/w3m-email-verify-otp-view/index.ts  | 58 +++++++++++++++----
 .../index.ts                                  |  2 +-
 .../composites/wui-account-button/index.ts    | 19 +++---
 .../composites/wui-account-button/styles.ts   |  7 ++-
 .../composites/wui-connect-button/styles.ts   | 11 ++++
 .../composites/wui-input-numeric/styles.ts    |  7 ++-
 .../ui/src/composites/wui-input-text/index.ts |  2 +-
 .../src/composites/wui-input-text/styles.ts   |  2 +-
 packages/ui/src/composites/wui-otp/index.ts   | 47 ++++++++++-----
 packages/ui/src/utils/ThemeUtil.ts            |  2 +-
 packages/wallet/src/W3mFrameHelpers.ts        | 18 +++++-
 18 files changed, 170 insertions(+), 67 deletions(-)

diff --git a/apps/gallery/stories/composites/wui-account-button.stories.ts b/apps/gallery/stories/composites/wui-account-button.stories.ts
index eb23ce53eb..6d52082e4c 100644
--- a/apps/gallery/stories/composites/wui-account-button.stories.ts
+++ b/apps/gallery/stories/composites/wui-account-button.stories.ts
@@ -14,7 +14,9 @@ export default {
     avatarSrc: avatarImageSrc,
     address,
     balance: '0.527 ETH',
-    isProfileName: false
+    isProfileName: false,
+    charsStart: 4,
+    charsEnd: 6
   },
   argTypes: {
     disabled: {
@@ -35,5 +37,7 @@ export const Default: Component = {
       .avatarSrc=${args.avatarSrc}
       .balance=${args.balance}
       address=${args.address}
+      .charsStart=${args.charsStart}
+      .charsEnd=${args.charsEnd}
     ></wui-account-button>`
 }
diff --git a/packages/scaffold/src/modal/w3m-account-button/index.ts b/packages/scaffold/src/modal/w3m-account-button/index.ts
index d2bb3b3d2c..f2b5741fba 100644
--- a/packages/scaffold/src/modal/w3m-account-button/index.ts
+++ b/packages/scaffold/src/modal/w3m-account-button/index.ts
@@ -21,6 +21,10 @@ export class W3mAccountButton extends LitElement {
 
   @property() public balance?: 'show' | 'hide' = 'show'
 
+  @property() public charsStart?: WuiAccountButton['charsStart'] = 4
+
+  @property() public charsEnd?: WuiAccountButton['charsEnd'] = 6
+
   @state() private address = AccountController.state.address
 
   @state() private balanceVal = AccountController.state.balance
@@ -79,6 +83,8 @@ export class W3mAccountButton extends LitElement {
           : ''}
         @click=${this.onClick.bind(this)}
         data-testid="account-button"
+        .charsStart=${this.charsStart}
+        .charsEnd=${this.charsEnd}
       >
       </wui-account-button>
     `
diff --git a/packages/scaffold/src/modal/w3m-button/index.ts b/packages/scaffold/src/modal/w3m-button/index.ts
index 5c42549070..bdeb34d3b2 100644
--- a/packages/scaffold/src/modal/w3m-button/index.ts
+++ b/packages/scaffold/src/modal/w3m-button/index.ts
@@ -22,6 +22,10 @@ export class W3mButton extends LitElement {
 
   @property() public loadingLabel?: W3mConnectButton['loadingLabel'] = undefined
 
+  @property() public charsStart?: W3mAccountButton['charsStart'] = 4
+
+  @property() public charsEnd?: W3mAccountButton['charsEnd'] = 6
+
   @state() private isAccount = AccountController.state.isConnected
 
   // -- Lifecycle ----------------------------------------- //
@@ -45,6 +49,8 @@ export class W3mButton extends LitElement {
           <w3m-account-button
             .disabled=${Boolean(this.disabled)}
             balance=${ifDefined(this.balance)}
+            .charsStart=${ifDefined(this.charsStart)}
+            .charsEnd=${ifDefined(this.charsEnd)}
           >
           </w3m-account-button>
         `
diff --git a/packages/scaffold/src/partials/w3m-email-login-widget/index.ts b/packages/scaffold/src/partials/w3m-email-login-widget/index.ts
index 3aa222b2b9..31ebd44abd 100644
--- a/packages/scaffold/src/partials/w3m-email-login-widget/index.ts
+++ b/packages/scaffold/src/partials/w3m-email-login-widget/index.ts
@@ -1,4 +1,4 @@
-import { ConnectorController } from '@web3modal/core'
+import { ConnectorController, CoreHelperUtil } from '@web3modal/core'
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { state } from 'lit/decorators.js'
@@ -23,6 +23,8 @@ export class W3mEmailLoginWidget extends LitElement {
 
   @state() private loading = false
 
+  @state() private error = ''
+
   public constructor() {
     super()
     this.unsubscribe.push(
@@ -57,10 +59,11 @@ export class W3mEmailLoginWidget extends LitElement {
         <wui-email-input
           .disabled=${this.loading}
           @inputChange=${this.onEmailInputChange.bind(this)}
+          .errorMessage=${this.error}
         >
         </wui-email-input>
 
-        ${showSubmit && multipleConnectors
+        ${showSubmit
           ? html`
               <wui-icon-link
                 size="sm"
@@ -71,31 +74,21 @@ export class W3mEmailLoginWidget extends LitElement {
               </wui-icon-link>
             `
           : null}
-        ${this.loading && multipleConnectors
+        ${this.loading
           ? html`<wui-loading-spinner size="md" color="accent-100"></wui-loading-spinner>`
           : null}
 
         <input type="submit" hidden />
       </form>
 
-      ${multipleConnectors
-        ? html`<wui-separator text="or"></wui-separator>`
-        : html`<wui-button
-            size="md"
-            variant="fill"
-            fullWidth
-            @click=${this.onSubmitEmail.bind(this)}
-            .disabled=${!showSubmit}
-            .loading=${this.loading}
-          >
-            Continue
-          </wui-button>`}
+      ${multipleConnectors ? html`<wui-separator text="or"></wui-separator>` : null}
     `
   }
 
   // -- Private ------------------------------------------- //
   private onEmailInputChange(event: CustomEvent<string>) {
     this.email = event.detail
+    this.error = ''
   }
 
   private async onSubmitEmail(event: Event) {
@@ -103,7 +96,6 @@ export class W3mEmailLoginWidget extends LitElement {
       if (this.loading) {
         return
       }
-
       this.loading = true
       event.preventDefault()
       const emailConnector = ConnectorController.getEmailConnector()
@@ -111,15 +103,20 @@ export class W3mEmailLoginWidget extends LitElement {
       if (!emailConnector) {
         throw new Error('w3m-email-login-widget: Email connector not found')
       }
-
       const { action } = await emailConnector.provider.connectEmail({ email: this.email })
       if (action === 'VERIFY_OTP') {
         RouterController.push('EmailVerifyOtp', { email: this.email })
       } else if (action === 'VERIFY_DEVICE') {
         RouterController.push('EmailVerifyDevice', { email: this.email })
       }
-    } catch (error) {
-      SnackController.showError(error)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      const parsedError = CoreHelperUtil.parseError(error)
+      if (parsedError?.includes('Invalid email')) {
+        this.error = 'Invalid email. Try again.'
+      } else {
+        SnackController.showError(error)
+      }
     } finally {
       this.loading = false
     }
diff --git a/packages/scaffold/src/partials/w3m-email-login-widget/styles.ts b/packages/scaffold/src/partials/w3m-email-login-widget/styles.ts
index b1b94cf3d8..24d55138fb 100644
--- a/packages/scaffold/src/partials/w3m-email-login-widget/styles.ts
+++ b/packages/scaffold/src/partials/w3m-email-login-widget/styles.ts
@@ -24,7 +24,7 @@ export default css`
   wui-icon-link,
   wui-loading-spinner {
     position: absolute;
-    top: 50%;
+    top: 20px;
     transform: translateY(-50%);
   }
 
diff --git a/packages/scaffold/src/partials/w3m-header/index.ts b/packages/scaffold/src/partials/w3m-header/index.ts
index 1290b8b150..656865c384 100644
--- a/packages/scaffold/src/partials/w3m-header/index.ts
+++ b/packages/scaffold/src/partials/w3m-header/index.ts
@@ -1,6 +1,7 @@
 import type { RouterControllerState } from '@web3modal/core'
 import {
   ConnectionController,
+  ConnectorController,
   EventsController,
   ModalController,
   RouterController,
@@ -17,9 +18,11 @@ function headings() {
   const walletName = RouterController.state.data?.wallet?.name
   const networkName = RouterController.state.data?.network?.name
   const name = walletName ?? connectorName
+  const connectors = ConnectorController.getConnectors()
+  const isEmail = connectors.length === 1 && connectors[0]?.id === 'w3m-email'
 
   return {
-    Connect: 'Connect Wallet',
+    Connect: `Connect ${isEmail ? 'Email' : ''} Wallet`,
     Account: undefined,
     ConnectingExternal: name ?? 'Connect Wallet',
     ConnectingWalletConnect: name ?? 'WalletConnect',
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
index 4ae51e35f5..f98239228d 100644
--- a/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts
+++ b/packages/scaffold/src/views/w3m-email-verify-device-view/index.ts
@@ -86,7 +86,7 @@ export class W3mEmailVerifyDeviceView extends LitElement {
         }
         this.loading = true
         await this.emailConnector.provider.connectEmail({ email: this.email })
-        SnackController.showSuccess('New Email sent')
+        SnackController.showSuccess('Code email resent')
       }
     } catch (error) {
       SnackController.showError(error)
diff --git a/packages/scaffold/src/views/w3m-email-verify-otp-view/index.ts b/packages/scaffold/src/views/w3m-email-verify-otp-view/index.ts
index 54737d8c1f..ad27cff523 100644
--- a/packages/scaffold/src/views/w3m-email-verify-otp-view/index.ts
+++ b/packages/scaffold/src/views/w3m-email-verify-otp-view/index.ts
@@ -6,10 +6,12 @@ import {
   ModalController,
   EventsController,
   ConnectionController,
-  ConnectorController
+  ConnectorController,
+  CoreHelperUtil
 } from '@web3modal/core'
 import { state } from 'lit/decorators.js'
 import styles from './styles.js'
+import { W3mFrameHelpers } from '@web3modal/wallet'
 
 // -- Helpers ------------------------------------------- //
 const OTP_LENGTH = 6
@@ -26,12 +28,28 @@ export class W3mEmailVerifyOtpView extends LitElement {
   // -- State & Properties -------------------------------- //
   @state() private loading = false
 
+  @state() private timeoutTimeLeft = W3mFrameHelpers.getTimeToNextEmailLogin()
+
+  @state() private error = ''
+
+  private OTPTimeout: NodeJS.Timeout | undefined
+
+  public override firstUpdated() {
+    this.startOTPTimeout()
+  }
+
+  public override disconnectedCallback() {
+    clearTimeout(this.OTPTimeout)
+  }
+
   // -- Render -------------------------------------------- //
   public override render() {
     if (!this.email) {
       throw new Error('w3m-email-verify-otp-view: No email provided')
     }
 
+    const isResendDisabled = Boolean(this.timeoutTimeLeft)
+
     return html`
       <wui-flex
         flexDirection="column"
@@ -48,21 +66,40 @@ export class W3mEmailVerifyOtpView extends LitElement {
 
         ${this.loading
           ? html`<wui-loading-spinner size="xl" color="accent-100"></wui-loading-spinner>`
-          : html`<wui-otp
-              dissabled
-              length="6"
-              @inputChange=${this.onOtpInputChange.bind(this)}
-            ></wui-otp>`}
+          : html` <wui-flex flexDirection="column" alignItems="center" gap="xs">
+              <wui-otp
+                dissabled
+                length="6"
+                @inputChange=${this.onOtpInputChange.bind(this)}
+              ></wui-otp>
+              ${this.error
+                ? html`<wui-text variant="small-400" color="error-100"
+                    >${this.error}. Try Again</wui-text
+                  >`
+                : null}
+            </wui-flex>`}
 
         <wui-flex alignItems="center">
           <wui-text variant="small-400" color="fg-200">Didn't receive it?</wui-text>
-          <wui-link @click=${this.onResendCode.bind(this)}>Resend code</wui-link>
+          <wui-link @click=${this.onResendCode.bind(this)} .disabled=${isResendDisabled}>
+            Resend ${isResendDisabled ? `in ${this.timeoutTimeLeft}s` : 'Code'}
+          </wui-link>
         </wui-flex>
       </wui-flex>
     `
   }
 
   // -- Private ------------------------------------------- //
+  private startOTPTimeout() {
+    this.OTPTimeout = setInterval(() => {
+      if (this.timeoutTimeLeft > 0) {
+        this.timeoutTimeLeft = W3mFrameHelpers.getTimeToNextEmailLogin()
+      } else {
+        clearInterval(this.OTPTimeout)
+      }
+    }, 1000)
+  }
+
   private async onOtpInputChange(event: CustomEvent<string>) {
     try {
       if (!this.loading) {
@@ -80,21 +117,22 @@ export class W3mEmailVerifyOtpView extends LitElement {
         }
       }
     } catch (error) {
-      SnackController.showError(error)
+      this.error = CoreHelperUtil.parseError(error)
       this.loading = false
     }
   }
 
   private async onResendCode() {
     try {
-      if (!this.loading) {
+      if (!this.loading && !this.timeoutTimeLeft) {
         const emailConnector = ConnectorController.getEmailConnector()
         if (!emailConnector || !this.email) {
           throw new Error('w3m-email-login-widget: Unable to resend email')
         }
         this.loading = true
         await emailConnector.provider.connectEmail({ email: this.email })
-        SnackController.showSuccess('New Email sent')
+        this.startOTPTimeout()
+        SnackController.showSuccess('Code email resent')
       }
     } catch (error) {
       SnackController.showError(error)
diff --git a/packages/scaffold/src/views/w3m-update-email-wallet-waiting-view/index.ts b/packages/scaffold/src/views/w3m-update-email-wallet-waiting-view/index.ts
index bdc82cee39..349d290716 100644
--- a/packages/scaffold/src/views/w3m-update-email-wallet-waiting-view/index.ts
+++ b/packages/scaffold/src/views/w3m-update-email-wallet-waiting-view/index.ts
@@ -88,7 +88,7 @@ export class W3mUpdateEmailWalletWaitingView extends LitElement {
         this.loading = true
         await this.emailConnector.provider.updateEmail({ email: this.email })
         this.listenForEmailUpdateApproval()
-        SnackController.showSuccess('New Email sent')
+        SnackController.showSuccess('Code email resent')
       }
     } catch (error) {
       SnackController.showError(error)
diff --git a/packages/ui/src/composites/wui-account-button/index.ts b/packages/ui/src/composites/wui-account-button/index.ts
index fc51c28613..cc3f74674d 100644
--- a/packages/ui/src/composites/wui-account-button/index.ts
+++ b/packages/ui/src/composites/wui-account-button/index.ts
@@ -28,16 +28,19 @@ export class WuiAccountButton extends LitElement {
 
   @property() public address = ''
 
+  @property() public charsStart = 4
+
+  @property() public charsEnd = 6
+
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled}>
+      <button
+        ?disabled=${this.disabled}
+        class=${ifDefined(this.balance ? undefined : 'local-no-balance')}
+      >
         ${this.balanceTemplate()}
-        <wui-flex
-          gap="xxs"
-          alignItems="center"
-          class=${ifDefined(this.balance ? undefined : 'local-no-balance')}
-        >
+        <wui-flex gap="xxs" alignItems="center">
           <wui-avatar
             .imageSrc=${this.avatarSrc}
             alt=${this.address}
@@ -46,8 +49,8 @@ export class WuiAccountButton extends LitElement {
           <wui-text variant="paragraph-600" color="inherit">
             ${UiHelperUtil.getTruncateString({
               string: this.address,
-              charsStart: this.isProfileName ? 18 : 4,
-              charsEnd: this.isProfileName ? 0 : 6,
+              charsStart: this.isProfileName ? 18 : this.charsStart,
+              charsEnd: this.isProfileName ? 0 : this.charsEnd,
               truncate: this.isProfileName ? 'end' : 'middle'
             })}
           </wui-text>
diff --git a/packages/ui/src/composites/wui-account-button/styles.ts b/packages/ui/src/composites/wui-account-button/styles.ts
index fe636e0903..f07139826c 100644
--- a/packages/ui/src/composites/wui-account-button/styles.ts
+++ b/packages/ui/src/composites/wui-account-button/styles.ts
@@ -62,7 +62,7 @@ export default css`
     padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
   }
 
-  wui-flex.local-no-balance {
+  button.local-no-balance {
     border-radius: 0px;
     border: none;
     background: transparent;
@@ -77,6 +77,8 @@ export default css`
   @media (max-width: 500px) {
     button {
       gap: 0px;
+      padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) !important;
+      height: 32px;
     }
     wui-image,
     wui-icon-box,
@@ -85,10 +87,11 @@ export default css`
       width: 0px;
       height: 0px;
     }
-    button > wui-flex {
+    button {
       border-radius: 0px;
       border: none;
       background: transparent;
+      padding: 0px;
     }
   }
 
diff --git a/packages/ui/src/composites/wui-connect-button/styles.ts b/packages/ui/src/composites/wui-connect-button/styles.ts
index aef0a1dba6..975dd2a2fd 100644
--- a/packages/ui/src/composites/wui-connect-button/styles.ts
+++ b/packages/ui/src/composites/wui-connect-button/styles.ts
@@ -69,6 +69,17 @@ export default css`
     padding-left: var(--wui-spacing-3xs);
   }
 
+  @media (max-width: 500px) {
+    button[data-size='md'] {
+      height: 32px;
+      padding: 5px 12px;
+    }
+
+    button[data-size='md'] > wui-text > slot {
+      font-size: 14px !important;
+    }
+  }
+
   wui-loading-spinner {
     width: 14px;
     height: 14px;
diff --git a/packages/ui/src/composites/wui-input-numeric/styles.ts b/packages/ui/src/composites/wui-input-numeric/styles.ts
index 7fb18315e2..5cba812b8c 100644
--- a/packages/ui/src/composites/wui-input-numeric/styles.ts
+++ b/packages/ui/src/composites/wui-input-numeric/styles.ts
@@ -50,8 +50,9 @@ export default css`
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
   }
-
-  input:hover:enabled {
-    background-color: var(--wui-gray-glass-010);
+  @media (hover: hover) and (pointer: fine) {
+    input:hover:enabled {
+      background-color: var(--wui-gray-glass-010);
+    }
   }
 `
diff --git a/packages/ui/src/composites/wui-input-text/index.ts b/packages/ui/src/composites/wui-input-text/index.ts
index 51d68cf85a..ebadf69528 100644
--- a/packages/ui/src/composites/wui-input-text/index.ts
+++ b/packages/ui/src/composites/wui-input-text/index.ts
@@ -53,7 +53,7 @@ export class WuiInputText extends LitElement {
     if (this.icon) {
       return html`<wui-icon
         data-input=${this.size}
-        size="md"
+        size="sm"
         color="inherit"
         name=${this.icon}
       ></wui-icon>`
diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts
index 33dfbf961f..36083e065e 100644
--- a/packages/ui/src/composites/wui-input-text/styles.ts
+++ b/packages/ui/src/composites/wui-input-text/styles.ts
@@ -73,7 +73,7 @@ export default css`
   }
 
   wui-icon + .wui-size-md {
-    padding: 15px var(--wui-spacing-m) var(--wui-spacing-l) var(--wui-spacing-3xl);
+    padding: 10.5px var(--wui-spacing-l) 10.5px 44px;
   }
 
   wui-icon[data-input='md'] {
diff --git a/packages/ui/src/composites/wui-otp/index.ts b/packages/ui/src/composites/wui-otp/index.ts
index 3f1f302a37..396457163a 100644
--- a/packages/ui/src/composites/wui-otp/index.ts
+++ b/packages/ui/src/composites/wui-otp/index.ts
@@ -1,5 +1,5 @@
 import { html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import '../../layout/wui-flex/index.js'
 import { resetStyles } from '../../utils/ThemeUtil.js'
 import { UiHelperUtil } from '../../utils/UiHelperUtil.js'
@@ -15,15 +15,16 @@ export class WuiOtp extends LitElement {
   // -- State & Properties -------------------------------- //
   @property({ type: Number }) public length = 6
 
-  private numerics: WuiInputNumeric[] = []
+  @state() valueArr: string[] = Array.from({ length: this.length }).map(() => '')
 
-  private valueArr: string[] = Array.from({ length: this.length }).map(() => '')
+  private numerics: WuiInputNumeric[] = []
 
   public override firstUpdated() {
     const numericElements = this.shadowRoot?.querySelectorAll<WuiInputNumeric>('wui-input-numeric')
     if (numericElements) {
       this.numerics = Array.from(numericElements)
     }
+    this.numerics[0]?.focus()
   }
 
   // -- Render -------------------------------------------- //
@@ -35,6 +36,7 @@ export class WuiOtp extends LitElement {
             <wui-input-numeric
               @input=${(e: InputEvent) => this.handleInput(e, index)}
               @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, index)}
+              .disabled=${!this.shouldInputBeEnabled(index)}
             >
             </wui-input-numeric>
           `
@@ -44,6 +46,16 @@ export class WuiOtp extends LitElement {
   }
 
   // -- Private ------------------------------------------- //
+  private updateInput(element: HTMLInputElement, index: number, value: string) {
+    const numeric = this.numerics[index]
+    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.valueArr = this.valueArr.map((val, i) => (i === index ? value : val))
+    }
+  }
+
   private handleInput(e: InputEvent, index: number) {
     const inputElement = e.target as HTMLElement
     const input = this.getInputElement(inputElement)
@@ -55,18 +67,22 @@ export class WuiOtp extends LitElement {
       } else {
         const isValid = UiHelperUtil.isNumber(inputValue)
         if (isValid && e.data) {
-          input.value = e.data
-          this.valueArr[index] = e.data
+          this.updateInput(input, index, e.data)
           this.focusInputField('next', index)
         } else {
-          input.value = ''
-          this.valueArr[index] = ''
+          this.updateInput(input, index, '')
         }
       }
     }
     this.dispatchInputChangeEvent()
   }
 
+  private shouldInputBeEnabled = (index: number) => {
+    const previousInputs = this.valueArr.slice(0, index)
+
+    return previousInputs.every(input => input !== '')
+  }
+
   private handleKeyDown = (e: KeyboardEvent, index: number) => {
     const inputElement = e.target as HTMLElement
     const input = this.getInputElement(inputElement)
@@ -98,16 +114,14 @@ export class WuiOtp extends LitElement {
         if (input.value === '') {
           this.focusInputField('prev', index)
         } else {
-          input.value = ''
-          this.valueArr[index] = ''
+          this.updateInput(input, index, '')
         }
         break
       case 'Backspace':
         if (input.value === '') {
           this.focusInputField('prev', index)
         } else {
-          input.value = ''
-          this.valueArr[index] = ''
+          this.updateInput(input, index, '')
         }
         break
       default:
@@ -118,8 +132,7 @@ export class WuiOtp extends LitElement {
     const value = inputValue[0]
     const isValid = value && UiHelperUtil.isNumber(value)
     if (isValid) {
-      input.value = value
-      this.valueArr[index] = value
+      this.updateInput(input, index, value)
       const inputString = inputValue.substring(1)
       if (index + 1 < this.length && inputString.length) {
         const nextNumeric = this.numerics[index + 1]
@@ -131,17 +144,21 @@ export class WuiOtp extends LitElement {
         this.focusInputField('next', index)
       }
     } else {
-      input.value = ''
-      this.valueArr[index] = ''
+      this.updateInput(input, index, '')
     }
   }
 
   private focusInputField = (dir: 'next' | 'prev', index: number) => {
     if (dir === 'next') {
       const nextIndex = index + 1
+      if (!this.shouldInputBeEnabled(nextIndex)) {
+        return
+      }
       const numeric = this.numerics[nextIndex < this.length ? nextIndex : index]
       const input = numeric ? this.getInputElement(numeric) : undefined
+
       if (input) {
+        input.disabled = false
         input.focus()
       }
     }
diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
index 72d1e16efb..f5389d0466 100644
--- a/packages/ui/src/utils/ThemeUtil.ts
+++ b/packages/ui/src/utils/ThemeUtil.ts
@@ -156,7 +156,7 @@ function createRootStyles(themeVariables?: ThemeVariables) {
         --wui-color-inverse-100: #fff;
         --wui-color-inverse-000: #000;
 
-        --wui-cover: rgba(0, 0, 0, 0.3);
+        --wui-cover: rgba(20, 20, 20, 0.8);
 
         --wui-color-modal-bg: var(--wui-color-modal-bg-base);
 
diff --git a/packages/wallet/src/W3mFrameHelpers.ts b/packages/wallet/src/W3mFrameHelpers.ts
index dfcaec8b14..54711f72ac 100644
--- a/packages/wallet/src/W3mFrameHelpers.ts
+++ b/packages/wallet/src/W3mFrameHelpers.ts
@@ -14,6 +14,8 @@ const RESTRICTED_TIMEZONES = [
   'ASIA/HARBIN'
 ]
 
+const EMAIL_MINIMUM_TIMEOUT = 30 * 1000
+
 export const W3mFrameHelpers = {
   getBlockchainApiUrl() {
     try {
@@ -32,10 +34,22 @@ export const W3mFrameHelpers = {
     const lastEmailLoginTime = W3mFrameStorage.get(W3mFrameConstants.LAST_EMAIL_LOGIN_TIME)
     if (lastEmailLoginTime) {
       const difference = Date.now() - Number(lastEmailLoginTime)
-      if (difference < 30_000) {
-        const cooldownSec = Math.ceil((30_000 - difference) / 1000)
+      if (difference < EMAIL_MINIMUM_TIMEOUT) {
+        const cooldownSec = Math.ceil((EMAIL_MINIMUM_TIMEOUT - difference) / 1000)
         throw new Error(`Please try again after ${cooldownSec} seconds`)
       }
     }
+  },
+
+  getTimeToNextEmailLogin() {
+    const lastEmailLoginTime = W3mFrameStorage.get(W3mFrameConstants.LAST_EMAIL_LOGIN_TIME)
+    if (lastEmailLoginTime) {
+      const difference = Date.now() - Number(lastEmailLoginTime)
+      if (difference < EMAIL_MINIMUM_TIMEOUT) {
+        return Math.ceil((EMAIL_MINIMUM_TIMEOUT - difference) / 1000)
+      }
+    }
+
+    return 0
   }
 }