@chaindaddy/js 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/core.ts
-var VERSION = true ? "0.1.0" : "0.0.0";
+var VERSION = true ? "0.3.0" : "0.0.0";
 function b64url(bytes) {
   let s = "";
   for (const b of bytes) s += String.fromCharCode(b);
@@ -212,12 +212,356 @@ function defineSignInButton() {
   CdSigninButton.observedAttributes = ["theme", "text"];
   customElements.define("cd-signin-button", CdSigninButton);
 }
+
+// src/embed.ts
+var PROD_ORIGIN = "https://embed.chaindaddy.io";
+var STAGING_ORIGIN = "https://embed-staging.chaindaddy.io";
+var READY_TIMEOUT_MS = 8e3;
+var MAX_HEIGHT = 4e3;
+var THEME_TOKENS = ["--cd-accent", "--cd-surface", "--cd-text", "--cd-text-muted", "--cd-border"];
+function embedOriginFor(scriptSrc) {
+  try {
+    if (scriptSrc && new URL(scriptSrc).hostname === "js.staging.chaindaddy.io") return STAGING_ORIGIN;
+  } catch {
+  }
+  return PROD_ORIGIN;
+}
+var STYLE2 = `
+:host { display: block; }
+iframe { display: block; width: 100%; border: 0; height: 1px; opacity: 0; color-scheme: normal; }
+:host([data-cd-ready]) iframe { opacity: 1; }
+:host([data-cd-ready]) slot { display: none; }
+:host([data-cd-unavailable]) iframe { display: none; }
+`;
+var BUY_STYLE = `
+:host { display: inline-block; }
+button { box-sizing: border-box; min-height: 40px; padding: 0 16px; border-radius: 10px; cursor: pointer;
+  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  border: 1px solid var(--cd-border, #d0d5dd); background: var(--cd-accent, #f59e0b); color: var(--cd-text, #101828); }
+button:focus-visible { outline: 2px solid var(--cd-accent, #f59e0b); outline-offset: 2px; }
+`;
+function defineEmbedElements(options = {}) {
+  try {
+    if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") return;
+    const origin = options.origin === STAGING_ORIGIN ? STAGING_ORIGIN : PROD_ORIGIN;
+    class CdFrame extends HTMLElement {
+      constructor() {
+        super(...arguments);
+        this.kind = "app";
+        this.frame = null;
+        this.onMessage = (event) => this.receive(event);
+      }
+      connectedCallback() {
+        try {
+          if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+          this.mount();
+        } catch {
+          this.unavailable();
+        }
+      }
+      disconnectedCallback() {
+        try {
+          window.removeEventListener("message", this.onMessage);
+          clearTimeout(this.timer);
+        } catch {
+        }
+      }
+      attributeChangedCallback() {
+        try {
+          if (this.isConnected && this.shadowRoot) this.mount();
+        } catch {
+          this.unavailable();
+        }
+      }
+      /** The frame's address, or null when the element does not name enough. */
+      src() {
+        const crown = (this.getAttribute("crown") ?? "").trim();
+        const chain = (this.getAttribute("chain") ?? "").trim();
+        const app = (this.getAttribute("app") ?? "").trim();
+        if (!/^[0-9]{1,18}$/.test(crown) || !chain || this.kind === "app" && !app) return null;
+        const q = new URLSearchParams({ crown, chain });
+        if (this.kind === "app") q.set("app", app);
+        else q.set("kind", "coin");
+        q.set("mode", this.mode());
+        q.set("v", "1");
+        return `${origin}/v1/frame?${q.toString()}`;
+      }
+      mode() {
+        const attr = this.getAttribute("mode");
+        if (attr === "light" || attr === "dark") return attr;
+        try {
+          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        } catch {
+          return "light";
+        }
+      }
+      mount() {
+        const root = this.shadowRoot;
+        window.removeEventListener("message", this.onMessage);
+        clearTimeout(this.timer);
+        this.removeAttribute("data-cd-ready");
+        this.removeAttribute("data-cd-unavailable");
+        const src = this.src();
+        if (!src) {
+          root.innerHTML = "<slot></slot>";
+          this.frame = null;
+          return;
+        }
+        root.innerHTML = `<style>${STYLE2}</style><slot></slot>`;
+        const frame = document.createElement("iframe");
+        frame.setAttribute("loading", "lazy");
+        frame.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
+        frame.setAttribute("allow", "clipboard-write; fullscreen");
+        frame.setAttribute("title", this.kind === "coin" ? "Coin on Chain Daddy" : "App on Chain Daddy");
+        frame.src = src;
+        root.appendChild(frame);
+        this.frame = frame;
+        window.addEventListener("message", this.onMessage);
+        this.timer = setTimeout(() => {
+          if (!this.hasAttribute("data-cd-ready")) this.unavailable();
+        }, READY_TIMEOUT_MS);
+      }
+      receive(event) {
+        try {
+          if (event.origin !== origin || !this.frame || !event.source || event.source !== this.frame.contentWindow) return;
+          const data = event.data;
+          if (!data || typeof data !== "object") return;
+          if (data.type === "cd:ready") {
+            clearTimeout(this.timer);
+            this.removeAttribute("data-cd-unavailable");
+            this.setAttribute("data-cd-ready", "");
+            this.sendTheme();
+            this.dispatchEvent(new CustomEvent("cd:ready"));
+          } else if (data.type === "cd:resize") {
+            const h = Number(data.height);
+            if (Number.isFinite(h)) this.frame.style.height = `${Math.max(1, Math.min(MAX_HEIGHT, Math.ceil(h)))}px`;
+          } else if (data.type === "cd:unavailable") {
+            this.unavailable();
+          }
+        } catch {
+        }
+      }
+      /** The page's --cd-* colours, for an app that takes them. */
+      sendTheme() {
+        const tokens = {};
+        const style = getComputedStyle(this);
+        for (const token of THEME_TOKENS) {
+          const value = style.getPropertyValue(token).trim();
+          if (value) tokens[token] = value;
+        }
+        this.frame?.contentWindow?.postMessage({ type: "cd:theme", tokens }, origin);
+      }
+      unavailable() {
+        try {
+          clearTimeout(this.timer);
+          this.removeAttribute("data-cd-ready");
+          if (this.hasAttribute("data-cd-unavailable")) return;
+          this.setAttribute("data-cd-unavailable", "");
+          this.dispatchEvent(new CustomEvent("cd:unavailable"));
+        } catch {
+        }
+      }
+    }
+    CdFrame.observedAttributes = ["crown", "chain", "app", "mode"];
+    class CdApp extends CdFrame {
+    }
+    class CdCoin extends CdFrame {
+      constructor() {
+        super(...arguments);
+        this.kind = "coin";
+      }
+    }
+    class CdBuy extends HTMLElement {
+      connectedCallback() {
+        try {
+          const link = this.querySelector("a[href]");
+          const href = link ? new URL(link.getAttribute("href") ?? "", document.baseURI) : null;
+          if (!href || href.protocol !== "https:") return;
+          const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+          root.innerHTML = `<style>${BUY_STYLE}</style><button type="button" part="button"></button>`;
+          const button = root.querySelector("button");
+          button.textContent = (link.textContent ?? "").trim() || "Buy on Chain Daddy";
+          button.addEventListener("click", () => {
+            try {
+              if (!window.open(href.toString(), "cd-buy", "popup,width=460,height=760")) window.location.assign(href.toString());
+            } catch {
+            }
+          });
+        } catch {
+        }
+      }
+    }
+    for (const [name, ctor] of [["cd-app", CdApp], ["cd-coin", CdCoin], ["cd-buy", CdBuy]]) {
+      if (!customElements.get(name)) customElements.define(name, ctor);
+    }
+  } catch {
+  }
+}
+
+// src/checkout.ts
+var ORIGINS = ["https://chaindaddy.io", "https://staging.chaindaddy.io"];
+var windowName = () => "cd-checkout-" + randomToken();
+var FEATURES = "popup,width=480,height=820";
+var TICK_MS = 300;
+var QUIET_TICKS = 7;
+function parseCheckoutUrl(url) {
+  if (typeof url !== "string") return null;
+  let u;
+  try {
+    u = new URL(url);
+  } catch {
+    return null;
+  }
+  const m = /^\/_pay\/([\w-]+)$/.exec(u.pathname);
+  return m && ORIGINS.includes(u.origin) && !u.username && !u.password ? { href: u.origin + u.pathname, origin: u.origin, id: m[1] } : null;
+}
+function successTarget(successUrl, id) {
+  if (typeof successUrl !== "string") return null;
+  let u;
+  try {
+    u = new URL(successUrl, location.href);
+  } catch {
+    return null;
+  }
+  if (!/^https?:$/.test(u.protocol) || u.username || u.password) return null;
+  const key = (pair) => {
+    const raw = pair.split("=")[0];
+    try {
+      return decodeURIComponent(raw.replace(/\+/g, " "));
+    } catch {
+      return raw;
+    }
+  };
+  const pairs = u.search.slice(1).split("&").filter((pair) => pair && key(pair) !== "session_id");
+  pairs.push("session_id=" + encodeURIComponent(id));
+  return u.origin + u.pathname + "?" + pairs.join("&") + u.hash;
+}
+var current;
+function wait(popup, target, success) {
+  return new Promise((resolve) => {
+    let ready = false;
+    let quiet = 0;
+    let last;
+    const done = (result2) => {
+      clearInterval(timer);
+      clearTimeout(last);
+      window.removeEventListener("message", onMessage);
+      if (success && result2.status === "completed") location.assign(success);
+      resolve(result2);
+    };
+    const onMessage = (e) => {
+      if (e.origin !== target.origin || e.source !== popup) return;
+      const data = e.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "cd:checkout.ready") ready = true;
+      const s = data.session;
+      if (!s || typeof s !== "object" || s.id !== target.id) return;
+      if (data.type === "cd:checkout.cancelled") done({ status: "cancelled", session: { id: target.id } });
+      else if (data.type === "cd:checkout.completed" && (s.status === "complete" || s.status === "paid")) {
+        const session = { id: target.id, status: s.status };
+        if (typeof s.orderId === "string" && /^[\w-]{1,128}$/.test(s.orderId)) session.orderId = s.orderId;
+        done({ status: "completed", session });
+      }
+    };
+    const hello = () => {
+      try {
+        popup.postMessage({ type: "cd:checkout.hello" }, target.origin);
+      } catch {
+      }
+    };
+    const timer = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(timer);
+        last = setTimeout(() => done({ status: "closed" }), TICK_MS);
+      } else if (!ready || ++quiet % QUIET_TICKS === 0) hello();
+    }, TICK_MS);
+    window.addEventListener("message", onMessage);
+    hello();
+  });
+}
+function checkout(o) {
+  const refused = () => new Error("checkout: url is not a Chain Daddy checkout session link");
+  const track = (popup, result2, href) => {
+    current = { popup, result: result2, href };
+    const over = () => {
+      if (current && current.popup === popup) current = void 0;
+    };
+    result2.then(over, over);
+    return result2;
+  };
+  const byLink = (target) => {
+    location.assign(target.href);
+    return { status: "redirected" };
+  };
+  try {
+    const { url, successUrl } = o;
+    if (successUrl && !successTarget(successUrl, "")) throw new Error("checkout: successUrl is not a web address");
+    const success = (t) => successUrl ? successTarget(successUrl, t.id) : null;
+    const target = typeof url === "function" ? null : parseCheckoutUrl(url);
+    if (typeof url !== "function" && !target) throw refused();
+    if (current && !current.popup.closed && (!target || current.href === target.href)) {
+      current.popup.focus();
+      return current.result;
+    }
+    if (target) {
+      const popup2 = window.open(target.href, windowName(), FEATURES);
+      return popup2 ? track(popup2, wait(popup2, target, success(target)), target.href) : Promise.resolve(byLink(target));
+    }
+    const popup = window.open("", windowName(), FEATURES);
+    const result2 = new Promise((resolve) => resolve(url())).then(
+      (fetched) => {
+        const t = parseCheckoutUrl(fetched);
+        if (!t) {
+          popup?.close();
+          throw refused();
+        }
+        if (!popup) return byLink(t);
+        popup.location.href = t.href;
+        return wait(popup, t, success(t));
+      },
+      (e) => {
+        popup?.close();
+        throw e;
+      }
+    );
+    return popup ? track(popup, result2) : result2;
+  } catch (e) {
+    return Promise.reject(e);
+  }
+}
+var bound = false;
+var reporting;
+function bindCheckoutButtons() {
+  if (bound || typeof document === "undefined") return;
+  bound = true;
+  document.addEventListener("click", (e) => {
+    const el = e.target instanceof Element ? e.target.closest("[data-cd-checkout]") : null;
+    if (!el || e.defaultPrevented || e.button || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const url = el.getAttribute("data-cd-checkout") || el.href;
+    const successUrl = el.getAttribute("data-cd-success");
+    if (!parseCheckoutUrl(url) || successUrl && !successTarget(successUrl, "")) return;
+    e.preventDefault();
+    const visit = checkout({ url, successUrl });
+    if (visit === reporting) return;
+    reporting = visit;
+    visit.then(
+      (detail) => void el.dispatchEvent(new CustomEvent("cd:checkout", { detail, bubbles: true })),
+      () => {
+      }
+    );
+  });
+}
 export {
   DEFAULT_ISSUER,
   VERSION,
+  bindCheckoutButtons,
   challengeFor,
+  checkout,
+  defineEmbedElements,
   defineSignInButton,
+  embedOriginFor,
   exchangeCode,
   handleCallback,
+  parseCheckoutUrl,
   signIn
 };

package/dist/verify.d.ts

@@ -0,0 +1,126 @@
+/**
+ * chain (CAIP-2, "eip155:8453") -> every ChainDaddyCheckout on it, lowercase.
+ * Frozen: this is the list verifyPayment checks against, and nothing in the
+ * process should be able to add to it.
+ */
+export declare const CHECKOUTS: Readonly<Record<string, readonly string[]>>;
+/**
+ * chain -> the confirmations Chain Daddy's own server waits on it before it
+ * calls an order confirmed. verifyPayment never reads shallower than this,
+ * whatever the block asks for: the block's number arrives from an API.
+ */
+export declare const MIN_CONFIRMATIONS: Readonly<Record<string, number>>;
+/** `token` of an order paid in the chain's own coin (ETH on Base, POL on Polygon). */
+export declare const NATIVE_TOKEN = "0x0000000000000000000000000000000000000000";
+export type VerifyErrorCode = 
+/** A Solana order: follow the manual recipe for now. */
+'unsupported'
+/** What you passed (options, expect) is missing or malformed. */
+ | 'bad_options'
+/** The verification block is malformed. */
+ | 'bad_verification'
+/** The block names a contract that is not a Chain Daddy checkout on that chain. */
+ | 'unknown_checkout'
+/** The block, your expectation and your RPC endpoint are not all the same chain. */
+ | 'wrong_chain'
+/** The block is not the order, asset, payout address or amount you expect. */
+ | 'expectation_mismatch'
+/** The RPC endpoint failed or answered something that is not an answer. */
+ | 'rpc_error';
+/** Every failure of verifyPayment. A payment that is simply not there yet is not an error: it resolves `paid: false`. */
+export declare class VerifyError extends Error {
+    readonly code: VerifyErrorCode;
+    constructor(code: VerifyErrorCode, message: string);
+}
+/** The Order struct the checkout contract takes, as the API prints it. */
+export interface CheckoutOrder {
+    /** "0x" + 64 hex: the order's id. */
+    orderId: string;
+    /** The ERC-20 paid in, or NATIVE_TOKEN. */
+    token: string;
+    payees: readonly string[];
+    /** Decimal strings in the asset's smallest unit; amounts[i] goes to payees[i]. */
+    amounts: readonly string[];
+    /** Unix seconds. */
+    deadline: number | string | bigint;
+}
+/** An EVM order's `verification` block (GET /api/v2/iap/orders/{id}). */
+export interface EvmVerification {
+    kind: 'evm';
+    /** CAIP-2, e.g. "eip155:8453". */
+    chainId: string;
+    checkout: string;
+    feeAddress?: string | null;
+    order: CheckoutOrder;
+    confirmations: number;
+}
+/** A Solana order's `verification` block. verifyPayment does not check these yet. */
+export interface SolanaVerification {
+    kind: 'solana';
+    cluster: string;
+    reference: string;
+    memo: string;
+}
+export type Verification = EvmVerification | SolanaVerification;
+/**
+ * What you sold, from your own records. Every field is required: the block
+ * arrives from an API, and these are what tie it to your sale.
+ */
+export interface Expectation {
+    /** The id of the order you are checking. */
+    orderId: string;
+    /** The chain you sell on: "eip155:8453" or 8453. */
+    chainId: string | number;
+    /** The asset you are paid in: an ERC-20 address, or NATIVE_TOKEN for the chain's own coin. */
+    token: string;
+    /** Your payout address. */
+    payee: string;
+    /** The least the order must send your payout address, in the asset's smallest unit. A bigint or a decimal string, never a number. */
+    amount: bigint | string;
+}
+export interface VerifyOptions {
+    expect: Expectation;
+    /** A JSON-RPC endpoint for the order's chain. Yours, not Chain Daddy's. */
+    rpcUrl?: string;
+    /** Used with rpcUrl in place of the global fetch. */
+    fetch?: typeof fetch;
+    /** Instead of rpcUrl: an EIP-1193 style request function (a viem client's `request`, an ethers provider's `send` wrapped). */
+    request?: (args: {
+        method: string;
+        params: unknown[];
+    }) => Promise<unknown>;
+    /** A deeper wait than the block's `confirmations` and the chain's MIN_CONFIRMATIONS. A smaller number is ignored: this can only raise the depth. */
+    confirmations?: number;
+    /** Aborts the RPC requests made through rpcUrl. */
+    signal?: AbortSignal;
+}
+export interface PaymentResult {
+    /** True only when the contract says this exact order was paid, `depth` blocks deep. */
+    paid: boolean;
+    /** The wallet that paid, lowercase, or null. */
+    payer: string | null;
+    /** The confirmations asked for: the largest of the block's, yours and the chain's MIN_CONFIRMATIONS. */
+    depth: number;
+    /** The checkout contract that was asked, lowercase. */
+    checkout: string;
+    /** The block the answer was read at: head - depth + 1. */
+    blockNumber: number;
+    /** The order's EIP-712 hash on that contract. */
+    orderHash: string;
+    /** CAIP-2. */
+    chainId: string;
+}
+/** Calldata for hashOrder(order) on a checkout contract. */
+export declare function encodeHashOrder(order: CheckoutOrder): string;
+/** Calldata for paidBy(orderHash). The key is hashOrder's answer, not the order id. */
+export declare function encodePaidBy(orderHash: string): string;
+/** Whether `checkout` is a ChainDaddyCheckout this package knows on `chainId`. */
+export declare function isKnownCheckout(chainId: string | number, checkout: string): boolean;
+/**
+ * Checks on chain that an order was paid. Resolves `paid: true` only when the
+ * checkout contract itself says so, for exactly the order in `verification`,
+ * at least `depth` blocks ago. Rejects with a VerifyError when the block, your
+ * expectation or the RPC endpoint cannot be trusted to answer; never resolves
+ * `paid: true` on a doubt.
+ */
+export declare function verifyPayment(verification: Verification, options: VerifyOptions): Promise<PaymentResult>;