astra-modal-test 1.0.5 → 1.0.7

package/dist/ui-r6nnVhBA.js

@@ -0,0 +1,812 @@
+import { V as g, aJ as j, aK as b, aL as K, P as O, aM as m, X as U, _ as L, aN as M, aO as x, E as z, J as N, K as c, H as T, I as $, R as f, aB as w, S as v, as as V, av as u } from "./index-ClS956E1.js";
+import { f as R } from "./index-DfWqgW4h.js";
+class X {
+  constructor(e) {
+    this.expiration = e.expiration, this.getNonce = e.getNonce, this.getRequestId = e.getRequestId, this.domain = e.domain, this.uri = e.uri, this.statement = e.statement, this.resources = e.resources;
+  }
+  /**
+   * This is the default method to create a SIWXMessage object.
+   * It will call the `getNonce`, `getRequestId`, `getExpirationTime`, `getIssuedAt`, and `getNotBefore` methods.
+   * It appends the `stringify` method to the object as `toString`.
+   *
+   * @param input SIWXMessage.Input
+   * @returns
+   */
+  async createMessage(e) {
+    var s;
+    const t = {
+      accountAddress: e.accountAddress,
+      chainId: e.chainId,
+      version: this.version,
+      domain: this.domain,
+      uri: this.uri,
+      statement: this.statement,
+      resources: this.resources,
+      nonce: await this.getNonce(e),
+      requestId: await ((s = this.getRequestId) == null ? void 0 : s.call(this)),
+      expirationTime: this.getExpirationTime(e),
+      issuedAt: this.getIssuedAt(),
+      notBefore: this.getNotBefore(e)
+    };
+    return Object.assign(t, {
+      toString: () => this.stringify(t)
+    });
+  }
+  /**
+   * This method generates the expiration time based on the `notBefore` value and the `expiration` value.
+   * You may override this method to provide a custom expiration time.
+   *
+   * @param Pick<SIWXMessage.Input, 'notBefore'>
+   * @returns string | undefined - The expiration time in `stringifyDate` format or undefined if not available
+   */
+  getExpirationTime({ notBefore: e }) {
+    if (typeof this.expiration > "u")
+      return;
+    const t = e ? new Date(e).getTime() : Date.now();
+    return this.stringifyDate(new Date(t + this.expiration));
+  }
+  /**
+   * This method generates the `notBefore` formatted value based on the `notBefore` input.
+   * You may override this method to provide a custom `notBefore` value.
+   *
+   * @param Pick<SIWXMessage.Input, 'notBefore'>
+   * @returns string | undefined - The `notBefore` value in `stringifyDate` format or undefined if not available
+   */
+  getNotBefore({ notBefore: e }) {
+    return e ? this.stringifyDate(new Date(e)) : void 0;
+  }
+  /**
+   * This method generates the `issuedAt` formatted value based on the current date.
+   * You may override this method to provide a custom `issuedAt` value.
+   *
+   * @returns string - The `issuedAt` value in `stringifyDate` format
+   */
+  getIssuedAt() {
+    return this.stringifyDate(/* @__PURE__ */ new Date());
+  }
+  /**
+   * This method converts a date object to a formatted string.
+   * You may override this method to provide a custom date format.
+   *
+   * @param date Date
+   * @returns string - The date in ISO format
+   */
+  stringifyDate(e) {
+    return e.toISOString();
+  }
+}
+class B extends X {
+  constructor({ clearChainIdNamespace: e, ...t }) {
+    super(t), this.version = "1", this.clearChainIdNamespace = e || !1;
+  }
+  /**
+   * Get the blockchain name for a given chain ID
+   * @param chainId The chain ID to get the blockchain name for
+   * @returns The blockchain name
+   */
+  getNetworkName(e) {
+    const t = g.getAllRequestedCaipNetworks();
+    return j.getNetworkNameByCaipNetworkId(t, e);
+  }
+  stringify(e) {
+    var s;
+    const t = this.clearChainIdNamespace ? e.chainId.split(":")[1] : e.chainId, i = this.getNetworkName(e.chainId);
+    return [
+      `${e.domain} wants you to sign in with your ${i} account:`,
+      e.accountAddress,
+      e.statement ? `
+${e.statement}
+` : "",
+      `URI: ${e.uri}`,
+      `Version: ${e.version}`,
+      `Chain ID: ${t}`,
+      `Nonce: ${e.nonce}`,
+      e.issuedAt && `Issued At: ${e.issuedAt}`,
+      e.expirationTime && `Expiration Time: ${e.expirationTime}`,
+      e.notBefore && `Not Before: ${e.notBefore}`,
+      e.requestId && `Request ID: ${e.requestId}`,
+      ((s = e.resources) == null ? void 0 : s.length) && e.resources.reduce((n, a) => `${n}
+- ${a}`, "Resources:")
+    ].filter((n) => typeof n == "string").join(`
+`).trim();
+  }
+}
+class _ {
+  constructor(e = {}) {
+    this.otpUuid = null, this.listeners = {
+      sessionChanged: []
+    }, this.localAuthStorageKey = e.localAuthStorageKey || b.SIWX_AUTH_TOKEN, this.localNonceStorageKey = e.localNonceStorageKey || b.SIWX_NONCE_TOKEN, this.required = e.required ?? !0, this.messenger = new B({
+      domain: typeof document > "u" ? "Unknown Domain" : document.location.host,
+      uri: typeof document > "u" ? "Unknown URI" : document.location.href,
+      getNonce: this.getNonce.bind(this),
+      clearChainIdNamespace: !1
+    });
+  }
+  async createMessage(e) {
+    return this.messenger.createMessage(e);
+  }
+  async addSession(e) {
+    const t = await this.request({
+      method: "POST",
+      key: "authenticate",
+      body: {
+        data: e.data,
+        message: e.message,
+        signature: e.signature,
+        clientId: this.getClientId(),
+        walletInfo: this.getWalletInfo()
+      },
+      headers: ["nonce", "otp"]
+    });
+    this.setStorageToken(t.token, this.localAuthStorageKey), this.emit("sessionChanged", e), this.setAppKitAccountUser(H(t.token)), this.otpUuid = null;
+  }
+  async getSessions(e, t) {
+    try {
+      if (!this.getStorageToken(this.localAuthStorageKey))
+        return [];
+      const i = await this.request({
+        method: "GET",
+        key: "me",
+        query: {},
+        headers: ["auth"]
+      });
+      if (!i)
+        return [];
+      const s = i.address.toLowerCase() === t.toLowerCase(), n = i.caip2Network === e;
+      if (!s || !n)
+        return [];
+      const a = {
+        data: {
+          accountAddress: i.address,
+          chainId: i.caip2Network
+        },
+        message: "",
+        signature: ""
+      };
+      return this.emit("sessionChanged", a), this.setAppKitAccountUser(i), [a];
+    } catch {
+      return [];
+    }
+  }
+  async revokeSession(e, t) {
+    return Promise.resolve(this.clearStorageTokens());
+  }
+  async setSessions(e) {
+    if (e.length === 0)
+      this.clearStorageTokens();
+    else {
+      const t = e.find((i) => {
+        var s;
+        return i.data.chainId === ((s = K()) == null ? void 0 : s.caipNetworkId);
+      }) || e[0];
+      await this.addSession(t);
+    }
+  }
+  getRequired() {
+    return this.required;
+  }
+  async getSessionAccount() {
+    if (!this.getStorageToken(this.localAuthStorageKey))
+      throw new Error("Not authenticated");
+    return this.request({
+      method: "GET",
+      key: "me",
+      body: void 0,
+      query: {
+        includeAppKitAccount: !0
+      },
+      headers: ["auth"]
+    });
+  }
+  async setSessionAccountMetadata(e = null) {
+    if (!this.getStorageToken(this.localAuthStorageKey))
+      throw new Error("Not authenticated");
+    return this.request({
+      method: "PUT",
+      key: "account-metadata",
+      body: { metadata: e },
+      headers: ["auth"]
+    });
+  }
+  on(e, t) {
+    return this.listeners[e].push(t), () => {
+      this.listeners[e] = this.listeners[e].filter((i) => i !== t);
+    };
+  }
+  removeAllListeners() {
+    Object.keys(this.listeners).forEach((t) => {
+      this.listeners[t] = [];
+    });
+  }
+  async requestEmailOtp({ email: e, account: t }) {
+    const i = await this.request({
+      method: "POST",
+      key: "otp",
+      body: { email: e, account: t }
+    });
+    return this.otpUuid = i.uuid, this.messenger.resources = [`email:${e}`], i;
+  }
+  confirmEmailOtp({ code: e }) {
+    return this.request({
+      method: "PUT",
+      key: "otp",
+      body: { code: e },
+      headers: ["otp"]
+    });
+  }
+  async request({ method: e, key: t, query: i, body: s, headers: n }) {
+    var k;
+    const { projectId: a, st: o, sv: P } = this.getSDKProperties(), p = new URL(`${O.W3M_API_URL}/auth/v1/${String(t)}`);
+    p.searchParams.set("projectId", a), p.searchParams.set("st", o), p.searchParams.set("sv", P), i && Object.entries(i).forEach(([h, C]) => p.searchParams.set(h, String(C)));
+    const y = await fetch(p, {
+      method: e,
+      body: s ? JSON.stringify(s) : void 0,
+      headers: Array.isArray(n) ? n.reduce((h, C) => {
+        switch (C) {
+          case "nonce":
+            h["x-nonce-jwt"] = `Bearer ${this.getStorageToken(this.localNonceStorageKey)}`;
+            break;
+          case "auth":
+            h.Authorization = `Bearer ${this.getStorageToken(this.localAuthStorageKey)}`;
+            break;
+          case "otp":
+            this.otpUuid && (h["x-otp"] = this.otpUuid);
+            break;
+        }
+        return h;
+      }, {}) : void 0
+    });
+    if (!y.ok)
+      throw new Error(await y.text());
+    return (k = y.headers.get("content-type")) != null && k.includes("application/json") ? y.json() : null;
+  }
+  getStorageToken(e) {
+    return m.getItem(e);
+  }
+  setStorageToken(e, t) {
+    m.setItem(t, e);
+  }
+  clearStorageTokens() {
+    this.otpUuid = null, m.removeItem(this.localAuthStorageKey), m.removeItem(this.localNonceStorageKey), this.emit("sessionChanged", void 0);
+  }
+  async getNonce() {
+    const { nonce: e, token: t } = await this.request({
+      method: "GET",
+      key: "nonce"
+    });
+    return this.setStorageToken(t, this.localNonceStorageKey), e;
+  }
+  getClientId() {
+    return U.state.clientId;
+  }
+  getWalletInfo() {
+    const { connectedWalletInfo: e } = L.state;
+    if (!e)
+      return;
+    if ("social" in e) {
+      const n = e.social, a = e.identifier;
+      return { type: "social", social: n, identifier: a };
+    }
+    const { name: t, icon: i } = e;
+    let s = "unknown";
+    switch (e.type) {
+      case x.CONNECTOR_TYPE_EXTERNAL:
+      case x.CONNECTOR_TYPE_INJECTED:
+      case x.CONNECTOR_TYPE_ANNOUNCED:
+        s = "extension";
+        break;
+      case x.CONNECTOR_TYPE_WALLET_CONNECT:
+        s = "walletconnect";
+        break;
+      default:
+        s = "unknown";
+    }
+    return {
+      type: s,
+      name: t,
+      icon: i
+    };
+  }
+  getSDKProperties() {
+    return M._getSdkProperties();
+  }
+  emit(e, t) {
+    this.listeners[e].forEach((i) => i(t));
+  }
+  setAppKitAccountUser(e) {
+    const { email: t } = e;
+    t && Object.values(O.CHAIN).forEach((i) => {
+      g.setAccountProp("user", { email: t }, i);
+    });
+  }
+}
+function H(r) {
+  const e = r.split(".");
+  if (e.length !== 3)
+    throw new Error("Invalid token");
+  const t = e[1];
+  if (typeof t != "string")
+    throw new Error("Invalid token");
+  const i = t.replace(/-/gu, "+").replace(/_/gu, "/"), s = i.padEnd(i.length + (4 - i.length % 4) % 4, "=");
+  return JSON.parse(atob(s));
+}
+const A = z`
+  .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;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .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 q = function(r, e, t, i) {
+  var s = arguments.length, n = s < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(r, e, t, i);
+  else for (var o = r.length - 1; o >= 0; o--) (a = r[o]) && (n = (s < 3 ? a(n) : s > 3 ? a(e, t, n) : a(e, t)) || n);
+  return s > 3 && n && Object.defineProperty(e, t, n), n;
+};
+const J = [
+  "@gmail.com",
+  "@outlook.com",
+  "@yahoo.com",
+  "@hotmail.com",
+  "@aol.com",
+  "@icloud.com",
+  "@zoho.com"
+];
+let E = class extends N {
+  constructor() {
+    super(...arguments), this.email = "";
+  }
+  render() {
+    const e = J.filter(this.filter.bind(this)).map(this.item.bind(this));
+    return e.length === 0 ? null : c`<div class="email-sufixes">${e}</div>`;
+  }
+  filter(e) {
+    if (!this.email)
+      return !1;
+    const t = this.email.split("@");
+    if (t.length < 2)
+      return !0;
+    const i = t.pop();
+    return e.includes(i) && e !== `@${i}`;
+  }
+  item(e) {
+    return c`<wui-button variant="neutral" size="sm" @click=${() => {
+      const i = this.email.split("@");
+      i.length > 1 && i.pop();
+      const s = i[0] + e;
+      this.dispatchEvent(new CustomEvent("change", {
+        detail: s,
+        bubbles: !0,
+        composed: !0
+      }));
+    }}
+      >${e}</wui-button
+    >`;
+  }
+};
+E.styles = [A];
+q([
+  T()
+], E.prototype, "email", void 0);
+E = q([
+  $("w3m-email-suffixes-widget")
+], E);
+var D = function(r, e, t, i) {
+  var s = arguments.length, n = s < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(r, e, t, i);
+  else for (var o = r.length - 1; o >= 0; o--) (a = r[o]) && (n = (s < 3 ? a(n) : s > 3 ? a(e, t, n) : a(e, t)) || n);
+  return s > 3 && n && Object.defineProperty(e, t, n), n;
+};
+let S = class extends N {
+  constructor() {
+    super(...arguments), this.emails = [];
+  }
+  render() {
+    return this.emails.length === 0 ? null : c`<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(e) {
+    return c`<wui-list-item
+      @click=${() => {
+      this.dispatchEvent(new CustomEvent("select", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      }));
+    }}
+      ?chevron=${!0}
+      icon="mail"
+      iconVariant="overlay"
+      class="recent-emails-list-item"
+    >
+      <wui-text variant="paragraph-500" color="fg-100">${e}</wui-text>
+    </wui-list-item>`;
+  }
+};
+S.styles = [A];
+D([
+  T()
+], S.prototype, "emails", void 0);
+S = D([
+  $("w3m-recent-emails-widget")
+], S);
+var d = function(r, e, t, i) {
+  var s = arguments.length, n = s < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(r, e, t, i);
+  else for (var o = r.length - 1; o >= 0; o--) (a = r[o]) && (n = (s < 3 ? a(n) : s > 3 ? a(e, t, n) : a(e, t)) || n);
+  return s > 3 && n && Object.defineProperty(e, t, n), n;
+};
+let l = class extends N {
+  constructor() {
+    var e, t, i, s, n, a, o;
+    super(...arguments), this.email = ((e = f.state.data) == null ? void 0 : e.email) ?? ((i = (t = g.getAccountData()) == null ? void 0 : t.user) == null ? void 0 : i.email) ?? "", this.address = ((s = g.getAccountData()) == null ? void 0 : s.address) ?? "", this.loading = !1, this.appName = ((n = w.state.metadata) == null ? void 0 : n.name) ?? "AppKit", this.siwx = w.state.siwx, this.isRequired = Array.isArray((a = w.state.remoteFeatures) == null ? void 0 : a.emailCapture) && ((o = w.state.remoteFeatures) == null ? void 0 : o.emailCapture.includes("required")), this.recentEmails = this.getRecentEmails();
+  }
+  connectedCallback() {
+    (!this.siwx || !(this.siwx instanceof _)) && v.showError("ReownAuthentication is not initialized."), super.connectedCallback();
+  }
+  firstUpdated() {
+    this.loading = !1, this.recentEmails = this.getRecentEmails(), this.email && this.onSubmit();
+  }
+  render() {
+    return c`
+      <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 c`
+      <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(e) {
+    return c`
+      <div class="hero-row" data-state=${this.loading ? "loading" : "default"}>
+        ${e.map(this.heroIcon.bind(this))}
+      </div>
+    `;
+  }
+  heroIcon(e) {
+    return c`
+      <wui-icon-box
+        size="xl"
+        iconSize="xxl"
+        iconColor="fg-100"
+        backgroundColor="fg-100"
+        icon=${e}
+        data-state=${this.loading ? "loading" : "default"}
+        isOpaque
+        class="hero-row-icon"
+      >
+      </wui-icon-box>
+    `;
+  }
+  paragraph() {
+    return this.loading ? c`
+        <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">
+            ${V.getTruncateString({
+      string: this.address,
+      charsEnd: 4,
+      charsStart: 4,
+      truncate: "middle"
+    })} </wui-text
+          >, please wait a moment.</wui-text
+        >
+      ` : this.isRequired ? c`
+        <wui-text variant="paragraph-600" color="fg-100" align="center">
+          ${this.appName} requires your email for authentication.
+        </wui-text>
+      ` : c`
+      <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 e = (i) => {
+      i.key === "Enter" && this.onSubmit();
+    }, t = (i) => {
+      this.email = i.detail;
+    };
+    return c`
+      <wui-flex flexDirection="column">
+        <wui-email-input
+          .value=${this.email}
+          .disabled=${this.loading}
+          @inputChange=${t}
+          @keydown=${e}
+        ></wui-email-input>
+
+        <w3m-email-suffixes-widget
+          .email=${this.email}
+          @change=${t}
+        ></w3m-email-suffixes-widget>
+      </wui-flex>
+    `;
+  }
+  recentEmailsWidget() {
+    if (this.recentEmails.length === 0 || this.loading)
+      return null;
+    const e = (t) => {
+      this.email = t.detail, this.onSubmit();
+    };
+    return c`
+      <w3m-recent-emails-widget
+        .emails=${this.recentEmails}
+        @select=${e}
+      ></w3m-recent-emails-widget>
+    `;
+  }
+  footerActions() {
+    return c`
+      <wui-flex flexDirection="row" fullWidth gap="s">
+        ${this.isRequired ? null : c`<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() {
+    const e = g.getActiveCaipAddress();
+    if (!e)
+      throw new Error("Account is not connected.");
+    if (!this.isValidEmail(this.email)) {
+      v.showError("Please provide a valid email.");
+      return;
+    }
+    try {
+      this.loading = !0;
+      const t = await this.siwx.requestEmailOtp({
+        email: this.email,
+        account: e
+      });
+      this.pushRecentEmail(this.email), t.uuid === null ? f.replace("SIWXSignMessage") : f.replace("DataCaptureOtpConfirm", { email: this.email });
+    } catch {
+      v.showError("Failed to send email OTP"), this.loading = !1;
+    }
+  }
+  onSkip() {
+    f.replace("SIWXSignMessage");
+  }
+  getRecentEmails() {
+    const e = m.getItem(b.RECENT_EMAILS);
+    return (e ? e.split(",") : []).filter(this.isValidEmail.bind(this)).slice(0, 3);
+  }
+  pushRecentEmail(e) {
+    const t = this.getRecentEmails(), i = Array.from(/* @__PURE__ */ new Set([e, ...t])).slice(0, 3);
+    m.setItem(b.RECENT_EMAILS, i.join(","));
+  }
+  isValidEmail(e) {
+    return /^\S+@\S+\.\S+$/u.test(e);
+  }
+};
+l.styles = [A];
+d([
+  u()
+], l.prototype, "email", void 0);
+d([
+  u()
+], l.prototype, "address", void 0);
+d([
+  u()
+], l.prototype, "loading", void 0);
+d([
+  u()
+], l.prototype, "appName", void 0);
+d([
+  u()
+], l.prototype, "siwx", void 0);
+d([
+  u()
+], l.prototype, "isRequired", void 0);
+d([
+  u()
+], l.prototype, "recentEmails", void 0);
+l = d([
+  $("w3m-data-capture-view")
+], l);
+var W = function(r, e, t, i) {
+  var s = arguments.length, n = s < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(r, e, t, i);
+  else for (var o = r.length - 1; o >= 0; o--) (a = r[o]) && (n = (s < 3 ? a(n) : s > 3 ? a(e, t, n) : a(e, t)) || n);
+  return s > 3 && n && Object.defineProperty(e, t, n), n;
+};
+let I = class extends R {
+  constructor() {
+    super(...arguments), this.siwx = w.state.siwx, this.onOtpSubmit = async (e) => {
+      await this.siwx.confirmEmailOtp({ code: e }), f.replace("SIWXSignMessage");
+    }, this.onOtpResend = async (e) => {
+      const t = g.getAccountData();
+      if (!(t != null && t.caipAddress))
+        throw new Error("No account data found");
+      await this.siwx.requestEmailOtp({
+        email: e,
+        account: t.caipAddress
+      });
+    };
+  }
+  connectedCallback() {
+    (!this.siwx || !(this.siwx instanceof _)) && v.showError("ReownAuthentication is not initialized."), super.connectedCallback();
+  }
+  shouldSubmitOnOtpChange() {
+    return this.otp.length === R.OTP_LENGTH;
+  }
+};
+W([
+  u()
+], I.prototype, "siwx", void 0);
+I = W([
+  $("w3m-data-capture-otp-confirm-view")
+], I);
+export {
+  I as W3mDataCaptureOtpConfirmView,
+  l as W3mDataCaptureView,
+  E as W3mEmailSuffixesWidget,
+  S as W3mRecentEmailsWidget
+};