Wallet configuration - DZap

WalletProviders

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:

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,
  };
}

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

Last modified on August 18, 2026