Appearance
useAvailableWallets
Available wallets this device can connect — not the connected list. Requires WalletsProvider.
This is the catalog (AvailableWallet[]). After the user connects, use useWalletConnections. How to open a wallet: Connect wallet.
Example
tsx
import { useAvailableWallets } from '@swapped/connect-sdk/react'
function WalletList({
onSelect,
}: {
onSelect: (provider: AvailableWallet['provider']) => void
}) {
const { wallets, isLoading, error, refetch } = useAvailableWallets()
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>
)
}Returns
| Field | Meaning |
|---|---|
wallets | AvailableWallet[] |
isLoading | Payment methods still loading |
error | Payment-methods fetch error |
refetch | Refetch payment methods (availability recomputes) |
AvailableWallet fields: provider, name, icon, isInstalled, injectedNamespaces, supportsWalletConnect, transports, isPopupConnection, isDeepLinkConnection, qrScanTarget. Details: Availability (Core).