abc-scaffold 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kimberley Bezuidenhout
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# abc-scaffold
+
+**Africa's Blockchain Club** — project-agnostic blockchain scaffolding tool. Bootstrap a complete Hardhat + React workspace in seconds.
+
+```bash
+npx abc-scaffold my-project
+```
+
+---
+
+## What gets scaffolded
+
+```
+my-project/
+├── contracts/          # Drop your Solidity files here
+├── scripts/            # Deployment and utility scripts
+├── test/               # Hardhat test files
+├── frontend/           # React + Vite UI
+│   └── src/
+│       ├── App.jsx
+│       └── components/
+│           └── Navbar.jsx   ← sticky nav with Connect Wallet button
+├── hardhat.config.js
+├── .env.example
+├── .gitignore
+└── README.md
+```
+
+Both root and frontend dependencies are installed automatically.
+
+---
+
+## Features
+
+- **Project-agnostic** — works for NFTs, DeFi, DAOs, smart accounts, or anything else
+- **Hardhat pre-configured** — Solidity 0.8.26, Cancun EVM, optimizer on, Sepolia network
+- **OpenZeppelin + Account Abstraction** — ERC-20/721/1155, upgradeable contracts, ERC-4337 interfaces included as dependencies
+- **React frontend** — Vite + React with a navbar and MetaMask wallet connection (ethers.js v6)
+- **Auto install** — runs `npm install` in both the root and `frontend/` at the end
+- **Plain JavaScript** — no TypeScript, no build step
+
+---
+
+## Usage
+
+```bash
+# With a name argument
+npx abc-scaffold my-nft-project
+
+# Or let it prompt you
+npx abc-scaffold
+? Project name: my-dao
+```
+
+---
+
+## Inside the generated project
+
+### Compile contracts
+```bash
+npm run compile
+```
+
+### Run tests
+```bash
+npm test
+```
+
+### Start a local node
+```bash
+npx hardhat node
+```
+
+### Deploy locally
+```bash
+npx hardhat run scripts/deploy.js --network localhost
+```
+
+### Start the frontend
+```bash
+cd frontend
+npm run dev   # → http://localhost:5173
+```
+
+---
+
+## Repository structure
+
+```
+abc-scaffold/  (this repo)
+├── bin/
+│   └── abc-scaffold.js   # CLI entry point
+├── src/
+│   ├── scaffold.js        # Scaffolding logic
+│   └── logger.js          # Coloured output
+├── templates/
+│   ├── package.json       # Template for generated projects
+│   ├── hardhat.config.js
+│   ├── .env.example
+│   ├── .gitignore
+│   └── frontend/          # Full React app template
+└── package.json
+```
+
+---
+
+## License
+
+MIT — Africa's Blockchain Club

package/bin/abc-scaffold.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { scaffold } from '../src/scaffold.js';
+import { printBanner } from '../src/logger.js';
+
+const arg = process.argv[2];
+
+if (arg === '--help' || arg === '-h') {
+  printBanner();
+  console.log('  Usage:  npx abc-scaffold [project-name]\n');
+  console.log('  Scaffolds a Hardhat + React blockchain project.\n');
+  console.log('  If project-name is omitted you will be prompted.\n');
+  process.exit(0);
+}
+
+printBanner();
+scaffold(arg);

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "abc-scaffold",
+  "version": "1.0.0",
+  "description": "Africa's Blockchain Club — project-agnostic blockchain scaffolding tool",
+  "author": "Africa's Blockchain Club",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "abc-scaffold": "bin/abc-scaffold.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "start": "node bin/abc-scaffold.js"
+  },
+  "keywords": [
+    "hardhat",
+    "blockchain",
+    "scaffold",
+    "ethereum",
+    "smart-contracts",
+    "africa",
+    "web3",
+    "erc4337",
+    "openzeppelin"
+  ],
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/logger.js

@@ -0,0 +1,16 @@
+import chalk from 'chalk';
+
+export function printBanner() {
+  console.log('');
+  console.log(chalk.yellow('╔══════════════════════════════════════════════╗'));
+  console.log(chalk.yellow('║') + chalk.bold.green("      Africa's Blockchain Club              ") + chalk.yellow('║'));
+  console.log(chalk.yellow('║') + chalk.cyan('         abc-scaffold  v1.0.0               ') + chalk.yellow('║'));
+  console.log(chalk.yellow('╚══════════════════════════════════════════════╝'));
+  console.log('');
+}
+
+export const step  = (msg) => console.log('\n' + chalk.bold.blue('▶ ' + msg));
+export const success = (msg) => console.log(chalk.green('  ✔ ') + msg);
+export const info  = (msg) => console.log(chalk.cyan('  → ') + msg);
+export const warn  = (msg) => console.log(chalk.yellow('  ⚠ ') + msg);
+export const error = (msg) => console.log(chalk.red('  ✖ ') + msg);

package/src/scaffold.js

@@ -0,0 +1,341 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createInterface } from 'readline';
+import fse from 'fs-extra';
+import chalk from 'chalk';
+import * as logger from './logger.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname  = path.dirname(__filename);
+const TEMPLATES  = path.join(__dirname, '..', 'templates');
+
+function prompt(question) {
+  return new Promise((resolve) => {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(question, (answer) => { rl.close(); resolve(answer.trim()); });
+  });
+}
+
+function isValidName(name) {
+  return /^[a-z0-9][a-z0-9\-_]*$/.test(name);
+}
+
+function copyTemplate(filename, targetDir) {
+  fse.copySync(path.join(TEMPLATES, filename), path.join(targetDir, filename));
+  logger.success(filename);
+}
+
+function buildReadme(projectName) {
+  return `# ${projectName}
+
+> Scaffolded with [abc-scaffold](https://github.com/africas-blockchain-club/abc-scaffold) by **Africa's Blockchain Club**
+
+A project-agnostic Hardhat workspace ready for smart contract development, testing, and frontend integration. Build anything — NFTs, DeFi protocols, DAOs, smart accounts, or any on-chain application.
+
+---
+
+## Prerequisites
+
+| Tool | Version |
+|------|---------|
+| Node.js | >= 18.0.0 |
+| npm | >= 9.0.0 |
+| MetaMask | Latest |
+
+---
+
+## Getting Started
+
+### 1. Install dependencies
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 2. Set up environment variables
+
+\`\`\`bash
+cp .env.example .env
+\`\`\`
+
+Fill in your values in \`.env\`:
+
+- \`SEPOLIA_RPC_URL\` — get one free from [Infura](https://infura.io) or [Alchemy](https://alchemy.com)
+- \`PRIVATE_KEY\` — your deployer wallet private key (**never commit this file**)
+- \`ETHERSCAN_API_KEY\` — for contract verification on [Etherscan](https://etherscan.io)
+
+### 3. Compile contracts
+
+\`\`\`bash
+npm run compile
+\`\`\`
+
+### 4. Run tests
+
+\`\`\`bash
+npm test
+\`\`\`
+
+### 5. Start a local Hardhat node
+
+\`\`\`bash
+npx hardhat node
+\`\`\`
+
+### 6. Deploy contracts locally
+
+\`\`\`bash
+npx hardhat run scripts/deploy.js --network localhost
+\`\`\`
+
+### 7. Start the frontend
+
+\`\`\`bash
+cd frontend
+npm install
+npm run dev
+# → http://localhost:5173
+\`\`\`
+
+---
+
+## Directory Structure
+
+\`\`\`
+${projectName}/
+├── contracts/          # Solidity smart contracts
+├── scripts/            # Deployment and utility scripts
+├── test/               # Hardhat test files
+├── frontend/           # React + Vite frontend
+│   └── src/
+│       ├── App.jsx
+│       └── components/
+│           └── Navbar.jsx   ← Connect Wallet button lives here
+├── hardhat.config.js   # Hardhat configuration
+├── .env.example        # Environment variable template
+└── README.md
+\`\`\`
+
+---
+
+## Writing Smart Contracts
+
+Place your Solidity files in \`contracts/\`. The config targets Solidity \`0.8.26\` with the Cancun EVM and the optimizer enabled (200 runs).
+
+**Example** — \`contracts/MyContract.sol\`:
+
+\`\`\`solidity
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.26;
+
+contract MyContract {
+    // Your logic here
+}
+\`\`\`
+
+### Included libraries
+
+| Package | Use case |
+|---------|----------|
+| \`@openzeppelin/contracts\` | ERC-20, ERC-721, ERC-1155, access control, etc. |
+| \`@openzeppelin/contracts-upgradeable\` | UUPS / Transparent proxy upgradeable variants |
+| \`@openzeppelin/hardhat-upgrades\` | Deploy and upgrade helper tasks |
+| \`@account-abstraction/contracts\` | ERC-4337 interfaces and EntryPoint |
+
+---
+
+## Writing Tests
+
+Place test files in \`test/\`. Hardhat ships with Mocha + Chai.
+
+**Example** — \`test/MyContract.test.js\`:
+
+\`\`\`javascript
+const { expect } = require('chai');
+const { ethers } = require('hardhat');
+
+describe('MyContract', function () {
+  it('should deploy successfully', async function () {
+    const MyContract = await ethers.getContractFactory('MyContract');
+    const contract = await MyContract.deploy();
+    expect(await contract.getAddress()).to.not.equal(ethers.ZeroAddress);
+  });
+});
+\`\`\`
+
+---
+
+## Writing Deployment Scripts
+
+**Example** — \`scripts/deploy.js\`:
+
+\`\`\`javascript
+const { ethers } = require('hardhat');
+
+async function main() {
+  const [deployer] = await ethers.getSigners();
+  console.log('Deploying from:', deployer.address);
+
+  const MyContract = await ethers.getContractFactory('MyContract');
+  const contract = await MyContract.deploy();
+  await contract.waitForDeployment();
+
+  console.log('MyContract deployed to:', await contract.getAddress());
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});
+\`\`\`
+
+---
+
+## Networks
+
+| Network | RPC | Chain ID |
+|---------|-----|----------|
+| Hardhat (local) | \`http://127.0.0.1:8545\` | 31337 |
+| Sepolia (testnet) | \`SEPOLIA_RPC_URL\` in \`.env\` | 11155111 |
+
+---
+
+## Verifying Contracts
+
+\`\`\`bash
+npx hardhat verify --network sepolia <CONTRACT_ADDRESS> <CONSTRUCTOR_ARGS>
+\`\`\`
+
+---
+
+## Frontend
+
+The \`frontend/\` folder is a Vite + React app with:
+
+- A sticky navigation bar with a **Connect Wallet** button (MetaMask / EIP-1193)
+- Ethers.js v6 already wired up
+
+### Connecting to a deployed contract
+
+Copy the ABI from \`artifacts/contracts/YourContract.sol/YourContract.json\` and import it:
+
+\`\`\`javascript
+import { BrowserProvider, Contract } from 'ethers';
+import MyContractABI from '../../artifacts/contracts/MyContract.sol/MyContract.json';
+
+const CONTRACT_ADDRESS = '0x...';
+
+async function interact() {
+  const provider = new BrowserProvider(window.ethereum);
+  const signer   = await provider.getSigner();
+  const contract = new Contract(CONTRACT_ADDRESS, MyContractABI.abi, signer);
+  // call contract methods here
+}
+\`\`\`
+
+---
+
+## Resources
+
+- [Hardhat Docs](https://hardhat.org/docs)
+- [Solidity Docs](https://docs.soliditylang.org)
+- [OpenZeppelin Docs](https://docs.openzeppelin.com)
+- [EIP-4337 (Account Abstraction)](https://eips.ethereum.org/EIPS/eip-4337)
+- [Ethers.js v6 Docs](https://docs.ethers.org/v6)
+- [Vite Docs](https://vitejs.dev)
+
+---
+
+*Built with Africa's Blockchain Club — scaffold your next project with \`npx abc-scaffold\`.*
+`;
+}
+
+function scaffoldFrontend(frontendDir, projectName) {
+  fse.ensureDirSync(path.join(frontendDir, 'src', 'components'));
+  fse.copySync(path.join(TEMPLATES, 'frontend'), frontendDir);
+
+  // Substitute project name in index.html
+  const htmlPath = path.join(frontendDir, 'index.html');
+  const html = fs.readFileSync(htmlPath, 'utf-8').replace(/{{PROJECT_NAME}}/g, projectName);
+  fs.writeFileSync(htmlPath, html);
+
+  logger.success('frontend/ (React + Vite + Connect Wallet)');
+}
+
+export async function scaffold(initialName) {
+  let projectName = initialName;
+
+  if (!projectName) {
+    projectName = await prompt(chalk.bold('? Project name: '));
+  }
+
+  if (!projectName) {
+    logger.error('Project name is required.');
+    process.exit(1);
+  }
+
+  // Normalise: lowercase, spaces → hyphens
+  projectName = projectName.trim().toLowerCase().replace(/\s+/g, '-');
+
+  if (!isValidName(projectName)) {
+    logger.error(`"${projectName}" is not a valid package name. Use lowercase letters, numbers, hyphens, or underscores.`);
+    process.exit(1);
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(targetDir)) {
+    logger.error(`Directory "${projectName}" already exists. Choose a different name or delete it first.`);
+    process.exit(1);
+  }
+
+  // ── Create directory structure ──────────────────────────────────────────────
+  logger.step('Creating project structure');
+
+  fs.mkdirSync(targetDir, { recursive: true });
+
+  for (const dir of ['contracts', 'scripts', 'test']) {
+    fs.mkdirSync(path.join(targetDir, dir), { recursive: true });
+    logger.success(`${dir}/`);
+  }
+
+  // ── Copy configuration files ────────────────────────────────────────────────
+  logger.step('Copying configuration files');
+
+  copyTemplate('hardhat.config.js', targetDir);
+  copyTemplate('.env.example', targetDir);
+  copyTemplate('.gitignore', targetDir);
+
+  // package.json — substitute project name
+  const pkgTemplate = fs.readFileSync(path.join(TEMPLATES, 'package.json'), 'utf-8');
+  fs.writeFileSync(
+    path.join(targetDir, 'package.json'),
+    pkgTemplate.replace('"{{PROJECT_NAME}}"', `"${projectName}"`)
+  );
+  logger.success('package.json');
+
+  // ── Generate README ─────────────────────────────────────────────────────────
+  logger.step('Generating README.md');
+  fs.writeFileSync(path.join(targetDir, 'README.md'), buildReadme(projectName));
+  logger.success('README.md');
+
+  // ── Scaffold React frontend ─────────────────────────────────────────────────
+  logger.step('Scaffolding React frontend');
+  scaffoldFrontend(path.join(targetDir, 'frontend'), projectName);
+
+  // ── Done ────────────────────────────────────────────────────────────────────
+  console.log('');
+  console.log(chalk.bold.green('✨  Project scaffolded!'));
+  console.log('');
+  console.log('  Next steps:');
+  console.log(chalk.cyan(`  cd ${projectName}`));
+  console.log(chalk.cyan('  npm install') + chalk.gray('                    # install root dependencies'));
+  console.log(chalk.cyan('  cp .env.example .env') + chalk.gray('           # fill in your keys'));
+  console.log(chalk.cyan('  npm run compile') + chalk.gray('                # compile contracts'));
+  console.log(chalk.cyan('  cd frontend && npm install') + chalk.gray('     # install frontend dependencies'));
+  console.log(chalk.cyan('  npm run dev') + chalk.gray('                    # start the UI'));
+  console.log('');
+  console.log(chalk.gray('  Docs → see README.md'));
+  console.log('');
+}

package/templates/.env.example

@@ -0,0 +1,4 @@
+# Example .env file - Duplicate this file to '.env' and fill in your values
+SEPOLIA_RPC_URL="https://sepolia.infura.io/v3/YOUR_INFURA_KEY"
+PRIVATE_KEY="YOUR_WALLET_PRIVATE_KEY"
+ETHERSCAN_API_KEY="YOUR_ETHERSCAN_API_KEY"

package/templates/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/frontend/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ethers": "^6.16.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.0"
+  }
+}

package/templates/frontend/src/App.css

@@ -0,0 +1,93 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: #0d0d1a;
+  color: #e2e2e2;
+  min-height: 100vh;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Main content ── */
+.main {
+  flex: 1;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 5rem 2rem;
+  width: 100%;
+}
+
+/* ── Hero ── */
+.hero {
+  text-align: center;
+}
+
+.hero h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  color: #ffffff;
+  margin-bottom: 0.75rem;
+  letter-spacing: -0.5px;
+}
+
+.subtitle {
+  font-size: 1.1rem;
+  color: #e94560;
+  margin-bottom: 3.5rem;
+  font-weight: 500;
+}
+
+/* ── Cards ── */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.card {
+  background-color: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  border-radius: 12px;
+  padding: 1.75rem 1.5rem;
+  text-align: left;
+  transition: border-color 0.2s ease, transform 0.2s ease;
+}
+
+.card:hover {
+  border-color: #e94560;
+  transform: translateY(-3px);
+}
+
+.card h3 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 0.6rem;
+}
+
+.card p {
+  font-size: 0.9rem;
+  color: #9090a8;
+  line-height: 1.5;
+}
+
+.card code {
+  background-color: #0d0d1a;
+  color: #e94560;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  font-family: 'Fira Code', 'Cascadia Code', monospace;
+}

package/templates/frontend/src/App.jsx

@@ -0,0 +1,37 @@
+import Navbar from './components/Navbar.jsx';
+import './App.css';
+
+function App() {
+  return (
+    <div className="app">
+      <Navbar />
+      <main className="main">
+        <div className="hero">
+          <h1>Your Blockchain Project</h1>
+          <p className="subtitle">Scaffolded by Africa's Blockchain Club</p>
+
+          <div className="cards">
+            <div className="card">
+              <h3>📄 Write Contracts</h3>
+              <p>Add your Solidity files to <code>contracts/</code></p>
+            </div>
+            <div className="card">
+              <h3>⚙️ Compile</h3>
+              <p>Run <code>npm run compile</code> in the project root</p>
+            </div>
+            <div className="card">
+              <h3>🚀 Deploy</h3>
+              <p>Add a script to <code>scripts/</code> and run it with Hardhat</p>
+            </div>
+            <div className="card">
+              <h3>🔗 Connect</h3>
+              <p>Use the wallet button above to connect MetaMask, then interact with your contracts</p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/templates/frontend/src/components/Navbar.css

@@ -0,0 +1,90 @@
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  background-color: #1a1a2e;
+  border-bottom: 1px solid #2a2a4a;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+/* ── Brand ── */
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  text-decoration: none;
+}
+
+.navbar-logo {
+  font-size: 1.4rem;
+  line-height: 1;
+}
+
+.navbar-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #e94560;
+  letter-spacing: 0.3px;
+}
+
+/* ── Actions ── */
+.navbar-actions {
+  display: flex;
+  align-items: center;
+}
+
+/* Connect button */
+.connect-btn {
+  background-color: #e94560;
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.55rem 1.3rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.18s ease, transform 0.12s ease;
+  white-space: nowrap;
+}
+
+.connect-btn:hover:not(:disabled) {
+  background-color: #c73652;
+  transform: translateY(-1px);
+}
+
+.connect-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.connect-btn:disabled {
+  background-color: #555566;
+  cursor: not-allowed;
+}
+
+/* Connected badge */
+.wallet-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: #0f3460;
+  border: 1px solid #e94560;
+  border-radius: 8px;
+  padding: 0.45rem 1rem;
+}
+
+.wallet-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #4caf50;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.wallet-address {
+  color: #e2e2e2;
+  font-family: 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 0.875rem;
+}

package/templates/frontend/src/components/Navbar.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { BrowserProvider } from 'ethers';
+import './Navbar.css';
+
+export default function Navbar() {
+  const [account, setAccount]     = useState(null);
+  const [connecting, setConnecting] = useState(false);
+
+  async function connectWallet() {
+    if (!window.ethereum) {
+      alert('MetaMask is not installed. Please install it at https://metamask.io');
+      return;
+    }
+
+    setConnecting(true);
+    try {
+      const provider = new BrowserProvider(window.ethereum);
+      const accounts = await provider.send('eth_requestAccounts', []);
+      setAccount(accounts[0]);
+    } catch (err) {
+      console.error('Wallet connection rejected:', err);
+    } finally {
+      setConnecting(false);
+    }
+  }
+
+  function truncate(addr) {
+    return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+  }
+
+  return (
+    <nav className="navbar">
+      <div className="navbar-brand">
+        <span className="navbar-logo">🔗</span>
+        <span className="navbar-title">Africa's Blockchain Club</span>
+      </div>
+
+      <div className="navbar-actions">
+        {account ? (
+          <div className="wallet-badge">
+            <span className="wallet-dot" />
+            <span className="wallet-address">{truncate(account)}</span>
+          </div>
+        ) : (
+          <button
+            className="connect-btn"
+            onClick={connectWallet}
+            disabled={connecting}
+          >
+            {connecting ? 'Connecting…' : 'Connect Wallet'}
+          </button>
+        )}
+      </div>
+    </nav>
+  );
+}

package/templates/frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './App.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/hardhat.config.js

@@ -0,0 +1,33 @@
+require("@nomicfoundation/hardhat-toolbox");
+require("@openzeppelin/hardhat-upgrades");
+require("dotenv").config();
+
+module.exports = {
+  solidity: {
+    compilers: [
+      {
+        version: "0.8.26",
+        settings: {
+          evmVersion: "cancun",
+          optimizer: { enabled: true, runs: 200 }
+        }
+      }
+    ]
+  },
+  networks: {
+    localhost: {
+      url: "http://127.0.0.1:8545"
+    },
+    hardhat: {},
+    sepolia: {
+      url: process.env.SEPOLIA_RPC_URL || "",
+      accounts: process.env.PRIVATE_KEY ? [process.env.PRIVATE_KEY] : []
+    }
+  },
+  etherscan: {
+    apiKey: process.env.ETHERSCAN_API_KEY || ""
+  },
+  sourcify: {
+    enabled: true
+  }
+};

package/templates/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "description": "Project agnostic blockchain repo",
+  "main": "index.js",
+  "scripts": {
+    "compile": "hardhat compile",
+    "test": "hardhat test"
+  },
+  "devDependencies": {
+    "@nomicfoundation/hardhat-toolbox": "^5.0.0",
+    "dotenv": "^16.4.5"
+  },
+  "dependencies": {
+    "@account-abstraction/contracts": "^0.6.0",
+    "@openzeppelin/contracts": "^5.0.2",
+    "@openzeppelin/contracts-upgradeable": "^5.4.0",
+    "@openzeppelin/hardhat-upgrades": "^3.9.1",
+    "cors": "^2.8.6",
+    "ethers": "^6.16.0",
+    "express": "^5.2.1",
+    "hardhat": "^2.19.4"
+  }
+}