import{n as t,l as i,m as e,O as a,R as n,C as r,S as s,H as o,F as l}from"./p-BxEPsDRj.js";import{n as c,c as u,r as d,U as h}from"./p-CrMmJdZ6.js";import{W as p}from"./p-O_x03Lx4.js";import{R as f}from"./p-CayxodUu.js";import"./p-BId5WtRC.js";import"buffer";import"events";import"ox";import"viem";import"viem/chains";import"./p-YV_GhS6X.js";import"./p-WZF-tHaR.js";var m=t`
  .email-sufixes {
    display: flex;
    flex-direction: row;
    gap: var(--wui-spacing-3xs);
    overflow-x: auto;
    max-width: 100%;
    margin-top: var(--wui-spacing-s);
    margin-bottom: calc(-1 * var(--wui-spacing-m));
    padding-bottom: var(--wui-spacing-m);
    margin-left: calc(-1 * var(--wui-spacing-m));
    margin-right: calc(-1 * var(--wui-spacing-m));
    padding-left: var(--wui-spacing-m);
    padding-right: var(--wui-spacing-m);

    &::-webkit-scrollbar {
      display: none;
    }
  }
`;var w=undefined&&undefined.__decorate||function(t,i,e,a){var n=arguments.length,r=n<3?i:a===null?a=Object.getOwnPropertyDescriptor(i,e):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,a);else for(var o=t.length-1;o>=0;o--)if(s=t[o])r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r;return n>3&&r&&Object.defineProperty(i,e,r),r};const g=["@gmail.com","@outlook.com","@yahoo.com","@hotmail.com","@aol.com","@icloud.com","@zoho.com"];let x=class t extends i{constructor(){super(...arguments);this.email=""}render(){const t=g.filter(this.filter.bind(this)).map(this.item.bind(this));if(t.length===0){return null}return e`<div class="email-sufixes">${t}</div>`}filter(t){if(!this.email){return false}const i=this.email.split("@");if(i.length<2){return true}const e=i.pop();return t.includes(e)&&t!==`@${e}`}item(t){const i=()=>{const i=this.email.split("@");if(i.length>1){i.pop()}const e=i[0]+t;this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:true,composed:true}))};return e`<wui-button variant="neutral" size="sm" @click=${i}
      >${t}</wui-button
    >`}};x.styles=[m];w([c()],x.prototype,"email",void 0);x=w([u("w3m-email-suffixes-widget")],x);var v=t`
  .recent-emails {
    display: flex;
    flex-direction: column;
    padding: var(--wui-spacing-s) 0;
    border-top: 1px solid var(--wui-color-gray-glass-005);
    border-bottom: 1px solid var(--wui-color-gray-glass-005);
  }

  .recent-emails-heading {
    margin-bottom: var(--wui-spacing-s);
  }

  .recent-emails-list-item {
    --wui-color-gray-glass-002: transparent;
  }
`;var b=undefined&&undefined.__decorate||function(t,i,e,a){var n=arguments.length,r=n<3?i:a===null?a=Object.getOwnPropertyDescriptor(i,e):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,a);else for(var o=t.length-1;o>=0;o--)if(s=t[o])r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r;return n>3&&r&&Object.defineProperty(i,e,r),r};let $=class t extends i{constructor(){super(...arguments);this.emails=[]}render(){if(this.emails.length===0){return null}return e`<div class="recent-emails">
      <wui-text variant="micro-600" color="fg-200" class="recent-emails-heading"
        >Recently used emails</wui-text
      >
      ${this.emails.map(this.item.bind(this))}
    </div>`}item(t){const i=()=>{this.dispatchEvent(new CustomEvent("select",{detail:t,bubbles:true,composed:true}))};return e`<wui-list-item
      @click=${i}
      ?chevron=${true}
      icon="mail"
      iconVariant="overlay"
      class="recent-emails-list-item"
    >
      <wui-text variant="paragraph-500" color="fg-100">${t}</wui-text>
    </wui-list-item>`}};$.styles=[v];b([c()],$.prototype,"emails",void 0);$=b([u("w3m-recent-emails-widget")],$);var y=undefined&&undefined.__decorate||function(t,i,e,a){var n=arguments.length,r=n<3?i:a===null?a=Object.getOwnPropertyDescriptor(i,e):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,a);else for(var o=t.length-1;o>=0;o--)if(s=t[o])r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r;return n>3&&r&&Object.defineProperty(i,e,r),r};let R=class t extends p{constructor(){super(...arguments);this.siwx=a.state.siwx;this.onOtpSubmit=async t=>{await this.siwx.confirmEmailOtp({code:t});n.replace("SIWXSignMessage")};this.onOtpResend=async t=>{const i=r.getAccountData();if(!i?.caipAddress){throw new Error("No account data found")}await this.siwx.requestEmailOtp({email:t,account:i.caipAddress})}}connectedCallback(){if(!this.siwx||!(this.siwx instanceof f)){s.showError("ReownAuthentication is not initialized.")}super.connectedCallback()}shouldSubmitOnOtpChange(){return this.otp.length===p.OTP_LENGTH}};y([d()],R.prototype,"siwx",void 0);R=y([u("w3m-data-capture-otp-confirm-view")],R);var j=t`
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wui-spacing-3xs);

    transition-property: margin, height;
    transition-duration: var(--wui-duration-md);
    transition-timing-function: var(--wui-ease-out-power-1);
    margin-top: -100px;

    &[data-state='loading'] {
      margin-top: 0px;
    }

    position: relative;
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      height: 252px;
      width: 360px;
      background: radial-gradient(
        96.11% 53.95% at 50% 51.28%,
        transparent 0%,
        color-mix(in srgb, var(--wui-color-bg-100) 5%, transparent) 49%,
        color-mix(in srgb, var(--wui-color-bg-100) 65%, transparent) 99.43%
      );
    }
  }

  .hero-main-icon {
    width: 176px;
    transition-property: background-color;
    transition-duration: var(--wui-duration-lg);
    transition-timing-function: var(--wui-ease-out-power-1);

    &[data-state='loading'] {
      width: 56px;
    }
  }

  .hero-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--wui-spacing-3xs);
    flex-wrap: nowrap;
    min-width: fit-content;

    &:nth-child(1) {
      transform: translateX(-30px);
    }

    &:nth-child(2) {
      transform: translateX(30px);
    }

    &:nth-child(4) {
      transform: translateX(40px);
    }

    transition-property: height;
    transition-duration: var(--wui-duration-md);
    transition-timing-function: var(--wui-ease-out-power-1);
    height: 68px;

    &[data-state='loading'] {
      height: 0px;
    }
  }

  .hero-row-icon {
    opacity: 0.1;
    transition-property: opacity;
    transition-duration: var(--wui-duration-md);
    transition-timing-function: var(--wui-ease-out-power-1);

    &[data-state='loading'] {
      opacity: 0;
    }
  }
`;var C=undefined&&undefined.__decorate||function(t,i,e,a){var n=arguments.length,r=n<3?i:a===null?a=Object.getOwnPropertyDescriptor(i,e):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,a);else for(var o=t.length-1;o>=0;o--)if(s=t[o])r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r;return n>3&&r&&Object.defineProperty(i,e,r),r};let S=class t extends i{constructor(){super(...arguments);this.email=n.state.data?.email??r.getAccountData()?.user?.email??"";this.address=r.getAccountData()?.address??"";this.loading=false;this.appName=a.state.metadata?.name??"AppKit";this.siwx=a.state.siwx;this.isRequired=Array.isArray(a.state.remoteFeatures?.emailCapture)&&a.state.remoteFeatures?.emailCapture.includes("required");this.recentEmails=this.getRecentEmails()}connectedCallback(){if(!this.siwx||!(this.siwx instanceof f)){s.showError("ReownAuthentication is not initialized. Please contact support.")}super.connectedCallback()}firstUpdated(){this.loading=false;this.recentEmails=this.getRecentEmails();if(this.email){this.onSubmit()}}render(){return e`
      <wui-flex flexDirection="column" .padding=${["3xs","m","m","m"]} gap="l">
        ${this.hero()} ${this.paragraph()} ${this.emailInput()} ${this.recentEmailsWidget()}
        ${this.footerActions()}
      </wui-flex>
    `}hero(){return e`
      <div class="hero" data-state=${this.loading?"loading":"default"}>
        ${this.heroRow(["id","mail","wallet","x","solana","qrCode"])}
        ${this.heroRow(["mail","farcaster","wallet","discord","mobile","qrCode"])}
        <div class="hero-row">
          ${this.heroIcon("github")} ${this.heroIcon("bank")}
          <wui-icon-box
            size="xl"
            iconSize="xxl"
            iconColor=${this.loading?"fg-100":"accent-100"}
            backgroundColor=${this.loading?"fg-100":"accent-100"}
            icon=${this.loading?"id":"user"}
            isOpaque
            class="hero-main-icon"
            data-state=${this.loading?"loading":"default"}
          >
          </wui-icon-box>
          ${this.heroIcon("id")} ${this.heroIcon("card")}
        </div>
        ${this.heroRow(["google","id","github","verify","apple","mobile"])}
      </div>
    `}heroRow(t){return e`
      <div class="hero-row" data-state=${this.loading?"loading":"default"}>
        ${t.map(this.heroIcon.bind(this))}
      </div>
    `}heroIcon(t){return e`
      <wui-icon-box
        size="xl"
        iconSize="xxl"
        iconColor="fg-100"
        backgroundColor="fg-100"
        icon=${t}
        data-state=${this.loading?"loading":"default"}
        isOpaque
        class="hero-row-icon"
      >
      </wui-icon-box>
    `}paragraph(){if(this.loading){return e`
        <wui-text variant="paragraph-400" color="fg-200" align="center"
          >We are verifying your account with email
          <wui-text variant="paragraph-600" color="accent-100">${this.email}</wui-text> and address
          <wui-text variant="paragraph-600" color="fg-100">
            ${h.getTruncateString({string:this.address,charsEnd:4,charsStart:4,truncate:"middle"})} </wui-text
          >, please wait a moment.</wui-text
        >
      `}if(this.isRequired){return e`
        <wui-text variant="paragraph-600" color="fg-100" align="center">
          ${this.appName} requires your email for authentication.
        </wui-text>
      `}return e`
      <wui-flex flexDirection="column" gap="xs" alignItems="center">
        <wui-text variant="paragraph-600" color="fg-100" align="center" size>
          ${this.appName} would like to collect your email.
        </wui-text>

        <wui-text variant="small-400" color="fg-200" align="center">
          Don't worry, it's optional&mdash;you can skip this step.
        </wui-text>
      </wui-flex>
    `}emailInput(){if(this.loading){return null}const t=t=>{if(t.key==="Enter"){this.onSubmit()}};const i=t=>{this.email=t.detail};return e`
      <wui-flex flexDirection="column">
        <wui-email-input
          .value=${this.email}
          .disabled=${this.loading}
          @inputChange=${i}
          @keydown=${t}
        ></wui-email-input>

        <w3m-email-suffixes-widget
          .email=${this.email}
          @change=${i}
        ></w3m-email-suffixes-widget>
      </wui-flex>
    `}recentEmailsWidget(){if(this.recentEmails.length===0||this.loading){return null}const t=t=>{this.email=t.detail;this.onSubmit()};return e`
      <w3m-recent-emails-widget
        .emails=${this.recentEmails}
        @select=${t}
      ></w3m-recent-emails-widget>
    `}footerActions(){return e`
      <wui-flex flexDirection="row" fullWidth gap="s">
        ${this.isRequired?null:e`<wui-button
              size="lg"
              variant="neutral"
              fullWidth
              .disabled=${this.loading}
              @click=${this.onSkip.bind(this)}
              >Skip this step</wui-button
            >`}

        <wui-button
          size="lg"
          variant="main"
          type="submit"
          fullWidth
          .disabled=${!this.email||!this.isValidEmail(this.email)}
          .loading=${this.loading}
          @click=${this.onSubmit.bind(this)}
        >
          Continue
        </wui-button>
      </wui-flex>
    `}async onSubmit(){if(!(this.siwx instanceof f)){s.showError("ReownAuthentication is not initialized. Please contact support.");return}const t=r.getActiveCaipAddress();if(!t){throw new Error("Account is not connected.")}if(!this.isValidEmail(this.email)){s.showError("Please provide a valid email.");return}try{this.loading=true;const i=await this.siwx.requestEmailOtp({email:this.email,account:t});this.pushRecentEmail(this.email);if(i.uuid===null){n.replace("SIWXSignMessage")}else{n.replace("DataCaptureOtpConfirm",{email:this.email})}}catch(t){s.showError("Failed to send email OTP");this.loading=false}}onSkip(){n.replace("SIWXSignMessage")}getRecentEmails(){const t=o.getItem(l.RECENT_EMAILS);const i=t?t.split(","):[];return i.filter(this.isValidEmail.bind(this)).slice(0,3)}pushRecentEmail(t){const i=this.getRecentEmails();const e=Array.from(new Set([t,...i])).slice(0,3);o.setItem(l.RECENT_EMAILS,e.join(","))}isValidEmail(t){return/^\S+@\S+\.\S+$/u.test(t)}};S.styles=[j];C([d()],S.prototype,"email",void 0);C([d()],S.prototype,"address",void 0);C([d()],S.prototype,"loading",void 0);C([d()],S.prototype,"appName",void 0);C([d()],S.prototype,"siwx",void 0);C([d()],S.prototype,"isRequired",void 0);C([d()],S.prototype,"recentEmails",void 0);S=C([u("w3m-data-capture-view")],S);export{R as W3mDataCaptureOtpConfirmView,S as W3mDataCaptureView,x as W3mEmailSuffixesWidget,$ as W3mRecentEmailsWidget};
//# sourceMappingURL=p-D-cxbR_8.js.map