feat: add payment success state UI

src/components/pay/pay-manual-transfer-view.tsx

@@ -58,7 +58,7 @@ export function PayManualTransferView({
     <div className="flex flex-col gap-6">
       <div className="rounded-md border border-dashed bg-muted/30 p-4 text-sm text-muted-foreground">
         Send the exact amount below from your wallet to the address shown. Once
-        you've broadcast the transfer, tap <em>"I have sent the payment"</em> so
+        you have broadcast the transfer, tap <em>I have sent the payment</em> so
         Shade can start watching the chain for it.
       </div>
 

src/components/pay/pay-tabs.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 import { PayManualTransferView } from "./pay-manual-transfer-view";
+import { PaymentSuccess } from "./payment-success";
 import { PayWithConnectedWalletView } from "./pay-with-connected-wallet-view";
 
 type PayTab = "connected-wallet" | "manual-transfer";
@@ -15,6 +16,20 @@ const tabs: Array<{ id: PayTab; label: string }> = [
 
 export function PayTabs() {
   const [activeTab, setActiveTab] = useState<PayTab>("connected-wallet");
+  const [paid, setPaid] = useState(false);
+
+  async function handleManualPaymentConfirmed() {
+    await new Promise((resolve) => window.setTimeout(resolve, 900));
+    setPaid(true);
+  }
+
+  if (paid) {
+    return (
+      <div className="w-full max-w-2xl">
+        <PaymentSuccess />
+      </div>
+    );
+  }
 
   return (
     <div className="flex w-full max-w-2xl flex-col gap-4">
@@ -60,7 +75,7 @@ export function PayTabs() {
         hidden={activeTab !== "manual-transfer"}
         className="rounded-lg border bg-card p-6"
       >
-        <PayManualTransferView />
+        <PayManualTransferView onConfirmSent={handleManualPaymentConfirmed} />
       </div>
     </div>
   );

src/components/pay/payment-success.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { CheckCircle2, Download } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export function PaymentSuccess() {
+  return (
+    <section
+      role="status"
+      aria-live="polite"
+      className="overflow-hidden rounded-lg border bg-card p-8 text-center shadow-sm"
+    >
+      <div className="mx-auto flex max-w-md flex-col items-center gap-5">
+        <div className="relative flex size-20 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 shadow-inner dark:bg-emerald-950 dark:text-emerald-300">
+          <span className="absolute inset-0 rounded-full bg-emerald-400/20 animate-ping" />
+          <CheckCircle2 className="relative size-11" aria-hidden="true" />
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="text-3xl font-bold text-emerald-950 dark:text-emerald-100">
+            Payment Successful!
+          </h2>
+          <p className="text-sm leading-6 text-white">
+            Your payment has been confirmed. Shade has recorded the transaction
+            and the merchant will be notified.
+          </p>
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="bg-background"
+        >
+          <Download aria-hidden="true" />
+          <span>Download Receipt</span>
+        </Button>
+      </div>
+    </section>
+  );
+}