@safe-stars/components/dist/index-DA8PiUwf.js

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

import { i as x, r as I, h as T, a as w, x as l, e as d, t as $, O as C, I as ce, A as g, d as m, M as W, f as k, p as be, C as b, c as S, R as f, b as U, S as j, W as V, k as y, s as dn, o as pn, B as Mi, L as hn, G as _, Q as Te, m as wn, n as fn, U as Ke, l as mn, T as Kt, V as vi } from "./index-C8heSj_E.js";
import { n as c, c as h, o as p, U as R, r as u, e as yi } from "./if-defined-H9lOPnQM.js";
import "./index-CEoQHHbR.js";
import "./index-D0dY6ucx.js";
import "./index-CO-88GIl.js";
import "./index-BFHNWrl6.js";
import { W as os } from "./index-BJLRdN4i.js";
import "./index-utK0dR3v.js";
import "./index-TIqjBwBa.js";
import "./index-CAt_KQrZ.js";
import "./index-DLyMD3ty.js";
import { n as gn } from "./index-CYavXBav.js";
import "./index-Ci9rXMAl.js";
import "./index-DhezNdHd.js";
import { M as Ci } from "./index-DdyJpeGZ.js";
import "./index-BsBepsrH.js";
import { e as oi, n as ri } from "./ref-D-t5jI4K.js";
import "./index-CEwkyLIl.js";
import "./index-DfxClAre.js";
import "./index-fxn4Z26P.js";
import "./index-DucdunxU.js";
import { O as lt } from "./index-CTW5WC3G.js";
import { e as bn } from "./index-C82PTrrx.js";
import { N as xn } from "./index-DHI6nyeM.js";
import "./index-BH1IEKag.js";
import "./index-BFHz6VGh.js";
import "./index-BmsjEGte.js";
import "./index-ClD0EBP9.js";
const vn = x`
  :host {
    display: block;
  }

  button {
    border-radius: var(--wui-border-radius-3xl);
    background: var(--wui-color-gray-glass-002);
    display: flex;
    gap: var(--wui-spacing-xs);
    padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) var(--wui-spacing-3xs)
      var(--wui-spacing-xs);
    border: 1px solid var(--wui-color-gray-glass-005);
  }

  button:disabled {
    background: var(--wui-color-gray-glass-015);
  }

  button:disabled > wui-text {
    color: var(--wui-color-gray-glass-015);
  }

  button:disabled > wui-flex > wui-text {
    color: var(--wui-color-gray-glass-015);
  }

  button:disabled > wui-image,
  button:disabled > wui-flex > wui-avatar {
    filter: grayscale(1);
  }

  button:has(wui-image) {
    padding: var(--wui-spacing-3xs) var(--wui-spacing-3xs) var(--wui-spacing-3xs)
      var(--wui-spacing-xs);
  }

  wui-text {
    color: var(--wui-color-fg-100);
  }

  wui-flex > wui-text {
    color: var(--wui-color-fg-200);
  }

  wui-image,
  wui-icon-box {
    border-radius: var(--wui-border-radius-3xl);
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
  }

  wui-flex {
    border-radius: var(--wui-border-radius-3xl);
    border: 1px solid var(--wui-color-gray-glass-005);
    background: var(--wui-color-gray-glass-005);
    padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
  }

  button.local-no-balance {
    border-radius: 0px;
    border: none;
    background: transparent;
  }

  wui-avatar {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 2px var(--wui-color-accent-glass-010);
  }

  @media (max-width: 500px) {
    button {
      gap: 0px;
      padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) !important;
      height: 32px;
    }
    wui-image,
    wui-icon-box,
    button > wui-text {
      visibility: hidden;
      width: 0px;
      height: 0px;
    }
    button {
      border-radius: 0px;
      border: none;
      background: transparent;
      padding: 0px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    button:hover:enabled > wui-flex > wui-text {
      color: var(--wui-color-fg-175);
    }

    button:active:enabled > wui-flex > wui-text {
      color: var(--wui-color-fg-175);
    }
  }
`;
var Q = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let H = class extends w {
  constructor() {
    super(...arguments), this.networkSrc = void 0, this.avatarSrc = void 0, this.balance = void 0, this.isUnsupportedChain = void 0, this.disabled = !1, this.loading = !1, this.address = "", this.profileName = "", this.charsStart = 4, this.charsEnd = 6;
  }
  render() {
    return l`
      <button
        ?disabled=${this.disabled}
        class=${p(this.balance ? void 0 : "local-no-balance")}
      >
        ${this.balanceTemplate()}
        <wui-flex gap="xxs" alignItems="center">
          <wui-avatar
            .imageSrc=${this.avatarSrc}
            alt=${this.address}
            address=${this.address}
          ></wui-avatar>
          <wui-text variant="paragraph-600" color="inherit">
            ${this.address ? R.getTruncateString({
      string: this.profileName || this.address,
      charsStart: this.profileName ? 18 : this.charsStart,
      charsEnd: this.profileName ? 0 : this.charsEnd,
      truncate: this.profileName ? "end" : "middle"
    }) : null}
          </wui-text>
        </wui-flex>
      </button>
    `;
  }
  balanceTemplate() {
    if (this.isUnsupportedChain)
      return l` <wui-icon-box
          size="sm"
          iconColor="error-100"
          backgroundColor="error-100"
          icon="warningCircle"
        ></wui-icon-box>
        <wui-text variant="paragraph-600" color="inherit"> Switch Network</wui-text>`;
    if (this.balance) {
      const e = this.networkSrc ? l`<wui-image src=${this.networkSrc}></wui-image>` : l`
            <wui-icon-box
              size="sm"
              iconColor="fg-200"
              backgroundColor="fg-300"
              icon="networkPlaceholder"
            ></wui-icon-box>
          `, t = this.loading ? l`<wui-loading-spinner size="md" color="fg-200"></wui-loading-spinner>` : l`<wui-text variant="paragraph-600" color="inherit"> ${this.balance}</wui-text>`;
      return l`${e} ${t}`;
    }
    return null;
  }
};
H.styles = [I, T, vn];
Q([
  c()
], H.prototype, "networkSrc", void 0);
Q([
  c()
], H.prototype, "avatarSrc", void 0);
Q([
  c()
], H.prototype, "balance", void 0);
Q([
  c({ type: Boolean })
], H.prototype, "isUnsupportedChain", void 0);
Q([
  c({ type: Boolean })
], H.prototype, "disabled", void 0);
Q([
  c({ type: Boolean })
], H.prototype, "loading", void 0);
Q([
  c()
], H.prototype, "address", void 0);
Q([
  c()
], H.prototype, "profileName", void 0);
Q([
  c()
], H.prototype, "charsStart", void 0);
Q([
  c()
], H.prototype, "charsEnd", void 0);
H = Q([
  h("wui-account-button")
], H);
var D = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
class L extends w {
  constructor() {
    var e, t, n, o, i, r;
    super(...arguments), this.unsubscribe = [], this.disabled = !1, this.balance = "show", this.charsStart = 4, this.charsEnd = 6, this.namespace = void 0, this.caipAddress = (e = d.getAccountData(this.namespace)) == null ? void 0 : e.caipAddress, this.balanceVal = (t = d.getAccountData(this.namespace)) == null ? void 0 : t.balance, this.balanceSymbol = (n = d.getAccountData(this.namespace)) == null ? void 0 : n.balanceSymbol, this.profileName = (o = d.getAccountData(this.namespace)) == null ? void 0 : o.profileName, this.profileImage = (i = d.getAccountData(this.namespace)) == null ? void 0 : i.profileImage, this.network = (r = d.getNetworkData(this.namespace)) == null ? void 0 : r.caipNetwork, this.networkImage = $.getNetworkImage(this.network), this.isSupported = C.state.allowUnsupportedChain ? !0 : d.state.activeChain ? d.checkIfSupportedNetwork(d.state.activeChain) : !0;
  }
  firstUpdated() {
    const e = this.namespace;
    e ? this.unsubscribe.push(d.subscribeChainProp("accountState", (t) => {
      this.caipAddress = t == null ? void 0 : t.caipAddress, this.balanceVal = t == null ? void 0 : t.balance, this.balanceSymbol = t == null ? void 0 : t.balanceSymbol, this.profileName = t == null ? void 0 : t.profileName, this.profileImage = t == null ? void 0 : t.profileImage;
    }, e), d.subscribeChainProp("networkState", (t) => {
      this.network = t == null ? void 0 : t.caipNetwork, this.isSupported = d.checkIfSupportedNetwork(e, t == null ? void 0 : t.caipNetwork), this.networkImage = $.getNetworkImage(t == null ? void 0 : t.caipNetwork);
    }, e)) : this.unsubscribe.push(ce.subscribeNetworkImages(() => {
      this.networkImage = $.getNetworkImage(this.network);
    }), d.subscribeKey("activeCaipAddress", (t) => {
      this.caipAddress = t;
    }), g.subscribeKey("balance", (t) => this.balanceVal = t), g.subscribeKey("balanceSymbol", (t) => this.balanceSymbol = t), g.subscribeKey("profileName", (t) => this.profileName = t), g.subscribeKey("profileImage", (t) => this.profileImage = t), d.subscribeKey("activeCaipNetwork", (t) => {
      this.network = t, this.networkImage = $.getNetworkImage(t), this.isSupported = t != null && t.chainNamespace ? d.checkIfSupportedNetwork(t == null ? void 0 : t.chainNamespace) : !0, this.fetchNetworkImage(t);
    }));
  }
  updated() {
    this.fetchNetworkImage(this.network);
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e());
  }
  render() {
    if (!d.state.activeChain)
      return null;
    const e = this.balance === "show", t = typeof this.balanceVal != "string";
    return l`
      <wui-account-button
        .disabled=${!!this.disabled}
        .isUnsupportedChain=${C.state.allowUnsupportedChain ? !1 : !this.isSupported}
        address=${p(m.getPlainAddress(this.caipAddress))}
        profileName=${p(this.profileName)}
        networkSrc=${p(this.networkImage)}
        avatarSrc=${p(this.profileImage)}
        balance=${e ? m.formatBalance(this.balanceVal, this.balanceSymbol) : ""}
        @click=${this.onClick.bind(this)}
        data-testid=${`account-button${this.namespace ? `-${this.namespace}` : ""}`}
        .charsStart=${this.charsStart}
        .charsEnd=${this.charsEnd}
        ?loading=${t}
      >
      </wui-account-button>
    `;
  }
  async onClick() {
    await d.switchActiveNamespace(this.namespace), this.isSupported || C.state.allowUnsupportedChain ? W.open() : W.open({ view: "UnsupportedChain" });
  }
  async fetchNetworkImage(e) {
    var t, n;
    (t = e == null ? void 0 : e.assets) != null && t.imageId && (this.networkImage = await $.fetchNetworkImage((n = e == null ? void 0 : e.assets) == null ? void 0 : n.imageId));
  }
}
D([
  c({ type: Boolean })
], L.prototype, "disabled", void 0);
D([
  c()
], L.prototype, "balance", void 0);
D([
  c()
], L.prototype, "charsStart", void 0);
D([
  c()
], L.prototype, "charsEnd", void 0);
D([
  c()
], L.prototype, "namespace", void 0);
D([
  u()
], L.prototype, "caipAddress", void 0);
D([
  u()
], L.prototype, "balanceVal", void 0);
D([
  u()
], L.prototype, "balanceSymbol", void 0);
D([
  u()
], L.prototype, "profileName", void 0);
D([
  u()
], L.prototype, "profileImage", void 0);
D([
  u()
], L.prototype, "network", void 0);
D([
  u()
], L.prototype, "networkImage", void 0);
D([
  u()
], L.prototype, "isSupported", void 0);
let $i = class extends L {
};
$i = D([
  h("w3m-account-button")
], $i);
let ki = class extends L {
};
ki = D([
  h("appkit-account-button")
], ki);
const yn = x`
  :host {
    display: block;
    width: max-content;
  }
`;
var J = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
class G extends w {
  constructor() {
    super(...arguments), this.unsubscribe = [], this.disabled = !1, this.balance = void 0, this.size = void 0, this.label = void 0, this.loadingLabel = void 0, this.charsStart = 4, this.charsEnd = 6, this.namespace = void 0, this.caipAddress = d.state.activeCaipAddress;
  }
  firstUpdated() {
    this.namespace ? this.unsubscribe.push(d.subscribeChainProp("accountState", (e) => {
      this.caipAddress = e == null ? void 0 : e.caipAddress;
    }, this.namespace)) : this.unsubscribe.push(d.subscribeKey("activeCaipAddress", (e) => this.caipAddress = e));
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e());
  }
  render() {
    return this.caipAddress ? l`
          <appkit-account-button
            .disabled=${!!this.disabled}
            balance=${p(this.balance)}
            .charsStart=${p(this.charsStart)}
            .charsEnd=${p(this.charsEnd)}
            namespace=${p(this.namespace)}
          >
          </appkit-account-button>
        ` : l`
          <appkit-connect-button
            size=${p(this.size)}
            label=${p(this.label)}
            loadingLabel=${p(this.loadingLabel)}
            namespace=${p(this.namespace)}
          ></appkit-connect-button>
        `;
  }
}
G.styles = yn;
J([
  c({ type: Boolean })
], G.prototype, "disabled", void 0);
J([
  c()
], G.prototype, "balance", void 0);
J([
  c()
], G.prototype, "size", void 0);
J([
  c()
], G.prototype, "label", void 0);
J([
  c()
], G.prototype, "loadingLabel", void 0);
J([
  c()
], G.prototype, "charsStart", void 0);
J([
  c()
], G.prototype, "charsEnd", void 0);
J([
  c()
], G.prototype, "namespace", void 0);
J([
  u()
], G.prototype, "caipAddress", void 0);
let Si = class extends G {
};
Si = J([
  h("w3m-button")
], Si);
let _i = class extends G {
};
_i = J([
  h("appkit-button")
], _i);
const Cn = x`
  :host {
    position: relative;
    display: block;
  }

  button {
    background: var(--wui-color-accent-100);
    border: 1px solid var(--wui-color-gray-glass-010);
    border-radius: var(--wui-border-radius-m);
    gap: var(--wui-spacing-xs);
  }

  button.loading {
    background: var(--wui-color-gray-glass-010);
    border: 1px solid var(--wui-color-gray-glass-010);
    pointer-events: none;
  }

  button:disabled {
    background-color: var(--wui-color-gray-glass-015);
    border: 1px solid var(--wui-color-gray-glass-010);
  }

  button:disabled > wui-text {
    color: var(--wui-color-gray-glass-015);
  }

  @media (hover: hover) and (pointer: fine) {
    button:hover:enabled {
      background-color: var(--wui-color-accent-090);
    }

    button:active:enabled {
      background-color: var(--wui-color-accent-080);
    }
  }

  button:focus-visible {
    border: 1px solid var(--wui-color-gray-glass-010);
    background-color: var(--wui-color-accent-090);
    -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
    -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
    box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
  }

  button[data-size='sm'] {
    padding: 6.75px 10px 7.25px;
  }

  ::slotted(*) {
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
    opacity: var(--local-opacity-100);
  }

  button > wui-text {
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
    opacity: var(--local-opacity-100);
    color: var(--wui-color-inverse-100);
  }

  button[data-size='md'] {
    padding: 9px var(--wui-spacing-l) 9px var(--wui-spacing-l);
  }

  button[data-size='md'] + wui-text {
    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;
  }

  wui-loading-spinner::slotted(svg) {
    width: 10px !important;
    height: 10px !important;
  }

  button[data-size='sm'] > wui-loading-spinner {
    width: 12px;
    height: 12px;
  }
`;
var ai = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let qe = class extends w {
  constructor() {
    super(...arguments), this.size = "md", this.loading = !1;
  }
  render() {
    const e = this.size === "md" ? "paragraph-600" : "small-600";
    return l`
      <button data-size=${this.size} ?disabled=${this.loading}>
        ${this.loadingTemplate()}
        <wui-text variant=${e} color=${this.loading ? "accent-100" : "inherit"}>
          <slot></slot>
        </wui-text>
      </button>
    `;
  }
  loadingTemplate() {
    return this.loading ? l`<wui-loading-spinner size=${this.size} color="accent-100"></wui-loading-spinner>` : null;
  }
};
qe.styles = [I, T, Cn];
ai([
  c()
], qe.prototype, "size", void 0);
ai([
  c({ type: Boolean })
], qe.prototype, "loading", void 0);
qe = ai([
  h("wui-connect-button")
], qe);
var we = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
class fe extends w {
  constructor() {
    super(), this.unsubscribe = [], this.size = "md", this.label = "Connect Wallet", this.loadingLabel = "Connecting...", this.open = W.state.open, this.loading = this.namespace ? W.state.loadingNamespaceMap.get(this.namespace) : W.state.loading, this.unsubscribe.push(W.subscribe((e) => {
      this.open = e.open, this.loading = this.namespace ? e.loadingNamespaceMap.get(this.namespace) : e.loading;
    }));
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e());
  }
  render() {
    return l`
      <wui-connect-button
        size=${p(this.size)}
        .loading=${this.loading}
        @click=${this.onClick.bind(this)}
        data-testid=${`connect-button${this.namespace ? `-${this.namespace}` : ""}`}
      >
        ${this.loading ? this.loadingLabel : this.label}
      </wui-connect-button>
    `;
  }
  onClick() {
    this.open ? W.close() : this.loading || W.open({ view: "Connect", namespace: this.namespace });
  }
}
we([
  c()
], fe.prototype, "size", void 0);
we([
  c()
], fe.prototype, "label", void 0);
we([
  c()
], fe.prototype, "loadingLabel", void 0);
we([
  c()
], fe.prototype, "namespace", void 0);
we([
  u()
], fe.prototype, "open", void 0);
we([
  u()
], fe.prototype, "loading", void 0);
let Ii = class extends fe {
};
Ii = we([
  h("w3m-connect-button")
], Ii);
let Ti = class extends fe {
};
Ti = we([
  h("appkit-connect-button")
], Ti);
const $n = x`
  :host {
    display: block;
  }

  button {
    border-radius: var(--wui-border-radius-3xl);
    display: flex;
    gap: var(--wui-spacing-xs);
    padding: var(--wui-spacing-2xs) var(--wui-spacing-s) var(--wui-spacing-2xs)
      var(--wui-spacing-xs);
    border: 1px solid var(--wui-color-gray-glass-010);
    background-color: var(--wui-color-gray-glass-005);
    color: var(--wui-color-fg-100);
  }

  button:disabled {
    border: 1px solid var(--wui-color-gray-glass-005);
    background-color: var(--wui-color-gray-glass-015);
    color: var(--wui-color-gray-glass-015);
  }

  @media (hover: hover) and (pointer: fine) {
    button:hover:enabled {
      background-color: var(--wui-color-gray-glass-010);
    }

    button:active:enabled {
      background-color: var(--wui-color-gray-glass-015);
    }
  }

  wui-image,
  wui-icon-box {
    border-radius: var(--wui-border-radius-3xl);
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
  }
`;
var Rt = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let Ae = class extends w {
  constructor() {
    super(...arguments), this.imageSrc = void 0, this.isUnsupportedChain = void 0, this.disabled = !1;
  }
  render() {
    return l`
      <button data-testid="wui-network-button" ?disabled=${this.disabled}>
        ${this.visualTemplate()}
        <wui-text variant="paragraph-600" color="inherit">
          <slot></slot>
        </wui-text>
      </button>
    `;
  }
  visualTemplate() {
    return this.isUnsupportedChain ? l`
        <wui-icon-box
          size="sm"
          iconColor="error-100"
          backgroundColor="error-100"
          icon="warningCircle"
        ></wui-icon-box>
      ` : this.imageSrc ? l`<wui-image src=${this.imageSrc}></wui-image>` : l`
      <wui-icon-box
        size="sm"
        iconColor="inverse-100"
        backgroundColor="fg-100"
        icon="networkPlaceholder"
      ></wui-icon-box>
    `;
  }
};
Ae.styles = [I, T, $n];
Rt([
  c()
], Ae.prototype, "imageSrc", void 0);
Rt([
  c({ type: Boolean })
], Ae.prototype, "isUnsupportedChain", void 0);
Rt([
  c({ type: Boolean })
], Ae.prototype, "disabled", void 0);
Ae = Rt([
  h("wui-network-button")
], Ae);
const kn = x`
  :host {
    display: block;
    width: max-content;
  }
`;
var le = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
class ie extends w {
  constructor() {
    super(), this.unsubscribe = [], this.disabled = !1, this.network = d.state.activeCaipNetwork, this.networkImage = $.getNetworkImage(this.network), this.caipAddress = d.state.activeCaipAddress, this.loading = W.state.loading, this.isSupported = C.state.allowUnsupportedChain ? !0 : d.state.activeChain ? d.checkIfSupportedNetwork(d.state.activeChain) : !0, this.unsubscribe.push(ce.subscribeNetworkImages(() => {
      this.networkImage = $.getNetworkImage(this.network);
    }), d.subscribeKey("activeCaipAddress", (e) => {
      this.caipAddress = e;
    }), d.subscribeKey("activeCaipNetwork", (e) => {
      var t;
      this.network = e, this.networkImage = $.getNetworkImage(e), this.isSupported = e != null && e.chainNamespace ? d.checkIfSupportedNetwork(e.chainNamespace) : !0, $.fetchNetworkImage((t = e == null ? void 0 : e.assets) == null ? void 0 : t.imageId);
    }), W.subscribeKey("loading", (e) => this.loading = e));
  }
  firstUpdated() {
    var e, t;
    $.fetchNetworkImage((t = (e = this.network) == null ? void 0 : e.assets) == null ? void 0 : t.imageId);
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e());
  }
  render() {
    const e = this.network ? d.checkIfSupportedNetwork(this.network.chainNamespace) : !0;
    return l`
      <wui-network-button
        .disabled=${!!(this.disabled || this.loading)}
        .isUnsupportedChain=${C.state.allowUnsupportedChain ? !1 : !e}
        imageSrc=${p(this.networkImage)}
        @click=${this.onClick.bind(this)}
        data-testid="w3m-network-button"
      >
        ${this.getLabel()}
        <slot></slot>
      </wui-network-button>
    `;
  }
  getLabel() {
    return this.network ? !this.isSupported && !C.state.allowUnsupportedChain ? "Switch Network" : this.network.name : this.label ? this.label : this.caipAddress ? "Unknown Network" : "Select Network";
  }
  onClick() {
    this.loading || (k.sendEvent({ type: "track", event: "CLICK_NETWORKS" }), W.open({ view: "Networks" }));
  }
}
ie.styles = kn;
le([
  c({ type: Boolean })
], ie.prototype, "disabled", void 0);
le([
  c({ type: String })
], ie.prototype, "label", void 0);
le([
  u()
], ie.prototype, "network", void 0);
le([
  u()
], ie.prototype, "networkImage", void 0);
le([
  u()
], ie.prototype, "caipAddress", void 0);
le([
  u()
], ie.prototype, "loading", void 0);
le([
  u()
], ie.prototype, "isSupported", void 0);
let Ai = class extends ie {
};
Ai = le([
  h("w3m-network-button")
], Ai);
let Ri = class extends ie {
};
Ri = le([
  h("appkit-network-button")
], Ri);
const Sn = x`
  :host {
    display: block;
  }

  button {
    width: 100%;
    display: block;
    padding-top: var(--wui-spacing-l);
    padding-bottom: var(--wui-spacing-l);
    padding-left: var(--wui-spacing-s);
    padding-right: var(--wui-spacing-2l);
    border-radius: var(--wui-border-radius-s);
    background-color: var(--wui-color-accent-glass-010);
  }

  button:hover {
    background-color: var(--wui-color-accent-glass-015) !important;
  }

  button:active {
    background-color: var(--wui-color-accent-glass-020) !important;
  }
`;
var Wt = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let Re = class extends w {
  constructor() {
    super(...arguments), this.label = "", this.description = "", this.icon = "wallet";
  }
  render() {
    return l`
      <button>
        <wui-flex gap="m" alignItems="center" justifyContent="space-between">
          <wui-icon-box
            size="lg"
            iconcolor="accent-100"
            backgroundcolor="accent-100"
            icon=${this.icon}
            background="transparent"
          ></wui-icon-box>

          <wui-flex flexDirection="column" gap="3xs">
            <wui-text variant="paragraph-500" color="fg-100">${this.label}</wui-text>
            <wui-text variant="small-400" color="fg-200">${this.description}</wui-text>
          </wui-flex>

          <wui-icon size="md" color="fg-200" name="chevronRight"></wui-icon>
        </wui-flex>
      </button>
    `;
  }
};
Re.styles = [I, T, Sn];
Wt([
  c()
], Re.prototype, "label", void 0);
Wt([
  c()
], Re.prototype, "description", void 0);
Wt([
  c()
], Re.prototype, "icon", void 0);
Re = Wt([
  h("wui-notice-card")
], Re);
var Vi = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let qt = class extends w {
  constructor() {
    super(), this.unsubscribe = [], this.socialProvider = be.getConnectedSocialProvider(), this.socialUsername = be.getConnectedSocialUsername(), this.namespace = d.state.activeChain, this.unsubscribe.push(d.subscribeKey("activeChain", (e) => {
      this.namespace = e;
    }));
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e());
  }
  render() {
    const e = b.getConnectorId(this.namespace), t = b.getAuthConnector();
    if (!t || e !== S.CONNECTOR_ID.AUTH)
      return this.style.cssText = "display: none", null;
    const n = t.provider.getEmail() ?? "";
    return !n && !this.socialUsername ? (this.style.cssText = "display: none", null) : l`
      <wui-list-item
        variant="icon"
        iconVariant="overlay"
        icon=${this.socialProvider ?? "mail"}
        iconSize=${this.socialProvider ? "xxl" : "sm"}
        data-testid="w3m-account-email-update"
        ?chevron=${!this.socialProvider}
        @click=${() => {
      this.onGoToUpdateEmail(n, this.socialProvider);
    }}
      >
        <wui-text variant="paragraph-500" color="fg-100">${this.getAuthName(n)}</wui-text>
      </wui-list-item>
    `;
  }
  onGoToUpdateEmail(e, t) {
    t || f.push("UpdateEmailWallet", { email: e, redirectView: "Account" });
  }
  getAuthName(e) {
    return this.socialUsername ? this.socialProvider === "discord" && this.socialUsername.endsWith("0") ? this.socialUsername.slice(0, -1) : this.socialUsername : e.length > 30 ? `${e.slice(0, -3)}...` : e;
  }
};
Vi([
  u()
], qt.prototype, "namespace", void 0);
qt = Vi([
  h("w3m-account-auth-button")
], qt);
var ne = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let Y = class extends w {
  constructor() {
    super(), this.usubscribe = [], this.networkImages = ce.state.networkImages, this.address = g.state.address, this.profileImage = g.state.profileImage, this.profileName = g.state.profileName, this.network = d.state.activeCaipNetwork, this.preferredAccountTypes = g.state.preferredAccountTypes, this.disconnecting = !1, this.loading = !1, this.switched = !1, this.text = "", this.usubscribe.push(g.subscribe((e) => {
      e.address && (this.address = e.address, this.profileImage = e.profileImage, this.profileName = e.profileName, this.preferredAccountTypes = e.preferredAccountTypes);
    }), g.subscribeKey("preferredAccountTypes", (e) => this.preferredAccountTypes = e), d.subscribeKey("activeCaipNetwork", (e) => {
      e != null && e.id && (this.network = e);
    }));
  }
  disconnectedCallback() {
    this.usubscribe.forEach((e) => e());
  }
  render() {
    var t, n, o;
    if (!this.address)
      throw new Error("w3m-account-settings-view: No account provided");
    const e = this.networkImages[((n = (t = this.network) == null ? void 0 : t.assets) == null ? void 0 : n.imageId) ?? ""];
    return l`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        gap="l"
        .padding=${["0", "xl", "m", "xl"]}
      >
        <wui-avatar
          alt=${this.address}
          address=${this.address}
          imageSrc=${p(this.profileImage)}
          size="2lg"
        ></wui-avatar>
        <wui-flex flexDirection="column" alignItems="center">
          <wui-flex gap="3xs" alignItems="center" justifyContent="center">
            <wui-text variant="title-6-600" color="fg-100" data-testid="account-settings-address">
              ${R.getTruncateString({
      string: this.address,
      charsStart: 4,
      charsEnd: 6,
      truncate: "middle"
    })}
            </wui-text>
            <wui-icon-link
              size="md"
              icon="copy"
              iconColor="fg-200"
              @click=${this.onCopyAddress}
            ></wui-icon-link>
          </wui-flex>
        </wui-flex>
      </wui-flex>
      <wui-flex flexDirection="column" gap="m">
        <wui-flex flexDirection="column" gap="xs" .padding=${["0", "l", "m", "l"]}>
          ${this.authCardTemplate()}
          <w3m-account-auth-button></w3m-account-auth-button>
          <wui-list-item
            .variant=${e ? "image" : "icon"}
            iconVariant="overlay"
            icon="networkPlaceholder"
            imageSrc=${p(e)}
            ?chevron=${this.isAllowedNetworkSwitch()}
            @click=${this.onNetworks.bind(this)}
            data-testid="account-switch-network-button"
          >
            <wui-text variant="paragraph-500" color="fg-100">
              ${((o = this.network) == null ? void 0 : o.name) ?? "Unknown"}
            </wui-text>
          </wui-list-item>
          ${this.togglePreferredAccountBtnTemplate()} ${this.chooseNameButtonTemplate()}
          <wui-list-item
            variant="icon"
            iconVariant="overlay"
            icon="disconnect"
            ?chevron=${!1}
            .loading=${this.disconnecting}
            @click=${this.onDisconnect.bind(this)}
            data-testid="disconnect-button"
          >
            <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
          </wui-list-item>
        </wui-flex>
      </wui-flex>
    `;
  }
  chooseNameButtonTemplate() {
    var i;
    const e = (i = this.network) == null ? void 0 : i.chainNamespace, t = b.getConnectorId(e), n = b.getAuthConnector();
    return !d.checkIfNamesSupported() || !n || t !== S.CONNECTOR_ID.AUTH || this.profileName ? null : l`
      <wui-list-item
        variant="icon"
        iconVariant="overlay"
        icon="id"
        iconSize="sm"
        ?chevron=${!0}
        @click=${this.onChooseName.bind(this)}
        data-testid="account-choose-name-button"
      >
        <wui-text variant="paragraph-500" color="fg-100">Choose account name </wui-text>
      </wui-list-item>
    `;
  }
  authCardTemplate() {
    var i;
    const e = (i = this.network) == null ? void 0 : i.chainNamespace, t = b.getConnectorId(e), n = b.getAuthConnector(), { origin: o } = location;
    return !n || t !== S.CONNECTOR_ID.AUTH || o.includes(U.SECURE_SITE) ? null : l`
      <wui-notice-card
        @click=${this.onGoToUpgradeView.bind(this)}
        label="Upgrade your wallet"
        description="Transition to a self-custodial wallet"
        icon="wallet"
        data-testid="w3m-wallet-upgrade-card"
      ></wui-notice-card>
    `;
  }
  isAllowedNetworkSwitch() {
    const e = d.getAllRequestedCaipNetworks(), t = e ? e.length > 1 : !1, n = e == null ? void 0 : e.find(({ id: o }) => {
      var i;
      return o === ((i = this.network) == null ? void 0 : i.id);
    });
    return t || !n;
  }
  onCopyAddress() {
    try {
      this.address && (m.copyToClopboard(this.address), j.showSuccess("Address copied"));
    } catch {
      j.showError("Failed to copy");
    }
  }
  togglePreferredAccountBtnTemplate() {
    var i, r;
    const e = (i = this.network) == null ? void 0 : i.chainNamespace, t = d.checkIfSmartAccountEnabled(), n = b.getConnectorId(e);
    return !b.getAuthConnector() || n !== S.CONNECTOR_ID.AUTH || !t ? null : (this.switched || (this.text = ((r = this.preferredAccountTypes) == null ? void 0 : r[e]) === V.ACCOUNT_TYPES.SMART_ACCOUNT ? "Switch to your EOA" : "Switch to your smart account"), l`
      <wui-list-item
        variant="icon"
        iconVariant="overlay"
        icon="swapHorizontalBold"
        iconSize="sm"
        ?chevron=${!0}
        ?loading=${this.loading}
        @click=${this.changePreferredAccountType.bind(this)}
        data-testid="account-toggle-preferred-account-type"
      >
        <wui-text variant="paragraph-500" color="fg-100">${this.text}</wui-text>
      </wui-list-item>
    `);
  }
  onChooseName() {
    f.push("ChooseAccountName");
  }
  async changePreferredAccountType() {
    var i, r;
    const e = (i = this.network) == null ? void 0 : i.chainNamespace, t = d.checkIfSmartAccountEnabled(), n = ((r = this.preferredAccountTypes) == null ? void 0 : r[e]) === V.ACCOUNT_TYPES.SMART_ACCOUNT || !t ? V.ACCOUNT_TYPES.EOA : V.ACCOUNT_TYPES.SMART_ACCOUNT;
    b.getAuthConnector() && (this.loading = !0, await y.setPreferredAccountType(n, e), this.text = n === V.ACCOUNT_TYPES.SMART_ACCOUNT ? "Switch to your EOA" : "Switch to your smart account", this.switched = !0, dn.resetSend(), this.loading = !1, this.requestUpdate());
  }
  onNetworks() {
    this.isAllowedNetworkSwitch() && f.push("Networks");
  }
  async onDisconnect() {
    try {
      this.disconnecting = !0, await y.disconnect(), W.close();
    } catch {
      k.sendEvent({ type: "track", event: "DISCONNECT_ERROR" }), j.showError("Failed to disconnect");
    } finally {
      this.disconnecting = !1;
    }
  }
  onGoToUpgradeView() {
    k.sendEvent({ type: "track", event: "EMAIL_UPGRADE_FROM_MODAL" }), f.push("UpgradeEmailWallet");
  }
};
ne([
  u()
], Y.prototype, "address", void 0);
ne([
  u()
], Y.prototype, "profileImage", void 0);
ne([
  u()
], Y.prototype, "profileName", void 0);
ne([
  u()
], Y.prototype, "network", void 0);
ne([
  u()
], Y.prototype, "preferredAccountTypes", void 0);
ne([
  u()
], Y.prototype, "disconnecting", void 0);
ne([
  u()
], Y.prototype, "loading", void 0);
ne([
  u()
], Y.prototype, "switched", void 0);
ne([
  u()
], Y.prototype, "text", void 0);
Y = ne([
  h("w3m-account-settings-view")
], Y);
const _n = x`
  button {
    background-color: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-3xl);
    border: 1px solid var(--wui-color-gray-glass-002);
    padding: var(--wui-spacing-xs) var(--wui-spacing-s) var(--wui-spacing-xs) var(--wui-spacing-xs);
    position: relative;
  }

  wui-avatar {
    width: 32px;
    height: 32px;
    box-shadow: 0 0 0 0;
    outline: 3px solid var(--wui-color-gray-glass-005);
  }

  wui-icon-box,
  wui-image {
    width: 16px;
    height: 16px;
    border-radius: var(--wui-border-radius-3xl);
    position: absolute;
    left: 26px;
    top: 24px;
  }

  wui-image {
    outline: 2px solid var(--wui-color-bg-125);
  }

  wui-icon-box {
    outline: 2px solid var(--wui-color-bg-200);
    background-color: var(--wui-color-bg-250);
  }
`;
var _e = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let ae = class extends w {
  constructor() {
    super(...arguments), this.avatarSrc = void 0, this.profileName = "", this.address = "", this.icon = "mail";
  }
  render() {
    const e = d.state.activeChain, n = b.getConnectorId(e) === S.CONNECTOR_ID.AUTH;
    return l`<button data-testid="wui-profile-button" @click=${this.handleClick}>
      <wui-flex gap="xs" alignItems="center">
        <wui-avatar
          .imageSrc=${this.avatarSrc}
          alt=${this.address}
          address=${this.address}
        ></wui-avatar>
        ${n ? this.getIconTemplate(this.icon) : ""}
        <wui-flex gap="xs" alignItems="center">
          <wui-text variant="large-600" color="fg-100">
            ${R.getTruncateString({
      string: this.profileName || this.address,
      charsStart: this.profileName ? 18 : 4,
      charsEnd: this.profileName ? 0 : 4,
      truncate: this.profileName ? "end" : "middle"
    })}
          </wui-text>
          <wui-icon size="sm" color="fg-200" name="copy" id="copy-address"></wui-icon>
        </wui-flex>
      </wui-flex>
    </button>`;
  }
  handleClick(e) {
    var t, n;
    if (e.target instanceof HTMLElement && e.target.id === "copy-address") {
      (t = this.onCopyClick) == null || t.call(this, e);
      return;
    }
    (n = this.onProfileClick) == null || n.call(this, e);
  }
  getIconTemplate(e) {
    return l`
      <wui-icon-box
        size="xxs"
        iconColor="fg-200"
        backgroundColor="bg-100"
        icon="${e || "networkPlaceholder"}"
      ></wui-icon-box>
    `;
  }
};
ae.styles = [I, T, _n];
_e([
  c()
], ae.prototype, "avatarSrc", void 0);
_e([
  c()
], ae.prototype, "profileName", void 0);
_e([
  c()
], ae.prototype, "address", void 0);
_e([
  c()
], ae.prototype, "icon", void 0);
_e([
  c()
], ae.prototype, "onProfileClick", void 0);
_e([
  c()
], ae.prototype, "onCopyClick", void 0);
ae = _e([
  h("wui-profile-button-v2")
], ae);
const In = x`
  :host {
    display: inline-flex;
    background-color: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-3xl);
    padding: var(--wui-spacing-3xs);
    position: relative;
    height: 36px;
    min-height: 36px;
    overflow: hidden;
  }

  :host::before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 4px;
    left: 4px;
    display: block;
    width: var(--local-tab-width);
    height: 28px;
    border-radius: var(--wui-border-radius-3xl);
    background-color: var(--wui-color-gray-glass-002);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
    transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
    transition: transform var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: background-color, opacity;
  }

  :host([data-type='flex'])::before {
    left: 3px;
    transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px)));
  }

  :host([data-type='flex']) {
    display: flex;
    padding: 0px 0px 0px 12px;
    gap: 4px;
  }

  :host([data-type='flex']) > button > wui-text {
    position: absolute;
    left: 18px;
    opacity: 0;
  }

  button[data-active='true'] > wui-icon,
  button[data-active='true'] > wui-text {
    color: var(--wui-color-fg-100);
  }

  button[data-active='false'] > wui-icon,
  button[data-active='false'] > wui-text {
    color: var(--wui-color-fg-200);
  }

  button[data-active='true']:disabled,
  button[data-active='false']:disabled {
    background-color: transparent;
    opacity: 0.5;
    cursor: not-allowed;
  }

  button[data-active='true']:disabled > wui-text {
    color: var(--wui-color-fg-200);
  }

  button[data-active='false']:disabled > wui-text {
    color: var(--wui-color-fg-300);
  }

  button > wui-icon,
  button > wui-text {
    pointer-events: none;
    transition: color var(--wui-e ase-out-power-1) var(--wui-duration-md);
    will-change: color;
  }

  button {
    width: var(--local-tab-width);
    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: background-color;
  }

  :host([data-type='flex']) > button {
    width: 34px;
    position: relative;
    display: flex;
    justify-content: flex-start;
  }

  button:hover:enabled,
  button:active:enabled {
    background-color: transparent !important;
  }

  button:hover:enabled > wui-icon,
  button:active:enabled > wui-icon {
    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
    color: var(--wui-color-fg-125);
  }

  button:hover:enabled > wui-text,
  button:active:enabled > wui-text {
    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
    color: var(--wui-color-fg-125);
  }

  button {
    border-radius: var(--wui-border-radius-3xl);
  }
`;
var me = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let ee = class extends w {
  constructor() {
    super(...arguments), this.tabs = [], this.onTabChange = () => null, this.buttons = [], this.disabled = !1, this.localTabWidth = "100px", this.activeTab = 0, this.isDense = !1;
  }
  render() {
    return this.isDense = this.tabs.length > 3, this.style.cssText = `
      --local-tab: ${this.activeTab};
      --local-tab-width: ${this.localTabWidth};
    `, this.dataset.type = this.isDense ? "flex" : "block", this.tabs.map((e, t) => {
      var o;
      const n = t === this.activeTab;
      return l`
        <button
          ?disabled=${this.disabled}
          @click=${() => this.onTabClick(t)}
          data-active=${n}
          data-testid="tab-${(o = e.label) == null ? void 0 : o.toLowerCase()}"
        >
          ${this.iconTemplate(e)}
          <wui-text variant="small-600" color="inherit"> ${e.label} </wui-text>
        </button>
      `;
    });
  }
  firstUpdated() {
    this.shadowRoot && this.isDense && (this.buttons = [...this.shadowRoot.querySelectorAll("button")], setTimeout(() => {
      this.animateTabs(0, !0);
    }, 0));
  }
  iconTemplate(e) {
    return e.icon ? l`<wui-icon size="xs" color="inherit" name=${e.icon}></wui-icon>` : null;
  }
  onTabClick(e) {
    this.buttons && this.animateTabs(e, !1), this.activeTab = e, this.onTabChange(e);
  }
  animateTabs(e, t) {
    const n = this.buttons[this.activeTab], o = this.buttons[e], i = n == null ? void 0 : n.querySelector("wui-text"), r = o == null ? void 0 : o.querySelector("wui-text"), s = o == null ? void 0 : o.getBoundingClientRect(), v = r == null ? void 0 : r.getBoundingClientRect();
    n && i && !t && e !== this.activeTab && (i.animate([{ opacity: 0 }], {
      duration: 50,
      easing: "ease",
      fill: "forwards"
    }), n.animate([{ width: "34px" }], {
      duration: 500,
      easing: "ease",
      fill: "forwards"
    })), o && s && v && r && (e !== this.activeTab || t) && (this.localTabWidth = `${Math.round(s.width + v.width) + 6}px`, o.animate([{ width: `${s.width + v.width}px` }], {
      duration: t ? 0 : 500,
      fill: "forwards",
      easing: "ease"
    }), r.animate([{ opacity: 1 }], {
      duration: t ? 0 : 125,
      delay: t ? 0 : 200,
      fill: "forwards",
      easing: "ease"
    }));
  }
};
ee.styles = [I, T, In];
me([
  c({ type: Array })
], ee.prototype, "tabs", void 0);
me([
  c()
], ee.prototype, "onTabChange", void 0);
me([
  c({ type: Array })
], ee.prototype, "buttons", void 0);
me([
  c({ type: Boolean })
], ee.prototype, "disabled", void 0);
me([
  c()
], ee.prototype, "localTabWidth", void 0);
me([
  u()
], ee.prototype, "activeTab", void 0);
me([
  u()
], ee.prototype, "isDense", void 0);
ee = me([
  h("wui-tabs")
], ee);
const Tn = x`
  wui-flex {
    width: 100%;
  }

  :host > wui-flex:first-child {
    transform: translateY(calc(var(--wui-spacing-xxs) * -1));
  }

  wui-icon-link {
    margin-right: calc(var(--wui-icon-box-size-md) * -1);
  }

  wui-notice-card {
    margin-bottom: var(--wui-spacing-3xs);
  }

  wui-list-item > wui-text {
    flex: 1;
  }

  w3m-transactions-view {
    max-height: 200px;
  }

  .tab-content-container {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .tab-content-container::-webkit-scrollbar {
    display: none;
  }

  .account-button {
    width: auto;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wui-spacing-s);
    height: 48px;
    padding: var(--wui-spacing-xs);
    padding-right: var(--wui-spacing-s);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
    background-color: var(--wui-color-gray-glass-002);
    border-radius: 24px;
    transition: background-color 0.2s linear;
  }

  .account-button:hover {
    background-color: var(--wui-color-gray-glass-005);
  }

  .avatar-container {
    position: relative;
  }

  wui-avatar.avatar {
    width: 32px;
    height: 32px;
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
  }

  wui-avatar.network-avatar {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-75%, -75%);
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
  }

  .account-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .account-links wui-flex {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: red;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 10px;
    flex: 1 0 0;
    border-radius: var(--XS, 16px);
    border: 1px solid var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
    background: var(--dark-accent-glass-010, rgba(71, 161, 255, 0.1));
    transition:
      background-color var(--wui-ease-out-power-1) var(--wui-duration-md),
      opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: background-color, opacity;
  }

  .account-links wui-flex:hover {
    background: var(--dark-accent-glass-015, rgba(71, 161, 255, 0.15));
  }

  .account-links wui-flex wui-icon {
    width: var(--S, 20px);
    height: var(--S, 20px);
  }

  .account-links wui-flex wui-icon svg path {
    stroke: #667dff;
  }
`;
var F = function(a, e, t, n) {
  var o = arguments.length, i = o < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, t) : n, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(a, e, t, n);
  else for (var s = a.length - 1; s >= 0; s--) (r = a[s]) && (i = (o < 3 ? r(i) : o > 3 ? r(e, t, i) : r(e, t)) || i);
  return o > 3 && i && Object.defineProperty(e, t, i), i;
};
let B = class extends w {
  constructor() {
    var e;
    super(), this.unsubscribe = [], this.caipAddress = g.state.caipAddress, this.address = m.getPlainAddress(g.state.caipAddress), this.allAccounts = g.state.allAccounts, this.profileImage = g.state.profileImage, this.profileName = g.state.profileName, this.disconnecting = !1, this.balance = g.state.balance, this.balanceSymbol = g.state.balanceSymbol, this.features = C.state.features, this.namespace = d.state.activeChain, this.chainId = (e = d.state.activeCaipNetwork) == null ? void 0 : e.id, this.unsubscribe.push(g.subscribeKey("caipAddress", (t) => {
      this.address = m.getPlainAddress(t), this.caipAddress = t;
    }), g.subscribeKey("balance", (t) => this.balance = t), g.subscribeKey("balanceSymbol", (t) => this.balanceSymbol = t), g.subscribeKey("profileName", (t) => this.profi