@phala/pay 0.1.2 → 0.2.0

package/src/client.ts

@@ -14,11 +14,12 @@ export interface PhalaPayOptions {
 
 /**
  * The browser client, in the shape of Stripe.js: it holds no key, only the service origin, and
- * works with the `client_secret` your backend got from `POST /v1/quotes`.
+ * works with the `client_secret` your backend got from `POST /v1/quotes` and the `address` its
+ * SDK recomputed (`expectedAddress`).
  *
  *     const pay = new PhalaPay({ apiBase: "https://pay.example.com" });
- *     const quote = await pay.retrieveQuote(clientSecret);
- *     const session = pay.checkout(clientSecret);
+ *     const quote = await pay.retrieveQuote(clientSecret, expectedAddress);
+ *     const session = pay.checkout(clientSecret, { expectedAddress });
  *     session.subscribe(({ status }) => render(status));
  */
 export class PhalaPay {
@@ -30,15 +31,20 @@ export class PhalaPay {
     this.#fetch = options.fetch;
   }
 
-  /** Reads the quote's public view once. */
-  retrieveQuote(clientSecret: string): Promise<ClientQuote> {
-    return retrieveQuote({ clientSecret, apiBase: this.apiBase, ...this.#fetchOption() });
+  /** Reads the quote's public view once, refusing one whose address is not `expectedAddress`. */
+  retrieveQuote(clientSecret: string, expectedAddress: string): Promise<ClientQuote> {
+    return retrieveQuote({
+      clientSecret,
+      expectedAddress,
+      apiBase: this.apiBase,
+      ...this.#fetchOption(),
+    });
   }
 
-  /** Follows the quote until it is credited, rejected, canceled, or expired. */
+  /** Follows the quote until it is credited, rejected, reversed, canceled, or expired. */
   checkout(
     clientSecret: string,
-    options: Pick<CheckoutOptions, "pollInterval"> = {},
+    options: Pick<CheckoutOptions, "expectedAddress" | "pollInterval">,
   ): CheckoutSession {
     return createCheckout({
       clientSecret,

package/src/deposit-address.ts

@@ -0,0 +1,138 @@
+import { CheckoutError, responseError } from "./checkout.js";
+
+/** A payment to a deposit address as the customer's page sees it. Display only. */
+export interface DepositAddressPayment {
+  /**
+   * `seen` (in a block, may still disappear), `confirming` (at the route's confirmation, being
+   * valued and screened), `credited`, `rejected` (contact support), or `reversed` (its
+   * transaction left the chain before finality: the payment did not happen).
+   */
+  status: "seen" | "confirming" | "credited" | "rejected" | "reversed";
+  chain_id: number;
+  /** The token's code, or `null` for a token without a route. */
+  asset: string | null;
+  decimals: number | null;
+  /** Token amount in the smallest unit, as a decimal string. */
+  amount_atomic: string;
+  tx_hash: string;
+  /** Block confirmations while `seen`, otherwise `null`. */
+  confirmations: number | null;
+  /** Unix seconds. */
+  created: number;
+}
+
+/**
+ * The public view of a deposit address, as `GET /v1/deposit_addresses/{id}?client_secret=…`
+ * returns it to a browser: its payments in the last 24 hours, newest first.
+ */
+export interface ClientDepositAddress {
+  id: string;
+  object: "deposit_address";
+  livemode: boolean;
+  status: "active" | "retired";
+  payments: DepositAddressPayment[];
+}
+
+export interface RetrieveDepositAddressOptions {
+  /** A `client_secret` from your backend's `POST /v1/deposit_addresses` or `…/rotate`. */
+  clientSecret: string;
+  apiBase: string;
+  fetch?: typeof globalThis.fetch;
+}
+
+const PAYMENT_STATUSES = ["seen", "confirming", "credited", "rejected", "reversed"] as const;
+
+/** Returns the deposit address a client secret belongs to (`da_…_secret_…`), or throws. */
+export function depositAddressIdFromClientSecret(clientSecret: string): string {
+  const match = /^(da_[0-9a-f]{32})_secret_[0-9a-f]+$/.exec(clientSecret);
+  if (match?.[1] === undefined) {
+    throw new TypeError("clientSecret is not a deposit address client secret");
+  }
+  return match[1];
+}
+
+/**
+ * Reads a deposit address's public view once. Rejects with a `CheckoutError`:
+ * `invalid_client_secret` for an unknown address or secret.
+ */
+export async function retrieveDepositAddress(
+  options: RetrieveDepositAddressOptions,
+): Promise<ClientDepositAddress> {
+  const id = depositAddressIdFromClientSecret(options.clientSecret);
+  const base = options.apiBase.replace(/\/+$/, "");
+  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" });
+  if (!response.ok) {
+    throw responseError(response, "the address or its client secret is unknown");
+  }
+  try {
+    return parseClientDepositAddress(await response.json());
+  } catch (cause) {
+    throw new CheckoutError("invalid_response", "unexpected response from the payment service", {
+      cause,
+    });
+  }
+}
+
+/** Validates a response body against the public deposit address view; throws on anything else. */
+export function parseClientDepositAddress(value: unknown): ClientDepositAddress {
+  const v = record(value);
+  const payments = v["payments"];
+  if (
+    typeof v["id"] !== "string" ||
+    v["object"] !== "deposit_address" ||
+    typeof v["livemode"] !== "boolean" ||
+    (v["status"] !== "active" && v["status"] !== "retired") ||
+    !Array.isArray(payments)
+  ) {
+    throw new TypeError("response does not match the public deposit address view");
+  }
+  return {
+    id: v["id"],
+    object: "deposit_address",
+    livemode: v["livemode"],
+    status: v["status"],
+    payments: payments.map(parsePayment),
+  };
+}
+
+function parsePayment(value: unknown): DepositAddressPayment {
+  const p = record(value);
+  const status = p["status"];
+  const asset = p["asset"];
+  const decimals = p["decimals"];
+  const confirmations = p["confirmations"];
+  if (
+    typeof status !== "string" ||
+    !(PAYMENT_STATUSES as readonly string[]).includes(status) ||
+    !Number.isSafeInteger(p["chain_id"]) ||
+    !(asset === null || typeof asset === "string") ||
+    !(decimals === null || Number.isSafeInteger(decimals)) ||
+    typeof p["amount_atomic"] !== "string" ||
+    !/^\d+$/.test(p["amount_atomic"]) ||
+    typeof p["tx_hash"] !== "string" ||
+    !(confirmations === null || Number.isSafeInteger(confirmations)) ||
+    !Number.isSafeInteger(p["created"])
+  ) {
+    throw new TypeError("payment does not match the public deposit address view");
+  }
+  return {
+    status: status as DepositAddressPayment["status"],
+    chain_id: p["chain_id"] as number,
+    asset,
+    decimals: decimals as number | null,
+    amount_atomic: p["amount_atomic"],
+    tx_hash: p["tx_hash"],
+    confirmations: confirmations as number | null,
+    created: p["created"] as number,
+  };
+}
+
+function record(value: unknown): Record<string, unknown> {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throw new TypeError("response is not an object");
+  }
+  return value as Record<string, unknown>;
+}

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   createCheckout,
   retrieveQuote,
   type CheckoutErrorCode,
+  type CheckoutErrorOptions,
   type CheckoutOptions,
   type CheckoutSession,
   type CheckoutState,
@@ -11,9 +12,26 @@ export {
   type RetrieveQuoteOptions,
 } from "./checkout.js";
 export { PhalaPay, type PhalaPayOptions } from "./client.js";
+export {
+  depositAddressIdFromClientSecret,
+  parseClientDepositAddress,
+  retrieveDepositAddress,
+  type ClientDepositAddress,
+  type DepositAddressPayment,
+  type RetrieveDepositAddressOptions,
+} from "./deposit-address.js";
 export { knownChain, networkName, transactionUrl } from "./chains.js";
 export { formatAmount, formatCountdown, formatTokenAmount, tokenAmount } from "./format.js";
-export { quoteTransfer, type TokenTransfer } from "./payment.js";
+export {
+  depositAddressTransfer,
+  parseTransferUri,
+  quoteTransfer,
+  type DepositAddressAsset,
+  type DepositAddressDetails,
+  type DepositAddressNetwork,
+  type TokenTransfer,
+  type TransferRequest,
+} from "./payment.js";
 export { parseClientQuote, quoteIdFromClientSecret, type ClientQuote } from "./quote.js";
 export {
   INJECTED_WALLET_UUID,

package/src/payment.ts

@@ -6,22 +6,54 @@ export interface TokenTransfer {
   chainId: number;
   /** The token contract. */
   token: Address;
-  /** The recipient: the quote's deposit address. */
+  /** The recipient: the quote's or the customer's deposit address. */
   to: Address;
   /** Token amount in the smallest unit. */
   amount: bigint;
 }
 
+/** An EIP-681 ERC-20 transfer request whose amount the payer may choose. */
+export type TransferRequest = Omit<TokenTransfer, "amount"> & { amount: bigint | undefined };
+
+/** A token a deposit address takes on one network. */
+export interface DepositAddressAsset {
+  /** The token's code, for example `pha`. */
+  asset: string;
+  /** The ERC-20 contract. */
+  contract: string;
+  decimals: number;
+  /** The EIP-681 transfer request of this token to the network's address, without an amount. */
+  payment_uri: string;
+}
+
+/** A deposit address on one network (EVM chain), with the tokens it takes there. */
+export interface DepositAddressNetwork {
+  chain_id: number;
+  /** The address on this chain: the same on every chain whose treasury is the same. */
+  address: string;
+  assets: DepositAddressAsset[];
+}
+
+/**
+ * The fields of a deposit address that a payer's page shows: pass them from your backend's
+ * `POST /v1/deposit_addresses` response. One address takes every supported token on every
+ * supported network; any amount of a supported token sent is credited at the market rate.
+ */
+export interface DepositAddressDetails {
+  /** The address shared by every network, or `null` when a network's address differs. */
+  address: string | null;
+  networks: DepositAddressNetwork[];
+}
+
 const EIP681_TRANSFER =
   /^ethereum:(?:pay-)?(0x[0-9a-fA-F]{40})@([1-9][0-9]*)\/transfer\?([^#]*)$/;
 
 /**
- * Reads the token transfer from a quote's EIP-681 `payment_uri`, and checks that it pays exactly
- * the quote's `amount_atomic` to the quote's `address` on the quote's chain, so the wallet, the QR
- * code, and the manual instructions all state the same payment.
+ * Parses an EIP-681 ERC-20 transfer URI, `ethereum:<token>@<chainId>/transfer?address=<to>`, with
+ * an optional `uint256=<amount>`. Throws on anything else.
  */
-export function quoteTransfer(quote: ClientQuote): TokenTransfer {
-  const match = EIP681_TRANSFER.exec(quote.payment_uri);
+export function parseTransferUri(uri: string): TransferRequest {
+  const match = EIP681_TRANSFER.exec(uri);
   const params = new URLSearchParams(match?.[3] ?? "");
   const to = params.get("address");
   const amount = params.get("uint256");
@@ -30,23 +62,53 @@ export function quoteTransfer(quote: ClientQuote): TokenTransfer {
     match[2] === undefined ||
     to === null ||
     !/^0x[0-9a-fA-F]{40}$/.test(to) ||
-    amount === null ||
-    !/^\d+$/.test(amount)
+    (amount !== null && !/^\d+$/.test(amount))
   ) {
     throw new TypeError("payment_uri is not an EIP-681 ERC-20 transfer");
   }
-  const transfer: TokenTransfer = {
+  return {
     chainId: Number(match[2]),
     token: getAddress(match[1]),
     to: getAddress(to),
-    amount: BigInt(amount),
+    amount: amount === null ? undefined : BigInt(amount),
   };
+}
+
+/**
+ * Reads the token transfer from a quote's EIP-681 `payment_uri`, and checks that it pays exactly
+ * the quote's `amount_atomic` to the quote's `address` on the quote's chain, so the wallet, the QR
+ * code, and the manual instructions all state the same payment.
+ */
+export function quoteTransfer(quote: ClientQuote): TokenTransfer {
+  const transfer = parseTransferUri(quote.payment_uri);
   if (
+    transfer.amount === undefined ||
     transfer.chainId !== quote.chain_id ||
     !isAddressEqual(transfer.to, getAddress(quote.address)) ||
     transfer.amount !== BigInt(quote.amount_atomic)
   ) {
     throw new TypeError("payment_uri does not match the quote");
   }
+  return { ...transfer, amount: transfer.amount };
+}
+
+/**
+ * Reads the token transfer from a deposit address's EIP-681 `payment_uri` for one token on one
+ * network, and checks that it pays the network's address in that token on that chain and names no
+ * amount, so the QR code and the copied address and contract state the same destination.
+ */
+export function depositAddressTransfer(
+  network: DepositAddressNetwork,
+  asset: DepositAddressAsset,
+): TransferRequest {
+  const transfer = parseTransferUri(asset.payment_uri);
+  if (
+    transfer.amount !== undefined ||
+    transfer.chainId !== network.chain_id ||
+    !isAddressEqual(transfer.to, getAddress(network.address)) ||
+    !isAddressEqual(transfer.token, getAddress(asset.contract))
+  ) {
+    throw new TypeError("payment_uri does not match the deposit address");
+  }
   return transfer;
 }

package/src/quote.ts

@@ -4,6 +4,8 @@
 export interface ClientQuote {
   id: string;
   object: "quote";
+  /** `false` for a test-mode quote, paid on a testnet; the page says so. */
+  livemode: boolean;
   /** `open` until a matching payment completes it, it expires by chain time, or it is canceled. */
   status: "open" | "complete" | "expired" | "canceled";
   /** Credit in the currency's minor unit (US cents). */
@@ -22,16 +24,18 @@ export interface ClientQuote {
   /** Unix seconds; after this the address must no longer be shown. */
   expires_at: number;
   /**
-   * `seen` before finality (a reorg can remove it), `confirming` while a final payment is valued
-   * and screened, `credited` once it is credited, `rejected` when it is final but will not be.
+   * `seen` once in a block (a reorg can remove it), `confirming` while a payment at the route's
+   * confirmation is valued and screened, `credited` once it is credited (about 30 seconds after
+   * paying), `rejected` when it will not be, `reversed` when a credited payment's transaction
+   * left the chain before finality (the payment did not happen).
    */
-  payment_status: "none" | "seen" | "confirming" | "credited" | "rejected";
+  payment_status: "none" | "seen" | "confirming" | "credited" | "rejected" | "reversed";
   /** Block confirmations while `payment_status` is `seen`, otherwise `null`. */
   confirmations: number | null;
 }
 
 const QUOTE_STATUSES = ["open", "complete", "expired", "canceled"] as const;
-const PAYMENT_STATUSES = ["none", "seen", "confirming", "credited", "rejected"] as const;
+const PAYMENT_STATUSES = ["none", "seen", "confirming", "credited", "rejected", "reversed"] as const;
 
 /** Returns the quote id a client secret belongs to (`qt_…_secret_…`), or throws. */
 export function quoteIdFromClientSecret(clientSecret: string): string {
@@ -52,6 +56,7 @@ export function parseClientQuote(value: unknown): ClientQuote {
   if (
     typeof v["id"] !== "string" ||
     v["object"] !== "quote" ||
+    typeof v["livemode"] !== "boolean" ||
     !oneOf(v["status"], QUOTE_STATUSES) ||
     !isSafeInteger(v["amount"]) ||
     typeof v["currency"] !== "string" ||
@@ -72,6 +77,7 @@ export function parseClientQuote(value: unknown): ClientQuote {
   return {
     id: v["id"],
     object: "quote",
+    livemode: v["livemode"],
     status: v["status"],
     amount: v["amount"],
     currency: v["currency"],

package/src/react/Checkout.tsx

@@ -1,20 +1,33 @@
 "use client";
 
 import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
-import type { Hash } from "viem";
-import type { CheckoutState, CheckoutStatus } from "../checkout.js";
+import type { Hash, WalletClient } from "viem";
+import type { CheckoutErrorCode, CheckoutState, CheckoutStatus } from "../checkout.js";
 import { networkName, transactionUrl } from "../chains.js";
 import { formatAmount, formatCountdown, formatTokenAmount, tokenAmount } from "../format.js";
 import { quoteTransfer } from "../payment.js";
 import type { ClientQuote } from "../quote.js";
-import { WalletError, payWithWallet, watchWallets, type Wallet } from "../wallet.js";
+import {
+  WalletError,
+  payWithWallet,
+  watchWallets,
+  type EthereumProvider,
+  type Wallet,
+} from "../wallet.js";
 import { STYLES, appearanceStyle, type Appearance } from "./appearance.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. Fulfil from the `deposit.credited` webhook, not here. */
@@ -30,6 +43,9 @@ export interface CheckoutProps {
   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";
@@ -43,6 +59,7 @@ const METHODS: { id: Method; label: string }[] = [
 /** 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,
@@ -51,9 +68,11 @@ export function Checkout({
   pollInterval,
   className,
   buttonText = "Pay with crypto",
+  walletClient,
 }: CheckoutProps) {
   const { status, quote, error, refresh } = useCheckout({
     clientSecret,
+    expectedAddress,
     apiBase,
     ...(pollInterval === undefined ? {} : { pollInterval }),
   });
@@ -98,15 +117,17 @@ export function Checkout({
           </p>
           <p className="pp-subtitle">
             {formatAmount(quote)} top-up · {networkName(quote.chain_id)}
+            {!quote.livemode && <span className="pp-badge"> · Test mode</span>}
           </p>
         </>
       )}
-      <StatusLine status={status} quote={quote} now={now} reconnecting={error !== null} />
+      <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}
           now={now}
           onSent={(hash) => {
             setTxHash(hash);
@@ -122,24 +143,24 @@ function StatusLine({
   status,
   quote,
   now,
-  reconnecting,
+  error,
 }: {
   status: CheckoutStatus;
   quote: ClientQuote | null;
   now: number;
-  reconnecting: boolean;
+  error: CheckoutState["error"];
 }) {
   const tone =
     status === "credited"
       ? "success"
-      : ["rejected", "expired", "canceled", "error"].includes(status)
+      : ["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)}
-        {reconnecting && status !== "error" ? " (reconnecting…)" : ""}
+        {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">
@@ -150,7 +171,11 @@ function StatusLine({
   );
 }
 
-function statusMessage(status: CheckoutStatus, quote: ClientQuote | null): string {
+function statusMessage(
+  status: CheckoutStatus,
+  quote: ClientQuote | null,
+  code: CheckoutErrorCode | undefined,
+): string {
   switch (status) {
     case "loading":
       return "Loading payment details…";
@@ -158,20 +183,24 @@ function statusMessage(status: CheckoutStatus, quote: ClientQuote | null): strin
       return "Waiting for your payment";
     case "seen":
       return quote?.confirmations == null
-        ? "Payment received, waiting for confirmations"
-        : `Payment received, ${quote.confirmations} confirmation${quote.confirmations === 1 ? "" : "s"}`;
+        ? "Payment received, crediting in about 30 seconds"
+        : `Payment received, ${quote.confirmations} confirmation${quote.confirmations === 1 ? "" : "s"}. Crediting in about 30 seconds`;
     case "confirming":
       return "Payment confirmed on chain, crediting…";
     case "credited":
       return quote === null ? "Payment credited" : `Payment credited: ${formatAmount(quote)}`;
     case "rejected":
       return "This payment cannot be credited. Contact support with your transaction.";
+    case "reversed":
+      return "This payment was reversed: its transaction is no longer on the blockchain, so it did not happen and its credit was taken back. Check your wallet, then start a new top-up.";
     case "expired":
       return "This quote has expired. Do not send funds to this address; start a new top-up.";
     case "canceled":
       return "This quote was canceled. Do not send funds to this address.";
     case "error":
-      return "This payment link is not valid. Start a new top-up.";
+      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.";
   }
 }
 
@@ -195,11 +224,13 @@ function PaymentOptions({
   quote,
   now,
   buttonText,
+  walletClient,
   onSent,
 }: {
   quote: ClientQuote;
   now: number;
   buttonText: string;
+  walletClient: WalletClient | undefined;
   onSent: (hash: Hash) => void;
 }) {
   const [method, setMethod] = useState<Method>("wallet");
@@ -261,7 +292,14 @@ function PaymentOptions({
         aria-labelledby={`${id}-tab-${method}`}
         tabIndex={0}
       >
-        {method === "wallet" && <WalletPanel quote={quote} buttonText={buttonText} onSent={onSent} />}
+        {method === "wallet" && (
+          <WalletPanel
+            quote={quote}
+            buttonText={buttonText}
+            walletClient={walletClient}
+            onSent={onSent}
+          />
+        )}
         {method === "qr" && (
           <div className="pp-qr-panel">
             <QrCode value={quote.payment_uri} label={`Payment request for ${amount}`} />
@@ -285,20 +323,29 @@ type WalletStep =
 function WalletPanel({
   quote,
   buttonText,
+  walletClient,
   onSent,
 }: {
   quote: ClientQuote;
   buttonText: string;
+  walletClient: WalletClient | undefined;
   onSent: (hash: Hash) => void;
 }) {
-  const [wallets, setWallets] = useState<Wallet[]>([]);
+  const [discovered, setDiscovered] = useState<Wallet[]>([]);
   const [step, setStep] = useState<WalletStep>({ kind: "idle" });
-  useEffect(() => watchWallets(setWallets), []);
+  useEffect(
+    () => (walletClient === undefined ? watchWallets(setDiscovered) : undefined),
+    [walletClient],
+  );
+  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 (wallet: Wallet) => {
-    setStep({ kind: "pending", wallet: wallet.info.name });
+  const pay = async ({ name, wallet }: (typeof wallets)[number]) => {
+    setStep({ kind: "pending", wallet: name });
     try {
-      onSent(await payWithWallet(wallet.provider, quote));
+      onSent(await payWithWallet(wallet, quote));
       setStep({ kind: "idle" });
     } catch (error) {
       setStep({
@@ -318,18 +365,18 @@ function WalletPanel({
   }
   return (
     <div className="pp-wallets">
-      {wallets.map((wallet) => (
+      {wallets.map((choice) => (
         <button
-          key={wallet.info.uuid}
+          key={choice.id}
           type="button"
           className="pp-button"
           disabled={step.kind === "pending"}
-          onClick={() => void pay(wallet)}
-          aria-label={`${buttonText} (${wallet.info.name})`}
+          onClick={() => void pay(choice)}
+          aria-label={walletClient === undefined ? `${buttonText} (${choice.name})` : buttonText}
         >
-          {wallet.info.icon !== "" && <img src={wallet.info.icon} alt="" />}
+          {choice.icon !== "" && <img src={choice.icon} alt="" />}
           <span>{buttonText}</span>
-          <span className="pp-wallet-name">{wallet.info.name}</span>
+          {walletClient === undefined && <span className="pp-wallet-name">{choice.name}</span>}
         </button>
       ))}
       <p
@@ -357,51 +404,6 @@ function ManualPanel({ quote, now }: { quote: ClientQuote; now: number }) {
   );
 }
 
-/** `copy` adds a copy button, copying `value`, or the given string when it differs from it. */
-function Field({
-  label,
-  value,
-  copy = false,
-}: {
-  label: string;
-  value: string;
-  copy?: boolean | string;
-}) {
-  return (
-    <div className="pp-field">
-      <dt>{label}</dt>
-      <dd>
-        <span className={copy === false ? undefined : "pp-value"}>{value}</span>
-        {copy !== false && (
-          <CopyButton value={typeof copy === "string" ? copy : value} label={label} />
-        )}
-      </dd>
-    </div>
-  );
-}
-
-function CopyButton({ value, label }: { value: string; label: string }) {
-  const [copied, setCopied] = useState<boolean | null>(null);
-  useEffect(() => {
-    if (copied === null) {
-      return;
-    }
-    const timer = setTimeout(() => setCopied(null), 2000);
-    return () => clearTimeout(timer);
-  }, [copied]);
-  const onClick = () => {
-    navigator.clipboard.writeText(value).then(
-      () => setCopied(true),
-      () => setCopied(false),
-    );
-  };
-  return (
-    <button type="button" className="pp-copy" onClick={onClick} aria-label={`Copy ${label}`}>
-      <span aria-live="polite">{copied === null ? "Copy" : copied ? "Copied" : "Copy failed"}</span>
-    </button>
-  );
-}
-
 /** The current time in milliseconds, updated every second while `active`. */
 function useNow(active: boolean): number {
   const [now, setNow] = useState(() => Date.now());