@phala/pay 0.8.3 → 0.9.1

package/dist/server/webhook.js

@@ -1,154 +0,0 @@
-/**
- * Standard Webhooks `v1a` verification of Phala Pay deliveries (design D11): an ed25519 signature
- * over `{webhook-id}.{webhook-timestamp}.{body}` by your account's webhook key in the endpoint's
- * mode, pinned from `GET /v1/attestation`. Uses WebCrypto, so it runs on Node 20+, Deno, Bun, and
- * edge runtimes.
- */
-/** A delivery that did not verify: answer `400` and do nothing. */
-export class WebhookSignatureError extends Error {
-    name = "WebhookSignatureError";
-}
-/**
- * Verifies a delivery and returns its event, as Stripe's `constructEvent` does, failing closed
- * unless a `v1a` signature verifies with one of `publicKeys` (ed25519 keys in Standard Webhooks'
- * `whpk_` form, as `GET /v1/attestation` lists them; pass both while a rotation overlaps), the
- * timestamp is within tolerance, the body's id is the `webhook-id`, and the event is
- * `expectedAccount`'s in `expectedLivemode`.
- *
- * `payload` is the raw request body, before any JSON parsing.
- */
-export async function constructEvent(payload, headers, publicKeys, options) {
-    if (options.expectedAccount === "") {
-        throw new TypeError("expectedAccount is required");
-    }
-    const now = options.now ?? Math.floor(Date.now() / 1000);
-    const tolerance = options.tolerance ?? 300;
-    if (!Number.isFinite(now) || !Number.isFinite(tolerance) || tolerance < 0) {
-        throw new TypeError("webhook now must be finite and tolerance finite and non-negative");
-    }
-    const body = typeof payload === "string" ? new TextEncoder().encode(payload) : payload;
-    const id = header(headers, "webhook-id");
-    const timestamp = header(headers, "webhook-timestamp");
-    const signatures = header(headers, "webhook-signature");
-    if (id === undefined || timestamp === undefined || signatures === undefined) {
-        throw new WebhookSignatureError("webhook headers missing");
-    }
-    if (!/^\d+$/.test(timestamp) || !Number.isSafeInteger(Number(timestamp))) {
-        throw new WebhookSignatureError("webhook timestamp malformed");
-    }
-    if (Math.abs(now - Number(timestamp)) > tolerance) {
-        throw new WebhookSignatureError("webhook timestamp outside tolerance");
-    }
-    const signed = concat(new TextEncoder().encode(`${id}.${timestamp}.`), body);
-    const keys = await Promise.all((typeof publicKeys === "string" ? [publicKeys] : publicKeys).map(importKey));
-    if (keys.length === 0) {
-        throw new TypeError("no webhook public key pinned");
-    }
-    let verified = false;
-    for (const entry of signatures.split(" ")) {
-        const [version, encoded] = entry.split(",", 2);
-        const signature = version === "v1a" && encoded !== undefined ? base64(encoded) : undefined;
-        if (signature === undefined) {
-            continue;
-        }
-        for (const key of keys) {
-            if (await crypto.subtle.verify("Ed25519", key, signature, signed)) {
-                verified = true;
-            }
-        }
-    }
-    if (!verified) {
-        throw new WebhookSignatureError("no valid webhook signature");
-    }
-    let event;
-    try {
-        event = JSON.parse(new TextDecoder().decode(body));
-    }
-    catch {
-        throw new TypeError("webhook body is not an event");
-    }
-    if (!isRecord(event)) {
-        throw new TypeError("webhook body is not an event");
-    }
-    const e = event;
-    const data = e["data"];
-    const object = isRecord(data) ? data["object"] : null;
-    const { id: eventId, type, account, livemode, created, actor, request } = e;
-    if (e["object"] !== "event" ||
-        typeof eventId !== "string" ||
-        typeof type !== "string" ||
-        typeof account !== "string" ||
-        typeof livemode !== "boolean" ||
-        typeof created !== "number" ||
-        !Number.isSafeInteger(created) ||
-        !isRecord(object) ||
-        typeof actor !== "string" ||
-        !(request === null || isRequest(request))) {
-        throw new TypeError("webhook body is not an event");
-    }
-    if (eventId !== id) {
-        throw new WebhookSignatureError("webhook id does not match the event");
-    }
-    if (account !== options.expectedAccount) {
-        throw new WebhookSignatureError("webhook event is for another account");
-    }
-    if (livemode !== options.expectedLivemode) {
-        throw new WebhookSignatureError("webhook event is for the other mode");
-    }
-    const previous = isRecord(data) ? data["previous_attributes"] : undefined;
-    return {
-        id: eventId,
-        object: "event",
-        account,
-        livemode,
-        type,
-        created,
-        actor,
-        request,
-        data: {
-            object,
-            ...(isRecord(previous) ? { previous_attributes: previous } : {}),
-        },
-    };
-}
-function header(headers, name) {
-    if (headers instanceof Headers) {
-        return headers.get(name)?.trim() ?? undefined;
-    }
-    for (const [key, value] of Object.entries(headers)) {
-        if (key.toLowerCase() === name) {
-            return (Array.isArray(value) ? value.join(" ") : value)?.trim();
-        }
-    }
-    return undefined;
-}
-function isRecord(value) {
-    return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isRequest(value) {
-    if (!isRecord(value)) {
-        return false;
-    }
-    const { id, idempotency_key: key } = value;
-    return typeof id === "string" && (key === null || typeof key === "string");
-}
-async function importKey(encoded) {
-    const raw = encoded.startsWith("whpk_") ? base64(encoded.slice("whpk_".length)) : undefined;
-    if (raw?.length !== 32) {
-        throw new TypeError("a webhook public key is whpk_ and the base64 of 32 bytes");
-    }
-    return crypto.subtle.importKey("raw", raw, "Ed25519", false, ["verify"]);
-}
-function base64(value) {
-    if (!/^[A-Za-z0-9+/]*={0,2}$/.test(value) || value.length % 4 !== 0) {
-        return undefined;
-    }
-    return Uint8Array.from(atob(value), (char) => char.charCodeAt(0));
-}
-function concat(left, right) {
-    const joined = new Uint8Array(left.length + right.length);
-    joined.set(left);
-    joined.set(right, left.length);
-    return joined;
-}
-//# sourceMappingURL=webhook.js.map

package/dist/server/webhook.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"webhook.js","sourceRoot":"","sources":["../../src/server/webhook.ts"],"names":[],"mappings":"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"}

package/src/css.d.ts

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

package/src/react/Checkout.tsx

@@ -1,475 +0,0 @@
-"use client";
-
-import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
-import type { Hash, WalletClient } from "viem";
-import type { CheckoutErrorCode, CheckoutState, CheckoutStatus } from "../checkout.js";
-import { networkName, transactionUrl } from "../chains.js";
-import {
-  formatAmount,
-  formatCountdown,
-  formatMinorAmount,
-  formatTokenAmount,
-  formatWait,
-  tokenAmount,
-} from "../format.js";
-import { quoteTransfer } from "../payment.js";
-import type { ClientQuote } from "../quote.js";
-import {
-  WalletError,
-  payWithWallet,
-  watchWallets,
-  type EthereumProvider,
-  type Wallet,
-} from "../wallet.js";
-import type { Appearance } from "./appearance.js";
-import { AssetIcon, NetworkIcon } from "./Icons.js";
-import { Field } from "./Field.js";
-import { QrCode } from "./QrCode.js";
-import { useCheckout } from "./useCheckout.js";
-
-export interface CheckoutProps {
-  /** The quote's `client_secret`, from your backend's `POST /v1/quotes`. */
-  clientSecret: string;
-  /**
-   * The quote's `address` as your backend's SDK recomputed it from the pinned forwarder
-   * (`PhalaPay(forwarder=…)` in Python). Required: when the service's quote names another
-   * address, the checkout fails closed and shows nothing to pay.
-   */
-  expectedAddress: string;
-  /** The service origin, for example `https://topup.example.com`. */
-  apiBase: string;
-  /** Called once when the payment is credited, with the quote: its `amount_credited` is what was
-   * credited, which differs from `amount` for a payment of another amount or a late one. Fulfil
-   * from the `deposit.credited` webhook, not here. */
-  onSuccess?: (quote: ClientQuote) => void;
-  /** Called once when the quote expires or is canceled without a payment. */
-  onExpire?: (quote: ClientQuote) => void;
-  /** Called whenever the checkout's status changes, like Stripe Elements' `onChange`: for example,
-   * to hide your own "new payment" control while a payment is `seen` or `confirming`. */
-  onChange?: (state: CheckoutState) => void;
-  /** Called when the wallet tab could not send the payment, with the `WalletError` and the wallet
-   * it tried (the chosen browser wallet's provider, or `walletClient`): for example on
-   * `insufficient_balance` (nothing was sent), to offer your own way to fund that wallet. The
-   * checkout shows the error's message itself. */
-  onWalletError?: (error: WalletError, wallet: WalletClient | EthereumProvider) => void;
-  appearance?: Appearance;
-  /** Milliseconds between status reads; default 3000. */
-  pollInterval?: number;
-  className?: string;
-  /** The wallet button's label; default "Pay with crypto". */
-  buttonText?: string;
-  /** Your page's connected wallet, for example wagmi's `useWalletClient().data`. When set, the
-   * wallet tab pays with it and its account instead of listing the browser's wallets. */
-  walletClient?: WalletClient | undefined;
-}
-
-type Method = "wallet" | "qr" | "manual";
-
-const METHODS: { id: Method; label: string }[] = [
-  { id: "wallet", label: "Wallet" },
-  { id: "qr", label: "QR code" },
-  { id: "manual", label: "Manual" },
-];
-
-/** A checkout for one quote: pay from a browser wallet, by QR code, or manually, with live status. */
-export function Checkout({
-  clientSecret,
-  expectedAddress,
-  apiBase,
-  onSuccess,
-  onExpire,
-  onChange,
-  onWalletError,
-  appearance,
-  pollInterval,
-  className,
-  buttonText = "Pay with crypto",
-  walletClient,
-}: CheckoutProps) {
-  const { status, quote, error, refresh } = useCheckout({
-    clientSecret,
-    expectedAddress,
-    apiBase,
-    ...(pollInterval === undefined ? {} : { pollInterval }),
-  });
-  const [txHash, setTxHash] = useState<Hash | null>(null);
-  const now = useNow(status === "waiting");
-
-  const callbacks = useRef({ onSuccess, onExpire, onChange });
-  const state = useRef<CheckoutState>({ status, quote, error });
-  useEffect(() => {
-    callbacks.current = { onSuccess, onExpire, onChange };
-    state.current = { status, quote, error };
-  });
-  // Once per status change, not on every poll.
-  useEffect(() => {
-    callbacks.current.onChange?.(state.current);
-  }, [status]);
-  const notified = useRef(new Set<string>());
-  useEffect(() => {
-    if (quote === null) {
-      return;
-    }
-    if (status === "credited") {
-      const key = `${quote.id}:success`;
-      if (!notified.current.has(key)) {
-        notified.current.add(key);
-        callbacks.current.onSuccess?.(quote);
-      }
-    } else if (status === "expired" || status === "canceled") {
-      const key = `${quote.id}:expire`;
-      if (!notified.current.has(key)) {
-        notified.current.add(key);
-        callbacks.current.onExpire?.(quote);
-      }
-    }
-  }, [status, quote]);
-
-  return (
-    <div
-      className={className === undefined ? "pp-root" : `pp-root ${className}`}
-      data-theme={appearance?.theme ?? "light"}
-    >
-      {quote !== null && (
-        <>
-          <p className="pp-amount">
-            <AssetIcon asset={quote.asset} size={20} />{" "}
-            {formatTokenAmount(quote)} {quote.asset.toUpperCase()}
-          </p>
-          <p className="pp-subtitle">
-            {formatAmount(quote)} top-up · <NetworkIcon chainId={quote.chain_id} size={16} />{" "}
-            {networkName(quote.chain_id)}
-            {!quote.livemode && <span className="pp-badge"> · Test mode</span>}
-          </p>
-        </>
-      )}
-      <StatusLine status={status} quote={quote} now={now} error={error} />
-      {txHash !== null && quote !== null && <Transaction hash={txHash} chainId={quote.chain_id} />}
-      {status === "waiting" && quote !== null && (
-        <PaymentOptions
-          quote={quote}
-          buttonText={buttonText}
-          walletClient={walletClient}
-          onSent={(hash) => {
-            setTxHash(hash);
-            refresh();
-          }}
-          onWalletError={onWalletError}
-        />
-      )}
-    </div>
-  );
-}
-
-function StatusLine({
-  status,
-  quote,
-  now,
-  error,
-}: {
-  status: CheckoutStatus;
-  quote: ClientQuote | null;
-  now: number;
-  error: CheckoutState["error"];
-}) {
-  const tone =
-    status === "credited"
-      ? "success"
-      : ["rejected", "reversed", "expired", "canceled", "error"].includes(status)
-        ? "danger"
-        : "neutral";
-  return (
-    <div className="pp-status" data-tone={tone}>
-      <span role="status" aria-live="polite">
-        {statusMessage(status, quote, error?.code)}
-        {error !== null && status !== "error" ? " (reconnecting…)" : ""}
-      </span>
-      {status === "waiting" && quote !== null && (
-        <span className="pp-countdown" aria-label="Time left to pay">
-          {formatCountdown(quote.expires_at, now)}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function statusMessage(
-  status: CheckoutStatus,
-  quote: ClientQuote | null,
-  code: CheckoutErrorCode | undefined,
-): string {
-  switch (status) {
-    case "loading":
-      return "Loading payment details…";
-    case "waiting":
-      return "Waiting for your payment";
-    case "seen":
-      return seenMessage(quote);
-    case "confirming":
-      return "Confirmed on chain, crediting…";
-    case "credited":
-      return creditedMessage(quote);
-    case "rejected":
-      return "This payment cannot be credited. Contact support with your transaction.";
-    case "reversed":
-      return "Payment reversed: a chain reorganization replaced it and its credit was removed. Check your wallet, then start a new top-up.";
-    case "expired":
-      return "Quote expired. Do not send funds; start a new top-up.";
-    case "canceled":
-      return "Quote canceled. Do not send funds.";
-    case "error":
-      return code === "address_mismatch"
-        ? "This payment address could not be verified. Do not send funds; contact support."
-        : "This payment link is not valid. Start a new top-up.";
-  }
-}
-
-function seenMessage(quote: ClientQuote | null): string {
-  if (quote === null) {
-    return "Received, crediting after confirmation";
-  }
-  const wait = formatWait(quote.typical_credit_seconds);
-  return quote.confirmations === null
-    ? `Received, crediting in ${wait}`
-    : `Received, ${quote.confirmations} confirmation${quote.confirmations === 1 ? "" : "s"}. Crediting in ${wait}`;
-}
-
-/** What was credited and, when the payment was valued at the market price, the quote it missed. */
-function creditedMessage(quote: ClientQuote | null): string {
-  if (quote?.amount_credited == null) {
-    return "Payment credited";
-  }
-  const credited = formatMinorAmount(quote, quote.amount_credited);
-  if (quote.amount_credited < quote.amount) {
-    return `Payment credited: ${credited} of ${formatAmount(quote)}`;
-  }
-  if (quote.amount_credited > quote.amount) {
-    return `Payment credited: ${credited} (${formatAmount(quote)} quoted)`;
-  }
-  return `Payment credited: ${credited}`;
-}
-
-function Transaction({ hash, chainId }: { hash: Hash; chainId: number }) {
-  const url = transactionUrl(chainId, hash);
-  return (
-    <p className="pp-tx">
-      Transaction sent:{" "}
-      {url === undefined ? (
-        <span className="pp-value">{hash}</span>
-      ) : (
-        <a className="pp-value" href={url} target="_blank" rel="noreferrer">
-          {hash}
-        </a>
-      )}
-    </p>
-  );
-}
-
-function PaymentOptions({
-  quote,
-  buttonText,
-  walletClient,
-  onSent,
-  onWalletError,
-}: {
-  quote: ClientQuote;
-  buttonText: string;
-  walletClient: WalletClient | undefined;
-  onSent: (hash: Hash) => void;
-  onWalletError: CheckoutProps["onWalletError"];
-}) {
-  const [selectedMethod, setMethod] = useState<Method | null>(null);
-  const [discovered, setDiscovered] = useState<Wallet[]>([]);
-  useEffect(
-    () => (walletClient === undefined ? watchWallets(setDiscovered) : undefined),
-    [walletClient],
-  );
-  const method = selectedMethod ?? (walletClient !== undefined || discovered.length > 0 ? "wallet" : "qr");
-  const id = useId();
-  const tabs = useRef<(HTMLButtonElement | null)[]>([]);
-  const amount = `${formatTokenAmount(quote)} ${quote.asset.toUpperCase()}`;
-
-  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const index = METHODS.findIndex((m) => m.id === method);
-    const next =
-      event.key === "ArrowRight"
-        ? (index + 1) % METHODS.length
-        : event.key === "ArrowLeft"
-          ? (index - 1 + METHODS.length) % METHODS.length
-          : event.key === "Home"
-            ? 0
-            : event.key === "End"
-              ? METHODS.length - 1
-              : null;
-    const target = next === null ? undefined : METHODS[next];
-    if (next !== null && target !== undefined) {
-      event.preventDefault();
-      setMethod(target.id);
-      tabs.current[next]?.focus();
-    }
-  };
-
-  return (
-    <>
-      <p className="pp-notice">
-        Send <strong>exactly {amount}</strong> on {networkName(quote.chain_id)} in one transfer
-        before the timer ends. Otherwise it’s credited at the market rate.
-      </p>
-      <div className="pp-tabs" role="tablist" aria-label="Payment method" onKeyDown={onKeyDown}>
-        {METHODS.map((m, index) => (
-          <button
-            key={m.id}
-            ref={(element) => {
-              tabs.current[index] = element;
-            }}
-            type="button"
-            role="tab"
-            className="pp-tab"
-            id={`${id}-tab-${m.id}`}
-            aria-label={m.id === "wallet" ? "Browser wallet" : m.id === "manual" ? "Manual transfer" : m.label}
-            aria-selected={method === m.id}
-            aria-controls={`${id}-panel-${m.id}`}
-            tabIndex={method === m.id ? 0 : -1}
-            onClick={() => setMethod(m.id)}
-          >
-            {m.label}
-          </button>
-        ))}
-      </div>
-      <div
-        role="tabpanel"
-        id={`${id}-panel-${method}`}
-        aria-labelledby={`${id}-tab-${method}`}
-        tabIndex={0}
-      >
-        {method === "wallet" && (
-          <WalletPanel
-            quote={quote}
-            buttonText={buttonText}
-            walletClient={walletClient}
-            discovered={discovered}
-            onSent={onSent}
-            onWalletError={onWalletError}
-          />
-        )}
-        {method === "qr" && (
-          <div className="pp-qr-panel">
-            <QrCode value={quote.payment_uri} label={`Payment request for ${amount}`} />
-            <p className="pp-message">
-              Scan with your wallet app and check it shows {amount} on {networkName(quote.chain_id)}.
-            </p>
-          </div>
-        )}
-        {method === "manual" && <ManualPanel quote={quote} />}
-      </div>
-    </>
-  );
-}
-
-type WalletStep =
-  | { kind: "idle" }
-  | { kind: "pending"; wallet: string }
-  | { kind: "failed"; message: string };
-
-function WalletPanel({
-  quote,
-  buttonText,
-  walletClient,
-  discovered,
-  onSent,
-  onWalletError,
-}: {
-  quote: ClientQuote;
-  discovered: Wallet[];
-  buttonText: string;
-  walletClient: WalletClient | undefined;
-  onSent: (hash: Hash) => void;
-  onWalletError: CheckoutProps["onWalletError"];
-}) {
-  const [step, setStep] = useState<WalletStep>({ kind: "idle" });
-  const wallets: { id: string; name: string; icon: string; wallet: WalletClient | EthereumProvider }[] =
-    walletClient === undefined
-      ? discovered.map(({ info: { uuid, name, icon }, provider }) => ({ id: uuid, name, icon, wallet: provider }))
-      : [{ id: "client", name: "your wallet", icon: "", wallet: walletClient }];
-
-  const pay = async ({ name, wallet }: (typeof wallets)[number]) => {
-    setStep({ kind: "pending", wallet: name });
-    try {
-      onSent(await payWithWallet(wallet, quote));
-      setStep({ kind: "idle" });
-    } catch (error) {
-      setStep({
-        kind: "failed",
-        message: error instanceof WalletError ? error.message : "The payment could not be sent",
-      });
-      if (error instanceof WalletError) {
-        onWalletError?.(error, wallet);
-      }
-    }
-  };
-
-  if (wallets.length === 0) {
-    return (
-      <p className="pp-message">
-        Install a browser wallet to pay here.
-      </p>
-    );
-  }
-  return (
-    <div className="pp-wallets">
-      {wallets.map((choice) => (
-        <button
-          key={choice.id}
-          type="button"
-          className="pp-button"
-          disabled={step.kind === "pending"}
-          onClick={() => void pay(choice)}
-          aria-label={walletClient === undefined ? `${buttonText} (${choice.name})` : buttonText}
-        >
-          {choice.icon !== "" && <img src={choice.icon} alt="" />}
-          <span>{buttonText}</span>
-          {walletClient === undefined && <span className="pp-wallet-name">{choice.name}</span>}
-        </button>
-      ))}
-      <p
-        className="pp-message"
-        data-tone={step.kind === "failed" ? "danger" : undefined}
-        aria-live="polite"
-      >
-        {step.kind === "pending" && `Confirm the payment in ${step.wallet}…`}
-        {step.kind === "failed" && step.message}
-      </p>
-    </div>
-  );
-}
-
-function ManualPanel({ quote }: { quote: ClientQuote }) {
-  const token = quoteTransfer(quote).token;
-  return (
-    <>
-      <dl className="pp-fields">
-        <Field label="Network" value={`${networkName(quote.chain_id)} (chain ID ${quote.chain_id})`} />
-        <Field label={`Token (${quote.asset.toUpperCase()}) contract`} value={token} copy />
-        <Field label="Send to address" value={quote.address} copy />
-        <Field label="Exact amount" value={formatTokenAmount(quote)} copy={tokenAmount(quote)} />
-      </dl>
-      <p className="pp-message">
-        Only {quote.asset.toUpperCase()} on {networkName(quote.chain_id)} is credited. Exchange
-        withdrawal fees must not reduce the amount received.
-      </p>
-    </>
-  );
-}
-
-/** The current time in milliseconds, updated every second while `active`. */
-function useNow(active: boolean): number {
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const timer = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(timer);
-  }, [active]);
-  return now;
-}