feat: embed coinbase payment in keychain popup with status polling

[broody]

Summary

Instead of opening the raw Coinbase payment link directly in the popup window, this embeds it within the keychain app at /coinbase?paymentLink=...&orderId=....

Problem

When opening the Coinbase payment link directly in a popup, Coinbase renders the "Buy now with Apple Pay" button but cannot detect when the payment succeeds because the page lacks the additional polling logic.

Solution

• New /coinbase route (coinbase-popup.tsx) in the keychain app that:

  • Embeds the Coinbase payment link in an iframe (works because the top-level domain is x.cartridge.gg)
  • Polls coinbaseOnrampOrder status via GraphQL every 5 seconds
  • Auto-closes the popup on successful payment (with a 1.5s delay so the user sees the success state)
  • Shows a failure message if the payment fails
  • Times out after 10 minutes if the order never completes

• Updated openPaymentPopup to construct the keychain URL instead of opening the raw Coinbase link

• Route registered outside the Authentication wrapper so it works as a standalone popup page

Changes

• packages/keychain/src/components/coinbase-popup.tsx — new standalone popup page
• packages/keychain/src/components/app.tsx — added /coinbase route
• packages/keychain/src/hooks/starterpack/coinbase.ts — updated popup URL construction

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
controller-example-next	Ready	Preview	Feb 25, 2026 9:13pm
keychain	Ready	Preview	Feb 25, 2026 9:13pm
keychain-storybook	Ready	Preview	Feb 25, 2026 9:13pm

[claude]

Claude finished @broody's task —— View job

---

Documentation Analysis Complete

Reviewed PR #2445 for user-facing documentation impacts.

Todo List

• Examine the changed files to understand user-facing impact
• Check existing documentation structure for payment/Coinbase references
• Determine if documentation updates are needed
• Update documentation if required, or explain why no changes are needed

Analysis Summary

PR Changes:

• Moved Coinbase payment from raw popup URL to iframe-embedded page at /coinbase
• Added GraphQL polling for order status (every 5 seconds)
• Auto-closes popup on payment success
• Shows failure messages with timeout handling

Documentation Decision: NO CHANGES NEEDED

This PR is an internal implementation improvement that enhances reliability and UX but does not change any user-facing APIs or integration patterns:

✅ What remains the same:

• The useCoinbase hook API and return values
• Developer integration points (starter packs, credit purchases)
• High-level user experience flow documented in coinbase-onramp.md
• The documented payment processing step: "User completes fiat payment through Coinbase's secure interface"

✅ Why no docs update:

• The existing documentation describes features and integration at the correct abstraction level
• The iframe embedding + polling is an internal improvement that doesn't affect how developers use the API
• The user flow described in docs (lines 68-78 of coinbase-onramp.md) remains accurate
• This follows the "DEFAULT TO NO CHANGES" rule for internal refactors

The implementation details (iframe vs. direct popup, polling intervals, timeout values) are intentionally not documented as they're subject to change and don't affect the developer experience.

--- • Branch: claude/pr-2445-20260225-2119