Appearance
Event hooks
useOn* hooks for Coinbase side effects. Prefer state hooks when you only need current values.
When to use
Navigate to success, toast on expiry, analytics — not for rendering cooldown or connection UI.
| Need in UI | Use instead |
|---|---|
| Connected / popup / connect | useCoinbaseConnection |
| Cooldown button / countdown | useCoinbaseWithdrawalCooldown → { isInCooldown, remainingMs } |
| Withdrawal status | useCoinbaseWithdrawal |
| Success summary | useCoinbaseCompletedTransactionSummary |
Hooks
| Hook | When it fires |
|---|---|
useOnCoinbaseInitializationStarted | Module init begins |
useOnCoinbaseInitializationCompleted | Init finished |
useOnCoinbaseConnected | OAuth succeeded |
useOnCoinbaseDisconnected | Disconnected |
useOnCoinbaseSessionExpired | Token no longer valid — show connect again |
useOnCoinbaseWithdrawalCompleted | Withdraw finished — e.g. navigate to success |
useOnCoinbaseCooldownChanged | Cooldown tick — prefer useCoinbaseWithdrawalCooldown for UI |
Also useful nearby: useOnOAuthError, useOnOAuthPopupOpenChanged (see Events).
Example
tsx
import {
useOnCoinbaseSessionExpired,
useOnCoinbaseWithdrawalCompleted,
} from '@swapped/connect-sdk/react'
function CoinbaseSideEffects({ onSuccess }: { onSuccess: () => void }) {
useOnCoinbaseSessionExpired(() => {
// toast / send user back to connect step
})
// Navigate to a success route — or branch on useCoinbaseWithdrawal().result inline
useOnCoinbaseWithdrawalCompleted(() => onSuccess())
return null
}On the success screen, read useCoinbaseCompletedTransactionSummary or useCoinbaseWithdrawal().result. See Example.
See Errors for mapping failures, and Events (React) for session / Exchange Pay listeners.