Skip to main content

​
Overview

After generating your dApp, you can customize it to fit your specific needs. This guide covers common customization patterns.

​
Project Structure

Your generated project follows this structure: 
my-dapp/
├── app/
│   ├── layout.tsx      # Root layout with providers
│   ├── page.tsx        # Home page
│   └── globals.css     # Global styles
├── components/
│   ├── Header.tsx      # Wallet connect button
│   ├── Greeting.tsx    # Contract interaction example
│   └── ThemeToggle.tsx # Dark/light mode toggle
├── hooks/
│   └── useGreeting.ts  # Contract hook example
├── abi/
│   └── greeter.json    # Contract ABI
└── lib/
    └── utils.ts        # Utility functions

​
Wallet Configuration

​
Adding More Chains

The CLI supports EVM and Solana chains. You can add additional networks to your configuration:

​
EVM Chains

For EVM-based dApps, edit your provider configuration to include more chains: 
// Example: Adding Base and Arbitrum
import { base, arbitrum } from 'wagmi/chains';

const config = createConfig({
  chains: [mainnet, base, arbitrum],
  // ... other config
});

​
Solana Clusters

For Solana dApps, you can switch between mainnet, devnet, and testnet: 
import { clusterApiUrl } from '@solana/web3.js';

const endpoint = clusterApiUrl('devnet'); // or 'mainnet-beta', 'testnet'

​
Customizing Wallet Options

Each wallet provider has different customization options:

​
RainbowKit (EVM)

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

<RainbowKitProvider
  theme={darkTheme({
    accentColor: '#7b3fe4',
    accentColorForeground: 'white',
    borderRadius: 'medium',
  })}
  appInfo={{
    appName: 'My dApp',
    learnMoreUrl: 'https://example.com',
  }}
>
  {children}
</RainbowKitProvider>

​
ConnectKit (EVM)

import { ConnectKitProvider } from 'connectkit';

<ConnectKitProvider
  theme="auto"
  mode="dark"
  customTheme={{
    "--ck-primary-button-color": "#7b3fe4",
    "--ck-border-radius": "12px",
  }}
>
  {children}
</ConnectKitProvider>

​
Dynamic (Multi-chain)

import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';

<DynamicContextProvider
  settings={{
    environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID!,
    walletConnectors: ['metamask', 'coinbase', 'walletconnect'],
    eventsCallbacks: {
      onAuthSuccess: (args) => console.log('User authenticated', args),
    },
  }}
>
  {children}
</DynamicContextProvider>

​
Adding Custom Components

​
Creating a Custom Hook

Add custom contract interaction hooks in the hooks/ directory: 
// hooks/useMyContract.ts
import { useReadContract, useWriteContract } from 'wagmi';
import MyContractABI from '@/abi/mycontract.json';

export function useMyContract() {
  const contractAddress = '0x...';

  const { data: balance } = useReadContract({
    address: contractAddress,
    abi: MyContractABI,
    functionName: 'balanceOf',
    args: [address],
  });

  const { writeContract } = useWriteContract();

  const transfer = (to: string, amount: bigint) => {
    writeContract({
      address: contractAddress,
      abi: MyContractABI,
      functionName: 'transfer',
      args: [to, amount],
    });
  };

  return { balance, transfer };
}

​
Adding New Pages

Create new pages in the app/ directory: 
mkdir app/dashboard
touch app/dashboard/page.tsx

// app/dashboard/page.tsx
export default function Dashboard() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Dashboard</h1>
    </main>
  );
}

​
Styling and Theming

​
Tailwind Customization

The generated project uses Tailwind CSS. Customize your theme in tailwind.config.ts: 
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#7b3fe4',
        secondary: '#ff6b6b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

​
Dark Mode

The generated project includes a theme toggle. Customize dark mode colors in app/globals.css: 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

​
Environment Variables

Configure API keys and environment-specific values in .env.local: 
# Copy example file
cp .env.example .env.local
Common environment variables: 
# RainbowKit / WalletConnect
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id

# Alchemy / Infura
NEXT_PUBLIC_ALCHEMY_ID=your_alchemy_id

# Privy
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id

# Dynamic
NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=your_dynamic_env_id

# Thirdweb
NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_thirdweb_client_id
Reference: src/generators/env.ts for environment variable setup

​
Contract ABIs

Add your contract ABIs to the abi/ directory: 
# Add a new contract ABI
touch abi/mytoken.json

[
  {
    "inputs": [],
    "name": "name",
    "outputs": [{"type": "string"}],
    "stateMutability": "view",
    "type": "function"
  }
]

​
Adding Dependencies

Install additional packages as needed: 
# Add state management
npm install zustand

# Add forms
npm install react-hook-form zod

# Add UI components
npm install @radix-ui/react-dialog

# Add utilities
npm install date-fns clsx
Reference: src/config/dependencies.ts for version information

​
TypeScript Configuration

The generated project uses strict TypeScript. Adjust settings in tsconfig.json: 
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,
    // ... other options
  }
}

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us