> ## 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 configuration

> WalletProviders, WalletConfig, and how to load InitialChainsData from the DZap API.

## WalletProviders

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

<WalletProviders
  chainsData={chainsData}
  config={config}
  initialState={wagmiState}
  portalContainer={containerEl}
>
  {children}
</WalletProviders>
```

| Prop              | Type                  | Description                                          |
| ----------------- | --------------------- | ---------------------------------------------------- |
| `chainsData`      | `InitialChainsData`   | **Required.** Supported chains from the DZap API     |
| `config`          | `WalletConfig`        | WalletConnect and app metadata                       |
| `initialState`    | Wagmi `State`         | Optional SSR hydration state                         |
| `portalContainer` | `HTMLElement \| null` | Mount wallet dialogs here instead of `document.body` |

The provider mounts EVM, Solana, Bitcoin, and Sui connectors, then account context on top.

## WalletConfig

| Option                   | Type     | Description                                          |
| ------------------------ | -------- | ---------------------------------------------------- |
| `walletConnectProjectId` | `string` | **Required.** Reown / WalletConnect Cloud project ID |
| `dzapApiKey`             | `string` | Optional DZap API key                                |
| `appName`                | `string` | Display name in wallet connection prompts            |
| `appUrl`                 | `string` | App URL for wallet metadata                          |
| `appIcon`                | `string` | App icon URL for wallet metadata                     |
| `solanaRpcUri`           | `string` | Override Solana RPC endpoint                         |

Read the resolved config with `useWalletConfig()`. Wagmi config for the current EVM setup is `useEvmConfig()`.

## Loading chainsData

`InitialChainsData` is the supported-chain payload the wallet layer uses to build connectors and chain lists. Build it from [`@dzapio/sdk`](/sdk/client):

```ts theme={null}
import { DZapClient } from '@dzapio/sdk';
import type { InitialChainsData } from '@dzapio/wallet';

export async function loadChainsData(apiKey?: string): Promise<InitialChainsData> {
  const dzap = DZapClient.getInstance(apiKey);
  const chains = await dzap.getAllSupportedChains();
  const zapChains = await dzap.getZapChains();

  const srcSupportedChainIds: number[] = [];
  const bridgeDestChainIds: number[] = [];
  const dcaSupportedChainIds: number[] = [];
  const supportedChainData: InitialChainsData['supportedChainData'] = {};
  const zappingChains: InitialChainsData['zappingChains'] = {};

  for (const chain of Object.values(chains)) {
    if (chain.isEnabled) {
      if (chain.supportedAs?.source) srcSupportedChainIds.push(Number(chain.chainId));
      if (chain.dcaContract) dcaSupportedChainIds.push(Number(chain.chainId));
      if (chain.supportedAs?.destination) bridgeDestChainIds.push(Number(chain.chainId));
    }
    supportedChainData[chain.chainId] = chain;
  }

  for (const [chainId, data] of Object.entries(zapChains)) {
    zappingChains[chainId] = {
      name: data.name,
      supportedProviders: data.supportedProviders,
    };
  }

  return {
    srcSupportedChainIds,
    dcaSupportedChainIds,
    bridgeDestChainIds,
    zapSupportedChainIds: Object.keys(zappingChains).map(Number),
    supportedChainData,
    zappingChains,
  };
}
```

<Tip>
  Hosts that already use `@dzapio/widget` should wrap with `DZapWidgetProvider` instead. That provider fetches this payload and passes it into `WalletProviders` for you.
</Tip>