Events (React)

Use useOn* hooks inside SwappedConnectProvider.

Session

For which screen to show (active / completed / …), use useSessionView() — not these listeners.

import {
  useOnSessionLoaded,
  useOnSessionRefreshed,
  useOnSessionViewChanged,
  useOnError,
  useOnTransactionUpdated,
} from '@swapped/connect-sdk/react'

function Listeners() {
  useOnSessionLoaded(() => {
    // session ready
  })
  useOnSessionRefreshed(() => {
    // payment progress synced
  })
  useOnSessionViewChanged(({ view }) => {
    // side effect only — prefer useSessionView() for rendering
  })
  useOnError(error => {
    // show error UI
  })
  useOnTransactionUpdated(({ transaction }) => {
    // tx updated
  })
  return null
}

Wallets

For UI state prefer useWalletConnections / useConnectWallet / useWallet / useWalletTransfer. Full list: Wallets hooks.

import { useOnWalletTransferStatus } from '@swapped/connect-sdk/react'

function WalletListeners() {
  useOnWalletTransferStatus(event => {
    event.status
  })
  return null
}

Other wallets:* events: useClientEvent('wallets:connected', …) — see Wallets event hooks.

Exchange Pay

For UI state prefer useExchangePayOrder / useExchangePayOrderCountdown. Full list: Exchange Pay hooks.

import {
  useOnExchangePayOrderUpdated,
  useOnExchangePayOrderCompleted,
  useOnExchangePayOrderExpired,
} from '@swapped/connect-sdk/react'

function ExchangePayListeners({ onComplete, onExpired }) {
  useOnExchangePayOrderUpdated(() => {
    /* refresh checkout */
  })
  useOnExchangePayOrderCompleted(() => onComplete())
  useOnExchangePayOrderExpired(() => {
    // e.g. toast + navigate back to deposit
    onExpired()
  })
  return null
}

Coinbase

useOn* hooks are for side effects. For UI state, use the dedicated hooks instead:

Need	Use
Connected / popup / connect actions	useCoinbaseConnection()
Cooldown button / countdown	useCoinbaseWithdrawalCooldown() → { isInCooldown, remainingMs }
Withdrawal status / start / confirm	useCoinbaseWithdrawal()
Success summary	useCoinbaseCompletedTransactionSummary()

Full list: Coinbase hooks.

import {
  useOnCoinbaseConnected,
  useOnCoinbaseDisconnected,
  useOnCoinbaseSessionExpired,
  useOnCoinbaseWithdrawalCompleted,
} from '@swapped/connect-sdk/react'

function CoinbaseListeners() {
  useOnCoinbaseConnected(() => {
    /* show balances */
  })
  useOnCoinbaseDisconnected(() => {
    /* show connect */
  })
  useOnCoinbaseSessionExpired(() => {
    /* reconnect */
  })
  useOnCoinbaseWithdrawalCompleted(() => {
    /* success */
  })
  return null
}

useOnCoinbaseCooldownChanged exists for custom tick side effects, but prefer useCoinbaseWithdrawalCooldown for Withdraw UI.

Restart / destroy

import { useSwappedConnectClient } from '@swapped/connect-sdk/react'

function SessionControls() {
  const client = useSwappedConnectClient()
  return (
    <>
      <button type="button" onClick={() => void client.restartSession()}>
        New payment
      </button>
      <button type="button" onClick={() => client.destroy()}>
        Destroy
      </button>
    </>
  )
}

For any event name, use useClientEvent('session:loaded', handler).