Widget Integration

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

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

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

export function App() {
  return (
    <DZapWidgetProvider config={config}>
      <ConnectWalletButton />
      <SwapWidget />
    </DZapWidgetProvider>
  );
}

import { DZapWidgetProvider, SwapButton, ZapButton } from '@dzapio/widget';

<DZapWidgetProvider config={config}>
  <SwapButton label="Swap" />
  <ZapButton flow="deposit" label="Zap in" />
</DZapWidgetProvider>