Skip to content

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

PropMeaning
childrenWallet 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.