Skip to main content

Function: KeaAccountSwitcher()

function KeaAccountSwitcher(): Element;

Defined in: KeaAccountSwitcher.tsx:75

Account switcher dropdown for KEA Wallet.

The component renders different UI depending on the wallet state:

  • Disconnected — a "Connect Wallet" button (disabled while the connection handshake is in progress).
  • Connected — the active account address with a dropdown toggle arrow. Clicking the button opens a dropdown that:
    • Lists every authorised account with an avatar showing the first two characters of the address.
    • Highlights the currently selected account.
    • Provides a "Disconnect" action at the bottom.

Selecting a different account calls selectAccount() and closes the dropdown. The dropdown also closes when clicking outside of it.

Returns​

Element

Remarks​

Context requirement — must be rendered inside a KeaProvider. Uses the useWallet and useAccounts hooks internally.

Styling — ships with dark-themed inline styles. The styles are not customisable via CSS classes. For a fully custom account switcher, use the hooks directly with your own markup.

When to use — prefer KeaAccountSwitcher over KeaConnectButton when the dApp supports multiple accounts. For a simple single-account connect/disconnect flow, KeaConnectButton is a lighter alternative.

Accessibility — the current implementation does not include ARIA attributes or keyboard navigation. For accessible implementations, build a custom dropdown with useWallet and useAccounts.

Examples​

Basic usage:

import { KeaProvider } from '@kea-wallet/react-sdk';
import { KeaAccountSwitcher } from '@kea-wallet/react-ui';

function App() {
  return (
    <KeaProvider config={{ rpcUrl: 'https://grpc-web.alphanet.thruput.org' }}>
      <KeaAccountSwitcher />
    </KeaProvider>
  );
}

Choosing between KeaAccountSwitcher and KeaConnectButton:

// Single-account dApp — simpler connect/disconnect flow
<KeaConnectButton />

// Multi-account dApp — dropdown to switch between accounts
<KeaAccountSwitcher />

See​

  • KeaConnectButton — simpler connect/disconnect button.
  • useWallet — primary hook for wallet operations.
  • useAccounts — hook for account state and switching.
  • KeaProvider — required context provider.