Skip to content

useCoinbaseBalances

Load enriched Coinbase balances for the connected account.

When to use

After connection, inside CoinbaseProvider. Drive the currency picker together with useCoinbaseToken.

Example

tsx
import {
  CoinbaseProvider,
  useCoinbaseBalances,
  useCoinbaseToken,
} from '@swapped/connect-sdk/react'

function BalancePicker() {
  const { balances, allBalances, eligibleBalances, isLoading, error, refetch } =
    useCoinbaseBalances()
  const { selectToken, isTokenSelected } = useCoinbaseToken()

  if (isLoading) return <p>Loading balances…</p>
  if (error) return <p>{error.message}</p>

  return (
    <ul>
      {allBalances.map(item => (
        <li key={item.id}>
          <button
            type="button"
            disabled={!item.eligible}
            aria-pressed={isTokenSelected(item.currency)}
            onClick={() => selectToken(item.currency)}
          >
            {item.currency} {item.formatted.balance} (~$
            {item.formatted.valueFiat})
            {!item.eligible && item.ineligibleReason
              ? ` — ${item.ineligibleReason}`
              : ''}
          </button>
        </li>
      ))}
      <button type="button" onClick={() => void refetch()}>
        Refresh
      </button>
      <p>
        Showing {balances.length} filtered / {eligibleBalances.length} eligible
      </p>
    </ul>
  )
}

function App() {
  return (
    <CoinbaseProvider onlySupported>
      <BalancePicker />
    </CoinbaseProvider>
  )
}

ineligibleReason: unsupported | zero_balance | below_min | below_fee_reserve.

Provider props (filters)

Configure filters on CoinbaseProvider:

PropDefaultPurpose
enabledtrueSkip fetch when false
onlySupportedfalseOmit unsupported tokens from balances
onlyAboveMinfalseOmit balances that fail min / fee checks from balances

allBalances is always the full enriched list. eligibleBalances is every balance with eligible: true.

Returns

balances, allBalances, eligibleBalances, isLoading, isRefetching, error, refetch.

Errors

CodeWhenWhat to do
REACT_COINBASE_PROVIDER_REQUIREDOutside providerWrap with CoinbaseProvider
COINBASE_NOT_CONNECTEDNot connectedConnect first
COINBASE_SESSION_EXPIREDToken invalidReconnect
API_ERRORNetwork / server failureRetry via refetch

See Errors.