@phala/pay 0.8.2 → 0.8.3

package/src/icon-names.ts

@@ -0,0 +1,20 @@
+import type { ICON_SVG } from "./icon-svg.js";
+
+export type IconName = keyof typeof ICON_SVG;
+
+/** Case-insensitive token symbol; unrecognized symbols use a neutral monogram. */
+export function assetIconName(asset: string): IconName | undefined {
+  switch (asset.trim().toLowerCase()) {
+    case "usdc": return "usdc";
+    case "usdt": return "usdt";
+    case "pha": return "pha";
+    case "eth": return "eth";
+    default: return undefined;
+  }
+}
+
+/** First character for a neutral fallback, including an empty-symbol placeholder. */
+export function iconMonogram(label: string): string {
+  return Array.from(label.trim())[0]?.toUpperCase() ?? "?";
+}
+

package/src/icon-svg.ts

@@ -0,0 +1,13 @@
+/** Generated from @web3icons/core@4.0.57 by scripts/generate-icons.mjs.
+ * SPDX-License-Identifier: MIT; Copyright (c) 2024 0xa3k5.
+ * See THIRD_PARTY_NOTICES for the full license. Do not edit.
+ */
+
+export const ICON_SVG: Record<"usdc" | "usdt" | "pha" | "eth" | "ethereum" | "base", string> = {
+  usdc: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#0B53BF\" d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18\"/><path fill=\"#fff\" d=\"M13.62 5.45v1.159a5.64 5.64 0 0 1 4.005 5.394 5.64 5.64 0 0 1-4.005 5.394v1.16a6.74 6.74 0 0 0 5.13-6.554 6.74 6.74 0 0 0-5.13-6.553m-7.245 6.553a5.64 5.64 0 0 1 4.005-5.394V5.45a6.74 6.74 0 0 0-5.13 6.553 6.74 6.74 0 0 0 5.13 6.553v-1.159a5.63 5.63 0 0 1-4.005-5.394\"/><path fill=\"#fff\" d=\"M14.419 13.258c0-2.301-3.606-1.356-3.606-2.627 0-.456.366-.748 1.063-.748.833 0 1.12.405 1.21.95h1.147c-.102-1.024-.69-1.67-1.67-1.863v-.904h-1.125v.872c-1.075.137-1.75.762-1.75 1.693 0 2.312 3.611 1.445 3.611 2.694 0 .472-.455.787-1.226.787-1.007 0-1.339-.444-1.462-1.057H9.49c.073 1.122.764 1.823 1.947 1.999v.886h1.125v-.875c1.153-.149 1.856-.82 1.856-1.807\"/></svg>",
+  usdt: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#009393\" d=\"m12 19.2-9-8.88L6.433 4.8h11.134L21 10.32zm.9-8.1v-1.098c1.62.08 3.132.396 3.6.805-.544.477-2.493.824-4.5.824s-3.956-.347-4.5-.824c.463-.41 1.98-.72 3.6-.81V11.1zm-5.4-.297v.661c.463.41 1.975.72 3.6.81V14.7h1.8v-2.43c1.62-.081 3.136-.396 3.6-.806v-1.318c-.464-.41-1.98-.725-3.6-.81V8.4h2.7V7.05H8.4V8.4h2.7v.936c-1.625.085-3.137.4-3.6.81z\"/></svg>",
+  pha: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#252525\"/><path fill=\"#D1FF52\" fill-rule=\"evenodd\" d=\"M3 3h14.143v3.857H21V12h-3.857V6.857H6.857V12H3zm3.857 12.857h10.286V12H6.857zm0 0V21H3v-5.143z\" clip-rule=\"evenodd\"/></svg>",
+  eth: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#8FFCF3\" d=\"M12 3v6.65l5.625 2.516z\"/><path fill=\"#CABCF8\" d=\"m12 3-5.625 9.166L12 9.651z\"/><path fill=\"#CBA7F5\" d=\"M12 16.477v4.522l5.625-7.784z\"/><path fill=\"#74A0F3\" d=\"M12 21v-4.523l-5.625-3.262z\"/><path fill=\"#CBA7F5\" d=\"m12 15.43 5.625-3.263L12 9.65z\"/><path fill=\"#74A0F3\" d=\"M6.375 12.167 12 15.429V9.651z\"/><path fill=\"#202699\" fill-rule=\"evenodd\" d=\"m12 15.429-5.625-3.263L12 3l5.625 9.166zM6.749 11.9l5.16-8.41v6.115zm-.077.23 5.238-2.327v5.364zm5.418-2.327v5.364l5.233-3.038zm0-.198 5.16 2.295-5.16-8.41z\" clip-rule=\"evenodd\"/><path fill=\"#202699\" fill-rule=\"evenodd\" d=\"M12 16.406 6.375 13.21 12 21l5.625-7.79zm-4.995-2.633 4.905 2.79v4.005zm5.085 2.79v4.005l4.905-6.795z\" clip-rule=\"evenodd\"/></svg>",
+  ethereum: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#8FFCF3\" d=\"M12 3v6.651l5.625 2.516z\"/><path fill=\"#CABCF8\" d=\"m12 3-5.625 9.166L12 9.653z\"/><path fill=\"#CBA7F5\" d=\"M12 16.478V21l5.625-7.784z\"/><path fill=\"#74A0F3\" d=\"M12 21v-4.522l-5.625-3.262z\"/><path fill=\"#CBA7F5\" d=\"m12 15.43 5.625-3.263L12 9.652z\"/><path fill=\"#74A0F3\" d=\"M6.375 12.167 12 15.43V9.652z\"/><path fill=\"#202699\" fill-rule=\"evenodd\" d=\"m12 15.43-5.625-3.263L12 3l5.624 9.166zm-5.252-3.528 5.161-8.41v6.114zm-.077.229 5.238-2.327v5.364zm5.418-2.327v5.364l5.234-3.037zm0-.198 5.161 2.296-5.161-8.41z\" clip-rule=\"evenodd\"/><path fill=\"#202699\" fill-rule=\"evenodd\" d=\"m12 16.406-5.625-3.195L12 21l5.624-7.79zm-4.995-2.633 4.904 2.79v4.005zm5.084 2.79v4.005l4.905-6.795z\" clip-rule=\"evenodd\"/></svg>",
+  base: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"#00F\" d=\"M3 4.706c0-.585 0-.877.11-1.101.106-.215.28-.39.496-.495C3.83 3 4.122 3 4.706 3h14.588c.585 0 .876 0 1.101.11.215.105.389.28.494.495.111.225.111.517.111 1.101v14.588c0 .585 0 .876-.11 1.101-.106.215-.28.389-.495.494-.225.111-.517.111-1.101.111H4.706c-.585 0-.876 0-1.101-.11a1.08 1.08 0 0 1-.494-.495C3 20.17 3 19.878 3 19.294z\"/></svg>",
+};

package/src/icons.ts

@@ -0,0 +1,30 @@
+import { networkName, networkIconName } from "./chains.js";
+import { ICON_SVG } from "./icon-svg.js";
+
+import { assetIconName, iconMonogram } from "./icon-names.js";
+
+function fallback(label: string): string {
+  const letter = iconMonogram(label).replace(/[&<>"']/g, (character) => {
+    switch (character) {
+      case "&": return "&amp;";
+      case "<": return "&lt;";
+      case ">": return "&gt;";
+      case '"': return "&quot;";
+      default: return "&#39;";
+    }
+  });
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="currentColor" opacity="0.12"/><text x="12" y="16" text-anchor="middle" font-family="sans-serif" font-size="12" fill="currentColor">${letter}</text></svg>`;
+}
+
+/** Decorative inline SVG markup; testnets reuse their mainnet family artwork. */
+export function networkIcon(chainId: number): string {
+  const name = networkIconName(chainId);
+  const svg = name === undefined ? fallback(networkName(chainId)) : ICON_SVG[name];
+  return svg;
+}
+
+/** Decorative inline SVG markup; keep the asset name visible beside it. */
+export function assetIcon(asset: string): string {
+  const name = assetIconName(asset);
+  return name === undefined ? fallback(asset) : ICON_SVG[name];
+}

package/src/index.ts

@@ -44,3 +44,4 @@ export {
   type WalletErrorCode,
   type WalletInfo,
 } from "./wallet.js";
+export { networkIcon, assetIcon } from "./icons.js";

package/src/react/Checkout.tsx

@@ -22,6 +22,7 @@ import {
   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";
@@ -65,9 +66,9 @@ export interface CheckoutProps {
 type Method = "wallet" | "qr" | "manual";
 
 const METHODS: { id: Method; label: string }[] = [
-  { id: "wallet", label: "Browser wallet" },
+  { id: "wallet", label: "Wallet" },
   { id: "qr", label: "QR code" },
-  { id: "manual", label: "Send manually" },
+  { id: "manual", label: "Manual" },
 ];
 
 /** A checkout for one quote: pay from a browser wallet, by QR code, or manually, with live status. */
@@ -132,10 +133,12 @@ export function Checkout({
       {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 · {networkName(quote.chain_id)}
+            {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>
         </>
@@ -147,7 +150,6 @@ export function Checkout({
           quote={quote}
           buttonText={buttonText}
           walletClient={walletClient}
-          now={now}
           onSent={(hash) => {
             setTxHash(hash);
             refresh();
@@ -204,17 +206,17 @@ function statusMessage(
     case "seen":
       return seenMessage(quote);
     case "confirming":
-      return "Payment confirmed on chain, crediting…";
+      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 "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.";
+      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 "This quote has expired. Do not send funds to this address; start a new top-up.";
+      return "Quote expired. Do not send funds; start a new top-up.";
     case "canceled":
-      return "This quote was canceled. Do not send funds to this address.";
+      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."
@@ -224,12 +226,12 @@ function statusMessage(
 
 function seenMessage(quote: ClientQuote | null): string {
   if (quote === null) {
-    return "Payment received, crediting once it is confirmed";
+    return "Received, crediting after confirmation";
   }
   const wait = formatWait(quote.typical_credit_seconds);
   return quote.confirmations === null
-    ? `Payment received, crediting in ${wait}`
-    : `Payment received, ${quote.confirmations} confirmation${quote.confirmations === 1 ? "" : "s"}. Crediting in ${wait}`;
+    ? `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. */
@@ -242,7 +244,7 @@ function creditedMessage(quote: ClientQuote | null): string {
     return `Payment credited: ${credited} of ${formatAmount(quote)}`;
   }
   if (quote.amount_credited > quote.amount) {
-    return `Payment credited: ${credited}, more than the ${formatAmount(quote)} quoted`;
+    return `Payment credited: ${credited} (${formatAmount(quote)} quoted)`;
   }
   return `Payment credited: ${credited}`;
 }
@@ -265,20 +267,24 @@ function Transaction({ hash, chainId }: { hash: Hash; chainId: number }) {
 
 function PaymentOptions({
   quote,
-  now,
   buttonText,
   walletClient,
   onSent,
   onWalletError,
 }: {
   quote: ClientQuote;
-  now: number;
   buttonText: string;
   walletClient: WalletClient | undefined;
   onSent: (hash: Hash) => void;
   onWalletError: CheckoutProps["onWalletError"];
 }) {
-  const [method, setMethod] = useState<Method>("wallet");
+  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()}`;
@@ -307,9 +313,7 @@ function PaymentOptions({
     <>
       <p className="pp-notice">
         Send <strong>exactly {amount}</strong> on {networkName(quote.chain_id)} in one transfer
-        before the timer ends. A different amount, or a payment after expiry, is credited at the
-        market price instead of this quote. Exchanges may deduct a withdrawal fee, so the amount
-        that arrives must be exact.
+        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) => (
@@ -322,6 +326,7 @@ function PaymentOptions({
             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}
@@ -342,6 +347,7 @@ function PaymentOptions({
             quote={quote}
             buttonText={buttonText}
             walletClient={walletClient}
+            discovered={discovered}
             onSent={onSent}
             onWalletError={onWalletError}
           />
@@ -350,12 +356,11 @@ function PaymentOptions({
           <div className="pp-qr-panel">
             <QrCode value={quote.payment_uri} label={`Payment request for ${amount}`} />
             <p className="pp-message">
-              Scan with a wallet app that reads payment links, and check that it shows {amount} on{" "}
-              {networkName(quote.chain_id)} before you confirm.
+              Scan with your wallet app and check it shows {amount} on {networkName(quote.chain_id)}.
             </p>
           </div>
         )}
-        {method === "manual" && <ManualPanel quote={quote} now={now} />}
+        {method === "manual" && <ManualPanel quote={quote} />}
       </div>
     </>
   );
@@ -370,21 +375,18 @@ 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 [discovered, setDiscovered] = useState<Wallet[]>([]);
   const [step, setStep] = useState<WalletStep>({ kind: "idle" });
-  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 }))
@@ -409,8 +411,7 @@ function WalletPanel({
   if (wallets.length === 0) {
     return (
       <p className="pp-message">
-        No browser wallet found. Scan the QR code with a mobile wallet, or send the payment
-        manually.
+        Install a browser wallet to pay here.
       </p>
     );
   }
@@ -442,16 +443,21 @@ function WalletPanel({
   );
 }
 
-function ManualPanel({ quote, now }: { quote: ClientQuote; now: number }) {
+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)} />
-      <Field label="Time left" value={formatCountdown(quote.expires_at, now)} />
-    </dl>
+    <>
+      <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>
+    </>
   );
 }
 

package/src/react/DepositAddress.tsx

@@ -12,6 +12,7 @@ import { CheckoutError, pollDelay } from "../checkout.js";
 import { formatWait } from "../format.js";
 import { depositAddressTransfer, type DepositAddressDetails } from "../payment.js";
 import type { Appearance } from "./appearance.js";
+import { AssetIcon, NetworkIcon } from "./Icons.js";
 import { Field } from "./Field.js";
 import { QrCode } from "./QrCode.js";
 
@@ -72,7 +73,6 @@ export function DepositAddress({
   const { token: contract, to } = depositAddressTransfer(network, token);
   const symbol = token.asset.toUpperCase();
   const name = networkName(network.chain_id);
-  const tokens = [...new Set(networks.flatMap((each) => each.assets.map((a) => a.asset.toUpperCase())))];
   return (
     <div
       className={className === undefined ? "pp-root" : `pp-root ${className}`}
@@ -80,8 +80,8 @@ export function DepositAddress({
     >
       <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"}
+          ? "Reusable deposit address; varies by network"
+          : "One reusable address for supported tokens and networks"}
       </p>
       {networks.length > 1 && (
         <fieldset className="pp-choices">
@@ -94,6 +94,7 @@ export function DepositAddress({
                 checked={each.chain_id === network.chain_id}
                 onChange={() => setSelectedChain(each.chain_id)}
               />
+              <NetworkIcon chainId={each.chain_id} size={16} />{" "}
               {networkName(each.chain_id)}
             </label>
           ))}
@@ -110,6 +111,7 @@ export function DepositAddress({
                 checked={each.asset === token.asset}
                 onChange={() => setSelectedAsset(each.asset)}
               />
+              <AssetIcon asset={each.asset} size={16} />{" "}
               {each.asset.toUpperCase()}
             </label>
           ))}
@@ -133,9 +135,8 @@ export function DepositAddress({
         </ul>
       )}
       <p className="pp-message">
-        Send only {tokens.join(", ")} on {networks.map((each) => networkName(each.chain_id)).join(", ")}
-        . {creditMessage(networks.map((each) => each.chain_id), view)} Other tokens and networks are not
-        credited. You can reuse this address.
+        Send {symbol} on {name}. Unsupported tokens or networks are not credited.{" "}
+        {creditMessage(networks.map((each) => each.chain_id), view)}
       </p>
     </div>
   );
@@ -205,7 +206,7 @@ function creditMessage(chainIds: number[], view: ClientDepositAddress | null): s
     }
   }
   if (names.size === 0) {
-    return "Any amount is credited at the market rate once it is confirmed on its network.";
+    return "Any amount is credited at the market rate after confirmation.";
   }
   const list = new Intl.ListFormat("en", { type: "conjunction" });
   const [only, ...others] = names.keys();
@@ -213,7 +214,7 @@ function creditMessage(chainIds: number[], view: ClientDepositAddress | null): s
     only !== undefined && others.length === 0
       ? formatWait(only)
       : list.format([...names].map(([seconds, on]) => `${formatWait(seconds)} on ${list.format(on)}`));
-  return `Any amount is credited at the market rate when it arrives, usually in ${usually}.`;
+  return `Any amount is credited at the market rate on arrival, usually in ${usually}.`;
 }
 
 function paymentMessage(payment: DepositAddressPayment): string {
@@ -234,6 +235,6 @@ function paymentMessage(payment: DepositAddressPayment): string {
     case "rejected":
       return `${amount} ${on} cannot be credited. Contact support with your transaction.`;
     case "reversed":
-      return `${amount} ${on} was reversed: its transaction is no longer on the blockchain.`;
+      return `${amount} ${on} was reversed: a chain reorganization replaced it and its credit was removed.`;
   }
 }

package/src/react/Icons.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { networkName, networkIconName } from "../chains.js";
+import { assetIconName, iconMonogram, type IconName } from "../icon-names.js";
+import { ICON_PATHS } from "./icon-paths.js";
+
+export interface IconProps {
+  /** Width and height in pixels; default 18. No inline styles are injected. */
+  size?: number;
+  /** Default true next to visible text. Set false when the icon is used alone. */
+  decorative?: boolean;
+}
+export interface NetworkIconProps extends IconProps { chainId: number }
+export interface AssetIconProps extends IconProps { asset: string }
+
+function Icon({ name, label, size = 18, decorative = true }: IconProps & {
+  name: IconName | undefined;
+  label: string;
+}) {
+  const pixels = Number.isFinite(size) && size > 0 ? size : 18;
+  return (
+    <span className="pp-icon-label" role={decorative ? undefined : "img"}
+      aria-label={decorative ? undefined : label || "Unknown asset"}>
+      <svg className="pp-icon" xmlns="http://www.w3.org/2000/svg" width={pixels} height={pixels}
+        viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+        {name === undefined ? <>
+          <circle cx="12" cy="12" r="11" fill="currentColor" opacity="0.12" />
+          <text x="12" y="16" textAnchor="middle" fontFamily="sans-serif" fontSize="12" fill="currentColor">{iconMonogram(label)}</text>
+        </> : ICON_PATHS[name]}
+      </svg>
+    </span>
+  );
+}
+
+/** Branded network icon; testnets reuse their mainnet family artwork. */
+export function NetworkIcon({ chainId, ...props }: NetworkIconProps) {
+  return <Icon {...props} name={networkIconName(chainId)} label={networkName(chainId)} />;
+}
+
+/** Branded token icon, or a neutral first-letter monogram for unknown symbols. */
+export function AssetIcon({ asset, ...props }: AssetIconProps) {
+  return <Icon {...props} name={assetIconName(asset)} label={asset.trim().toUpperCase()} />;
+}

package/src/react/icon-paths.tsx

@@ -0,0 +1,13 @@
+/** Generated from @web3icons/core@4.0.57 by scripts/generate-icons.mjs.
+ * SPDX-License-Identifier: MIT; Copyright (c) 2024 0xa3k5.
+ * See THIRD_PARTY_NOTICES for the full license. Do not edit.
+ */
+
+export const ICON_PATHS = {
+  usdc: <><path fill="#0B53BF" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18"/><path fill="#fff" d="M13.62 5.45v1.159a5.64 5.64 0 0 1 4.005 5.394 5.64 5.64 0 0 1-4.005 5.394v1.16a6.74 6.74 0 0 0 5.13-6.554 6.74 6.74 0 0 0-5.13-6.553m-7.245 6.553a5.64 5.64 0 0 1 4.005-5.394V5.45a6.74 6.74 0 0 0-5.13 6.553 6.74 6.74 0 0 0 5.13 6.553v-1.159a5.63 5.63 0 0 1-4.005-5.394"/><path fill="#fff" d="M14.419 13.258c0-2.301-3.606-1.356-3.606-2.627 0-.456.366-.748 1.063-.748.833 0 1.12.405 1.21.95h1.147c-.102-1.024-.69-1.67-1.67-1.863v-.904h-1.125v.872c-1.075.137-1.75.762-1.75 1.693 0 2.312 3.611 1.445 3.611 2.694 0 .472-.455.787-1.226.787-1.007 0-1.339-.444-1.462-1.057H9.49c.073 1.122.764 1.823 1.947 1.999v.886h1.125v-.875c1.153-.149 1.856-.82 1.856-1.807"/></>,
+  usdt: <><path fill="#009393" d="m12 19.2-9-8.88L6.433 4.8h11.134L21 10.32zm.9-8.1v-1.098c1.62.08 3.132.396 3.6.805-.544.477-2.493.824-4.5.824s-3.956-.347-4.5-.824c.463-.41 1.98-.72 3.6-.81V11.1zm-5.4-.297v.661c.463.41 1.975.72 3.6.81V14.7h1.8v-2.43c1.62-.081 3.136-.396 3.6-.806v-1.318c-.464-.41-1.98-.725-3.6-.81V8.4h2.7V7.05H8.4V8.4h2.7v.936c-1.625.085-3.137.4-3.6.81z"/></>,
+  pha: <><circle cx="12" cy="12" r="12" fill="#252525"/><path fill="#D1FF52" fillRule="evenodd" d="M3 3h14.143v3.857H21V12h-3.857V6.857H6.857V12H3zm3.857 12.857h10.286V12H6.857zm0 0V21H3v-5.143z" clipRule="evenodd"/></>,
+  eth: <><path fill="#8FFCF3" d="M12 3v6.65l5.625 2.516z"/><path fill="#CABCF8" d="m12 3-5.625 9.166L12 9.651z"/><path fill="#CBA7F5" d="M12 16.477v4.522l5.625-7.784z"/><path fill="#74A0F3" d="M12 21v-4.523l-5.625-3.262z"/><path fill="#CBA7F5" d="m12 15.43 5.625-3.263L12 9.65z"/><path fill="#74A0F3" d="M6.375 12.167 12 15.429V9.651z"/><path fill="#202699" fillRule="evenodd" d="m12 15.429-5.625-3.263L12 3l5.625 9.166zM6.749 11.9l5.16-8.41v6.115zm-.077.23 5.238-2.327v5.364zm5.418-2.327v5.364l5.233-3.038zm0-.198 5.16 2.295-5.16-8.41z" clipRule="evenodd"/><path fill="#202699" fillRule="evenodd" d="M12 16.406 6.375 13.21 12 21l5.625-7.79zm-4.995-2.633 4.905 2.79v4.005zm5.085 2.79v4.005l4.905-6.795z" clipRule="evenodd"/></>,
+  ethereum: <><path fill="#8FFCF3" d="M12 3v6.651l5.625 2.516z"/><path fill="#CABCF8" d="m12 3-5.625 9.166L12 9.653z"/><path fill="#CBA7F5" d="M12 16.478V21l5.625-7.784z"/><path fill="#74A0F3" d="M12 21v-4.522l-5.625-3.262z"/><path fill="#CBA7F5" d="m12 15.43 5.625-3.263L12 9.652z"/><path fill="#74A0F3" d="M6.375 12.167 12 15.43V9.652z"/><path fill="#202699" fillRule="evenodd" d="m12 15.43-5.625-3.263L12 3l5.624 9.166zm-5.252-3.528 5.161-8.41v6.114zm-.077.229 5.238-2.327v5.364zm5.418-2.327v5.364l5.234-3.037zm0-.198 5.161 2.296-5.161-8.41z" clipRule="evenodd"/><path fill="#202699" fillRule="evenodd" d="m12 16.406-5.625-3.195L12 21l5.624-7.79zm-4.995-2.633 4.904 2.79v4.005zm5.084 2.79v4.005l4.905-6.795z" clipRule="evenodd"/></>,
+  base: <><path fill="#00F" d="M3 4.706c0-.585 0-.877.11-1.101.106-.215.28-.39.496-.495C3.83 3 4.122 3 4.706 3h14.588c.585 0 .876 0 1.101.11.215.105.389.28.494.495.111.225.111.517.111 1.101v14.588c0 .585 0 .876-.11 1.101-.106.215-.28.389-.495.494-.225.111-.517.111-1.101.111H4.706c-.585 0-.876 0-1.101-.11a1.08 1.08 0 0 1-.494-.495C3 20.17 3 19.878 3 19.294z"/></>,
+};

package/src/react/index.ts

@@ -4,3 +4,4 @@ export { Checkout, type CheckoutProps } from "./Checkout.js";
 export { DepositAddress, type DepositAddressProps } from "./DepositAddress.js";
 export { useCheckout, type UseCheckoutOptions, type UseCheckoutResult } from "./useCheckout.js";
 export type { Appearance } from "./appearance.js";
+export { NetworkIcon, AssetIcon, type IconProps, type NetworkIconProps, type AssetIconProps } from "./Icons.js";

package/src/request.ts

@@ -6,3 +6,10 @@ export function requestSignal(options: {
   const deadline = AbortSignal.timeout(options.requestTimeout ?? 10_000);
   return options.signal === undefined ? deadline : AbortSignal.any([options.signal, deadline]);
 }
+
+/** `apiBase` without trailing slashes, in linear time (a `/\/+$/` regex is quadratic). */
+export function trimTrailingSlashes(apiBase: string): string {
+  let end = apiBase.length;
+  while (end > 0 && apiBase[end - 1] === "/") end -= 1;
+  return apiBase.slice(0, end);
+}

package/src/styles.css

@@ -10,11 +10,11 @@
   --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);
+  max-width: var(--pp-root-max-width, 440px);
+  padding: var(--pp-root-padding, 20px);
+  border: var(--pp-root-border, 1px solid var(--pp-color-border));
   border-radius: var(--pp-border-radius);
-  background: var(--pp-color-background);
+  background: var(--pp-root-background, var(--pp-color-background));
   color: var(--pp-color-text);
   font-family: var(--pp-font-family);
   font-size: 14px;
@@ -31,46 +31,50 @@
 }
 .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-subtitle { margin: 2px 0 12px; 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);
+  margin-bottom: 10px; padding: 8px 10px; 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 { margin: 0 0 12px; 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-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pp-color-border); margin-bottom: 12px; }
 .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; }
+  color: var(--pp-color-text-secondary); font: inherit; min-height: 44px; white-space: nowrap; 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; }
+  background: var(--pp-color-primary); color: var(--pp-accessible-color-on-color-primary); font: inherit; font-weight: 600; min-height: 44px; 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 { margin: 8px 0 0; color: var(--pp-color-text-secondary); }
+.pp-message:empty { display: none; }
 .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-panel { display: grid; justify-items: center; gap: 8px; text-align: center; }
 .pp-qr { border-radius: 4px; }
-.pp-fields { display: grid; gap: 10px; margin: 0; }
+.pp-fields { display: grid; gap: 8px; 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-copy { flex: none; margin-inline-start: auto; appearance: none; border: 1px solid var(--pp-color-border); border-radius: 6px;
+  background: none; color: var(--pp-color-text); font: inherit; font-size: 12px; min-height: 44px; min-width: 44px; 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; }
 
-.pp-choices { display: flex; gap: 12px; border: 0; padding: 0; margin: 0 0 16px; }
+.pp-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
 .pp-choices legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
-.pp-choices label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
-.pp-choices input { accent-color: var(--pp-color-primary); }
+.pp-choices label { display: flex; align-items: center; gap: 4px; min-height: 44px; cursor: pointer; }
+.pp-choices input { margin: 0; accent-color: var(--pp-color-primary); }
 .pp-choices input:focus-visible { outline: 2px solid var(--pp-color-primary); outline-offset: 2px; }
+
+.pp-icon-label { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; }
+.pp-icon { display: inline-block; flex: none; vertical-align: middle; }