fix: email + UI responsive issues (#1676)

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>`
 }

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>
     `

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>
         `

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,55 +74,49 @@ 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) {
     try {
       if (this.loading) {
         return
       }
-
       this.loading = true
       event.preventDefault()
       const emailConnector = ConnectorController.getEmailConnector()
 
       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
     }

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%);
   }
 

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',

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)

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)

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)

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>

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;
     }
   }