Appearance
Availability
Wallets the partner can offer for signature verification on this device - not already-connected instances, and not Connect payment methods.
useAvailableVerificationWallets intersects enabled signature integrations with wallets this SDK can drive, then adds what the page can see (extensions / EIP-6963). Coinbase is not in this list - that path is Coinbase.
How to run a verification after the user picks a row: Verify wallet.
useAvailableVerificationWallets
tsx
import { useAvailableVerificationWallets } from '@swapped/connect-sdk/wallet-verification/react'
const { wallets, isLoading, isRefetching, error, refetch } =
useAvailableVerificationWallets()The hook filters by the provider network unless you pass { network }.
| Field | Meaning |
|---|---|
wallets | Signature wallets this device can offer - use provider on prepare() / verify() |
isLoading | true until the first list arrives. Render a spinner; wallets is still [] |
isRefetching | true while a later refetch() is running. Keep showing the current wallets |
error | Why the last list fetch failed, or null |
refetch | Fetch the list again (after the user retries, or when you open the picker) |
Each row is a picker item. Full field list: Core Availability. The ones you branch UI on:
| Field | Use it for |
|---|---|
provider | Pass to prepare() / verify() |
name / icon | Label and light / dark logo |
isInstalled | Show a “Verify” button for the extension |
supportsWalletConnect | Show a WalletConnect QR (pairingUri from useVerifyWallet) |
isDeepLinkConnection | Show a browse QR (deeplinkUrl). address is required |
isPopupConnection | Allow popups; connect / sign happen in a tab |
qrScanTarget | 'camera' = phone camera QR, 'wallet-app' = scan inside the wallet app |
tsx
function WalletList({
onSelect,
}: {
onSelect: (provider: WalletVerificationAvailableWallet['provider']) => void
}) {
const { wallets, isLoading, error } = useAvailableVerificationWallets()
if (isLoading) return <p>Loading…</p>
if (error) return <p>{error.message}</p>
return (
<ul>
{wallets.map(wallet => (
<li key={wallet.provider}>
<button type="button" onClick={() => onSelect(wallet.provider)}>
{wallet.name}
{wallet.isInstalled ? ' (installed)' : ''}
</button>
</li>
))}
</ul>
)
}useWalletVerificationConnections
Existing gateway connections for the current network (eip155 / solana / bip122). Reuse one with verify({ walletId, transport }) instead of pairing again.
tsx
import { useWalletVerificationConnections } from '@swapped/connect-sdk/wallet-verification/react'
const { connections, isLoading, error, refetch } =
useWalletVerificationConnections()| Field | Meaning |
|---|---|
connections | Already-approved sessions on this page for the current network. Pass walletId + transport into verify() to skip pairing |
isLoading | true until the first connections list arrives |
error | Why the last connections fetch failed, or null |
refetch | Fetch connections again (after verify() finishes, or when you reopen the picker) |
Picker UI
| Situation | What to show |
|---|---|
isInstalled | Connect / verify button |
Desktop, not installed, supportsWalletConnect | WalletConnect QR (pairingUri from useVerifyWallet) |
isDeepLinkConnection | Open in wallet / browse QR (deeplinkUrl). address is required |
isPopupConnection | Allow popups; the SDK opens a tab for connect and sign |