Appearance
WalletsProvider
Owns connected wallets (each an approved wallet instance with a walletId), the active wallet, and connect / disconnect. Also loads wallet payment methods and exposes availability.
Transfer plan / quote / submit / summary hooks work under SwappedConnectProvider alone, but you still need a connected walletId. This provider is what tracks the active wallet and the connection list.
Balances are fetched by useWalletBalances / useAllWalletBalances, not by the provider.
Example
tsx
import { createSwappedConnectClient } from '@swapped/connect-sdk'
import {
SwappedConnectProvider,
WalletsProvider,
} from '@swapped/connect-sdk/react'
const client = createSwappedConnectClient({
sessionId: 'your-session-id',
})
void client.loadSession()
function App() {
return (
<SwappedConnectProvider client={client}>
<WalletsProvider>
<WalletsFlow />
</WalletsProvider>
</SwappedConnectProvider>
)
}The demo wraps the whole app with WalletsProvider so connections stay subscribed on every route.
Props
| Prop | Meaning |
|---|---|
children | Wallet UI |
No selection props. The provider stores the active walletId in localStorage (see useActiveWallet), so it stays selected after a page refresh. Keep the selected token and amount in your own state.
Context
Using any of those hooks (or useWalletsContext) outside WalletsProvider throws REACT_WALLETS_PROVIDER_REQUIRED.