import { l as v, n as y, M as n, v as w, O as b, b3 as k, t as C, o as S, R as p, U as x, I as A, w as O, C as m, q as c, m as E, b4 as L } from "./index.es-B4TFy14s.js";
const N = v`
  :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 l = function(u, e, t, o) {
  var i = arguments.length, s = i < 3 ? e : o === null ? o = Object.getOwnPropertyDescriptor(e, t) : o, r;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function")
    s = Reflect.decorate(u, e, t, o);
  else
    for (var d = u.length - 1; d >= 0; d--)
      (r = u[d]) && (s = (i < 3 ? r(s) : i > 3 ? r(e, t, s) : r(e, t)) || s);
  return i > 3 && s && Object.defineProperty(e, t, s), s;
};
const g = "scroll-lock";
let a = class extends y {
  constructor() {
    super(), this.unsubscribe = [], this.abortController = void 0, this.open = n.state.open, this.caipAddress = w.state.caipAddress, this.isSiweEnabled = b.state.isSiweEnabled, this.connected = w.state.isConnected, this.loading = n.state.loading, this.shake = n.state.shake, this.initializeTheming(), k.prefetch(), this.unsubscribe.push(n.subscribeKey("open", (e) => e ? this.onOpen() : this.onClose()), n.subscribeKey("shake", (e) => this.shake = e), n.subscribeKey("loading", (e) => {
      this.loading = e, this.onNewAddress(w.state.caipAddress);
    }), w.subscribeKey("isConnected", (e) => this.connected = e), w.subscribeKey("caipAddress", (e) => this.onNewAddress(e)), b.subscribeKey("isSiweEnabled", (e) => this.isSiweEnabled = e)), C.sendEvent({ type: "track", event: "MODAL_LOADED" });
  }
  disconnectedCallback() {
    this.unsubscribe.forEach((e) => e()), this.onRemoveKeyboardListener();
  }
  render() {
    return this.open ? S`
          <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 = p.state.view === "ConnectingSiwe", t = p.state.view === "ApproveTransaction";
    if (this.isSiweEnabled) {
      const { SIWEController: o } = await import("./index-BEHVV4DY.js");
      o.state.status !== "success" && (e || t) ? n.shake() : n.close();
    } else
      n.close();
  }
  initializeTheming() {
    const { themeVariables: e, themeMode: t } = L.state, o = x.getColorTheme(t);
    A(e, o);
  }
  onClose() {
    this.open = !1, this.classList.remove("open"), this.onScrollUnlock(), O.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", (o) => {
      if (o.key === "Escape")
        this.handleClose();
      else if (o.key === "Tab") {
        const { tagName: i } = o.target;
        i && !i.includes("W3M-") && !i.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 r, d;
    if (!this.connected || this.loading)
      return;
    const t = m.getPlainAddress(this.caipAddress), o = m.getPlainAddress(e), i = m.getNetworkId(this.caipAddress), s = m.getNetworkId(e);
    if (this.caipAddress = e, this.isSiweEnabled) {
      const { SIWEController: h } = await import("./index-BEHVV4DY.js"), f = await h.getSession();
      if (f && t && o && t !== o) {
        (r = h.state._client) != null && r.options.signOutOnAccountChange && (await h.signOut(), this.onSiweNavigation());
        return;
      }
      if (f && i && s && i !== s) {
        (d = h.state._client) != null && d.options.signOutOnNetworkChange && (await h.signOut(), this.onSiweNavigation());
        return;
      }
      this.onSiweNavigation();
    }
  }
  onSiweNavigation() {
    this.open ? p.push("ConnectingSiwe") : n.open({
      view: "ConnectingSiwe"
    });
  }
};
a.styles = N;
l([
  c()
], a.prototype, "open", void 0);
l([
  c()
], a.prototype, "caipAddress", void 0);
l([
  c()
], a.prototype, "isSiweEnabled", void 0);
l([
  c()
], a.prototype, "connected", void 0);
l([
  c()
], a.prototype, "loading", void 0);
l([
  c()
], a.prototype, "shake", void 0);
a = l([
  E("w3m-modal")
], a);
export {
  a as W3mModal
};
