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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +22 -11
  2. package/dist/styles.d.ts +1 -1
  3. package/dist/styles.d.ts.map +1 -1
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -29,7 +29,8 @@ var promptStyles = `
29
29
  width: 100%;
30
30
  max-width: 480px;
31
31
  min-height: 100%;
32
- overflow: hidden;
32
+ overflow-x: hidden;
33
+ overflow-y: auto;
33
34
  }
34
35
 
35
36
  .opp-bottom {
@@ -161,8 +162,12 @@ var promptStyles = `
161
162
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
162
163
  font-size: 13px;
163
164
  font-weight: 500;
164
- word-break: break-all;
165
165
  text-align: right;
166
+ white-space: nowrap;
167
+ overflow: hidden;
168
+ text-overflow: ellipsis;
169
+ min-width: 0;
170
+ max-width: 60%;
166
171
  }
167
172
 
168
173
  .opp-meta {
@@ -485,9 +490,9 @@ function summarizeOrdinalTransfer(req, intent) {
485
490
  const imageUrl = origin ? intent.contentUrls?.[origin] : undefined;
486
491
  const rows = [];
487
492
  if (recipient)
488
- rows.push({ key: "Recipient", value: recipient });
493
+ rows.push({ key: "Recipient", value: shortenValue(recipient) });
489
494
  if (origin)
490
- rows.push({ key: "Origin", value: origin });
495
+ rows.push({ key: "Origin", value: shortenValue(origin) });
491
496
  if (contentType)
492
497
  rows.push({ key: "Type", value: contentType });
493
498
  return {
@@ -526,7 +531,7 @@ function summarizeTokenTransfer(req, intent) {
526
531
  }
527
532
  const recipient = intent.outputs.find((o) => o.recipient)?.recipient;
528
533
  if (recipient)
529
- rows.push({ key: "Recipient", value: recipient });
534
+ rows.push({ key: "Recipient", value: shortenValue(recipient) });
530
535
  return {
531
536
  title: "Token Transfer",
532
537
  subtitle: `${shortenOriginator(req.originator)} wants to send tokens`,
@@ -535,8 +540,9 @@ function summarizeTokenTransfer(req, intent) {
535
540
  };
536
541
  }
537
542
  function summarizeLock(req, intent) {
538
- const sats = intent.outputs.reduce((s, o) => s + o.satoshis, 0);
539
- const until = intent.outputs.flatMap((o) => o.tags).find((t) => t.startsWith("lock:until:"))?.slice("lock:until:".length);
543
+ const lockOutputs = intent.outputs.filter((o) => o.basket === "lock");
544
+ const sats = (lockOutputs.length > 0 ? lockOutputs : intent.outputs).reduce((s, o) => s + o.satoshis, 0);
545
+ const until = (lockOutputs.length > 0 ? lockOutputs : intent.outputs).flatMap((o) => o.tags).find((t) => t.startsWith("until:"))?.slice("until:".length);
540
546
  const rows = [{ key: "Amount", value: `${sats} sats` }];
541
547
  if (until)
542
548
  rows.push({ key: "Lock until block", value: until });
@@ -567,7 +573,7 @@ function summarizeInscription(req, intent) {
567
573
  if (name)
568
574
  rows.push({ key: "Name", value: name });
569
575
  if (recipient)
570
- rows.push({ key: "Recipient", value: recipient });
576
+ rows.push({ key: "Recipient", value: shortenValue(recipient) });
571
577
  return {
572
578
  title: "Create Inscription",
573
579
  subtitle: `${shortenOriginator(req.originator)} wants to inscribe content into your wallet`,
@@ -588,7 +594,7 @@ function summarizeListing(req, intent) {
588
594
  if (price)
589
595
  rows.push({ key: "Price", value: `${price} sats` });
590
596
  if (origin)
591
- rows.push({ key: "Origin", value: origin });
597
+ rows.push({ key: "Origin", value: shortenValue(origin) });
592
598
  if (contentType)
593
599
  rows.push({ key: "Type", value: contentType });
594
600
  return {
@@ -615,7 +621,7 @@ function summarizeCancelListing(req, intent) {
615
621
  if (price)
616
622
  rows.push({ key: "Original price", value: `${price} sats` });
617
623
  if (origin)
618
- rows.push({ key: "Origin", value: origin });
624
+ rows.push({ key: "Origin", value: shortenValue(origin) });
619
625
  if (contentType)
620
626
  rows.push({ key: "Type", value: contentType });
621
627
  return {
@@ -656,7 +662,7 @@ function summarizePurchase(req, intent) {
656
662
  }
657
663
  } else {
658
664
  if (origin)
659
- rows.push({ key: "Origin", value: origin });
665
+ rows.push({ key: "Origin", value: shortenValue(origin) });
660
666
  if (contentType)
661
667
  rows.push({ key: "Type", value: contentType });
662
668
  }
@@ -699,6 +705,11 @@ function shortenId(id, max = 24) {
699
705
  return id;
700
706
  return `${id.slice(0, 8)}…${id.slice(-6)}`;
701
707
  }
708
+ function shortenValue(value, head = 12, tail = 10) {
709
+ if (value.length <= head + tail + 1)
710
+ return value;
711
+ return `${value.slice(0, head)}…${value.slice(-tail)}`;
712
+ }
702
713
  function summarizeProtocol(req) {
703
714
  const intent = req.intent;
704
715
  const rows = [
package/dist/styles.d.ts CHANGED
@@ -4,5 +4,5 @@
4
4
  *
5
5
  * Colors match the design in `1sat-permissions-popups.pen`.
6
6
  */
7
- 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";
7
+ 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-x: hidden;\n overflow-y: auto;\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 text-align: right;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n max-width: 60%;\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";
8
8
  //# sourceMappingURL=styles.d.ts.map
package/dist/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,ghIA0NxB,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,0nIA+NxB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1sat/permission-module-ui",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "description": "React component for the 1Sat permission module's prompt UX",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -28,7 +28,7 @@
28
28
  ],
29
29
  "license": "MIT",
30
30
  "dependencies": {
31
- "@1sat/permission-module": "0.0.14"
31
+ "@1sat/permission-module": "0.0.16"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": "^18.0.0 || ^19.0.0"