Wagmi Distributor App

A small React + TypeScript + Vite app that deploys a Merkle-based Distributor contract and a mintable GoldToken, wires them up, and lets you test claims. Built with wagmi, viem, and RainbowKit. Default network is Base Sepolia.

Prerequisites

• Node.js 18+ (Node 20+ recommended)
• A wallet with Base Sepolia funds (e.g. via RainbowKit/WalletConnect)

Install

npm install

Configure environment

Create a .env file in the project root:

VITE_WC_PROJECT_ID=your_walletconnect_cloud_project_id
# Optional: override the default RPC
# VITE_RPC_URL=https://sepolia.base.org

• VITE_WC_PROJECT_ID is required for WalletConnect-based wallets. Create one at WalletConnect Cloud.
• If VITE_RPC_URL is not provided, the app uses Base Sepolia’s public RPC.

Run locally

npm run dev

Open the URL printed by Vite (typically http://localhost:5173).

How to use

1. Connect your wallet (top of the page).

2. Click “Deploy All (3 steps)”. You will confirm three txs in your wallet:

   • Deploy Distributor
   • Deploy GoldToken(admin, distributor)
   • Call Distributor.setToken(gold)

   After the third tx is mined, the app refetches on-chain values and shows:

   • Distributor.token() and mintableToken() (both should equal the Gold address)
   • MINTER_ROLE value and hasRole(MINTER_ROLE, distributor) (should be true)

3. Set Merkle Root (optional at first):

   • Input a 32-byte hex (format 0x + 64 hex chars) and click “setMerkleRoot”.

4. Test a Claim:

   • Fill Account, Cumulative Amount (wei), Expected Merkle Root.
   • Paste Merkle Proof either as CSV or JSON array.
     • CSV example: 0xaaaa...,0xbbbb...,0xcccc...
     • JSON array example: ["0xaaaa...","0xbbbb...","0xcccc..."]
   • Click “Claim”. On success, cumulativeClaimed for the account increases.

Common pitfalls

• Distributor.token() shows 0x000…: wait a moment and it should refresh automatically. If it persists, verify the setToken tx succeeded and that you’re on Base Sepolia.
• Merkle proof errors like “bytes69 does not match bytes32”: ensure each proof element is exactly 0x + 64 hex chars. The app now accepts CSV or JSON arrays and validates each element.
• Wrong network: confirm your wallet is on Base Sepolia. You can customize RPC via VITE_RPC_URL.

Build & preview

npm run build
npm run preview

Contracts

• src/contracts/Distributor.sol: Merkle-based distributor that mints via an IERC20Mintable token, with setToken, setMerkleRoot, and claim.
• src/contracts/GoldToken.sol: ERC20 capped token granting MINTER_ROLE to admin and the distributor on deploy.

Notes

• This app is for demo/testing. Review and audit before mainnet use.
• Default chain is Base Sepolia. You can point it elsewhere by changing chains in src/wagmiConfig.tsx and RPC in .env.