fix: email + UI responsive issues

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

@@ -6,6 +6,7 @@ import { ref, createRef } from 'lit/directives/ref.js'
 import type { Ref } from 'lit/directives/ref.js'
 import styles from './styles.js'
 import { SnackController, RouterController } from '@web3modal/core'
+import { z } from 'zod'
 
 @customElement('w3m-email-login-widget')
 export class W3mEmailLoginWidget extends LitElement {
@@ -23,6 +24,8 @@ export class W3mEmailLoginWidget extends LitElement {
 
   @state() private loading = false
 
+  @state() private error = ''
+
   public constructor() {
     super()
     this.unsubscribe.push(
@@ -57,10 +60,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,47 +75,41 @@ 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
       }
+      const { success: isEmailValid } = z.string().email().safeParse(this.email)
+      if (!isEmailValid) {
+        this.error = 'Invalid email. Try again'
 
+        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 })

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: 26px;
     transform: translateY(-50%);
   }
 

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

@@ -26,12 +26,26 @@ export class W3mEmailVerifyOtpView extends LitElement {
   // -- State & Properties -------------------------------- //
   @state() private loading = false
 
+  @state() private timeoutTimeLeft = 30
+
+  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"
@@ -56,13 +70,26 @@ export class W3mEmailVerifyOtpView extends LitElement {
 
         <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.timeoutTimeLeft = 30
+    this.OTPTimeout = setInterval(() => {
+      if (this.timeoutTimeLeft > 0) {
+        this.timeoutTimeLeft -= 1
+      } else {
+        clearInterval(this.OTPTimeout)
+      }
+    }, 1000)
+  }
+
   private async onOtpInputChange(event: CustomEvent<string>) {
     try {
       if (!this.loading) {
@@ -87,14 +114,15 @@ export class W3mEmailVerifyOtpView extends LitElement {
 
   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;
     }
   }
 

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;

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);
+    }
   }
 `