Next.js example

'use client';

import { ConnectWalletButton, DZapWidgetProvider, SwapWidget } from '@dzapio/widget';
import '@dzapio/widget/styles.css';

const config = {
  walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID ?? 'YOUR_PROJECT_ID',
  dzapApiKey: process.env.NEXT_PUBLIC_DZAP_API_KEY,
  appName: 'DZap Next.js Example',
  theme: 'dark' as const,
};

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

NEXT_PUBLIC_WC_PROJECT_ID=your-walletconnect-project-id
NEXT_PUBLIC_DZAP_API_KEY=your-dzap-api-key

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