@1sat/permission-module-ui 0.0.4 → 0.0.6

package/dist/OneSatPermissionPrompt.d.ts.map

@@ -1 +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"}
+{"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;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,EACd,OAAyB,EACzB,OAAO,GACP,EAAE,2BAA2B,2CA2H7B"}

package/dist/index.js

@@ -135,6 +135,47 @@ var promptStyles = `
   gap: 8px;
 }
 
+.opp-featured {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--opp-card-bg);
+  border-radius: 8px;
+  margin: 0 16px;
+  padding: 12px;
+}
+
+.opp-featured-image {
+  width: 64px;
+  height: 64px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.opp-featured-meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.opp-featured-title {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.opp-featured-subtitle {
+  font-size: 12px;
+  color: var(--opp-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .opp-row {
   display: flex;
   justify-content: space-between;
@@ -304,6 +345,29 @@ function OneSatPermissionPrompt({
           })
         ]
       }),
+      summary.featured && /* @__PURE__ */ jsxs("div", {
+        className: "opp-featured",
+        children: [
+          /* @__PURE__ */ jsx("img", {
+            className: "opp-featured-image",
+            src: summary.featured.imageUrl,
+            alt: summary.featured.title
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "opp-featured-meta",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "opp-featured-title",
+                children: summary.featured.title
+              }),
+              summary.featured.subtitle && /* @__PURE__ */ jsx("div", {
+                className: "opp-featured-subtitle",
+                children: summary.featured.subtitle
+              })
+            ]
+          })
+        ]
+      }),
       summary.rows.length > 0 && /* @__PURE__ */ jsx("div", {
         className: "opp-card",
         children: summary.rows.map((row) => /* @__PURE__ */ jsxs("div", {
@@ -408,13 +472,158 @@ function readSystemTheme() {
 }
 function summarizeRequest(req) {
   if (req.kind === "transaction") {
-    return summarizeTransaction(req);
+    const intent = req.intent;
+    switch (intent.kind) {
+      case "ordinal-transfer":
+        return summarizeOrdinalTransfer(req, intent);
+      case "token-transfer":
+        return summarizeTokenTransfer(req, intent);
+      case "lock":
+        return summarizeLock(req, intent);
+      case "unlock":
+        return summarizeUnlock(req, intent);
+      case "inscription":
+        return summarizeInscription(req, intent);
+      case "social-post":
+        return summarizeSocialPost(req, intent);
+      default:
+        return summarizeUnknownTx(req, intent);
+    }
   }
   if (req.kind === "protocol") {
     return summarizeProtocol(req);
   }
   return summarizeSignature(req);
 }
+function tagValue(tags, key) {
+  if (!tags)
+    return;
+  const prefix = `${key}:`;
+  for (const t of tags) {
+    if (t.startsWith(prefix))
+      return t.slice(prefix.length);
+  }
+  return;
+}
+function summarizeOrdinalTransfer(req, intent) {
+  const ordinal = intent.inputs[0];
+  const origin = tagValue(ordinal?.tags, "origin");
+  const name = tagValue(ordinal?.tags, "name");
+  const contentType = tagValue(ordinal?.tags, "type");
+  const collectionId = tagValue(ordinal?.tags, "collectionId");
+  const recipient = intent.outputs.find((o) => o.recipient)?.recipient;
+  const imageUrl = ordinal && intent.contentUrls?.[ordinal.id];
+  const rows = [];
+  if (recipient)
+    rows.push({ key: "Recipient", value: recipient });
+  if (origin)
+    rows.push({ key: "Origin", value: origin });
+  if (contentType)
+    rows.push({ key: "Type", value: contentType });
+  return {
+    title: "NFT Transfer",
+    subtitle: `${shortenOriginator(req.originator)} wants to transfer an ordinal`,
+    rows,
+    featured: imageUrl ? {
+      imageUrl,
+      title: name ?? "Untitled ordinal",
+      subtitle: collectionId ?? contentType
+    } : undefined,
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeTokenTransfer(req, intent) {
+  const totals = new Map;
+  for (const input of intent.inputs) {
+    const tokenId = tagValue(input.tags, "bsv21");
+    if (!tokenId)
+      continue;
+    const sym = tagValue(input.tags, "sym");
+    const amt = BigInt(tagValue(input.tags, "amt") ?? "0");
+    const cur = totals.get(tokenId) ?? { sym, amt: 0n };
+    cur.amt += amt;
+    if (!cur.sym && sym)
+      cur.sym = sym;
+    totals.set(tokenId, cur);
+  }
+  const rows = [];
+  for (const [tokenId, info] of totals) {
+    rows.push({
+      key: "Token",
+      value: info.sym ? `${info.sym} — ${shortenId(tokenId)}` : shortenId(tokenId)
+    });
+    rows.push({ key: "Amount", value: info.amt.toString() });
+  }
+  const recipient = intent.outputs.find((o) => o.recipient)?.recipient;
+  if (recipient)
+    rows.push({ key: "Recipient", value: recipient });
+  return {
+    title: "Token Transfer",
+    subtitle: `${shortenOriginator(req.originator)} wants to send tokens`,
+    rows,
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeLock(req, intent) {
+  const sats = intent.outputs.reduce((s, o) => s + o.satoshis, 0);
+  const until = intent.outputs.flatMap((o) => o.tags).find((t) => t.startsWith("lock:until:"))?.slice("lock:until:".length);
+  const rows = [{ key: "Amount", value: `${sats} sats` }];
+  if (until)
+    rows.push({ key: "Lock until block", value: until });
+  return {
+    title: "Lock BSV",
+    subtitle: `${shortenOriginator(req.originator)} wants to time-lock funds`,
+    rows,
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeUnlock(req, intent) {
+  const sats = intent.inputs.reduce((s, i) => s + i.satoshis, 0);
+  return {
+    title: "Unlock Matured",
+    subtitle: `${shortenOriginator(req.originator)} wants to unlock matured locks`,
+    rows: [{ key: "Amount", value: `${sats} sats` }],
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeInscription(req, intent) {
+  const recipient = intent.outputs.find((o) => o.recipient)?.recipient;
+  const rows = [];
+  if (recipient)
+    rows.push({ key: "Recipient", value: recipient });
+  return {
+    title: "Create Inscription",
+    subtitle: `${shortenOriginator(req.originator)} wants to inscribe content`,
+    rows,
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeSocialPost(req, intent) {
+  return {
+    title: "Social Post",
+    subtitle: `${shortenOriginator(req.originator)} wants to publish a post`,
+    rows: [],
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeUnknownTx(req, intent) {
+  const ins = intent.inputs.length;
+  const outs = intent.outputs.length;
+  return {
+    title: "Transaction Request",
+    subtitle: `${shortenOriginator(req.originator)} wants to ${req.summary.toLowerCase()}`,
+    rows: [{ key: "Inputs / Outputs", value: `${ins} / ${outs}` }],
+    network: networkLabel(intent.chain)
+  };
+}
+function networkLabel(chain) {
+  return chain === "testnet" ? "BSV Testnet" : "BSV Mainnet";
+}
+function shortenId(id, max = 24) {
+  if (id.length <= max)
+    return id;
+  return `${id.slice(0, 8)}…${id.slice(-6)}`;
+}
 function summarizeProtocol(req) {
   const intent = req.intent;
   const rows = [
@@ -427,29 +636,6 @@ function summarizeProtocol(req) {
     rows
   };
 }
-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 = [];

package/dist/styles.d.ts

@@ -5,5 +5,5 @@
  * 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";
+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-featured {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--opp-card-bg);\n  border-radius: 8px;\n  margin: 0 16px;\n  padding: 12px;\n}\n\n.opp-featured-image {\n  width: 64px;\n  height: 64px;\n  border-radius: 8px;\n  object-fit: cover;\n  background: rgba(0, 0, 0, 0.1);\n  flex-shrink: 0;\n}\n\n.opp-featured-meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.opp-featured-title {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opp-featured-subtitle {\n  font-size: 12px;\n  color: var(--opp-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1sat/permission-module-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React component for the 1Sat permission module's prompt UX",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@1sat/permission-module": "0.0.6"
+    "@1sat/permission-module": "0.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"