Skip to content

useCoinbaseCompletedTransactionSummary

Live display-ready summary of the last completed Coinbase withdrawal.

When to use

Success screen after withdrawal completes. Updates when coinbase:withdrawalCompleted fires.

Prefer this hook when the success UI is on a separate route or only needs amount / fee / destination. If success lives next to the withdraw form, you can also branch on useCoinbaseWithdrawal().result (full CoinbaseWithdrawal) — see Example.

Driving the success step

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

function CoinbaseScreens() {
  const { result, requires2fa, isConfirming, status } = useCoinbaseWithdrawal()

  if (result) {
    return <Success /> // or navigate here
  }

  if (requires2fa || isConfirming || status === 'confirming') {
    return <TwoFactor />
  }

  // … connect / form
  return null
}

For route-level navigation (instead of inline branching), listen once:

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

function CoinbaseSideEffects({ onSuccess }: { onSuccess: () => void }) {
  useOnCoinbaseWithdrawalCompleted(() => onSuccess())
  return null
}

Example

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

function Success() {
  const summary = useCoinbaseCompletedTransactionSummary()
  const client = useSwappedConnectClient()

  if (!summary) return null

  return (
    <div>
      <p>Provider: {summary.provider}</p>
      <p>
        Withdrew {summary.amount.amount} {summary.amount.currency}
      </p>
      {summary.network && <p>Network: {summary.network}</p>}
      {summary.fee && (
        <p>
          Fee {summary.fee.amount} {summary.fee.currency}
        </p>
      )}
      {summary.destinationAddress && (
        <p>Destination: {summary.destinationAddress}</p>
      )}
      {summary.status && <p>Status: {summary.status}</p>}
      {summary.id && <p>Withdrawal id: {summary.id}</p>}
      {summary.createdAt && <p>Created: {summary.createdAt}</p>}
      <button type="button" onClick={() => void client.restartSession()}>
        New payment
      </button>
    </div>
  )
}

In-memory for the current module lifetime. After reload or restartSession() it may be null even if payment completed on the server.

Always call restartSession() before another payment — the completed session is no longer active.

Errors

This hook does not throw. null means no completed withdrawal in memory yet.

The next payment attempt can hit SESSION_NOT_ACTIVE if you did not call restartSession() — see Errors.