Installation

Requirements

Node.js 18+
React 18+ (React 19 is supported)

Peer dependencies for EVM wallet support:

Package	Version
`react`	`>=18`
`react-dom`	`>=18`
`viem`	`>=2`
`wagmi`	`>=3`

The widget depends on @dzapio/wallet. You do not need to install the wallet package separately. For wallet-only hosts, see Wallet overview.

Stylesheet

Import the bundled CSS once at your app entry (layout, _app, or main.tsx):

import '@dzapio/widget/styles.css';

Without this import, the widget renders unstyled.

Credentials

Env var (suggested)	Config field	Required
`NEXT_PUBLIC_WC_PROJECT_ID` / `VITE_WC_PROJECT_ID`	`walletConnectProjectId`	Yes — Reown Cloud (WalletConnect) project ID
`NEXT_PUBLIC_DZAP_API_KEY` / `VITE_DZAP_API_KEY`	`dzapApiKey`	Optional — raises rate limits. See Authentication

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

Do not put a privileged server-only secret in the browser. The widget dzapApiKey is a public integrator key (same class as the Trade/Fuse x-api-key). Request one via Discord or support@dzap.io.

Vite

Wallet dependencies (Bitcoin in particular) may expect Node globals. If the build fails on Buffer / global / process, add a polyfill:

Vite (vite.config.ts)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      globals: { Buffer: true, global: true, process: true },
    }),
  ],
  resolve: {
    dedupe: [
      'react',
      'react-dom',
      '@solana/wallet-adapter-react',
      '@solana/wallet-adapter-base',
      '@solana/web3.js',
    ],
  },
});

Deduping React and Solana wallet-adapter keeps a single wallet context across @dzapio/wallet and @dzapio/widget.

Next.js

App Router is supported. Mark the widget tree as a client component ('use client') and import styles in that module or in layout.tsx. Next.js usually does not need the Buffer polyfill. See the Next.js example.

Get Started

@dzapio/widget

@dzapio/wallet

Examples

Installation

Requirements

Install the widget

Stylesheet

Credentials

Vite

Next.js

Next: Quickstart

​Requirements

​Install the widget

​Stylesheet

​Credentials

​Vite

​Next.js

​Next: Quickstart

Requirements

Install the widget

Stylesheet

Credentials

Vite

Next.js

Next: Quickstart