Vite example

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

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

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

pnpm install
pnpm --filter @dzapio/widget build
pnpm --filter dzap-widget-example-vite dev