Coinbase (React)

Connect a Coinbase account with OAuth, then withdraw crypto using hooks from @swapped/connect-sdk/react.

Coinbase is a separate flow from Exchange Pay and from Wallets (Coinbase Wallet is type: wallet). Route to it when the payment method has provider: coinbase and type: exchange_oauth (see Payment methods).

Prerequisites

1. Create a core client with a Swapped Connect sessionId (from your backend).
2. Call loadSession() and wrap your tree with SwappedConnectProvider.
3. Wrap the withdraw UI with CoinbaseProvider.
4. Gate on Coinbase availability with CoinbaseGuard (or useCoinbaseAvailability) before showing the connect UI.

import { createSwappedConnectClient } from '@swapped/connect-sdk'
import {
  CoinbaseGuard,
  CoinbaseProvider,
  SwappedConnectProvider,
} from '@swapped/connect-sdk/react'

const client = createSwappedConnectClient({
  sessionId: 'your-session-id',
})

void client.loadSession()

function App() {
  return (
    <SwappedConnectProvider client={client}>
      <CoinbaseProvider>
        <CoinbaseGuard
          loading={<p>Loading…</p>}
          fallback={<p>Coinbase is not available for this session</p>}
          onNotAvailable={() => {
            // e.g. navigate('/payment-methods')
          }}
        >
          <ConnectCoinbase />
        </CoinbaseGuard>
      </CoinbaseProvider>
    </SwappedConnectProvider>
  )
}

Flow overview

Step	What happens	Hook
0. Availability	Confirm Coinbase OAuth is enabled for the session	CoinbaseGuard / useCoinbaseAvailability
1. Connect	OAuth popup → user authorizes Coinbase	useCoinbaseConnection
2. Balances + token	Load balances; user picks a currency	useCoinbaseBalances, useCoinbaseToken
3. Funding (optional)	Include other balances that can fund the withdraw	useCoinbaseFundingTokens
4. Network + amount	Pick network; enter amount	useCoinbaseNetwork, useCoinbaseAmount
5. Withdraw	startWithdrawal() from context → if 2FA, confirm	useCoinbaseWithdrawal, useCoinbaseWithdrawalCooldown
6. Done	Branch on withdrawal.result (or summary hook); restartSession() for another payment	useCoinbaseWithdrawal, useCoinbaseCompletedTransactionSummary

Session must be loaded and active before startWithdrawal. After a completed payment, call restartSession() before starting another one.

Drive screens from connection + withdrawal state (login → form → twofa → done). Success UI can use useCoinbaseWithdrawal().result (full API result) or useCoinbaseCompletedTransactionSummary (display-ready fields). Walkthrough: Example.

Hooks

Full list: Coinbase hooks. Use state hooks for UI and event hooks only for side effects (navigate, toast, analytics).