> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dzap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet overview

> Standalone @dzapio/wallet for multi-chain connect, accounts, and balances without the swap UI.

`@dzapio/wallet` is the multi-chain wallet integration layer used by `@dzapio/widget`. Connect EVM, Solana, Bitcoin, and Sui from one React provider, then read account state and balances across ecosystems.

Install this package directly when you want wallet connection **without** the swap/zap UI.

<Note>
  If you embed `@dzapio/widget`, skip this install. The widget already depends on `@dzapio/wallet` and loads chain data for you.
</Note>

## Features

* **Multi-chain wallets** — EVM (Wagmi / WalletConnect), Solana, Bitcoin, and Sui
* **Single account API** — `useAccount` returns the connected account for the active ecosystem
* **Connect UI** — `ConnectButton` with a render-prop for custom controls
* **On-chain balances** — `useRefetchBalance` over RPC (EVM multicall, SPL, BTC, Sui)
* **Address validators** — Ecosystem-aware checks via `@dzapio/wallet/validators` (no React UI)

## Requirements

* Node.js 18+
* React 18+

Peer dependencies: `react` and `react-dom`. EVM connectors use `viem` and `wagmi`, which this package depends on.

## Installation

<Snippet file="install-wallet.mdx" />

## Quick start

`WalletProviders` needs `chainsData` (`InitialChainsData`) — the supported-chain payload from the DZap API. The widget builds this for you; a standalone host must supply it.

```tsx theme={null}
import { ConnectButton, WalletProviders, useAccount } from '@dzapio/wallet';
import type { InitialChainsData } from '@dzapio/wallet';

const config = {
  walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
  dzapApiKey: process.env.NEXT_PUBLIC_DZAP_API_KEY,
  appName: 'My dApp',
};

export function App({ chainsData }: { chainsData: InitialChainsData }) {
  return (
    <WalletProviders chainsData={chainsData} config={config}>
      <WalletHeader />
    </WalletProviders>
  );
}

function WalletHeader() {
  const { account } = useAccount();

  return (
    <ConnectButton.Custom>
      {({ account: connected, openConnectModal, openAccountModal }) => {
        const isConnected = Boolean(connected?.address && connected.isConnected);
        return (
          <button onClick={isConnected ? openAccountModal : openConnectModal}>
            {isConnected ? (connected.ensName ?? connected.address) : 'Connect Wallet'}
          </button>
        );
      }}
    </ConnectButton.Custom>
  );
}
```

How to load `chainsData`: [Wallet configuration](/widget/wallet/configuration).

## Related

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/widget/wallet/configuration">
    `WalletProviders`, `WalletConfig`, `chainsData`.
  </Card>

  <Card title="Connect button" icon="plug" href="/widget/wallet/connect-button">
    Default control and `ConnectButton.Custom`.
  </Card>

  <Card title="Hooks" icon="code" href="/widget/wallet/hooks">
    `useAccount`, balances, Wagmi/Solana re-exports.
  </Card>

  <Card title="Validators" icon="check-double" href="/widget/wallet/validators">
    Address checks without pulling in the React UI.
  </Card>
</CardGroup>