fix: review findings — remove unused amountUsd prop, use semantic QR colors

- Remove amountUsd from PaymentMethodPicker (unused, confusing API surface)
- Replace bg-white on QR container with bg-background + semantic CSS vars
- QR uses hsl(var(--background/--foreground)) for dark mode compatibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: WOPR

src/__tests__/payment-method-picker.test.tsx

@@ -59,20 +59,20 @@ const METHODS: SupportedPaymentMethod[] = [
 
 describe("PaymentMethodPicker", () => {
   it("renders all methods", () => {
-    render(<PaymentMethodPicker methods={METHODS} amountUsd={25} onSelect={vi.fn()} />);
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
     expect(screen.getByText("Bitcoin")).toBeInTheDocument();
     expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
   });
 
   it("filters by search text", async () => {
-    render(<PaymentMethodPicker methods={METHODS} amountUsd={25} onSelect={vi.fn()} />);
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
     await userEvent.type(screen.getByPlaceholderText(/search/i), "tron");
     expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
     expect(screen.queryByText("Bitcoin")).not.toBeInTheDocument();
   });
 
   it("filters by Stablecoins pill", async () => {
-    render(<PaymentMethodPicker methods={METHODS} amountUsd={25} onSelect={vi.fn()} />);
+    render(<PaymentMethodPicker methods={METHODS} onSelect={vi.fn()} />);
     await userEvent.click(screen.getByText("Stablecoins"));
     expect(screen.getByText("USDT on Tron")).toBeInTheDocument();
     expect(screen.getByText("USDC on Polygon")).toBeInTheDocument();
@@ -81,7 +81,7 @@ describe("PaymentMethodPicker", () => {
 
   it("calls onSelect when a method is clicked", async () => {
     const onSelect = vi.fn();
-    render(<PaymentMethodPicker methods={METHODS} amountUsd={25} onSelect={onSelect} />);
+    render(<PaymentMethodPicker methods={METHODS} onSelect={onSelect} />);
     await userEvent.click(screen.getByText("Bitcoin"));
     expect(onSelect).toHaveBeenCalledWith(METHODS[0]);
   });

src/components/billing/deposit-view.tsx

@@ -45,8 +45,8 @@ export function DepositView({ checkout, status, onBack }: DepositViewProps) {
       <p className="text-xs text-muted-foreground">
         on {checkout.chain} &middot; ${checkout.amountUsd.toFixed(2)} USD
       </p>
-      <div className="mx-auto w-fit rounded-lg bg-white p-3" aria-hidden="true">
-        <QRCodeSVG value={checkout.depositAddress} size={140} />
+      <div className="mx-auto w-fit rounded-lg border border-border bg-background p-3" aria-hidden="true">
+        <QRCodeSVG value={checkout.depositAddress} size={140} bgColor="hsl(var(--background))" fgColor="hsl(var(--foreground))" />
       </div>
       <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2">
         <code className="flex-1 truncate text-xs font-mono">{checkout.depositAddress}</code>

src/components/billing/payment-method-picker.tsx

@@ -20,14 +20,12 @@ const POPULAR_COUNT = 6;
 
 interface PaymentMethodPickerProps {
   methods: SupportedPaymentMethod[];
-  amountUsd: number;
   onSelect: (method: SupportedPaymentMethod) => void;
   onBack?: () => void;
 }
 
 export function PaymentMethodPicker({
   methods,
-  amountUsd: _amountUsd,
   onSelect,
   onBack,
 }: PaymentMethodPickerProps) {