Token Presale

Overview

A launch page wired to a single contract that is both your ERC-20 and the presale. Contributors send the native coin at a fixed, transparent rate; on success the supply is minted and distributed — with automatic refunds if the soft cap isn't met.

Token Presale ships a polished, fully responsive launch page — countdown, live raised/hard-cap progress bound to on-chain state, tokenomics, and an FAQ — plus one Solidity contract that is both the ERC-20 and the presale: soft/hard caps, per-wallet limit, deadline, fixed-rate distribution and refunds.

When the project isn't configured yet, the app boots into a setup wizard that collects your token name, supply, presale share, caps and dates, deploys the contract straight from your browser wallet, auto-verifies it on Etherscan (one API key, any chain), and prints the exact .env to ship.

Nothing is minted until the sale succeeds: after the deadline, finalizing mints the supply and distributes the presale allocation to contributors at a fixed rate (allocation ÷ hard cap); the remainder goes to your wallet. If the soft cap was missed, no token is created and everyone refunds. Every label, cap, date and link is an env var, so the same codebase rebrands in minutes.

What's included

• Next.js app (App Router, TypeScript, Tailwind)
• Presale.sol (ERC-20 + presale in one) + Hardhat project & deploy scripts
• Setup wizard: in-browser deploy + Etherscan auto-verify
• Dockerfile + docker-compose for a one-command run
• .env.example, generated-env workflow and a README

Smart contracts

• Presale.sol — your ERC-20 and its presale in one verifiable contract. It mints nothing at deploy. On a successful finalize (deadline passed and soft cap met) it mints the full supply, distributes the presale share to contributors at a fixed rate (allocation ÷ hard cap), and sends the rest to your wallet. If the soft cap is missed, no token is created and every contributor can refund. Enforces soft/hard caps and a per-wallet limit (OpenZeppelin ERC20 + Ownable + ReentrancyGuard).

Tech stack & chains

Built with Next.js, TypeScript, Tailwind, viem, Solidity, Hardhat.

Runs on: Ethereum, BSC, Polygon, any EVM. The chain is a configuration value — point it at any EVM network or a testnet like Sepolia.

Quick start

After purchase you get a zip of the full source. Unzip it, then install dependencies and start the dev server:

unzip token-presale.zip && cd token-presale
npm install
npm run dev

The app starts on http://localhost:3001. On first run — before any .env exists — it boots straight into the setup wizard instead of the real app.

Configure with the setup wizard

The wizard collects everything the template needs and writes a .env for you — no hand-editing required to get started.

1. Pick the network and (optionally) a read-only RPC URL — test it with the built-in button.
2. Choose theme, accent color and font.
3. Fill in your token / project details and parameters.
4. Deploy the included smart contract(s) straight from your browser wallet (MetaMask). If you set an Etherscan API key, the source is auto-verified.
5. Click View .env, copy or download the file, save it as .env in the project root, and restart the dev server.

Once a valid .env is present the wizard disappears and the live app renders. Re-running the wizard later is as simple as removing the required values again.

Customize

Branding & content (no code)

Almost everything visible — name, symbol, taglines, descriptions, caps, dates, social links — is an environment variable in .env. Edit the value and restart; the wizard documents each one with a comment.

Appearance is env-driven too: NEXT_PUBLIC_THEME (dark / light / system), NEXT_PUBLIC_ACCENT (any hex color) and NEXT_PUBLIC_FONT. Some fields aren't asked in the wizard on purpose — you'll find them in .env with sensible defaults and can edit them directly.

Languages

The UI ships translated into 10 languages under messages/*.json (en, es, fr, zh, hi, ar, pt, bn, ru, ja). Edit a value to change wording, or add a key — missing keys fall back to English.

Editing the UI

The interface is a small set of React components under components/ styled with Tailwind. The main screen is a single component you can freely edit. On-chain reads are batched through a shared lib/web3.ts helper, so adding a new stat is a one-line read.

Configuration reference

Configuration lives in .env (copy .env.example to start, or let the wizard generate it). Two kinds of variables:

• NEXT_PUBLIC_* — read in the browser (token name, addresses, theme, RPC). These are inlined at build time, so set them before you build for production.
• Server-only values (deploy keys, private RPC) — never prefixed with NEXT_PUBLIC_, never shipped to the client.

Deploy the smart contracts

You have two equivalent options. In the browser, the setup wizard's deploy step sends the deploy transaction from your wallet and (with an Etherscan key) verifies the source automatically. From the CLI:

# compile + copy artifacts the app/wizard use
npm run compile

# deploy to the network in your .env (RPC_URL + DEPLOYER_PRIVATE_KEY)
npm run deploy

Copy the printed contract address into the matching NEXT_PUBLIC_* address variable (the wizard does this for you). Auto-verification retries while the explorer indexes the new contract, so a fresh deploy verifies within a minute or so.

Deploy the app

Vercel (or any Next.js host)

1. Push the project to a Git repo and import it in Vercel.
2. Add your .env values as Environment Variables (remember NEXT_PUBLIC_* are baked at build time, so set them before the build).
3. Deploy. Next.js App Router is fully supported out of the box.

Docker (single template)

Each template ships a multi-stage Dockerfile that produces a tiny distroless runtime (just Node.js + the standalone build — no shell or package manager) and a docker-compose.yml:

# build + run; with no .env it opens the setup wizard
docker compose up --build

# once you have a .env, pass it in:
docker run --env-file .env -p 3001:3000 token-presale

The container serves on port 3000 internally; the compose file maps it to 3001 on your host. Build-time NEXT_PUBLIC_* values can be passed as build args or baked from a committed .env.

VPS / bare metal

Build once and run the Node server — no Docker required:

npm install
npm run build
npm run start   # serves the production build

Production checklist

• Set NEXT_PUBLIC_CHAIN_ID to your real chain (mainnet/BNB/Polygon) — not a testnet.
• Use a dedicated RPC endpoint (Infura/Alchemy/your node) in NEXT_PUBLIC_RPC_URL for reliable reads.
• Deploy and verify your contract on the explorer so users can read the source.
• Double-check economic parameters (caps, price, supply, dates) — they're immutable once deployed.
• Set the real NEXT_PUBLIC_* values at build time, and keep server secrets out of the client.

Support

Each template includes a README with the same steps, an .env.example, and inline comments. Questions about your purchase are answered from the store.