diff --git a/apps/web/src/app/propose/success/WalletCheckout.tsx b/apps/web/src/app/propose/success/WalletCheckout.tsx
new file mode 100644
index 0000000..ed7638d
--- /dev/null
+++ b/apps/web/src/app/propose/success/WalletCheckout.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { Copy, ExternalLink, Wallet } from "lucide-react";
+import { useState } from "react";
+
+type WalletCheckoutProps = {
+ amountUsdc: string;
+ network: string;
+ walletAddress: string;
+ walletLabel: string;
+ chainId: string;
+ tokenAddress: string;
+ atomicAmount: string;
+ paymentUri: string;
+ proposalId: string;
+ capturedReference?: string;
+};
+
+type CopyRowProps = {
+ label: string;
+ value: string;
+ copyValue?: string;
+ copiedKey: string;
+ copied: string;
+ onCopy: (key: string, value: string) => void;
+};
+
+function CopyRow({ label, value, copyValue, copiedKey, copied, onCopy }: CopyRowProps) {
+ const valueToCopy = copyValue || value;
+
+ return (
+
+
{label}
+ {value}
+
+
+ );
+}
+
+export function WalletCheckout({
+ amountUsdc,
+ network,
+ walletAddress,
+ walletLabel,
+ chainId,
+ tokenAddress,
+ atomicAmount,
+ paymentUri,
+ proposalId,
+ capturedReference,
+}: WalletCheckoutProps) {
+ const [copied, setCopied] = useState("");
+ const paymentMemo = `VibeWork Proposal ${proposalId}`;
+ const walletReady = Boolean(walletAddress);
+
+ const copyValue = async (key: string, value: string) => {
+ try {
+ await navigator.clipboard.writeText(value);
+ setCopied(key);
+ window.setTimeout(() => setCopied((current) => (current === key ? "" : current)), 1600);
+ } catch {
+ setCopied("copy-failed");
+ }
+ };
+
+ return (
+
+
+
+
+
+
USDC wallet checkout
+
+ 請使用 Base USDC 轉帳,完成後貼上 tx hash 進入人工確認。
+
+
+
+ {paymentUri && !capturedReference ? (
+
+
+ 開啟錢包付款
+
+ ) : null}
+
+
+ {capturedReference ? (
+
+ 已確認 receipt:{capturedReference}
+
+ ) : null}
+
+
+
+
+
+ {walletReady ? (
+ <>
+
+
+
+
+ {paymentUri ? (
+
+ ) : null}
+ >
+ ) : null}
+
+
+ {copied === "copy-failed" ? (
+
瀏覽器阻擋自動複製,請手動選取付款資訊。
+ ) : null}
+
+ );
+}
diff --git a/apps/web/src/app/propose/success/page.tsx b/apps/web/src/app/propose/success/page.tsx
index 853ffde..26d0beb 100644
--- a/apps/web/src/app/propose/success/page.tsx
+++ b/apps/web/src/app/propose/success/page.tsx
@@ -10,8 +10,9 @@ import {
TREASURY_WALLET_LABEL,
usdcAtomicUnitsFromCents,
} from "@/lib/a2a-growth";
-import { CheckCircle2, Copy, ExternalLink, Wallet } from "lucide-react";
+import { CheckCircle2 } from "lucide-react";
import Link from "next/link";
+import { WalletCheckout } from "./WalletCheckout";
export const dynamic = "force-dynamic";
@@ -138,65 +139,21 @@ export default async function ProposalSuccessPage({ searchParams }: { searchPara
{payment === "wallet" ? (
-
-
-
- USDC wallet payment
-
-
-
-
- Amount
- - {formatUsdcAmount(proposalPackage.feeCents)} USDC
-
-
-
- Network
- - {TREASURY_USDC_NETWORK}
-
-
-
- Wallet
- -
- {TREASURY_USDC_ADDRESS || `${TREASURY_WALLET_LABEL} is not configured yet`}
-
-
- {TREASURY_USDC_ADDRESS ? (
-
-
- Chain / token
- -
- Chain ID {TREASURY_USDC_CHAIN_ID} · {TREASURY_USDC_TOKEN_ADDRESS}
-
-
- ) : null}
- {TREASURY_USDC_ADDRESS ? (
-
-
- USDC atomic amount
- - {usdcAtomicUnitsFromCents(proposalPackage.feeCents)}
-
- ) : null}
- {walletCaptured ? (
-
-
- Receipt
- - {task?.stripe_payment_intent_id?.replace(/^wallet:/, "")}
-
- ) : null}
-
- {TREASURY_USDC_ADDRESS ? (
-
-
- 轉帳備註請包含 Proposal ID;入帳確認前 referral ledger 不會進入可出金狀態。
-
- ) : null}
- {walletPaymentUri && !walletCaptured ? (
-
-
- 開啟錢包付款
-
- ) : null}
-
+