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

# Vite example

> Minimal Vite + React embed of the DZap swap widget.

A Vite + React app wrapping `DZapWidgetProvider` + `SwapWidget`. Full source: [`examples/vite`](https://github.com/DZapIO/widget/tree/main/examples/vite) in the [widget repo](https://github.com/DZapIO/widget).

## App

```tsx theme={null}
import { ConnectWalletButton, DZapWidgetProvider, SwapWidget } from '@dzapio/widget';
import '@dzapio/widget/styles.css';

const config = {
  walletConnectProjectId: import.meta.env.VITE_WC_PROJECT_ID ?? 'YOUR_PROJECT_ID',
  dzapApiKey: import.meta.env.VITE_DZAP_API_KEY,
  appName: 'DZap Vite Example',
  theme: 'dark' as const,
};

export function App() {
  return (
    <DZapWidgetProvider config={config}>
      <div style={{ minHeight: '100vh', padding: '2rem', background: '#0a0a0a' }}>
        <div style={{ maxWidth: 420, margin: '0 auto' }}>
          <ConnectWalletButton />
          <div style={{ marginTop: '1rem' }}>
            <SwapWidget />
          </div>
        </div>
      </div>
    </DZapWidgetProvider>
  );
}
```

## Environment

```
VITE_WC_PROJECT_ID=your-walletconnect-project-id
VITE_DZAP_API_KEY=your-dzap-api-key
```

## Vite config

Deduplicate React and Solana wallet-adapter so wallet context stays singular:

```ts theme={null}
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: [
      'react',
      'react-dom',
      '@solana/wallet-adapter-react',
      '@solana/wallet-adapter-base',
      '@solana/web3.js',
    ],
  },
  server: { port: 5173 },
});
```

If Bitcoin / wallet deps fail on `Buffer`, add `vite-plugin-node-polyfills`. See [Installation](/widget/installation).

## Run from the widget monorepo

```bash theme={null}
pnpm install
pnpm --filter @dzapio/widget build
pnpm --filter dzap-widget-example-vite dev
```

Open [http://localhost:5173](http://localhost:5173).