@phala/pay 0.6.0 → 0.8.0

package/dist/react/appearance.d.ts

@@ -1,26 +1,5 @@
-import type { CSSProperties } from "react";
-/** Theming in the spirit of Stripe's Appearance API: a base theme plus a few variables. */
+/** Base theme; customize CSS properties on `.pp-root` in your stylesheet. */
 export interface Appearance {
     theme?: "light" | "dark";
-    variables?: {
-        colorPrimary?: string;
-        /** The color of text appearing on top of any `colorPrimary` background, such as the pay button. */
-        accessibleColorOnColorPrimary?: string;
-        colorBackground?: string;
-        colorText?: string;
-        colorTextSecondary?: string;
-        colorBorder?: string;
-        colorDanger?: string;
-        colorSuccess?: string;
-        fontFamily?: string;
-        borderRadius?: string;
-    };
 }
-/** The root element's custom properties for `appearance.variables`. */
-export declare function appearanceStyle(appearance: Appearance | undefined): CSSProperties;
-/**
- * Every rule is scoped under `.pp-root`; the variables can also be set from the page's own CSS on
- * `.pp-root`.
- */
-export declare const STYLES = "\n.pp-root {\n  --pp-color-primary: #0f62fe;\n  --pp-accessible-color-on-color-primary: #ffffff;\n  --pp-color-background: #ffffff;\n  --pp-color-text: #1a1a1a;\n  --pp-color-text-secondary: #5c5f66;\n  --pp-color-border: #d9dce1;\n  --pp-color-danger: #c62828;\n  --pp-color-success: #1b7f3b;\n  --pp-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --pp-border-radius: 8px;\n  box-sizing: border-box;\n  max-width: 440px;\n  padding: 20px;\n  border: 1px solid var(--pp-color-border);\n  border-radius: var(--pp-border-radius);\n  background: var(--pp-color-background);\n  color: var(--pp-color-text);\n  font-family: var(--pp-font-family);\n  font-size: 14px;\n  line-height: 1.45;\n}\n.pp-root[data-theme=\"dark\"] {\n  --pp-color-primary: #78a9ff;\n  --pp-color-background: #161616;\n  --pp-color-text: #f4f4f4;\n  --pp-color-text-secondary: #a8a8a8;\n  --pp-color-border: #393939;\n  --pp-color-danger: #ff8389;\n  --pp-color-success: #42be65;\n}\n.pp-root *, .pp-root *::before, .pp-root *::after { box-sizing: inherit; }\n.pp-amount { margin: 0; overflow-wrap: anywhere; font-size: 22px; font-weight: 600; }\n.pp-subtitle { margin: 2px 0 16px; color: var(--pp-color-text-secondary); }\n.pp-badge { font-weight: 600; }\n.pp-payments { list-style: none; margin: 12px 0 0; padding: 0; }\n.pp-payments li { margin: 4px 0; }\n.pp-status { display: flex; gap: 8px; align-items: baseline; justify-content: space-between;\n  margin-bottom: 12px; padding: 10px 12px; border-radius: var(--pp-border-radius);\n  border: 1px solid var(--pp-color-border); }\n.pp-status[data-tone=\"success\"] { border-color: var(--pp-color-success); color: var(--pp-color-success); }\n.pp-status[data-tone=\"danger\"] { border-color: var(--pp-color-danger); color: var(--pp-color-danger); }\n.pp-countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.pp-notice { margin: 0 0 16px; color: var(--pp-color-text-secondary); font-size: 13px; }\n.pp-notice strong { color: var(--pp-color-text); }\n.pp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pp-color-border); margin-bottom: 16px; }\n.pp-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none;\n  color: var(--pp-color-text-secondary); font: inherit; padding: 8px 10px; cursor: pointer; }\n.pp-tab[aria-selected=\"true\"] { color: var(--pp-color-text); border-bottom-color: var(--pp-color-primary); font-weight: 600; }\n.pp-root button:focus-visible, .pp-root a:focus-visible { outline: 2px solid var(--pp-color-primary); outline-offset: 2px; }\n.pp-wallets { display: grid; gap: 8px; }\n.pp-button { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%;\n  appearance: none; border: 1px solid var(--pp-color-primary); border-radius: var(--pp-border-radius);\n  background: var(--pp-color-primary); color: var(--pp-accessible-color-on-color-primary); font: inherit; font-weight: 600; padding: 10px 14px; cursor: pointer; }\n.pp-button:disabled { opacity: 0.6; cursor: progress; }\n.pp-button img { width: 20px; height: 20px; }\n.pp-wallet-name { font-weight: 400; opacity: 0.85; }\n.pp-message { margin: 10px 0 0; color: var(--pp-color-text-secondary); }\n.pp-message[data-tone=\"danger\"] { color: var(--pp-color-danger); }\n.pp-qr-panel { display: grid; justify-items: center; gap: 10px; text-align: center; }\n.pp-qr { border-radius: 4px; }\n.pp-fields { display: grid; gap: 10px; margin: 0; }\n.pp-field dt { color: var(--pp-color-text-secondary); font-size: 12px; }\n.pp-field dd { display: flex; gap: 8px; align-items: center; margin: 2px 0 0; }\n.pp-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }\n.pp-copy { flex: none; appearance: none; border: 1px solid var(--pp-color-border); border-radius: 6px;\n  background: none; color: var(--pp-color-text); font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; }\n.pp-tx { margin: 0 0 12px; font-size: 13px; }\n.pp-tx a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }\n.pp-tx .pp-value { overflow-wrap: anywhere; }\n";
 //# sourceMappingURL=appearance.d.ts.map

package/dist/react/appearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/react/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,2FAA2F;AAC3F,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE;QACV,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mGAAmG;QACnG,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAeD,uEAAuE;AACvE,wBAAgB,eAAe,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,aAAa,CAUjF;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,shIAuElB,CAAC"}
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/react/appearance.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B"}

package/dist/react/appearance.js

@@ -1,101 +1,2 @@
-const VARIABLES = {
-    colorPrimary: "--pp-color-primary",
-    accessibleColorOnColorPrimary: "--pp-accessible-color-on-color-primary",
-    colorBackground: "--pp-color-background",
-    colorText: "--pp-color-text",
-    colorTextSecondary: "--pp-color-text-secondary",
-    colorBorder: "--pp-color-border",
-    colorDanger: "--pp-color-danger",
-    colorSuccess: "--pp-color-success",
-    fontFamily: "--pp-font-family",
-    borderRadius: "--pp-border-radius",
-};
-/** The root element's custom properties for `appearance.variables`. */
-export function appearanceStyle(appearance) {
-    const variables = appearance?.variables ?? {};
-    const style = {};
-    for (const [name, property] of Object.entries(VARIABLES)) {
-        const value = variables[name];
-        if (value !== undefined) {
-            style[property] = value;
-        }
-    }
-    return style;
-}
-/**
- * Every rule is scoped under `.pp-root`; the variables can also be set from the page's own CSS on
- * `.pp-root`.
- */
-export const STYLES = `
-.pp-root {
-  --pp-color-primary: #0f62fe;
-  --pp-accessible-color-on-color-primary: #ffffff;
-  --pp-color-background: #ffffff;
-  --pp-color-text: #1a1a1a;
-  --pp-color-text-secondary: #5c5f66;
-  --pp-color-border: #d9dce1;
-  --pp-color-danger: #c62828;
-  --pp-color-success: #1b7f3b;
-  --pp-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --pp-border-radius: 8px;
-  box-sizing: border-box;
-  max-width: 440px;
-  padding: 20px;
-  border: 1px solid var(--pp-color-border);
-  border-radius: var(--pp-border-radius);
-  background: var(--pp-color-background);
-  color: var(--pp-color-text);
-  font-family: var(--pp-font-family);
-  font-size: 14px;
-  line-height: 1.45;
-}
-.pp-root[data-theme="dark"] {
-  --pp-color-primary: #78a9ff;
-  --pp-color-background: #161616;
-  --pp-color-text: #f4f4f4;
-  --pp-color-text-secondary: #a8a8a8;
-  --pp-color-border: #393939;
-  --pp-color-danger: #ff8389;
-  --pp-color-success: #42be65;
-}
-.pp-root *, .pp-root *::before, .pp-root *::after { box-sizing: inherit; }
-.pp-amount { margin: 0; overflow-wrap: anywhere; font-size: 22px; font-weight: 600; }
-.pp-subtitle { margin: 2px 0 16px; color: var(--pp-color-text-secondary); }
-.pp-badge { font-weight: 600; }
-.pp-payments { list-style: none; margin: 12px 0 0; padding: 0; }
-.pp-payments li { margin: 4px 0; }
-.pp-status { display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
-  margin-bottom: 12px; padding: 10px 12px; border-radius: var(--pp-border-radius);
-  border: 1px solid var(--pp-color-border); }
-.pp-status[data-tone="success"] { border-color: var(--pp-color-success); color: var(--pp-color-success); }
-.pp-status[data-tone="danger"] { border-color: var(--pp-color-danger); color: var(--pp-color-danger); }
-.pp-countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }
-.pp-notice { margin: 0 0 16px; color: var(--pp-color-text-secondary); font-size: 13px; }
-.pp-notice strong { color: var(--pp-color-text); }
-.pp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pp-color-border); margin-bottom: 16px; }
-.pp-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none;
-  color: var(--pp-color-text-secondary); font: inherit; padding: 8px 10px; cursor: pointer; }
-.pp-tab[aria-selected="true"] { color: var(--pp-color-text); border-bottom-color: var(--pp-color-primary); font-weight: 600; }
-.pp-root button:focus-visible, .pp-root a:focus-visible { outline: 2px solid var(--pp-color-primary); outline-offset: 2px; }
-.pp-wallets { display: grid; gap: 8px; }
-.pp-button { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%;
-  appearance: none; border: 1px solid var(--pp-color-primary); border-radius: var(--pp-border-radius);
-  background: var(--pp-color-primary); color: var(--pp-accessible-color-on-color-primary); font: inherit; font-weight: 600; padding: 10px 14px; cursor: pointer; }
-.pp-button:disabled { opacity: 0.6; cursor: progress; }
-.pp-button img { width: 20px; height: 20px; }
-.pp-wallet-name { font-weight: 400; opacity: 0.85; }
-.pp-message { margin: 10px 0 0; color: var(--pp-color-text-secondary); }
-.pp-message[data-tone="danger"] { color: var(--pp-color-danger); }
-.pp-qr-panel { display: grid; justify-items: center; gap: 10px; text-align: center; }
-.pp-qr { border-radius: 4px; }
-.pp-fields { display: grid; gap: 10px; margin: 0; }
-.pp-field dt { color: var(--pp-color-text-secondary); font-size: 12px; }
-.pp-field dd { display: flex; gap: 8px; align-items: center; margin: 2px 0 0; }
-.pp-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
-.pp-copy { flex: none; appearance: none; border: 1px solid var(--pp-color-border); border-radius: 6px;
-  background: none; color: var(--pp-color-text); font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; }
-.pp-tx { margin: 0 0 12px; font-size: 13px; }
-.pp-tx a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
-.pp-tx .pp-value { overflow-wrap: anywhere; }
-`;
+export {};
 //# sourceMappingURL=appearance.js.map

package/dist/react/appearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../src/react/appearance.ts"],"names":[],"mappings":"AAoBA,MAAM,SAAS,GAA+D;IAC5E,YAAY,EAAE,oBAAoB;IAClC,6BAA6B,EAAE,wCAAwC;IACvE,eAAe,EAAE,uBAAuB;IACxC,SAAS,EAAE,iBAAiB;IAC5B,kBAAkB,EAAE,2BAA2B;IAC/C,WAAW,EAAE,mBAAmB;IAChC,WAAW,EAAE,mBAAmB;IAChC,YAAY,EAAE,oBAAoB;IAClC,UAAU,EAAE,kBAAkB;IAC9B,YAAY,EAAE,oBAAoB;CACnC,CAAC;AAEF,uEAAuE;AACvE,MAAM,UAAU,eAAe,CAAC,UAAkC;IAChE,MAAM,SAAS,GAAG,UAAU,EAAE,SAAS,IAAI,EAAE,CAAC;IAC9C,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,KAAK,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QACzD,MAAM,KAAK,GAAG,SAAS,CAAC,IAA8B,CAAC,CAAC;QACxD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;QAC1B,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuErB,CAAC"}
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../src/react/appearance.ts"],"names":[],"mappings":""}

package/dist/react/useCheckout.d.ts

@@ -1,15 +1,9 @@
-import { type CheckoutState } from "../checkout.js";
-export interface UseCheckoutOptions {
-    clientSecret: string;
-    /** The quote's address as your backend recomputed it; another one fails closed. */
-    expectedAddress: string;
-    apiBase: string;
-    pollInterval?: number;
-}
+import { type CheckoutOptions, type CheckoutState } from "../checkout.js";
+export type UseCheckoutOptions = Pick<CheckoutOptions, "clientSecret" | "expectedAddress" | "apiBase" | "pollInterval" | "signal" | "requestTimeout">;
 export interface UseCheckoutResult extends CheckoutState {
     /** Reads the quote now, for example right after the wallet broadcast the payment. */
     refresh: () => void;
 }
 /** Follows a quote's public view for as long as the component is mounted. */
-export declare function useCheckout({ clientSecret, expectedAddress, apiBase, pollInterval, }: UseCheckoutOptions): UseCheckoutResult;
+export declare function useCheckout({ clientSecret, expectedAddress, apiBase, pollInterval, signal, requestTimeout, }: UseCheckoutOptions): UseCheckoutResult;
 //# sourceMappingURL=useCheckout.d.ts.map

package/dist/react/useCheckout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckout.d.ts","sourceRoot":"","sources":["../../src/react/useCheckout.ts"],"names":[],"mappings":"AACA,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1F,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,qFAAqF;IACrF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,eAAe,EACf,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,GAAG,iBAAiB,CA2BxC"}
+{"version":3,"file":"useCheckout.d.ts","sourceRoot":"","sources":["../../src/react/useCheckout.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,aAAa,EACnB,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,eAAe,EACf,cAAc,GAAG,iBAAiB,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,gBAAgB,CAC9F,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,qFAAqF;IACrF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,eAAe,EACf,OAAO,EACP,YAAY,EACZ,MAAM,EACN,cAAc,GACf,EAAE,kBAAkB,GAAG,iBAAiB,CA6BxC"}

package/dist/react/useCheckout.js

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { createCheckout } from "../checkout.js";
+import { createCheckout, } from "../checkout.js";
 const LOADING = { status: "loading", quote: null, error: null };
 /** Follows a quote's public view for as long as the component is mounted. */
-export function useCheckout({ clientSecret, expectedAddress, apiBase, pollInterval, }) {
+export function useCheckout({ clientSecret, expectedAddress, apiBase, pollInterval, signal, requestTimeout, }) {
     const [current, setCurrent] = useState({ key: "", state: LOADING });
     const checkout = useRef(null);
     const key = `${apiBase} ${clientSecret} ${expectedAddress}`;
@@ -12,6 +12,8 @@ export function useCheckout({ clientSecret, expectedAddress, apiBase, pollInterv
             expectedAddress,
             apiBase,
             ...(pollInterval === undefined ? {} : { pollInterval }),
+            ...(signal === undefined ? {} : { signal }),
+            ...(requestTimeout === undefined ? {} : { requestTimeout }),
         });
         checkout.current = instance;
         const unsubscribe = instance.subscribe((state) => setCurrent({ key, state }));
@@ -20,7 +22,7 @@ export function useCheckout({ clientSecret, expectedAddress, apiBase, pollInterv
             instance.destroy();
             checkout.current = null;
         };
-    }, [key, clientSecret, expectedAddress, apiBase, pollInterval]);
+    }, [key, clientSecret, expectedAddress, apiBase, pollInterval, signal, requestTimeout]);
     const refresh = useCallback(() => {
         void checkout.current?.refresh();
     }, []);

package/dist/react/useCheckout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckout.js","sourceRoot":"","sources":["../../src/react/useCheckout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,cAAc,EAA4C,MAAM,gBAAgB,CAAC;AAe1F,MAAM,OAAO,GAAkB,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAE/E,6EAA6E;AAC7E,MAAM,UAAU,WAAW,CAAC,EAC1B,YAAY,EACZ,eAAe,EACf,OAAO,EACP,YAAY,GACO;IACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,GAAG,OAAO,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,cAAc,CAAC;YAC9B,YAAY;YACZ,eAAe;YACf,OAAO;YACP,GAAG,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC;SACxD,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC5B,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9E,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,CAAC;YACd,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhE,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,KAAK,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kFAAkF;IAClF,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;AACzE,CAAC"}
+{"version":3,"file":"useCheckout.js","sourceRoot":"","sources":["../../src/react/useCheckout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EACL,cAAc,GAIf,MAAM,gBAAgB,CAAC;AAYxB,MAAM,OAAO,GAAkB,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAE/E,6EAA6E;AAC7E,MAAM,UAAU,WAAW,CAAC,EAC1B,YAAY,EACZ,eAAe,EACf,OAAO,EACP,YAAY,EACZ,MAAM,EACN,cAAc,GACK;IACnB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,GAAG,OAAO,IAAI,YAAY,IAAI,eAAe,EAAE,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,cAAc,CAAC;YAC9B,YAAY;YACZ,eAAe;YACf,OAAO;YACP,GAAG,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC;YACvD,GAAG,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;YAC3C,GAAG,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC;SAC5D,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;QAC5B,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9E,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,CAAC;YACd,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAExF,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,KAAK,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kFAAkF;IAClF,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;AACzE,CAAC"}

package/dist/request.d.ts

@@ -0,0 +1,6 @@
+/** Compose caller cancellation with a finite deadline, including response-body reads. */
+export declare function requestSignal(options: {
+    signal?: AbortSignal;
+    requestTimeout?: number;
+}): AbortSignal;
+//# sourceMappingURL=request.d.ts.map

package/dist/request.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"request.d.ts","sourceRoot":"","sources":["../src/request.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,OAAO,EAAE;IACrC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,WAAW,CAGd"}

package/dist/request.js

@@ -0,0 +1,6 @@
+/** Compose caller cancellation with a finite deadline, including response-body reads. */
+export function requestSignal(options) {
+    const deadline = AbortSignal.timeout(options.requestTimeout ?? 10_000);
+    return options.signal === undefined ? deadline : AbortSignal.any([options.signal, deadline]);
+}
+//# sourceMappingURL=request.js.map

package/dist/request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"request.js","sourceRoot":"","sources":["../src/request.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,MAAM,UAAU,aAAa,CAAC,OAG7B;IACC,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,IAAI,MAAM,CAAC,CAAC;IACvE,OAAO,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC/F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phala/pay",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Phala Pay checkout: a framework-agnostic client and React bindings",
   "keywords": [
     "crypto",
@@ -23,7 +23,9 @@
     "directory": "sdk/js"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -36,7 +38,8 @@
     "./server": {
       "types": "./dist/server/index.d.ts",
       "default": "./dist/server/index.js"
-    }
+    },
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "dist",
@@ -47,7 +50,7 @@
   },
   "packageManager": "pnpm@12.6.0",
   "engines": {
-    "node": ">=20"
+    "node": ">=20.3"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
@@ -78,16 +81,17 @@
     "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
-    "@types/node": "^24.19.0",
-    "@types/react": "^18.3.31",
-    "@types/react-dom": "^18.3.7",
+    "@types/node": "^26.6.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
+    "axe-core": "^4.13.0",
     "eslint": "^10.11.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "jsdom": "^30.1.1",
     "jsqr": "^1.4.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.70.1",
     "viem": "^2.56.9",

package/src/checkout.ts

@@ -1,3 +1,4 @@
+import { requestSignal } from "./request.js";
 import { getAddress, isAddress, isAddressEqual } from "viem";
 import { parseClientQuote, quoteIdFromClientSecret, type ClientQuote } from "./quote.js";
 
@@ -109,6 +110,10 @@ export interface CheckoutOptions {
   apiBase: string;
   /** Milliseconds between status reads; default 3000. */
   pollInterval?: number;
+  /** Cancels this request/session together with its own deadline. */
+  signal?: AbortSignal;
+  /** Request deadline in milliseconds; default 10000. */
+  requestTimeout?: number;
   fetch?: typeof globalThis.fetch;
   /** Current time in milliseconds; for tests. */
   now?: () => number;
@@ -120,7 +125,7 @@ export interface CheckoutSession {
   subscribe(listener: (state: CheckoutState) => void): () => void;
   /** Reads the quote now instead of at the next poll. */
   refresh(): Promise<void>;
-  /** Stops polling. */
+  /** Stops polling and aborts the active request. */
   destroy(): void;
 }
 
@@ -132,6 +137,10 @@ export interface RetrieveQuoteOptions {
   /** The address your backend recomputed; a quote naming another one is refused. */
   expectedAddress: string;
   apiBase: string;
+  /** Cancels this request/session together with its own deadline. */
+  signal?: AbortSignal;
+  /** Request deadline in milliseconds; default 10000. */
+  requestTimeout?: number;
   fetch?: typeof globalThis.fetch;
 }
 
@@ -147,7 +156,11 @@ export async function retrieveQuote(options: RetrieveQuoteOptions): Promise<Clie
   const url = `${base}/v1/quotes/${quoteId}?client_secret=${encodeURIComponent(options.clientSecret)}`;
   const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis);
   // A simple GET with no custom headers, so the browser sends no CORS preflight.
-  const response = await fetchImpl(url, { cache: "no-store", credentials: "omit" });
+  const response = await fetchImpl(url, {
+    cache: "no-store",
+    credentials: "omit",
+    signal: requestSignal(options),
+  });
   if (!response.ok) {
     throw responseError(response, "the quote or its client secret is unknown");
   }
@@ -198,6 +211,11 @@ export function checkoutStatus(quote: ClientQuote, nowSeconds: number): Checkout
 export function createCheckout(options: CheckoutOptions): CheckoutSession {
   quoteIdFromClientSecret(options.clientSecret);
   expectedAddress(options.expectedAddress);
+  const controller = new AbortController();
+  const signal =
+    options.signal === undefined
+      ? controller.signal
+      : AbortSignal.any([controller.signal, options.signal]);
   const now = options.now ?? Date.now;
   const interval = options.pollInterval ?? DEFAULT_POLL_INTERVAL;
   const listeners = new Set<(state: CheckoutState) => void>();
@@ -226,6 +244,7 @@ export function createCheckout(options: CheckoutOptions): CheckoutSession {
     const { status, quote } = state;
     return (
       destroyed ||
+      signal.aborted ||
       status === "error" ||
       status === "credited" ||
       status === "rejected" ||
@@ -237,10 +256,16 @@ export function createCheckout(options: CheckoutOptions): CheckoutSession {
 
   async function load(): Promise<void> {
     try {
-      const quote = await retrieveQuote(options);
+      const quote = await retrieveQuote({ ...options, signal });
+      if (destroyed || signal.aborted) {
+        return;
+      }
       failures = 0;
       setState({ status: checkoutStatus(quote, now() / 1000), quote, error: null });
     } catch (cause) {
+      if (destroyed || signal.aborted) {
+        return;
+      }
       const error =
         cause instanceof CheckoutError
           ? cause
@@ -263,6 +288,9 @@ export function createCheckout(options: CheckoutOptions): CheckoutSession {
   }
 
   function refresh(): Promise<void> {
+    if (destroyed || signal.aborted) {
+      return Promise.resolve();
+    }
     inFlight ??= load().finally(() => {
       inFlight = undefined;
     });
@@ -292,6 +320,7 @@ export function createCheckout(options: CheckoutOptions): CheckoutSession {
     refresh,
     destroy() {
       destroyed = true;
+      controller.abort();
       clearTimeout(timer);
       listeners.clear();
     },

package/src/client.ts

@@ -3,6 +3,7 @@ import {
   retrieveQuote,
   type CheckoutOptions,
   type CheckoutSession,
+  type RetrieveQuoteOptions,
 } from "./checkout.js";
 import type { ClientQuote } from "./quote.js";
 
@@ -32,10 +33,15 @@ export class PhalaPay {
   }
 
   /** Reads the quote's public view once, refusing one whose address is not `expectedAddress`. */
-  retrieveQuote(clientSecret: string, expectedAddress: string): Promise<ClientQuote> {
+  retrieveQuote(
+    clientSecret: string,
+    expectedAddress: string,
+    options: Pick<RetrieveQuoteOptions, "signal" | "requestTimeout"> = {},
+  ): Promise<ClientQuote> {
     return retrieveQuote({
       clientSecret,
       expectedAddress,
+      ...options,
       apiBase: this.apiBase,
       ...this.#fetchOption(),
     });
@@ -44,7 +50,7 @@ export class PhalaPay {
   /** Follows the quote until it is credited, rejected, reversed, canceled, or expired. */
   checkout(
     clientSecret: string,
-    options: Pick<CheckoutOptions, "expectedAddress" | "pollInterval">,
+    options: Pick<CheckoutOptions, "expectedAddress" | "pollInterval" | "signal" | "requestTimeout">,
   ): CheckoutSession {
     return createCheckout({
       clientSecret,

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/deposit-address.ts

@@ -1,3 +1,4 @@
+import { requestSignal } from "./request.js";
 import { CheckoutError, responseError } from "./checkout.js";
 
 /** A payment to a deposit address as the customer's page sees it. Display only. */
@@ -51,6 +52,9 @@ export interface RetrieveDepositAddressOptions {
   /** A `client_secret` from your backend's `POST /v1/deposit_addresses` or `…/rotate`. */
   clientSecret: string;
   apiBase: string;
+  signal?: AbortSignal;
+  /** Request deadline in milliseconds; default 10000. */
+  requestTimeout?: number;
   fetch?: typeof globalThis.fetch;
 }
 
@@ -77,7 +81,11 @@ export async function retrieveDepositAddress(
   const url = `${base}/v1/deposit_addresses/${id}?client_secret=${encodeURIComponent(options.clientSecret)}`;
   const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis);
   // A simple GET with no custom headers, so the browser sends no CORS preflight.
-  const response = await fetchImpl(url, { cache: "no-store", credentials: "omit" });
+  const response = await fetchImpl(url, {
+    cache: "no-store",
+    credentials: "omit",
+    signal: requestSignal(options),
+  });
   if (!response.ok) {
     throw responseError(response, "the address or its client secret is unknown");
   }

package/src/react/Checkout.tsx

@@ -21,7 +21,7 @@ import {
   type EthereumProvider,
   type Wallet,
 } from "../wallet.js";
-import { STYLES, appearanceStyle, type Appearance } from "./appearance.js";
+import type { Appearance } from "./appearance.js";
 import { Field } from "./Field.js";
 import { QrCode } from "./QrCode.js";
 import { useCheckout } from "./useCheckout.js";
@@ -104,17 +104,23 @@ export function Checkout({
   useEffect(() => {
     callbacks.current.onChange?.(state.current);
   }, [status]);
-  const notified = useRef<string | null>(null);
+  const notified = useRef(new Set<string>());
   useEffect(() => {
-    if (quote === null || notified.current === quote.id) {
+    if (quote === null) {
       return;
     }
     if (status === "credited") {
-      notified.current = quote.id;
-      callbacks.current.onSuccess?.(quote);
+      const key = `${quote.id}:success`;
+      if (!notified.current.has(key)) {
+        notified.current.add(key);
+        callbacks.current.onSuccess?.(quote);
+      }
     } else if (status === "expired" || status === "canceled") {
-      notified.current = quote.id;
-      callbacks.current.onExpire?.(quote);
+      const key = `${quote.id}:expire`;
+      if (!notified.current.has(key)) {
+        notified.current.add(key);
+        callbacks.current.onExpire?.(quote);
+      }
     }
   }, [status, quote]);
 
@@ -122,9 +128,7 @@ export function Checkout({
     <div
       className={className === undefined ? "pp-root" : `pp-root ${className}`}
       data-theme={appearance?.theme ?? "light"}
-      style={appearanceStyle(appearance)}
     >
-      <style>{STYLES}</style>
       {quote !== null && (
         <>
           <p className="pp-amount">

package/src/react/DepositAddress.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { formatUnits } from "viem";
 import { networkName } from "../chains.js";
 import {
@@ -11,7 +11,7 @@ import {
 import { CheckoutError, pollDelay } from "../checkout.js";
 import { formatWait } from "../format.js";
 import { depositAddressTransfer, type DepositAddressDetails } from "../payment.js";
-import { STYLES, appearanceStyle, type Appearance } from "./appearance.js";
+import type { Appearance } from "./appearance.js";
 import { Field } from "./Field.js";
 import { QrCode } from "./QrCode.js";
 
@@ -55,6 +55,7 @@ export function DepositAddress({
   className,
 }: DepositAddressProps) {
   const { networks } = depositAddress;
+  const id = useId();
   const view = useClientView(clientSecret, apiBase, pollInterval ?? 3000);
   const payments = view?.payments ?? [];
   const [selectedChain, setSelectedChain] = useState(chainId ?? networks[0]?.chain_id);
@@ -76,49 +77,43 @@ export function DepositAddress({
     <div
       className={className === undefined ? "pp-root" : `pp-root ${className}`}
       data-theme={appearance?.theme ?? "light"}
-      style={appearanceStyle(appearance)}
     >
-      <style>{STYLES}</style>
       <p className="pp-subtitle">
         {depositAddress.address === null
           ? "Your deposit address for every supported token; it differs on some networks"
           : "One address for all supported tokens and networks"}
       </p>
       {networks.length > 1 && (
-        <div className="pp-tabs" role="tablist" aria-label="Network">
+        <fieldset className="pp-choices">
+          <legend>Network</legend>
           {networks.map((each) => (
-            <button
-              key={each.chain_id}
-              type="button"
-              role="tab"
-              className="pp-tab"
-              aria-selected={each.chain_id === network.chain_id}
-              onClick={() => {
-                setSelectedChain(each.chain_id);
-              }}
-            >
+            <label key={each.chain_id}>
+              <input
+                type="radio"
+                name={`${id}-network`}
+                checked={each.chain_id === network.chain_id}
+                onChange={() => setSelectedChain(each.chain_id)}
+              />
               {networkName(each.chain_id)}
-            </button>
+            </label>
           ))}
-        </div>
+        </fieldset>
       )}
       {network.assets.length > 1 && (
-        <div className="pp-tabs" role="tablist" aria-label="Token">
+        <fieldset className="pp-choices">
+          <legend>Token</legend>
           {network.assets.map((each) => (
-            <button
-              key={each.asset}
-              type="button"
-              role="tab"
-              className="pp-tab"
-              aria-selected={each.asset === token.asset}
-              onClick={() => {
-                setSelectedAsset(each.asset);
-              }}
-            >
+            <label key={each.asset}>
+              <input
+                type="radio"
+                name={`${id}-token`}
+                checked={each.asset === token.asset}
+                onChange={() => setSelectedAsset(each.asset)}
+              />
               {each.asset.toUpperCase()}
-            </button>
+            </label>
           ))}
-        </div>
+        </fieldset>
       )}
       <div className="pp-qr-panel">
         <QrCode value={token.payment_uri} label={`Deposit address for ${symbol} on ${name}`} />
@@ -161,13 +156,14 @@ function useClientView(
     if (clientSecret === undefined || apiBase === undefined) {
       return;
     }
+    const controller = new AbortController();
     let stopped = false;
     let timer: ReturnType<typeof setTimeout> | undefined;
     let failures = 0;
     const load = async () => {
       let failure: CheckoutError | null = null;
       try {
-        const view = await retrieveDepositAddress({ clientSecret, apiBase });
+        const view = await retrieveDepositAddress({ clientSecret, apiBase, signal: controller.signal });
         failures = 0;
         if (!stopped) {
           setCurrent({ key, view });
@@ -187,6 +183,7 @@ function useClientView(
     void load();
     return () => {
       stopped = true;
+      controller.abort();
       clearTimeout(timer);
     };
   }, [key, clientSecret, apiBase, interval]);