@me.jango/signa 0.0.0-stage → 0.4.0

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@me.jango/signa",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "description": "Sign in to an app with a Signa passkey account or an external wallet, and review passkey payments",
+  "repository": { "type": "git", "url": "https://github.com/mejango/signa.git", "directory": "wallet-client" },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": { "types": "./index.d.ts", "import": "./index.js" },
+    "./core": { "types": "./core/index.d.ts", "import": "./core/index.js" },
+    "./wagmi": { "types": "./wagmi/index.d.ts", "import": "./wagmi/index.js" },
+    "./react": { "types": "./react/index.d.ts", "import": "./react/index.js" }
+  },
+  "files": ["index.js", "index.d.ts", "core/", "wagmi/", "react/", "README.md"],
+  "publishConfig": { "access": "public" },
+  "engines": { "node": ">=22" },
+  "dependencies": { "viem": "^2.37.5" },
+  "peerDependencies": { "react": "^18.3.1 || ^19.0.0", "wagmi": "^2.10.2 || ^3.0.0" },
+  "peerDependenciesMeta": { "react": { "optional": true }, "wagmi": { "optional": true } }
+}

package/react/index.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ConnectController, ConnectOption } from '../core/index.js';
+
+type JBConnectModalProps = {
+    open: boolean;
+    controller: ConnectController;
+    /** Called for Escape, the backdrop and the cancel button, after the controller is cancelled. */
+    onClose(): void;
+    /** Which option is the passkey account; it renders as the primary button. */
+    passkeyId?: string;
+    /** The primary button's text. Defaults to the platform's prompt: Touch ID, Face ID, Windows Hello, or a passkey. */
+    passkeyLabel?: string;
+    title?: ReactNode;
+    /** Renders a pairing URI (a QR code, a deep link) once an option publishes one. */
+    renderHandoff?(uri: string, option: ConnectOption): ReactNode;
+    /** A mark for an option without an icon. Defaults to the option's initial. */
+    renderIcon?(option: ConnectOption): ReactNode;
+    /** Extra footer actions, laid out on the cancel button's baseline. */
+    footer?: ReactNode;
+    /** App content shown under the wallet tiles while idle, such as mobile wallet links. */
+    children?: ReactNode;
+    className?: string;
+};
+declare function JBConnectModal(props: JBConnectModalProps): react.JSX.Element;
+
+/** Themed through custom properties so a Tailwind app and a plain-CSS app both look native. */
+declare const connectModalCss = "\n.jb-connect{--jb-connect-bg:#fff;--jb-connect-fg:#1a1a1a;--jb-connect-muted:#6b6b6b;--jb-connect-line:#dcdcdc;--jb-connect-accent:#1a1a1a;--jb-connect-accent-fg:#fff;--jb-connect-radius:16px;--jb-connect-tile:44px;--jb-connect-font:inherit;--jb-connect-pad:32px;--jb-connect-backdrop:rgba(0,0,0,.45);--jb-connect-width:440px;\n  box-sizing:border-box;width:min(var(--jb-connect-width),calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:var(--jb-connect-pad);margin:auto;border:1px solid var(--jb-connect-line);border-radius:var(--jb-connect-radius);background:var(--jb-connect-bg);color:var(--jb-connect-fg);font:16px/1.4 var(--jb-connect-font);overscroll-behavior:contain}\n.jb-connect::backdrop{background:var(--jb-connect-backdrop)}\n.jb-connect *{box-sizing:border-box}\n.jb-connect h2{margin:0 0 20px;font-size:28px;font-weight:600;line-height:1.1}\n.jb-connect button{font:inherit;color:inherit;cursor:pointer}\n.jb-connect button:disabled{cursor:default;opacity:.55}\n.jb-connect .jb-connect-primary{display:block;width:100%;min-height:50px;padding:14px 20px;border:0;border-radius:calc(var(--jb-connect-radius) / 2);background:var(--jb-connect-accent);color:var(--jb-connect-accent-fg);font-weight:600}\n.jb-connect .jb-connect-powered{margin:8px 0 0;font-size:13px;color:var(--jb-connect-muted);text-align:center}\n.jb-connect .jb-connect-frame{display:block;width:calc(100% + 2 * var(--jb-connect-pad));height:14rem;margin:0 calc(-1 * var(--jb-connect-pad));border:1px solid var(--jb-connect-line);border-width:1px 0;background:var(--jb-connect-bg);transition:height .2s ease}\n@media (prefers-reduced-motion:reduce){.jb-connect .jb-connect-frame{transition:none}}\n.jb-connect .jb-connect-divider{margin:24px 0 10px;font-size:13px;color:var(--jb-connect-muted)}\n.jb-connect .jb-connect-tiles{display:flex;gap:10px;min-height:var(--jb-connect-tile);padding:4px;margin:-4px;overflow-x:auto}\n.jb-connect .jb-connect-tile{display:grid;place-items:center;flex:0 0 var(--jb-connect-tile);width:var(--jb-connect-tile);height:var(--jb-connect-tile);padding:8px;border:1px solid var(--jb-connect-line);border-radius:9px;background:var(--jb-connect-bg)}\n.jb-connect .jb-connect-tile img,.jb-connect .jb-connect-tile svg{width:22px;height:22px;object-fit:contain}\n.jb-connect .jb-connect-tile span{font-size:12px;font-weight:600;line-height:1}\n.jb-connect .jb-connect-status,.jb-connect .jb-connect-error{margin:16px 0 0;font-size:13px}\n.jb-connect .jb-connect-status{color:var(--jb-connect-muted)}\n.jb-connect .jb-connect-error{padding:12px 15px;border-left:3px solid #c8755e;background:#fae9e4;color:#873b2e;overflow-wrap:anywhere}\n.jb-connect .jb-connect-handoff{margin-top:16px}\n.jb-connect .jb-connect-footer{display:flex;align-items:baseline;justify-content:flex-end;gap:16px;margin-top:20px}\n.jb-connect .jb-connect-text{min-height:auto;padding:4px 0;margin:-4px 0;border:0;background:none;font-size:14px;text-decoration:underline;text-underline-offset:3px}\n@media (max-width:540px){.jb-connect{--jb-connect-pad:20px;padding:24px var(--jb-connect-pad)}.jb-connect h2{font-size:24px}}\n";
+
+/** Names the prompt the person is about to see; "passkey" is the fallback when the platform is unknown. */
+declare function passkeyLabel(userAgent: string): string;
+
+export { JBConnectModal, connectModalCss, passkeyLabel };
+export type { JBConnectModalProps };

package/react/index.js

@@ -0,0 +1,195 @@
+"use client";
+
+// wallet-client/src/react/JBConnectModal.tsx
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+
+// wallet-client/src/react/passkeyLabel.ts
+function passkeyLabel(userAgent) {
+  if (/iPhone/.test(userAgent)) return "Continue with Face ID";
+  if (/Macintosh|iPad/.test(userAgent)) return "Continue with Touch ID";
+  if (/Windows/.test(userAgent)) return "Continue with Windows Hello";
+  return "Continue with a passkey";
+}
+
+// wallet-client/src/react/styles.ts
+var connectModalCss = `
+.jb-connect{--jb-connect-bg:#fff;--jb-connect-fg:#1a1a1a;--jb-connect-muted:#6b6b6b;--jb-connect-line:#dcdcdc;--jb-connect-accent:#1a1a1a;--jb-connect-accent-fg:#fff;--jb-connect-radius:16px;--jb-connect-tile:44px;--jb-connect-font:inherit;--jb-connect-pad:32px;--jb-connect-backdrop:rgba(0,0,0,.45);--jb-connect-width:440px;
+  box-sizing:border-box;width:min(var(--jb-connect-width),calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:var(--jb-connect-pad);margin:auto;border:1px solid var(--jb-connect-line);border-radius:var(--jb-connect-radius);background:var(--jb-connect-bg);color:var(--jb-connect-fg);font:16px/1.4 var(--jb-connect-font);overscroll-behavior:contain}
+.jb-connect::backdrop{background:var(--jb-connect-backdrop)}
+.jb-connect *{box-sizing:border-box}
+.jb-connect h2{margin:0 0 20px;font-size:28px;font-weight:600;line-height:1.1}
+.jb-connect button{font:inherit;color:inherit;cursor:pointer}
+.jb-connect button:disabled{cursor:default;opacity:.55}
+.jb-connect .jb-connect-primary{display:block;width:100%;min-height:50px;padding:14px 20px;border:0;border-radius:calc(var(--jb-connect-radius) / 2);background:var(--jb-connect-accent);color:var(--jb-connect-accent-fg);font-weight:600}
+.jb-connect .jb-connect-powered{margin:8px 0 0;font-size:13px;color:var(--jb-connect-muted);text-align:center}
+.jb-connect .jb-connect-frame{display:block;width:calc(100% + 2 * var(--jb-connect-pad));height:14rem;margin:0 calc(-1 * var(--jb-connect-pad));border:1px solid var(--jb-connect-line);border-width:1px 0;background:var(--jb-connect-bg);transition:height .2s ease}
+@media (prefers-reduced-motion:reduce){.jb-connect .jb-connect-frame{transition:none}}
+.jb-connect .jb-connect-divider{margin:24px 0 10px;font-size:13px;color:var(--jb-connect-muted)}
+.jb-connect .jb-connect-tiles{display:flex;gap:10px;min-height:var(--jb-connect-tile);padding:4px;margin:-4px;overflow-x:auto}
+.jb-connect .jb-connect-tile{display:grid;place-items:center;flex:0 0 var(--jb-connect-tile);width:var(--jb-connect-tile);height:var(--jb-connect-tile);padding:8px;border:1px solid var(--jb-connect-line);border-radius:9px;background:var(--jb-connect-bg)}
+.jb-connect .jb-connect-tile img,.jb-connect .jb-connect-tile svg{width:22px;height:22px;object-fit:contain}
+.jb-connect .jb-connect-tile span{font-size:12px;font-weight:600;line-height:1}
+.jb-connect .jb-connect-status,.jb-connect .jb-connect-error{margin:16px 0 0;font-size:13px}
+.jb-connect .jb-connect-status{color:var(--jb-connect-muted)}
+.jb-connect .jb-connect-error{padding:12px 15px;border-left:3px solid #c8755e;background:#fae9e4;color:#873b2e;overflow-wrap:anywhere}
+.jb-connect .jb-connect-handoff{margin-top:16px}
+.jb-connect .jb-connect-footer{display:flex;align-items:baseline;justify-content:flex-end;gap:16px;margin-top:20px}
+.jb-connect .jb-connect-text{min-height:auto;padding:4px 0;margin:-4px 0;border:0;background:none;font-size:14px;text-decoration:underline;text-underline-offset:3px}
+@media (max-width:540px){.jb-connect{--jb-connect-pad:20px;padding:24px var(--jb-connect-pad)}.jb-connect h2{font-size:24px}}
+`;
+
+// wallet-client/src/react/JBConnectModal.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function JBConnectModal(props) {
+  const { controller, open, onClose, passkeyId = "juicebox-center" } = props;
+  const state = useSyncExternalStore(
+    controller.subscribe,
+    controller.getState,
+    controller.getState
+  );
+  const dialog = useRef(null);
+  const [platformLabel, setPlatformLabel] = useState("Continue with a passkey");
+  useEffect(() => {
+    setPlatformLabel(passkeyLabel(navigator.userAgent));
+  }, []);
+  useEffect(() => {
+    const element = dialog.current;
+    if (open && !element.open) {
+      element.showModal();
+      element.querySelector("h2")?.focus();
+    } else if (!open && element.open) {
+      element.close();
+      controller.cancel();
+    }
+  }, [open, controller]);
+  const cancel = () => {
+    controller.cancel();
+    onClose();
+  };
+  const frame = useRef(null);
+  const [frameHeight, setFrameHeight] = useState();
+  useEffect(() => {
+    if (!state.frameName) return;
+    setFrameHeight(void 0);
+    const sized = (event) => {
+      const data = event.data;
+      if (!frame.current?.contentWindow || event.source !== frame.current.contentWindow || data?.type !== "juicebox-center:size" || typeof data.height !== "number" || !Number.isFinite(data.height))
+        return;
+      setFrameHeight(Math.min(1200, Math.max(160, Math.ceil(data.height))) + 2);
+      if (dialog.current)
+        frame.current.contentWindow.postMessage(
+          { type: "juicebox-center:theme", theme: themeOf(dialog.current) },
+          // Design tokens only; the page inside checks its framer, this dialog does not learn the issuer.
+          "*"
+        );
+    };
+    window.addEventListener("message", sized);
+    return () => window.removeEventListener("message", sized);
+  }, [state.frameName]);
+  const passkey = controller.options.find((option) => option.id === passkeyId);
+  const wallets = controller.options.filter(
+    (option) => option.id !== passkeyId
+  );
+  const pending = state.pending ? controller.options.find((option) => option.id === state.pending) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref: dialog,
+      className: "jb-connect" + (props.className ? " " + props.className : ""),
+      "aria-label": typeof props.title === "string" ? props.title : "Sign in",
+      onCancel: (event) => {
+        event.preventDefault();
+        cancel();
+      },
+      onMouseDown: (event) => {
+        if (event.target !== event.currentTarget) return;
+        const box = event.currentTarget.getBoundingClientRect();
+        if (event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom)
+          cancel();
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: connectModalCss }),
+        /* @__PURE__ */ jsx("h2", { tabIndex: -1, children: props.title ?? "Sign in" }),
+        pending ? /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Connection", children: state.frameName ? /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: frame,
+            name: state.frameName,
+            className: "jb-connect-frame",
+            title: "Signa",
+            allow: `publickey-credentials-get ${state.frameOrigin}; publickey-credentials-create ${state.frameOrigin}`,
+            referrerPolicy: "no-referrer",
+            style: frameHeight ? { height: frameHeight } : void 0
+          }
+        ) : state.handoffUri && props.renderHandoff ? /* @__PURE__ */ jsx("div", { className: "jb-connect-handoff", children: props.renderHandoff(state.handoffUri, pending) }) : /* @__PURE__ */ jsx("p", { className: "jb-connect-status", children: pending === passkey ? "Continuing at Signa\u2026" : `Opening ${pending.name}\u2026` }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          passkey && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "jb-connect-primary",
+                disabled: passkey.disabled,
+                onClick: () => void controller.choose(passkey.id),
+                children: props.passkeyLabel ?? platformLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "jb-connect-powered", children: "Powered by Signa" })
+          ] }),
+          wallets.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "jb-connect-divider", children: passkey ? "or connect a wallet" : "Connect a wallet" }),
+            /* @__PURE__ */ jsx("div", { className: "jb-connect-tiles", children: wallets.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "jb-connect-tile",
+                title: option.name,
+                "aria-label": option.name,
+                disabled: option.disabled,
+                onClick: () => void controller.choose(option.id),
+                children: option.icon ? /* @__PURE__ */ jsx("img", { src: option.icon, alt: "" }) : props.renderIcon?.(option) ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: option.name.slice(0, 1) })
+              },
+              option.id
+            )) })
+          ] }),
+          props.children
+        ] }),
+        state.error && /* @__PURE__ */ jsx("p", { role: "alert", className: "jb-connect-error", children: state.error }),
+        /* @__PURE__ */ jsxs("div", { className: "jb-connect-footer", children: [
+          props.footer,
+          /* @__PURE__ */ jsx("button", { type: "button", className: "jb-connect-text", onClick: cancel, children: "Cancel" })
+        ] })
+      ]
+    }
+  );
+}
+function themeOf(dialog) {
+  const style = getComputedStyle(dialog);
+  const token = (name) => style.getPropertyValue(name).trim();
+  const theme = {};
+  for (const [key, name] of [
+    ["background", "--jb-connect-bg"],
+    ["foreground", "--jb-connect-fg"],
+    ["muted", "--jb-connect-muted"],
+    ["line", "--jb-connect-line"],
+    ["accent", "--jb-connect-accent"],
+    ["accentForeground", "--jb-connect-accent-fg"],
+    ["radius", "--jb-connect-radius"],
+    ["inset", "--jb-connect-pad"]
+  ]) {
+    const value = token(name);
+    if (value) theme[key] = value;
+  }
+  const font = style.fontFamily;
+  if (font) theme.font = font;
+  return theme;
+}
+export {
+  JBConnectModal,
+  connectModalCss,
+  passkeyLabel
+};

package/wagmi/index.d.ts

@@ -0,0 +1,26 @@
+import { CreateConnectorFn } from 'wagmi';
+import { Address } from 'viem';
+
+/** The slice of a Signa wallet client the connector needs. Signing never crosses this seam. */
+type CenterAccountWallet = {
+    restoreConnection(): {
+        address: Address;
+        chainId: 8453;
+        accountId: string;
+        expiresAt: number;
+    } | null;
+    disconnect(): void;
+};
+type CenterAccountConnectorOptions = {
+    wallet(): Promise<CenterAccountWallet>;
+    read(input: {
+        method: string;
+        params?: unknown[];
+    }): Promise<unknown>;
+};
+/** A read-only wagmi connector for a Signa passkey account on Base. The connection's
+ * request key cannot sign or send arbitrary operations; payments go through Signa's review flow. */
+declare function centerAccountConnector(options: CenterAccountConnectorOptions): CreateConnectorFn;
+
+export { centerAccountConnector };
+export type { CenterAccountConnectorOptions, CenterAccountWallet };

package/wagmi/index.js

@@ -0,0 +1,97 @@
+"use client";
+
+// wallet-client/src/wagmi/connector.ts
+import { createConnector } from "wagmi";
+import { base } from "wagmi/chains";
+var reads = /* @__PURE__ */ new Set([
+  "eth_call",
+  "eth_getBalance",
+  "eth_getCode",
+  "eth_getStorageAt",
+  "eth_getTransactionCount",
+  "eth_getTransactionReceipt",
+  "eth_getTransactionByHash",
+  "eth_getBlockByNumber",
+  "eth_getBlockByHash",
+  "eth_blockNumber",
+  "eth_getLogs"
+]);
+var unsupported = (chain = false) => Object.assign(
+  new Error(
+    chain ? "This Signa account uses Base. Connect an external wallet for other networks." : "This action needs its own review at Signa. Use a payment review, or connect an external wallet."
+  ),
+  { code: chain ? 4902 : 4200 }
+);
+function centerAccountConnector(options) {
+  return createConnector((config) => {
+    const connection = async () => {
+      const value = (await options.wallet()).restoreConnection();
+      if (!value || value.chainId !== 8453 || value.accountId !== "eip155:8453:" + value.address.toLowerCase() || value.expiresAt <= Math.floor(Date.now() / 1e3))
+        return null;
+      return value;
+    };
+    const provider = {
+      async request(input) {
+        const current = await connection();
+        if (input.method === "eth_chainId") return "0x2105";
+        if (input.method === "eth_accounts" || input.method === "eth_requestAccounts")
+          return current ? [current.address] : [];
+        if (input.method === "wallet_switchEthereumChain") {
+          const requested = input.params?.[0];
+          if (requested?.chainId !== "0x2105") throw unsupported(true);
+          return null;
+        }
+        if (reads.has(input.method)) return options.read(input);
+        throw unsupported();
+      }
+    };
+    return {
+      id: "juicebox-center",
+      name: "Signa account",
+      type: "juicebox-center",
+      async connect(parameters) {
+        if (parameters?.chainId !== void 0 && parameters.chainId !== 8453)
+          throw unsupported(true);
+        const current = await connection();
+        if (!current)
+          throw new Error("Sign in with your Signa account first.");
+        const accounts = parameters?.withCapabilities ? [{ address: current.address, capabilities: {} }] : [current.address];
+        return { accounts, chainId: 8453 };
+      },
+      async disconnect() {
+        (await options.wallet()).disconnect();
+      },
+      async getAccounts() {
+        const current = await connection();
+        return current ? [current.address] : [];
+      },
+      async getChainId() {
+        return 8453;
+      },
+      async getProvider() {
+        return provider;
+      },
+      async isAuthorized() {
+        return !!await connection();
+      },
+      async switchChain({ chainId }) {
+        if (chainId !== 8453) throw unsupported(true);
+        config.emitter.emit("change", { chainId });
+        return base;
+      },
+      onAccountsChanged(accounts) {
+        if (!accounts.length) config.emitter.emit("disconnect");
+        else config.emitter.emit("change", { accounts });
+      },
+      onChainChanged(chainId) {
+        if (Number(chainId) !== 8453) config.emitter.emit("disconnect");
+      },
+      onDisconnect() {
+        config.emitter.emit("disconnect");
+      }
+    };
+  });
+}
+export {
+  centerAccountConnector
+};