feat: replace coinbase popup embed with success redirect page

packages/keychain/src/components/app.tsx

@@ -69,7 +69,7 @@ import { hasApprovalPolicies } from "@/hooks/session";
 import { PurchaseStarterpack } from "./purchasenew/starterpack/starterpack";
 import { Quests } from "./quests";
 import { QuestClaim } from "./quests/claim";
-import { CoinbasePopup } from "./coinbase-popup";
+import { CoinbaseSuccess } from "./coinbase-success";
 
 function DefaultRoute() {
   const account = useAccount();
@@ -234,7 +234,7 @@ export function App() {
   return (
     <Routes>
       <Route path="/booster-pack/:privateKey" element={<BoosterPack />} />
-      <Route path="/coinbase" element={<CoinbasePopup />} />
+      <Route path="/coinbase/success" element={<CoinbaseSuccess />} />
       <Route path="/" element={<Authentication />}>
         <Route index element={<DefaultRoute />} />
         <Route path="/settings" element={<Settings />} />

packages/keychain/src/components/coinbase-success.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { CheckIcon } from "@cartridge/ui";
+
+/**
+ * Success page at /coinbase/success.
+ * Coinbase redirects here after a successful Apple Pay payment.
+ * Auto-closes the popup after a brief delay so the user sees the confirmation.
+ */
+export function CoinbaseSuccess() {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      window.close();
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-[#0F1410] gap-4">
+      <div className="w-12 h-12 rounded-full bg-[#1a2e1a] flex items-center justify-center">
+        <CheckIcon size="lg" className="text-[#4ade80]" />
+      </div>
+      <div className="text-center">
+        <p className="text-sm font-semibold text-[#4ade80]">
+          Payment Successful
+        </p>
+        <p className="text-xs text-foreground-300 mt-1">
+          This window will close shortly.
+        </p>
+      </div>
+    </div>
+  );
+}

packages/keychain/src/hooks/starterpack/coinbase.ts

@@ -211,33 +211,25 @@ export function useCoinbase({
     [stopPolling, onError],
   );
 
-  /** Open the payment link in a popup and begin polling */
+  /** Open the payment link directly in a popup and begin polling */
   const openPaymentPopup = useCallback(() => {
     if (!paymentLink || !orderId) return;
 
-    // Build the keychain-hosted coinbase page URL
-    // The popup runs at the keychain origin (x.cartridge.gg) so the
-    // Coinbase iframe inside it will work correctly.
-    const keychainOrigin = window.location.origin;
-    const popupUrl = new URL("/coinbase", keychainOrigin);
-    popupUrl.searchParams.set("paymentLink", paymentLink);
-    popupUrl.searchParams.set("orderId", orderId);
-
     // Open a centered popup (use screen dimensions since we may be in an iframe)
     const width = 500;
     const height = 700;
     const left = (window.screen.width - width) / 2;
     const top = (window.screen.height - height) / 2;
 
     const popup = window.open(
-      popupUrl.toString(),
+      paymentLink,
       "coinbase-payment",
       `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`,
     );
 
     popupRef.current = popup;
 
-    // Start polling for order status in the keychain as well
+    // Start polling for order status
     startPolling(orderId);
 
     // Watch for the popup being closed by the user