@1sat/permission-module-ui 0.0.5 → 0.0.7

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 (6) hide show
  1. package/dist/OneSatPermissionPrompt.d.ts +4 -2
  2. package/dist/OneSatPermissionPrompt.d.ts.map +1 -1
  3. package/dist/index.js +56 -10
  4. package/dist/styles.d.ts +1 -1
  5. package/dist/styles.d.ts.map +1 -1
  6. package/package.json +2 -2
package/dist/OneSatPermissionPrompt.d.ts CHANGED
@@ -9,8 +9,10 @@ export interface OneSatPermissionPromptProps {
9
9
  onReject: () => void;
10
10
  /** Theme override. Defaults to 'auto' (matches `prefers-color-scheme`). */
11
11
  theme?: Theme;
12
- /** App name shown in the header. Defaults to '1Sat Ordinals'. */
12
+ /** Host wallet name shown in the header (e.g. 'Yours Wallet'). */
13
13
  appName?: string;
14
+ /** Host wallet icon URL shown in the header avatar. Falls back to text initial. */
15
+ appIcon?: string;
14
16
  /** Version string shown in the footer (e.g. wallet version). */
15
17
  version?: string;
16
18
  }
@@ -22,5 +24,5 @@ export interface OneSatPermissionPromptProps {
22
24
  * Layout mirrors the design in `1sat-permissions-popups.pen` — branding
23
25
  * header, intent title, asset detail card, network/fee, approve/reject.
24
26
  */
25
- export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, appName, version, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
27
+ export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, appName, appIcon, version, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
26
28
  //# sourceMappingURL=OneSatPermissionPrompt.d.ts.map
package/dist/OneSatPermissionPrompt.d.ts.map CHANGED
@@ -1 +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;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,EACd,OAAyB,EACzB,OAAO,GACP,EAAE,2BAA2B,2CA2H7B"}
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,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mFAAmF;IACnF,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,OAAO,EACP,OAAO,EACP,OAAO,GACP,EAAE,2BAA2B,2CAmI7B"}
package/dist/index.js CHANGED
@@ -79,6 +79,20 @@ var promptStyles = `
79
79
  background: #3b82f6;
80
80
  }
81
81
 
82
+ .opp-avatar-svg {
83
+ width: 24px;
84
+ height: 24px;
85
+ flex-shrink: 0;
86
+ }
87
+
88
+ .opp-avatar-img {
89
+ width: 24px;
90
+ height: 24px;
91
+ border-radius: 50%;
92
+ object-fit: cover;
93
+ flex-shrink: 0;
94
+ }
95
+
82
96
  .opp-body {
83
97
  padding: 24px 20px 16px;
84
98
  display: flex;
@@ -258,7 +272,8 @@ function OneSatPermissionPrompt({
258
272
  onApprove,
259
273
  onReject,
260
274
  theme = "auto",
261
- appName = "1Sat Ordinals",
275
+ appName,
276
+ appIcon,
262
277
  version
263
278
  }) {
264
279
  const resolvedTheme = useResolvedTheme(theme);
@@ -300,11 +315,45 @@ function OneSatPermissionPrompt({
300
315
  /* @__PURE__ */ jsxs("div", {
301
316
  className: "opp-header-brand",
302
317
  children: [
303
- /* @__PURE__ */ jsx("div", {
304
- className: "opp-avatar",
305
- children: "1"
318
+ /* @__PURE__ */ jsxs("svg", {
319
+ className: "opp-avatar-svg",
320
+ viewBox: "0 0 100 100",
321
+ "aria-label": "1Sat Ordinals",
322
+ children: [
323
+ /* @__PURE__ */ jsx("circle", {
324
+ cx: "50",
325
+ cy: "50",
326
+ r: "50",
327
+ fill: "#222"
328
+ }),
329
+ /* @__PURE__ */ jsx("circle", {
330
+ cx: "50",
331
+ cy: "50",
332
+ r: "40",
333
+ fill: "#fff"
334
+ }),
335
+ /* @__PURE__ */ jsx("circle", {
336
+ cx: "50",
337
+ cy: "50",
338
+ r: "32",
339
+ fill: "#E5A920"
340
+ }),
341
+ /* @__PURE__ */ jsx("rect", {
342
+ x: "47",
343
+ y: "28",
344
+ width: "6",
345
+ height: "28",
346
+ rx: "3",
347
+ fill: "#fff"
348
+ })
349
+ ]
306
350
  }),
307
- /* @__PURE__ */ jsx("span", {
351
+ appIcon && /* @__PURE__ */ jsx("img", {
352
+ className: "opp-avatar-img",
353
+ src: appIcon,
354
+ alt: appName ?? ""
355
+ }),
356
+ appName && /* @__PURE__ */ jsx("span", {
308
357
  children: appName
309
358
  })
310
359
  ]
@@ -433,11 +482,8 @@ function OneSatPermissionPrompt({
433
482
  /* @__PURE__ */ jsxs("div", {
434
483
  className: "opp-footer",
435
484
  children: [
436
- /* @__PURE__ */ jsxs("span", {
437
- children: [
438
- "Secured by ",
439
- appName
440
- ]
485
+ /* @__PURE__ */ jsx("span", {
486
+ children: "Secured by 1Sat Ordinals"
441
487
  }),
442
488
  version && /* @__PURE__ */ jsxs("span", {
443
489
  children: [
package/dist/styles.d.ts CHANGED
@@ -5,5 +5,5 @@
5
5
  * Colors and spacing are kept minimal and theme-driven via CSS variables;
6
6
  * a designer pass will replace these with the production palette.
7
7
  */
8
- 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";
8
+ 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-avatar-svg {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.opp-avatar-img {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\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";
9
9
  //# 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;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,q/IAqPxB,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,0rJAmQxB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1sat/permission-module-ui",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
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.7"
31
+ "@1sat/permission-module": "0.0.12"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": "^18.0.0 || ^19.0.0"