Skip to content

Coinbase example ​

End-to-end Coinbase verification with the React hooks.

The address lives on Coinbase.com. There is no wallet connect and no signature step. For a self-custodial wallet, see Wallets example.

This is not a Connect session. You need a public API key, not a sessionId. customerId is your id for the end user. Do not reuse Connect useCoinbaseConnection.

1. Wrap the tree ​

tsx
import { WalletVerificationProvider } from '@swapped/connect-sdk/wallet-verification/react'

function App() {
  return (
    <WalletVerificationProvider
      apiKey="your-public-api-key"
      environment="staging"
      customerId="user-1234"
      network="evm"
      address="0xAb5801a7D398351b8bE11C439e05C5B3259aeC9B"
    >
      <CoinbaseVerify />
    </WalletVerificationProvider>
  )
}

See WalletVerificationProvider. address, network, and customerId default to provider identity. address is required.

2. New tab ​

Create the record, then open Coinbase from a click so the browser does not block the tab.

tsx
import { useCoinbaseVerification } from '@swapped/connect-sdk/wallet-verification/react'

const { startVerification, openVerificationTab, completeVerification } =
  useCoinbaseVerification()

await startVerification({ mode: 'new-tab' })
// from a click
await openVerificationTab()

If customerId + address is already verified, startVerification() returns status: 'verified' immediately - no tab.

3. Same-tab redirect ​

startVerification() navigates this tab to Coinbase. Host a landing page at redirectUrl and finish there. The hook does not call completeVerification() on mount.

tsx
await startVerification({
  mode: 'redirect',
  redirectUrl: 'https://merchant.example.com/wallet-verified',
})

// on the landing page
await completeVerification()

Treat ?status= as a hint only - use the returned record.

4. Read the result ​

tsx
import { useWalletVerification } from '@swapped/connect-sdk/wallet-verification/react'

const { verification } = useWalletVerification()

if (verification?.status === 'verified') {
  verification.verificationId
  verification.address
  verification.verifiedAt
}

See Result.

See Coinbase for modes, cancel, and hook fields.

Deep dives: Provider, Coinbase, Result, Errors.