Chain Crafter

A personal tool to explore and interact with EVM smart contracts. Built with Vite + React on the client and Express on the server. Wallet connectivity is powered by wagmi and RainbowKit. Styling uses Tailwind and shadcn-inspired components.

Features

• Query contract ABIs via Etherscan family APIs (server proxy with rate limiting)
• Read and write contract methods with dynamic parameter UI
• Network selection (Ethereum, Polygon, Arbitrum, Optimism, Base)
• WebSocket channel for live demo events
• Clean, responsive UI (do not modify UI when contributing)

Tech Stack

• Client: Vite, React 18, TypeScript, Tailwind
• Server: Express (TypeScript), ws
• Web3: wagmi, viem, ethers, RainbowKit
• Tooling: esbuild, tsx, nodemon, concurrently

Getting Started

Prerequisites

• Node.js 18+
• npm (or pnpm/yarn)

Install

npm install

Environment

Create a .env file in the project root and set:

ETHERSCAN_API_KEY=your_api_key_here
PORT=3000

Env files are loaded in this order with later entries overriding earlier ones:

• .env
• .env.local
• .env.{NODE_ENV}
• .env.{NODE_ENV}.local

Development

Run Vite and the Express API in parallel:

npm run dev

• Client: http://localhost:5173
• API + WebSocket (when needed): http://localhost:3000

During development, the client makes API calls to the server via relative paths (e.g. /api/...). If you need a proxy from Vite to the API, add a server.proxy entry in vite.config.ts.

Production Build

npm run build
npm start

• Builds client to dist/public
• Bundles server to dist/index.js
• Serves static assets and API from the same Express server on PORT (default 3000)

Scripts

• npm run dev: run client and server in parallel
• npm run build: build client and server
• npm start: start production server
• npm run check: type-check with TypeScript

Project Structure

client/           # Vite React app
  index.html
  src/
    main.tsx
    App.tsx
    components/
    hooks/
    lib/
    pages/
    types/
server/           # Express server (TypeScript)
  index.ts
  routes.ts
  vite.ts         # dev helper for vite middleware (prod serves static)
  env.ts          # loads .env files into process.env
shared/           # Shared types (client + server)

Notes

• UI is considered complete; avoid visual reworks.
• This project is personal; feel free to fork and adapt.