Project structure

my-dapp/
├── app/
│   ├── layout.tsx       # Root layout with providers
│   ├── page.tsx         # Home page with demo component
│   └── globals.css      # Global styles
├── components/
│   ├── Header.tsx       # Navigation with wallet connect
│   ├── Greeting.tsx     # Demo smart contract interaction (EVM)
│   └── ThemeToggle.tsx  # Dark/light mode toggle
├── hooks/               # (EVM only)
│   └── useGreeting.ts   # Custom hook for contract reads/writes
├── abi/                 # (EVM only)
│   └── greeter.json     # Smart contract ABI
├── lib/
│   └── utils.ts         # Utility functions (cn for tailwind)
├── public/
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json       # ESLint configuration
├── .gitignore           # Git ignore rules
├── components.json      # shadcn/ui configuration
├── next.config.js       # Next.js configuration
├── package.json         # Dependencies and scripts
├── postcss.config.js    # PostCSS configuration
├── tailwind.config.ts   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    /* ... more CSS variables */
  }
  
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    /* ... dark mode variables */
  }
}

"use client";

import { ConnectButton } from '@rainbow-me/rainbowkit';
import { ThemeToggle } from './ThemeToggle';

export function Header() {
  return (
    <header className="border-b border-border">
      <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
        <h1 className="text-lg font-medium">my-dapp</h1>
        <div className="flex items-center gap-4">
          <ThemeToggle />
          <ConnectButton />
        </div>
      </div>
    </header>
  );
}

"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="p-2 hover:bg-accent rounded-md transition-colors"
    >
      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
    </button>
  );
}

import { useAccount, useReadContract, useWriteContract } from 'wagmi';
import greeterABI from '@/abi/greeter.json';

const GREETER_ADDRESS = '0x...'; // Contract address

export function useGreeting({ newGreeting, onSetGreetingSuccess }) {
  const { address } = useAccount();
  
  // Read current greeting
  const { data: greeting, isLoading: getGreetingLoading } = useReadContract({
    address: GREETER_ADDRESS,
    abi: greeterABI,
    functionName: 'greet',
  });
  
  // Write new greeting
  const { writeContract, isPending: setGreetingLoading } = useWriteContract({
    onSuccess: onSetGreetingSuccess,
  });
  
  const setGreeting = () => {
    writeContract({
      address: GREETER_ADDRESS,
      abi: greeterABI,
      functionName: 'setGreeting',
      args: [newGreeting],
    });
  };
  
  return {
    address,
    greeting,
    getGreetingLoading,
    setGreeting,
    setGreetingLoading,
  };
}

[
  {
    "inputs": [],
    "name": "greet",
    "outputs": [{"type": "string"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [{"name": "_greeting", "type": "string"}],
    "name": "setGreeting",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  }
]

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    return config;
  },
};

module.exports = nextConfig;

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "paths": {
      "@/*": ["./*"]
    }
  }
}

import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: ['class'],
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        // ... more theme colors
      },
    },
  },
};

export default config;