Wallets example

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

The address lives in a self-custodial wallet. For an address that lives on Coinbase, see Coinbase example.

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

1. Wrap the tree

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"
    >
      <VerifyPage />
    </WalletVerificationProvider>
  )
}

See WalletVerificationProvider. If customerId (or network / address) on the provider changes, the next verify() uses the new value.

2. List wallets

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

const { wallets, isLoading } = useAvailableVerificationWallets()

See Availability.

3. Verify (signature)

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

const { prepare, verify, isVerifying, pairingUri, deeplinkUrl, error } =
  useVerifyWallet()

const prepared = await prepare({ provider: wallets[0].provider })
// render pairingUri / deeplinkUrl
await prepared.wait()

// or switch to the extension
await verify({
  provider: wallets[0].provider,
  transport: 'injected',
})

Render pairingUri as a WalletConnect QR and deeplinkUrl as a browse QR. Call prepare() or verify() from a click - selecting a wallet does not start it. address is required for prepare().

See Verify wallet.

4. Read the result

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

const { verification } = useWalletVerification()

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

See Result.

Deep dives: Provider, Availability, Verify wallet, Result, Errors.