Vite Package

Vite is a modern frontend build tool and React framework that provides a fast development experience. AI Scaffolding includes a pre-configured Vite setup with React, TypeScript, and Tailwind CSS.

Configuration Options

When adding the Vite package to your project, you'll be prompted to configure the following options:

Package Name

You can customize the name of your Vite package. By default, it's set to vite.

? Enter the name of the vite package: (vite)

This name will be used as the package name in your project's workspace, e.g., @your-project/vite.

Wallet Connector

If you've included the Hardhat package, you'll be prompted to choose a wallet connector for your Vite frontend:

? Choose your wallet connector:
❯ wagmi
  ethers.js
  (none)

Options include:

wagmi: React hooks for Ethereum (recommended)
ethers.js: Popular Ethereum library
(none): No Web3 connection

RainbowKit Integration

If you choose wagmi as your wallet connector, you'll be asked if you want to add RainbowKit:

? Do you want to add RainbowKit? (A beautiful and feature-rich wallet connection UI) (y/N)

RainbowKit provides a polished UI for connecting wallets to your dApp.

Burner Wallet Support

If you enable RainbowKit, you'll also be asked if you want to add support for burner wallets:

? Do you want to add support for burner wallets? (y/N)

Burner wallets are temporary wallets that can be created on the fly, useful for testing or demos.

Networks

If you're not using Hardhat but still using a wallet connector, you'll be prompted to select which networks to support:

? Select networks:
❯◯ Mainnet
 ◯ Sepolia
 ◯ SilentData

Project Structure

After creating a project with the Vite package, the following structure will be generated:

your-project/
└── packages/
    └── vite/
        ├── src/
        │   ├── App.tsx
        │   ├── main.tsx
        │   ├── components/
        │   │   └── ... (UI components)
        │   ├── contracts/
        │   │   └── ... (Contract interactions)
        │   └── styles/
        │       └── ... (CSS files)
        ├── public/
        ├── index.html
        ├── vite.config.ts
        ├── tsconfig.json
        ├── package.json
        ├── .env.example
        └── README.md

If you choose to include Web3 connectivity, additional files and directories will be added for wallet connection and contract interactions.

Environment Setup

Create a .env file in the packages/vite directory based on the provided .env.example file:

cd packages/vite
cp .env.example .env

Then configure the following environment variables:

# Network configuration
VITE_CHAIN_NAME=hardhat

# Contract address (not needed if using Hardhat in same project)
VITE_CONTRACT_ADDRESS=0x...

# Silent Data specific variables (if using Silent Data)
VITE_SILENTDATA_CHAIN_ID=1337
VITE_SILENTDATA_RPC_URL=https://api.silentdata.com/...

Common Commands

Once you've set up the Vite package, you can use the following commands from your project root:

pnpm

# Start development server
pnpm vite dev
 
# Build for production
pnpm vite build
 
# Preview production build
pnpm vite preview
 
# Run linting
pnpm vite lint

Web3 Integration

If you've configured the Vite package with Web3 connectivity, here's how to use it in your code:

Using wagmi

import { useAccount, useReadContract } from 'wagmi';
import { lockAbi } from '../contracts/abis/Lock';
 
function MyComponent() {
  const { address, isConnected } = useAccount();
  
  const { data: unlockTime } = useReadContract({
    address: import.meta.env.VITE_CONTRACT_ADDRESS,
    abi: lockAbi,
    functionName: 'unlockTime',
  });
  
  return (
    <div>
      {isConnected ? (
        <div>
          <p>Connected: {address}</p>
          <p>Unlock Time: {unlockTime?.toString()}</p>
        </div>
      ) : (
        <button>Connect Wallet</button>
      )}
    </div>
  );
}

Using RainbowKit

If you've enabled RainbowKit, a wallet connection button is included out of the box:

import { ConnectButton } from '@rainbow-me/rainbowkit';
 
function MyHeader() {
  return (
    <header>
      <h1>My dApp</h1>
      <ConnectButton />
    </header>
  );
}

Using ethers.js

If you selected ethers.js as your wallet connector:

import { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { Lock__factory } from '@your-project/hardhat/typechain-types';
 
function MyComponent() {
  const [unlockTime, setUnlockTime] = useState<string>('');
  
  useEffect(() => {
    async function fetchData() {
      if (window.ethereum) {
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const lock = Lock__factory.connect(
          import.meta.env.VITE_CONTRACT_ADDRESS,
          provider
        );
        const time = await lock.unlockTime();
        setUnlockTime(time.toString());
      }
    }
    fetchData();
  }, []);
  
  return <div>Unlock Time: {unlockTime}</div>;
}

Customizing the Frontend

You can customize your Vite frontend by modifying the following key files:

Vite Configuration

Modify vite.config.ts to add plugins or change build settings:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  // Add custom Vite configuration here
});

Tailwind Configuration

Customize Tailwind CSS by modifying tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Add custom colors, fonts, etc.
    },
  },
  plugins: [
    // Add Tailwind plugins here
  ],
};