@1sat/permission-module-ui 0.0.8 → 0.0.10

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;CACb;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,GACd,EAAE,2BAA2B,2CAgH7B"}
+{"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;CACb;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,GACd,EAAE,2BAA2B,2CAkH7B"}

package/dist/index.js

@@ -28,9 +28,16 @@ var promptStyles = `
   flex-direction: column;
   width: 100%;
   max-width: 480px;
+  min-height: 100%;
   overflow: hidden;
 }
 
+.opp-bottom {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+}
+
 .opp-root.opp-dark {
   --opp-bg: #0F1117;
   --opp-fg: #F9FAFB;
@@ -347,57 +354,62 @@ function OneSatPermissionPrompt({
           ]
         }, `${row.key}:${row.value}`))
       }),
-      (summary.network || summary.feeSats !== undefined) && /* @__PURE__ */ jsxs("div", {
-        className: "opp-meta",
+      /* @__PURE__ */ jsxs("div", {
+        className: "opp-bottom",
         children: [
-          summary.network && /* @__PURE__ */ jsxs("span", {
+          (summary.network || summary.feeSats !== undefined) && /* @__PURE__ */ jsxs("div", {
+            className: "opp-meta",
             children: [
-              "Network ",
-              /* @__PURE__ */ jsx("span", {
-                className: "opp-meta-value",
-                children: summary.network
+              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"
+                    ]
+                  })
+                ]
               })
             ]
           }),
-          summary.feeSats !== undefined && /* @__PURE__ */ jsxs("span", {
+          /* @__PURE__ */ jsxs("div", {
+            className: "opp-actions",
             children: [
-              "Estimated Fee",
-              " ",
-              /* @__PURE__ */ jsxs("span", {
-                className: "opp-meta-value",
-                children: [
-                  summary.feeSats,
-                  " sats"
-                ]
+              /* @__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-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__ */ jsx("div", {
+            className: "opp-footer",
+            children: /* @__PURE__ */ jsx("span", {
+              children: "Secured by 1Sat Ordinals"
+            })
           })
         ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "opp-footer",
-        children: /* @__PURE__ */ jsx("span", {
-          children: "Secured by 1Sat Ordinals"
-        })
       })
     ]
   });
@@ -436,6 +448,12 @@ function summarizeRequest(req) {
         return summarizeUnlock(req, intent);
       case "inscription":
         return summarizeInscription(req, intent);
+      case "listing":
+        return summarizeListing(req, intent);
+      case "cancel-listing":
+        return summarizeCancelListing(req, intent);
+      case "purchase":
+        return summarizePurchase(req, intent);
       case "social-post":
         return summarizeSocialPost(req, intent);
       default:
@@ -464,7 +482,7 @@ function summarizeOrdinalTransfer(req, intent) {
   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 imageUrl = origin ? intent.contentUrls?.[origin] : undefined;
   const rows = [];
   if (recipient)
     rows.push({ key: "Recipient", value: recipient });
@@ -539,17 +557,122 @@ function summarizeUnlock(req, intent) {
   };
 }
 function summarizeInscription(req, intent) {
-  const recipient = intent.outputs.find((o) => o.recipient)?.recipient;
+  const inscriptionOutput = intent.outputs.find((o) => o.tags.some((t) => t.startsWith("type:"))) ?? intent.outputs[0];
+  const contentType = tagValue(inscriptionOutput?.tags, "type");
+  const name = tagValue(inscriptionOutput?.tags, "name");
+  const recipient = inscriptionOutput?.recipient;
   const rows = [];
+  if (contentType)
+    rows.push({ key: "Type", value: contentType });
+  if (name)
+    rows.push({ key: "Name", value: name });
   if (recipient)
     rows.push({ key: "Recipient", value: recipient });
   return {
     title: "Create Inscription",
-    subtitle: `${shortenOriginator(req.originator)} wants to inscribe content`,
+    subtitle: `${shortenOriginator(req.originator)} wants to inscribe content into your wallet`,
     rows,
     network: networkLabel(intent.chain)
   };
 }
+function summarizeListing(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 imageUrl = origin ? intent.contentUrls?.[origin] : undefined;
+  const listingOutput = intent.outputs.find((o) => o.tags.some((t) => t.startsWith("price:")));
+  const price = tagValue(listingOutput?.tags, "price");
+  const rows = [];
+  if (price)
+    rows.push({ key: "Price", value: `${price} sats` });
+  if (origin)
+    rows.push({ key: "Origin", value: origin });
+  if (contentType)
+    rows.push({ key: "Type", value: contentType });
+  return {
+    title: "List Ordinal for Sale",
+    subtitle: `${shortenOriginator(req.originator)} wants to list an ordinal for sale`,
+    rows,
+    featured: imageUrl ? {
+      imageUrl,
+      title: name ?? "Untitled ordinal",
+      subtitle: collectionId ?? contentType
+    } : undefined,
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizeCancelListing(req, intent) {
+  const listing = intent.inputs[0];
+  const origin = tagValue(listing?.tags, "origin");
+  const name = tagValue(listing?.tags, "name");
+  const contentType = tagValue(listing?.tags, "type");
+  const collectionId = tagValue(listing?.tags, "collectionId");
+  const price = tagValue(listing?.tags, "price");
+  const imageUrl = origin ? intent.contentUrls?.[origin] : undefined;
+  const rows = [];
+  if (price)
+    rows.push({ key: "Original price", value: `${price} sats` });
+  if (origin)
+    rows.push({ key: "Origin", value: origin });
+  if (contentType)
+    rows.push({ key: "Type", value: contentType });
+  return {
+    title: "Cancel Listing",
+    subtitle: `${shortenOriginator(req.originator)} wants to cancel an ordinal listing`,
+    rows,
+    featured: imageUrl ? {
+      imageUrl,
+      title: name ?? "Untitled ordinal",
+      subtitle: collectionId ?? contentType
+    } : undefined,
+    network: networkLabel(intent.chain)
+  };
+}
+function summarizePurchase(req, intent) {
+  const incoming = intent.outputs.find((o) => o.basket === "1sat" || o.basket === "bsv21");
+  const isToken = incoming?.basket === "bsv21";
+  const origin = tagValue(incoming?.tags, "origin");
+  const name = tagValue(incoming?.tags, "name");
+  const contentType = tagValue(incoming?.tags, "type");
+  const collectionId = tagValue(incoming?.tags, "collectionId");
+  const sym = tagValue(incoming?.tags, "sym");
+  const amt = tagValue(incoming?.tags, "amt");
+  const tokenId = tagValue(incoming?.tags, "bsv21");
+  const sellerOutput = intent.outputs.find((o) => !o.basket && o.recipient && o.satoshis > 1);
+  const price = sellerOutput?.satoshis;
+  const rows = [];
+  if (price !== undefined)
+    rows.push({ key: "Price", value: `${price} sats` });
+  if (isToken) {
+    if (amt)
+      rows.push({ key: "Amount", value: amt });
+    if (sym || tokenId) {
+      rows.push({
+        key: "Token",
+        value: sym && tokenId ? `${sym} — ${shortenId(tokenId)}` : sym ?? shortenId(tokenId ?? "")
+      });
+    }
+  } else {
+    if (origin)
+      rows.push({ key: "Origin", value: origin });
+    if (contentType)
+      rows.push({ key: "Type", value: contentType });
+  }
+  const featuredImage = !isToken && origin ? intent.contentUrls?.[origin] : undefined;
+  return {
+    title: isToken ? "Purchase Tokens" : "Purchase Ordinal",
+    subtitle: isToken ? `${shortenOriginator(req.originator)} wants to purchase tokens into your wallet` : `${shortenOriginator(req.originator)} wants to purchase an ordinal into your wallet`,
+    rows,
+    featured: !isToken && featuredImage ? {
+      imageUrl: featuredImage,
+      title: name ?? "Untitled ordinal",
+      subtitle: collectionId ?? contentType
+    } : undefined,
+    network: networkLabel(intent.chain)
+  };
+}
 function summarizeSocialPost(req, intent) {
   return {
     title: "Social Post",

package/dist/styles.d.ts

@@ -4,5 +4,5 @@
  *
  * Colors match the design in `1sat-permissions-popups.pen`.
  */
-export declare const promptStyles = "\n.opp-root {\n  --opp-bg: #ffffff;\n  --opp-fg: #111827;\n  --opp-muted: #6b7280;\n  --opp-card-bg: #f7f8fa;\n  --opp-card-border: #eceef2;\n  --opp-accent: #E5A920;\n  --opp-approve-bg: #E5A920;\n  --opp-approve-fg: #ffffff;\n  --opp-reject-bg: #ffffff;\n  --opp-reject-fg: #111827;\n  --opp-reject-border: #d1d5db;\n  --opp-status-bg: #FFFBE6;\n  --opp-status-fg: #E5A920;\n\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--opp-bg);\n  color: var(--opp-fg);\n  border-radius: 16px;\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: #0F1117;\n  --opp-fg: #F9FAFB;\n  --opp-muted: #9ca3af;\n  --opp-card-bg: #1A1D27;\n  --opp-card-border: #232636;\n  --opp-reject-bg: #0F1117;\n  --opp-reject-fg: #F9FAFB;\n  --opp-reject-border: #2D3142;\n  --opp-status-bg: #2A2408;\n  --opp-status-fg: #E5A920;\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-coin {\n  width: 48px;\n  height: 48px;\n  flex-shrink: 0;\n}\n\n.opp-title {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n  text-align: center;\n}\n\n.opp-subtitle {\n  font-size: 12px;\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: 11px;\n  font-weight: 600;\n  margin-top: 4px;\n  border: 1px solid var(--opp-card-border);\n}\n\n.opp-card {\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.opp-featured {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n}\n\n.opp-featured-image {\n  width: 80px;\n  height: 80px;\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  gap: 4px;\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: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;\n  font-size: 13px;\n  font-weight: 500;\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  font-weight: 500;\n}\n\n.opp-actions {\n  display: flex;\n  gap: 12px;\n  padding: 20px 20px 12px;\n}\n\n.opp-button {\n  flex: 1;\n  padding: 0 16px;\n  height: 48px;\n  border-radius: 10px;\n  font-size: 15px;\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  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 20px 16px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--opp-muted);\n}\n";
+export declare const promptStyles = "\n.opp-root {\n  --opp-bg: #ffffff;\n  --opp-fg: #111827;\n  --opp-muted: #6b7280;\n  --opp-card-bg: #f7f8fa;\n  --opp-card-border: #eceef2;\n  --opp-accent: #E5A920;\n  --opp-approve-bg: #E5A920;\n  --opp-approve-fg: #ffffff;\n  --opp-reject-bg: #ffffff;\n  --opp-reject-fg: #111827;\n  --opp-reject-border: #d1d5db;\n  --opp-status-bg: #FFFBE6;\n  --opp-status-fg: #E5A920;\n\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: var(--opp-bg);\n  color: var(--opp-fg);\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 480px;\n  min-height: 100%;\n  overflow: hidden;\n}\n\n.opp-bottom {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.opp-root.opp-dark {\n  --opp-bg: #0F1117;\n  --opp-fg: #F9FAFB;\n  --opp-muted: #9ca3af;\n  --opp-card-bg: #1A1D27;\n  --opp-card-border: #232636;\n  --opp-reject-bg: #0F1117;\n  --opp-reject-fg: #F9FAFB;\n  --opp-reject-border: #2D3142;\n  --opp-status-bg: #2A2408;\n  --opp-status-fg: #E5A920;\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-coin {\n  width: 48px;\n  height: 48px;\n  flex-shrink: 0;\n}\n\n.opp-title {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n  text-align: center;\n}\n\n.opp-subtitle {\n  font-size: 12px;\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: 11px;\n  font-weight: 600;\n  margin-top: 4px;\n  border: 1px solid var(--opp-card-border);\n}\n\n.opp-card {\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.opp-featured {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--opp-card-bg);\n  border: 1px solid var(--opp-card-border);\n  border-radius: 10px;\n  margin: 0 20px;\n  padding: 16px;\n}\n\n.opp-featured-image {\n  width: 80px;\n  height: 80px;\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  gap: 4px;\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: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;\n  font-size: 13px;\n  font-weight: 500;\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  font-weight: 500;\n}\n\n.opp-actions {\n  display: flex;\n  gap: 12px;\n  padding: 20px 20px 12px;\n}\n\n.opp-button {\n  flex: 1;\n  padding: 0 16px;\n  height: 48px;\n  border-radius: 10px;\n  font-size: 15px;\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  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 20px 16px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--opp-muted);\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;;;;;GAKG;AACH,eAAO,MAAM,YAAY,q6HAmNxB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,ghIA0NxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1sat/permission-module-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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.12"
+    "@1sat/permission-module": "0.0.14"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"