Skip to main content

Function: useWallet()

function useWallet(): UseWalletReturn;

Defined in: useWallet.ts:130

Primary hook for wallet operations — connect, disconnect, sign, and track account state.

Must be used inside a KeaProvider.

Returns​

UseWalletReturn

An object with wallet state and actions

Remarks​

  • Wraps the underlying BrowserSDK with reactive React state.
  • connect() auto-waits for SDK initialization (up to 5 seconds). If the SDK is not ready within the timeout, throws Error('SDK initialization timeout').
  • All returned actions (connect, disconnect, mountInline, selectAccount) are async — use await or .catch() to handle errors.

Examples​

function WalletButton() {
  const { connect, disconnect, isConnected, selectedAccount } = useWallet();

  if (isConnected && selectedAccount) {
    return <button onClick={() => disconnect()}>{selectedAccount.address}</button>;
  }
  return <button onClick={() => connect()}>Connect Wallet</button>;
}

Error handling:

function ConnectButton() {
  const { connect, isConnecting } = useWallet();

  const handleConnect = async () => {
    try {
      const { accounts } = await connect();
      console.log('Connected with', accounts.length, 'accounts');
    } catch (err) {
      // Handle user rejection or timeout
      console.error('Connection failed:', err);
    }
  };

  return (
    <button onClick={handleConnect} disabled={isConnecting}>
      {isConnecting ? 'Connecting…' : 'Connect Wallet'}
    </button>
  );
}

Inline wallet mounting with a React ref:

function InlineWallet() {
  const containerRef = useRef<HTMLDivElement>(null);
  const { mountInline } = useWallet();

  useEffect(() => {
    if (containerRef.current) {
      mountInline(containerRef.current);
    }
  }, [mountInline]);

  return <div ref={containerRef} style={{ width: 400, height: 600 }} />;
}

See​