@latchprotocol/widgets 0.1.0

package/dist/embed.js

@@ -0,0 +1,543 @@
+import { createElement as v } from "react";
+import { createRoot as N } from "react-dom/client";
+import { y as S, bp as M, ao as P, b8 as B, ap as $, bw as q, aV as W, F as O, av as R } from "./chunks/scan-Dhu7f4Nl.js";
+import { L as F, a as D, S as U, W as _ } from "./chunks/SwapWidget-DgyHAVc8.js";
+import { i as Le } from "./chunks/SwapWidget-DgyHAVc8.js";
+import { http as G, createClient as H, isAddress as V } from "viem";
+import { getLogs as z, getBlockNumber as j, getBlock as J, readContract as K } from "viem/actions";
+import { getDeployment as Q } from "@latchprotocol/sdk/deployments";
+import { latchTransport as X } from "@latchprotocol/sdk";
+const y = [
+  "integrator",
+  "theme",
+  "slippage-bps",
+  "title-text"
+];
+function Y(a, e) {
+  if (a === null || a.trim() === "") return null;
+  try {
+    return JSON.parse(a);
+  } catch (n) {
+    throw new Error(
+      `[@latchprotocol/widgets] the ${e} attribute is not valid JSON: ${String(n)}`
+    );
+  }
+}
+const Z = typeof HTMLElement > "u" ? class {
+} : HTMLElement;
+class C extends Z {
+  #e = null;
+  #n = null;
+  #t = null;
+  #i = null;
+  /** Observed attributes, extended by each subclass. */
+  static get observedAttributes() {
+    return y;
+  }
+  /** The adapter, when set imperatively. Takes precedence over the attribute. */
+  get adapter() {
+    return this.#t;
+  }
+  set adapter(e) {
+    this.#t = e, this.#o();
+  }
+  connectedCallback() {
+    if (this.#n === null) {
+      this.#n = this.attachShadow({ mode: "open" });
+      const e = document.createElement("style");
+      e.textContent = _, this.#n.appendChild(e);
+      const n = document.createElement("div");
+      this.#n.appendChild(n), this.#e = N(n);
+    }
+    this.#o();
+  }
+  disconnectedCallback() {
+    const e = this.#e;
+    this.#e = null, e !== null && queueMicrotask(() => e.unmount());
+  }
+  attributeChangedCallback() {
+    this.#o();
+  }
+  /** Extra props derived from element attributes. */
+  widgetProps() {
+    const e = this.getAttribute("title-text");
+    return e === null ? {} : { title: e };
+  }
+  #r() {
+    return this.#t;
+  }
+  #o() {
+    if (this.#e !== null)
+      try {
+        const e = this.#r();
+        if (e === null) {
+          this.#e.render(
+            v(
+              "div",
+              { className: "latch-widget" },
+              v(
+                "p",
+                { className: "latch-error", role: "alert" },
+                "No adapter. Set the element's `adapter` property to a live adapter (createViemAdapter)."
+              )
+            )
+          );
+          return;
+        }
+        const n = Y(
+          this.getAttribute("integrator"),
+          "integrator"
+        ), t = this.getAttribute("theme") ?? "system", s = this.getAttribute("slippage-bps");
+        this.#i = null, this.#e.render(
+          v(S, {
+            adapter: e,
+            theme: t,
+            ...n === null ? {} : { integrator: n },
+            ...s === null ? {} : { defaultSlippageBps: Number(s) },
+            children: v(this.component(), this.widgetProps())
+          })
+        );
+      } catch (e) {
+        this.#i = e instanceof Error ? e.message : String(e), this.#e.render(
+          v(
+            "div",
+            { className: "latch-widget" },
+            v("p", { className: "latch-error", role: "alert" }, this.#i)
+          )
+        );
+      }
+  }
+}
+class ee extends C {
+  static get observedAttributes() {
+    return [...y, "token-in", "token-out", "account", "variant"];
+  }
+  component() {
+    return U;
+  }
+  widgetProps() {
+    const e = this.getAttribute("token-in"), n = this.getAttribute("token-out"), t = this.getAttribute("variant");
+    return {
+      ...super.widgetProps(),
+      ...e === null ? {} : { defaultTokenIn: e },
+      ...n === null ? {} : { defaultTokenOut: n },
+      ...t === "compact" ? { variant: "compact" } : {}
+    };
+  }
+}
+class te extends C {
+  static get observedAttributes() {
+    return [...y, "pool-id", "mode", "account"];
+  }
+  component() {
+    return D;
+  }
+  widgetProps() {
+    const e = this.getAttribute("pool-id"), n = this.getAttribute("mode");
+    return {
+      ...super.widgetProps(),
+      ...e === null ? {} : { defaultPoolId: e },
+      ...n === "remove" || n === "add" ? { defaultMode: n } : {}
+    };
+  }
+}
+class ne extends C {
+  static get observedAttributes() {
+    return [...y, "pool-id", "account"];
+  }
+  component() {
+    return F;
+  }
+  widgetProps() {
+    const e = this.getAttribute("pool-id");
+    return {
+      ...super.widgetProps(),
+      ...e === null ? {} : { poolId: e }
+    };
+  }
+}
+const E = {
+  swap: "latch-swap-widget",
+  liquidity: "latch-liquidity-widget",
+  launch: "latch-launch-widget"
+};
+function ge() {
+  if (typeof customElements > "u") return;
+  const a = [
+    [E.swap, ee],
+    [E.liquidity, te],
+    [E.launch, ne]
+  ];
+  for (const [e, n] of a)
+    customElements.get(e) === void 0 && customElements.define(e, n);
+}
+const b = "latch-widget", w = 1;
+function I(a) {
+  if (typeof a != "object" || a === null) return !1;
+  const e = a;
+  return e.channel === b && e.version === w && typeof e.type == "string";
+}
+function ke(a) {
+  const { iframe: e, widgetOrigin: n, adapter: t } = a;
+  if (n === "*" || n.trim() === "")
+    throw new Error(
+      '[@latchprotocol/widgets] widgetOrigin must be an exact origin, never "*". A wildcard origin lets any framed page impersonate the widget.'
+    );
+  const s = (r) => {
+    e.contentWindow?.postMessage(r, n);
+  }, l = async (r) => {
+    if (r.origin !== n || r.source !== e.contentWindow || !I(r.data)) return;
+    const d = r.data;
+    if (d.type === "ready") {
+      s({
+        channel: b,
+        version: w,
+        type: "init",
+        widget: a.widget,
+        integrator: a.integrator ?? null,
+        theme: a.theme ?? "system",
+        chain: {
+          chainId: t.chain.chainId,
+          name: t.chain.name,
+          nativeCurrency: t.chain.nativeCurrency,
+          ...t.chain.blockExplorerUrl === void 0 ? {} : { blockExplorerUrl: t.chain.blockExplorerUrl }
+        },
+        isMock: t.isMock
+      });
+      return;
+    }
+    if (d.type === "resize") {
+      a.onResize?.(d.height);
+      return;
+    }
+    if (d.type === "event") {
+      a.onEvent?.(d);
+      return;
+    }
+    if (d.type === "invoke")
+      try {
+        if (d.method === "sendTransaction" && a.approveTransaction !== void 0) {
+          const o = d.args[0];
+          if (!await a.approveTransaction(o))
+            throw new Error("The host refused this transaction");
+        }
+        const p = t[d.method];
+        if (typeof p != "function")
+          throw new Error(`Unknown bridge method: ${String(d.method)}`);
+        const i = await p.apply(t, [...d.args]);
+        s({
+          channel: b,
+          version: w,
+          type: "result",
+          id: d.id,
+          ok: !0,
+          value: i
+        });
+      } catch (p) {
+        const i = p instanceof Error ? p : new Error(String(p));
+        s({
+          channel: b,
+          version: w,
+          type: "result",
+          id: d.id,
+          ok: !1,
+          error: { name: i.name, message: i.message }
+        });
+      }
+  }, u = (r) => {
+    l(r);
+  };
+  return window.addEventListener("message", u), () => window.removeEventListener("message", u);
+}
+async function fe(a) {
+  const { hostOrigin: e } = a, n = a.timeoutMs ?? 6e4;
+  if (e === "*" || e.trim() === "")
+    throw new Error('[@latchprotocol/widgets] hostOrigin must be an exact origin, never "*"');
+  const t = /* @__PURE__ */ new Map();
+  let s = 0, l = null;
+  const u = new Promise((c) => {
+    l = c;
+  }), r = (c) => {
+    if (c.origin !== e || !I(c.data)) return;
+    const h = c.data;
+    if (h.type === "init") {
+      l?.(h);
+      return;
+    }
+    if (h.type !== "result") return;
+    const k = t.get(h.id);
+    if (k !== void 0)
+      if (t.delete(h.id), h.ok) k.resolve(h.value);
+      else {
+        const g = new Error(h.error.message);
+        g.name = h.error.name, k.reject(g);
+      }
+  };
+  window.addEventListener("message", r);
+  const d = (c) => {
+    window.parent.postMessage(c, e);
+  }, p = (c, h) => {
+    s += 1;
+    const k = `${Date.now().toString(36)}-${s}`;
+    return new Promise((g, f) => {
+      const T = setTimeout(() => {
+        t.delete(k), f(new Error(`[@latchprotocol/widgets] host did not answer ${c} in ${n}ms`));
+      }, n);
+      t.set(k, {
+        resolve: (L) => {
+          clearTimeout(T), g(L);
+        },
+        reject: (L) => {
+          clearTimeout(T), f(L);
+        }
+      }), d({
+        channel: b,
+        version: w,
+        type: "invoke",
+        id: k,
+        method: c,
+        args: h
+      });
+    });
+  };
+  d({ channel: b, version: w, type: "ready" });
+  const i = await u, o = (c) => (...h) => p(c, h);
+  return {
+    adapter: {
+      kind: "iframe-bridge",
+      isMock: i.isMock,
+      chain: {
+        chainId: i.chain.chainId,
+        name: i.chain.name,
+        nativeCurrency: i.chain.nativeCurrency,
+        // The bridge deliberately carries no addresses: the widget never builds
+        // calldata itself, the host does.
+        contracts: { vault: "0x0000000000000000000000000000000000000000" },
+        ...i.chain.blockExplorerUrl === void 0 ? {} : { blockExplorerUrl: i.chain.blockExplorerUrl }
+      },
+      getAccount: o("getAccount"),
+      listTokens: o("listTokens"),
+      getToken: o("getToken"),
+      getBalance: o("getBalance"),
+      listPools: o("listPools"),
+      getPoolState: o("getPoolState"),
+      getApprovalRequirements: o("getApprovalRequirements"),
+      buildApproval: o("buildApproval"),
+      quoteSwap: o("quoteSwap"),
+      buildSwap: o("buildSwap"),
+      quoteAddLiquidity: o("quoteAddLiquidity"),
+      buildAddLiquidity: o("buildAddLiquidity"),
+      listPositions: o("listPositions"),
+      quoteRemoveLiquidity: o("quoteRemoveLiquidity"),
+      buildRemoveLiquidity: o("buildRemoveLiquidity"),
+      listLaunches: o("listLaunches"),
+      getLaunch: o("getLaunch"),
+      getLaunchesForToken: o("getLaunchesForToken"),
+      sendTransaction: o("sendTransaction"),
+      waitForTransaction: o("waitForTransaction")
+    },
+    init: i,
+    dispose: () => {
+      window.removeEventListener("message", r), t.clear();
+    }
+  };
+}
+function be(a, e) {
+  const n = () => {
+    const s = {
+      channel: b,
+      version: w,
+      type: "resize",
+      height: Math.ceil(e.getBoundingClientRect().height)
+    };
+    window.parent.postMessage(s, a);
+  };
+  if (n(), typeof ResizeObserver > "u") return () => {
+  };
+  const t = new ResizeObserver(n);
+  return t.observe(e), () => t.disconnect();
+}
+const x = "latch-lock-badge", oe = `
+:host { display: inline-block; max-width: 100%; vertical-align: middle; }
+.latch-embed-badge[data-latch-theme] {
+  --latch-accent: var(--latch-brand-accent, #0A63E0);
+  --latch-font: var(--latch-brand-font, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
+  --latch-font-mono: var(--latch-brand-font-mono, "IBM Plex Mono", ui-monospace, monospace);
+}
+.latch-embed-badge[data-latch-theme="dark"] { --latch-accent: var(--latch-brand-accent, #2B8BFF); --latch-success: var(--latch-brand-success, #5FD39A); }
+@media (prefers-color-scheme: dark) {
+  .latch-embed-badge[data-latch-theme="system"] { --latch-accent: var(--latch-brand-accent, #2B8BFF); --latch-success: var(--latch-brand-success, #5FD39A); }
+}
+:host([hidden]) { display: none; }
+.latch-embed-badge { gap: 4px; }
+.latch-embed-badge__retry { font: inherit; font-size: 11px; background: none; border: 0; padding: 0; color: var(--latch-accent); cursor: pointer; text-decoration: underline; }
+`, ie = typeof HTMLElement > "u" ? class {
+} : HTMLElement, A = /* @__PURE__ */ new Map();
+function re(a) {
+  const e = Number(a("chain") ?? "");
+  if (!Number.isInteger(e) || e <= 0) return { ok: !1, message: 'Set the chain attribute to a chain id, e.g. chain="4663".' };
+  const n = a("pool"), t = a("token");
+  if (n !== null && n !== "") {
+    if (!/^0x[0-9a-fA-F]{64}$/.test(n)) return { ok: !1, message: "The pool attribute is not a 32-byte pool id." };
+    const s = (a("pool-type") ?? "cl").toLowerCase();
+    return { ok: !0, chainId: e, target: { kind: "pool", poolId: n, poolType: s === "bin" ? "bin" : "cl" } };
+  }
+  return t !== null && t !== "" ? V(t, { strict: !1 }) ? { ok: !0, chainId: e, target: { kind: "token", token: t } } : { ok: !1, message: "The token attribute is not an address." } : { ok: !1, message: "Set a pool or a token attribute." };
+}
+class ae extends ie {
+  static get observedAttributes() {
+    return ["chain", "pool", "token", "pool-type", "rpc", "site", "theme", "refresh"];
+  }
+  #e = null;
+  #n = null;
+  #t = { k: "loading" };
+  #i = 0;
+  #r = null;
+  #o = null;
+  #s = null;
+  connectedCallback() {
+    if (this.#e === null) {
+      this.#e = this.attachShadow({ mode: "open" });
+      const e = document.createElement("style");
+      e.textContent = `${_}
+${oe}`, this.#e.appendChild(e), this.#n = document.createElement("div"), this.#e.appendChild(this.#n);
+    }
+    this.#c();
+  }
+  disconnectedCallback() {
+    this.#d(), this.#i += 1;
+  }
+  attributeChangedCallback() {
+    this.#e !== null && this.isConnected && this.#c();
+  }
+  #d() {
+    this.#r !== null && clearInterval(this.#r), this.#o !== null && clearInterval(this.#o), this.#r = null, this.#o = null;
+  }
+  #c() {
+    this.#d(), this.#t = { k: "loading" }, this.#l(), this.#h();
+    const e = Number(this.getAttribute("refresh") ?? "60");
+    Number.isFinite(e) && e > 0 && (this.#r = setInterval(() => void this.#h(), Math.max(15, e) * 1e3)), this.#o = setInterval(() => {
+      this.#t.k === "ready" && this.#t.view.countdownTo !== null && this.#l();
+    }, 1e3);
+  }
+  #u(e) {
+    const n = this.getAttribute("rpc"), t = `${e}|${n ?? ""}`;
+    if (this.#s?.key === t) return this.#s.client;
+    const s = n !== null && n.trim() !== "" ? G(n.trim()) : X(e), l = H({ transport: s }), u = {
+      ...l,
+      readContract: (r) => K(l, r),
+      getBlock: (r) => J(l, r),
+      getBlockNumber: (r) => j(l, r),
+      getLogs: (r) => z(l, r)
+    };
+    return this.#s = { key: t, client: u }, u;
+  }
+  async #h() {
+    const e = ++this.#i, n = re((p) => this.getAttribute(p));
+    if (!n.ok) return this.#a(e, { k: "message", tone: "error", text: n.message, retry: !1 });
+    const t = Q(n.chainId);
+    if (t === void 0) return this.#a(e, { k: "message", tone: "none", text: `Latch does not support chain ${n.chainId}.`, retry: !1 });
+    const s = { symbol: t.nativeCurrency.symbol, decimals: t.nativeCurrency.decimals }, l = t.launchpadV2.clLPLocker, u = t.launchpadV2.binLPLocker, r = n.target;
+    if (!(r.kind === "pool" ? r.poolType === "bin" ? u !== null : t.positionLock !== null || l !== null : t.tokenLock !== null || l !== null || u !== null)) return this.#a(e, { k: "message", tone: "none", text: `Latch locks are coming soon on ${t.name}.`, retry: !1 });
+    try {
+      const p = this.#u(n.chainId);
+      let i = [];
+      if (l !== null && !(r.kind === "pool" && r.poolType === "bin")) {
+        const g = `${n.chainId}|${l.toLowerCase()}|${this.getAttribute("rpc") ?? ""}`;
+        let f = A.get(g);
+        f === void 0 && (f = M(p, l, { fromBlock: t.deployedAtBlock }), A.set(g, f), f.catch(() => A.delete(g))), i = await f;
+      }
+      const o = {
+        ...l !== null ? { lpLocker: l, lpLockerTokenIds: i } : {},
+        ...u !== null ? { binLpLocker: u } : {}
+      };
+      let m, c;
+      if (r.kind === "pool") {
+        const g = await P(p, t.positionLock, r.poolId, { native: s, lp: { ...o, poolType: r.poolType } });
+        m = g, c = B(g);
+      } else {
+        const g = await $(p, t.tokenLock, r.token, { native: s, lp: o });
+        m = g, c = q(g);
+      }
+      const h = this.getAttribute("site"), k = h === null || h.trim() === "" ? null : W(h.trim(), r.kind === "pool" ? { kind: "pool", poolId: r.poolId } : { kind: "token", token: r.token }, { pathBase: "/locks", query: `net=${t.key}` });
+      this.#a(e, { k: "ready", view: c, chainNow: m.chainNow, readAtMs: m.readAtMs, href: k });
+    } catch {
+      if (this.#t.k === "ready") return;
+      this.#a(e, { k: "message", tone: "error", text: "Locks could not be read: the chain did not answer.", retry: !0 });
+    }
+  }
+  #a(e, n) {
+    e === this.#i && (this.#t = n, this.#l());
+  }
+  #l() {
+    const e = this.#n;
+    if (e === null) return;
+    const n = this.getAttribute("theme"), t = this.#t, s = document.createElement("div");
+    s.className = "latch-widget latch-locks latch-locks--badge latch-embed-badge", s.dataset.latchTheme = n === "light" || n === "dark" ? n : "system";
+    const l = (i, o, m) => {
+      const c = document.createElement("p");
+      if (c.className = i, m !== void 0) {
+        const k = document.createElement("span");
+        k.className = `latch-locks__dot latch-locks__dot--${m}`, k.setAttribute("aria-hidden", "true"), c.appendChild(k);
+      }
+      const h = document.createElement("span");
+      return h.textContent = o, c.appendChild(h), c;
+    };
+    if (t.k === "loading")
+      s.appendChild(l("latch-locks__headline latch-locks__headline--muted", "Reading locks…")), s.setAttribute("role", "status");
+    else if (t.k === "message") {
+      const i = l(`latch-locks__headline${t.tone === "error" ? " latch-locks__headline--error" : ""}`, t.text, t.tone === "none" ? "none" : void 0);
+      if (s.appendChild(i), t.retry) {
+        const o = document.createElement("button");
+        o.type = "button", o.className = "latch-embed-badge__retry", o.textContent = "Retry", o.addEventListener("click", () => this.#c()), s.appendChild(o);
+      }
+    } else {
+      const i = l("latch-locks__headline", t.view.headline, t.view.tone);
+      if (i.title = t.view.detail ?? "", s.dataset.tone = t.view.tone, s.appendChild(i), t.view.countdownTo !== null) {
+        const o = O(t.chainNow, t.readAtMs, Date.now()), m = document.createElement("p");
+        m.className = "latch-locks__countdown";
+        const c = document.createElement("span");
+        c.className = "latch-locks__timer", c.textContent = R(t.view.countdownTo - o), m.append(c, ` to ${t.view.countdownLabel ?? "the next unlock"}`), s.appendChild(m);
+      }
+    }
+    const u = document.createElement("p");
+    u.className = "latch-brand";
+    const r = this.getAttribute("site");
+    if (r !== null && r.trim() !== "") {
+      const i = document.createElement("img");
+      i.className = "latch-brand__mark";
+      const o = s.dataset.latchTheme, c = o === "light" || o === "system" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: light)").matches ? "-onlight" : "";
+      i.src = `${r.trim().replace(/\/+$/, "")}/brand/masters/latch-mark${c}.svg`, i.width = 665, i.height = 765, i.alt = "Latch", u.appendChild(i);
+    }
+    const d = document.createElement("span");
+    d.textContent = "Read from chain", u.appendChild(d);
+    const p = document.createElement("span");
+    if (p.className = "latch-brand__spacer", u.appendChild(p), t.k === "ready" && t.href !== null) {
+      const i = document.createElement("a");
+      i.className = "latch-locks__link", i.href = t.href, i.target = "_blank", i.rel = "noopener", i.textContent = "Lock details →", u.appendChild(i);
+    }
+    s.appendChild(u), e.replaceChildren(s);
+  }
+}
+function we() {
+  typeof customElements > "u" || customElements.get(x) === void 0 && customElements.define(x, ae);
+}
+export {
+  x as LOCK_BADGE_TAG,
+  ne as LatchLaunchWidgetElement,
+  te as LatchLiquidityWidgetElement,
+  ae as LatchLockBadgeElement,
+  ee as LatchSwapWidgetElement,
+  b as WIDGET_CHANNEL,
+  _ as WIDGET_CSS,
+  w as WIDGET_PROTOCOL_VERSION,
+  E as WIDGET_TAG_NAMES,
+  fe as createIframeBridgeAdapter,
+  we as defineLatchLockBadge,
+  ge as defineLatchWidgets,
+  Le as injectWidgetStyles,
+  re as parseLockBadgeAttributes,
+  be as reportWidgetHeight,
+  ke as serveWidgetIframe
+};
+//# sourceMappingURL=embed.js.map