import { u as k, w as S, M as a, O as f, l as u, t as x, F as A, z as O, R as b, V as E, Q as L, G as N, C as m, D as w, v as K, b7 as T } from "./index.es-i1FEgVLi.js";
const I = k`
  :host {
    z-index: var(--w3m-z-index);
    display: block;
    backface-visibility: hidden;
    will-change: opacity;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    background-color: var(--wui-cover);
    transition: opacity 0.2s var(--wui-ease-out-power-2);
    will-change: opacity;
  }

  :host(.open) {
    opacity: 1;
  }

  wui-card {
    max-width: var(--w3m-modal-width);
    width: 100%;
    position: relative;
    animation: zoom-in 0.2s var(--wui-ease-out-power-2);
    animation-fill-mode: backwards;
    outline: none;
  }

  wui-card[shake='true'] {
    animation:
      zoom-in 0.2s var(--wui-ease-out-power-2),
      w3m-shake 0.5s var(--wui-ease-out-power-2);
  }

  wui-flex {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  @media (max-height: 700px) and (min-width: 431px) {
    wui-flex {
      align-items: flex-start;
    }

    wui-card {
      margin: var(--wui-spacing-xxl) 0px;
    }
  }

  @media (max-width: 430px) {
    wui-flex {
      align-items: flex-end;
    }

    wui-card {
      max-width: 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: none;
      animation: slide-in 0.2s var(--wui-ease-out-power-2);
    }

    wui-card[shake='true'] {
      animation:
        slide-in 0.2s var(--wui-ease-out-power-2),
        w3m-shake 0.5s var(--wui-ease-out-power-2);
    }
  }

  @keyframes zoom-in {
    0% {
      transform: scale(0.95) translateY(0);
    }
    100% {
      transform: scale(1) translateY(0);
    }
  }

  @keyframes slide-in {
    0% {
      transform: scale(1) translateY(50px);
    }
    100% {
      transform: scale(1) translateY(0);
    }
  }

  @keyframes w3m-shake {
    0% {
      transform: scale(1) rotate(0deg);
    }
    20% {
      transform: scale(1) rotate(-1deg);
    }
    40% {
      transform: scale(1) rotate(1.5deg);
    }
    60% {
      transform: scale(1) rotate(-1.5deg);
    }
    80% {
      transform: scale(1) rotate(1deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }

  @keyframes w3m-view-height {
    from {
      height: var(--prev-height);
    }
    to {
      height: var(--new-height);
    }
  }
`;
var c = function(p, e, t, i) {
  var o = arguments.length, s = o < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, d;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function")
    s = Reflect.decorate(p, e, t, i);
  else
    for (var h = p.length - 1; h >= 0; h--)
      (d = p[h]) && (s = (o < 3 ? d(s) : o > 3 ? d(e, t, s) : d(e, t)) || s);
  return o > 3 && s && Object.defineProperty(e, t, s), s;
};
const g = "scroll-lock";
let r = class extends S {
  constructor() {
    super(), this.unsubscribe = [], this.abortController = void 0, this.open = a.state.open, this.isSiweEnabled = f.state.isSiweEnabled, this.connected = u.state.isConnected, this.loading = a.state.loading, this.caipAddress = u.state.caipAddress, this.shake = a.state.shake, this.initializeTheming(), x.prefetch(), this.unsubscribe.push(a.subscribeKey("open", (e) => e ? this.onOpen() : this.onClose()), a.subscribeKey("shake", (e) => this.shake = e), a.subscribeKey("loading", (e) => {
      this.loading = e, this.onNewAddress(u.state.caipAddress);
    }), u.subscribeKey("isConnected", (e) => this.connected = e), u.subscribeKey("caipAddress", (e) => this.onNewAddress(e)), f.subscribeKey("isSiweEnabled", (e) => this.isSiweEnabled = e)), A.sendEvent({ type: "track", event: "MODAL_LOADED" });
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e()), this.onRemoveKeyboardListener();
  }
  render() {
    return this.open ? O`
          <wui-flex @click=${this.onOverlayClick.bind(this)} data-testid="w3m-modal-overlay">
            <wui-card
              shake="${this.shake}"
              role="alertdialog"
              aria-modal="true"
              tabindex="0"
              data-testid="w3m-modal-card"
            >
              <w3m-header></w3m-header>
              <w3m-router></w3m-router>
              <w3m-snackbar></w3m-snackbar>
            </wui-card>
          </wui-flex>
          <w3m-tooltip></w3m-tooltip>
        ` : null;
  }
  async onOverlayClick(e) {
    e.target === e.currentTarget && await this.handleClose();
  }
  async handleClose() {
    const e = b.state.view === "ConnectingSiwe", t = b.state.view === "ApproveTransaction";
    if (this.isSiweEnabled) {
      const { SIWEController: i } = await import("./index-DUCH9zAr.js");
      i.state.status !== "success" && (e || t) ? a.shake() : a.close();
    } else
      a.close();
  }
  initializeTheming() {
    const { themeVariables: e, themeMode: t } = T.state, i = E.getColorTheme(t);
    L(e, i);
  }
  onClose() {
    this.open = !1, this.classList.remove("open"), this.onScrollUnlock(), N.hide(), this.onRemoveKeyboardListener();
  }
  onOpen() {
    this.open = !0, this.classList.add("open"), this.onScrollLock(), this.onAddKeyboardListener();
  }
  onScrollLock() {
    const e = document.createElement("style");
    e.dataset.w3m = g, e.textContent = `
      body {
        touch-action: none;
        overflow: hidden;
        overscroll-behavior: contain;
      }
      w3m-modal {
        pointer-events: auto;
      }
    `, document.head.appendChild(e);
  }
  onScrollUnlock() {
    const e = document.head.querySelector(`style[data-w3m="${g}"]`);
    e && e.remove();
  }
  onAddKeyboardListener() {
    var t;
    this.abortController = new AbortController();
    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("wui-card");
    e == null || e.focus(), window.addEventListener("keydown", (i) => {
      if (i.key === "Escape")
        this.handleClose();
      else if (i.key === "Tab") {
        const { tagName: o } = i.target;
        o && !o.includes("W3M-") && !o.includes("WUI-") && (e == null || e.focus());
      }
    }, this.abortController);
  }
  onRemoveKeyboardListener() {
    var e;
    (e = this.abortController) == null || e.abort(), this.abortController = void 0;
  }
  async onNewAddress(e) {
    var d, h;
    if (!this.connected || this.loading)
      return;
    const t = m.getPlainAddress(this.caipAddress), i = m.getNetworkId(this.caipAddress), o = m.getPlainAddress(e), s = m.getNetworkId(e);
    if (this.caipAddress = e, this.isSiweEnabled) {
      const { SIWEController: l, appKitAuthConfig: v } = await import("./index-DUCH9zAr.js");
      if (!l.state._client && f.state.enableAuth && l.setSIWEClient(v), t && t === o && i && i === s)
        return;
      let n = l.state.session;
      if (n || (n = await l.getSession() ?? void 0), n != null && n.address && (n != null && n.chainId)) {
        const { chainId: y, address: C } = n;
        if (o && C.toLowerCase() !== o.toLowerCase()) {
          (d = l.state._client) != null && d.options.signOutOnAccountChange && (await l.signOut(), this.onSiweNavigation());
          return;
        }
        s && y.toString() !== s && (h = l.state._client) != null && h.options.signOutOnNetworkChange && (await l.signOut(), this.onSiweNavigation());
      } else
        this.onSiweNavigation();
    }
  }
  onSiweNavigation() {
    this.open ? b.push("ConnectingSiwe") : a.open({
      view: "ConnectingSiwe"
    });
  }
};
r.styles = I;
c([
  w()
], r.prototype, "open", void 0);
c([
  w()
], r.prototype, "isSiweEnabled", void 0);
c([
  w()
], r.prototype, "connected", void 0);
c([
  w()
], r.prototype, "loading", void 0);
c([
  w()
], r.prototype, "caipAddress", void 0);
c([
  w()
], r.prototype, "shake", void 0);
r = c([
  K("w3m-modal")
], r);
export {
  r as W3mModal
};
