@1sat/permission-module-ui 0.0.1

package/dist/OneSatPermissionPrompt.d.ts

@@ -0,0 +1,26 @@
+import type { PromptRequest } from '@1sat/permission-module';
+export type Theme = 'light' | 'dark' | 'auto';
+export interface OneSatPermissionPromptProps {
+    /** The structured request handed to the wallet's promptHandler. */
+    request: PromptRequest;
+    /** Called when the user approves. The host wallet resolves promptHandler with `true`. */
+    onApprove: () => void;
+    /** Called when the user rejects. The host wallet resolves promptHandler with `false`. */
+    onReject: () => void;
+    /** Theme override. Defaults to 'auto' (matches `prefers-color-scheme`). */
+    theme?: Theme;
+    /** App name shown in the header. Defaults to '1Sat Ordinals'. */
+    appName?: string;
+    /** Version string shown in the footer (e.g. wallet version). */
+    version?: string;
+}
+/**
+ * Drop-in component for rendering 1Sat permission prompts.
+ *
+ * The host wallet feeds in the `request` it received from its promptHandler
+ * callback and wires `onApprove`/`onReject` to resolve the same Promise.
+ * Layout mirrors the design in `1sat-permissions-popups.pen` — branding
+ * header, intent title, asset detail card, network/fee, approve/reject.
+ */
+export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, appName, version, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OneSatPermissionPrompt.d.ts.map

package/dist/OneSatPermissionPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OneSatPermissionPrompt.d.ts","sourceRoot":"","sources":["../src/OneSatPermissionPrompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAI5D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,2BAA2B;IAC3C,mEAAmE;IACnE,OAAO,EAAE,aAAa,CAAA;IACtB,yFAAyF;IACzF,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,yFAAyF;IACzF,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAeD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,EACd,OAAyB,EACzB,OAAO,GACP,EAAE,2BAA2B,2CAyG7B"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { OneSatPermissionPrompt, type OneSatPermissionPromptProps, type Theme, } from './OneSatPermissionPrompt';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,KAAK,KAAK,GACV,MAAM,0BAA0B,CAAA"}

package/dist/index.js

@@ -0,0 +1,473 @@
+"use client";
+
+// src/OneSatPermissionPrompt.tsx
+import { useEffect, useState } from "react";
+
+// src/styles.ts
+var promptStyles = `
+.opp-root {
+  --opp-bg: #ffffff;
+  --opp-fg: #1a1a1a;
+  --opp-muted: #6b7280;
+  --opp-card-bg: #f5f5f7;
+  --opp-card-border: #e5e7eb;
+  --opp-accent: #f59e0b;
+  --opp-approve-bg: #f59e0b;
+  --opp-approve-fg: #ffffff;
+  --opp-reject-bg: #ffffff;
+  --opp-reject-fg: #1a1a1a;
+  --opp-reject-border: #d1d5db;
+  --opp-status-bg: #fde68a;
+  --opp-status-fg: #92400e;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--opp-bg);
+  color: var(--opp-fg);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 480px;
+  overflow: hidden;
+}
+
+.opp-root.opp-dark {
+  --opp-bg: #1a1a1a;
+  --opp-fg: #f5f5f7;
+  --opp-muted: #9ca3af;
+  --opp-card-bg: #262626;
+  --opp-card-border: #3a3a3a;
+  --opp-reject-bg: #262626;
+  --opp-reject-fg: #f5f5f7;
+  --opp-reject-border: #3a3a3a;
+  --opp-status-bg: rgba(245, 158, 11, 0.2);
+  --opp-status-fg: #fbbf24;
+}
+
+.opp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--opp-card-border);
+}
+
+.opp-header-brand,
+.opp-header-app {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.opp-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--opp-accent);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.opp-avatar.opp-app {
+  background: #3b82f6;
+}
+
+.opp-body {
+  padding: 24px 20px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+.opp-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--opp-card-bg);
+  border: 1px solid var(--opp-card-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4px;
+}
+
+.opp-title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+  text-align: center;
+}
+
+.opp-subtitle {
+  font-size: 13px;
+  color: var(--opp-muted);
+  margin: 0;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.opp-status {
+  background: var(--opp-status-bg);
+  color: var(--opp-status-fg);
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-top: 4px;
+}
+
+.opp-card {
+  background: var(--opp-card-bg);
+  border-radius: 8px;
+  margin: 0 16px;
+  padding: 12px 16px;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.opp-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.opp-row-key {
+  color: var(--opp-muted);
+}
+
+.opp-row-value {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 12px;
+  word-break: break-all;
+  text-align: right;
+}
+
+.opp-meta {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 20px;
+  font-size: 12px;
+  color: var(--opp-muted);
+}
+
+.opp-meta-value {
+  color: var(--opp-fg);
+}
+
+.opp-actions {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px 12px;
+}
+
+.opp-button {
+  flex: 1;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: opacity 120ms ease;
+}
+
+.opp-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.opp-button-reject {
+  background: var(--opp-reject-bg);
+  color: var(--opp-reject-fg);
+  border-color: var(--opp-reject-border);
+}
+
+.opp-button-approve {
+  background: var(--opp-approve-bg);
+  color: var(--opp-approve-fg);
+}
+
+.opp-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 20px 16px;
+  font-size: 11px;
+  color: var(--opp-muted);
+  text-align: center;
+}
+`;
+
+// src/OneSatPermissionPrompt.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OneSatPermissionPrompt({
+  request,
+  onApprove,
+  onReject,
+  theme = "auto",
+  appName = "1Sat Ordinals",
+  version
+}) {
+  const resolvedTheme = useResolvedTheme(theme);
+  const summary = summarizeRequest(request);
+  const [busy, setBusy] = useState(false);
+  const handle = (action) => () => {
+    if (busy)
+      return;
+    setBusy(true);
+    try {
+      if (action === "approve")
+        onApprove();
+      else
+        onReject();
+    } finally {
+      setBusy(false);
+    }
+  };
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape")
+        onReject();
+      else if (e.key === "Enter")
+        onApprove();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onApprove, onReject]);
+  const className = `opp-root${resolvedTheme === "dark" ? " opp-dark" : ""}`;
+  return /* @__PURE__ */ jsxs("div", {
+    className,
+    children: [
+      /* @__PURE__ */ jsx("style", {
+        children: promptStyles
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "opp-header",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: "opp-header-brand",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "opp-avatar",
+                children: "1"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                children: appName
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "opp-header-app",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "opp-avatar opp-app",
+                children: originatorInitial(request.originator)
+              }),
+              /* @__PURE__ */ jsx("span", {
+                children: shortenOriginator(request.originator)
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "opp-body",
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: "opp-icon",
+            "aria-hidden": "true",
+            children: "\uD83D\uDEE1"
+          }),
+          /* @__PURE__ */ jsx("h2", {
+            className: "opp-title",
+            children: summary.title
+          }),
+          /* @__PURE__ */ jsx("p", {
+            className: "opp-subtitle",
+            children: summary.subtitle
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "opp-status",
+            children: "Awaiting Approval"
+          })
+        ]
+      }),
+      summary.rows.length > 0 && /* @__PURE__ */ jsx("div", {
+        className: "opp-card",
+        children: summary.rows.map((row) => /* @__PURE__ */ jsxs("div", {
+          className: "opp-row",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: "opp-row-key",
+              children: row.key
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "opp-row-value",
+              children: row.value
+            })
+          ]
+        }, `${row.key}:${row.value}`))
+      }),
+      (summary.network || summary.feeSats !== undefined) && /* @__PURE__ */ jsxs("div", {
+        className: "opp-meta",
+        children: [
+          summary.network && /* @__PURE__ */ jsxs("span", {
+            children: [
+              "Network ",
+              /* @__PURE__ */ jsx("span", {
+                className: "opp-meta-value",
+                children: summary.network
+              })
+            ]
+          }),
+          summary.feeSats !== undefined && /* @__PURE__ */ jsxs("span", {
+            children: [
+              "Estimated Fee",
+              " ",
+              /* @__PURE__ */ jsxs("span", {
+                className: "opp-meta-value",
+                children: [
+                  summary.feeSats,
+                  " sats"
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "opp-actions",
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: "opp-button opp-button-reject",
+            onClick: handle("reject"),
+            disabled: busy,
+            children: "Reject"
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: "opp-button opp-button-approve",
+            onClick: handle("approve"),
+            disabled: busy,
+            children: "Approve"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "opp-footer",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            children: [
+              "Secured by ",
+              appName
+            ]
+          }),
+          version && /* @__PURE__ */ jsxs("span", {
+            children: [
+              "v",
+              version
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+function useResolvedTheme(theme) {
+  const [resolved, setResolved] = useState(() => theme === "auto" ? readSystemTheme() : theme);
+  useEffect(() => {
+    if (theme !== "auto") {
+      setResolved(theme);
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const sync = () => setResolved(mq.matches ? "dark" : "light");
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, [theme]);
+  return resolved;
+}
+function readSystemTheme() {
+  if (typeof window === "undefined" || !window.matchMedia)
+    return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function summarizeRequest(req) {
+  if (req.kind === "transaction") {
+    return summarizeTransaction(req);
+  }
+  return summarizeSignature(req);
+}
+function summarizeTransaction(req) {
+  const intent = req.intent;
+  const rows = [];
+  let totalSats = 0;
+  for (const out of intent.outputs ?? []) {
+    totalSats += out.satoshis ?? 0;
+    if (out.outputDescription) {
+      rows.push({
+        key: out.outputDescription,
+        value: `${out.satoshis ?? 0} sats`
+      });
+    }
+  }
+  if (rows.length === 0 && totalSats > 0) {
+    rows.push({ key: "Total Out", value: `${totalSats} sats` });
+  }
+  return {
+    title: "Transaction Request",
+    subtitle: `${shortenOriginator(req.originator)} wants to ${req.summary.toLowerCase()}`,
+    rows,
+    network: "BSV Mainnet"
+  };
+}
+function summarizeSignature(req) {
+  const intent = req.intent;
+  const rows = [];
+  if (intent.protocolID) {
+    rows.push({ key: "Protocol", value: JSON.stringify(intent.protocolID) });
+  }
+  if (intent.keyID)
+    rows.push({ key: "Key ID", value: intent.keyID });
+  if (intent.counterparty) {
+    rows.push({
+      key: "Counterparty",
+      value: shortenOriginator(intent.counterparty)
+    });
+  }
+  if (typeof intent.dataLength === "number") {
+    rows.push({ key: "Payload", value: `${intent.dataLength} bytes` });
+  }
+  return {
+    title: "Signature Request",
+    subtitle: `${shortenOriginator(req.originator)} requests a signature`,
+    rows
+  };
+}
+function shortenOriginator(origin) {
+  if (origin.length <= 28)
+    return origin;
+  return `${origin.slice(0, 18)}…${origin.slice(-6)}`;
+}
+function originatorInitial(origin) {
+  const cleaned = origin.replace(/^https?:\/\//, "");
+  const first = cleaned[0];
+  return first ? first.toUpperCase() : "?";
+}
+export {
+  OneSatPermissionPrompt
+};

package/dist/styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CSS string for the OneSatPermissionPrompt component. Inlined as a style
+ * tag so the host wallet doesn't have to wire up CSS imports.
+ *
+ * Colors and spacing are kept minimal and theme-driven via CSS variables;
+ * a designer pass will replace these with the production palette.
+ */
+export declare const promptStyles = "\n.opp-root {\n  --opp-bg: #ffffff;\n  --opp-fg: #1a1a1a;\n  --opp-muted: #6b7280;\n  --opp-card-bg: #f5f5f7;\n  --opp-card-border: #e5e7eb;\n  --opp-accent: #f59e0b;\n  --opp-approve-bg: #f59e0b;\n  --opp-approve-fg: #ffffff;\n  --opp-reject-bg: #ffffff;\n  --opp-reject-fg: #1a1a1a;\n  --opp-reject-border: #d1d5db;\n  --opp-status-bg: #fde68a;\n  --opp-status-fg: #92400e;\n\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--opp-bg);\n  color: var(--opp-fg);\n  border-radius: 12px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 480px;\n  overflow: hidden;\n}\n\n.opp-root.opp-dark {\n  --opp-bg: #1a1a1a;\n  --opp-fg: #f5f5f7;\n  --opp-muted: #9ca3af;\n  --opp-card-bg: #262626;\n  --opp-card-border: #3a3a3a;\n  --opp-reject-bg: #262626;\n  --opp-reject-fg: #f5f5f7;\n  --opp-reject-border: #3a3a3a;\n  --opp-status-bg: rgba(245, 158, 11, 0.2);\n  --opp-status-fg: #fbbf24;\n}\n\n.opp-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--opp-card-border);\n}\n\n.opp-header-brand,\n.opp-header-app {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.opp-avatar {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: var(--opp-accent);\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n.opp-avatar.opp-app {\n  background: #3b82f6;\n}\n\n.opp-body {\n  padding: 24px 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n}\n\n.opp-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.opp-title {\n  font-size: 18px;\n  font-weight: 700;\n  margin: 0;\n  text-align: center;\n}\n\n.opp-subtitle {\n  font-size: 13px;\n  color: var(--opp-muted);\n  margin: 0;\n  text-align: center;\n  line-height: 1.4;\n}\n\n.opp-status {\n  background: var(--opp-status-bg);\n  color: var(--opp-status-fg);\n  padding: 4px 12px;\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-top: 4px;\n}\n\n.opp-card {\n  background: var(--opp-card-bg);\n  border-radius: 8px;\n  margin: 0 16px;\n  padding: 12px 16px;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.opp-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.opp-row-key {\n  color: var(--opp-muted);\n}\n\n.opp-row-value {\n  font-family: ui-monospace, SFMono-Regular, monospace;\n  font-size: 12px;\n  word-break: break-all;\n  text-align: right;\n}\n\n.opp-meta {\n  display: flex;\n  justify-content: space-between;\n  padding: 12px 20px;\n  font-size: 12px;\n  color: var(--opp-muted);\n}\n\n.opp-meta-value {\n  color: var(--opp-fg);\n}\n\n.opp-actions {\n  display: flex;\n  gap: 12px;\n  padding: 16px 20px 12px;\n}\n\n.opp-button {\n  flex: 1;\n  padding: 12px 16px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  border: 1px solid transparent;\n  transition: opacity 120ms ease;\n}\n\n.opp-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.opp-button-reject {\n  background: var(--opp-reject-bg);\n  color: var(--opp-reject-fg);\n  border-color: var(--opp-reject-border);\n}\n\n.opp-button-approve {\n  background: var(--opp-approve-bg);\n  color: var(--opp-approve-fg);\n}\n\n.opp-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 20px 16px;\n  font-size: 11px;\n  color: var(--opp-muted);\n  text-align: center;\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,yyHA4MxB,CAAA"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@1sat/permission-module-ui",
+  "version": "0.0.1",
+  "description": "React component for the 1Sat permission module's prompt UX",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run build.ts && tsc --emitDeclarationOnly",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "1sat",
+    "bsv",
+    "wallet",
+    "permissions",
+    "react"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@1sat/permission-module": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.9.3"
+  }
+}