◆nav.brand
docs.title/Staking / Yield dApp

Staking / Yield dApp

Stake a token, earn rewards per second, claim

docs.viewTemplate

docs.h.overview

A staking front end plus a Synthetix-style rewards contract. Users stake your token (or the native coin), accrue rewards every second, and withdraw or claim. TVL, estimated APR and pending rewards update live. A clean starting point to adapt and audit.

Staking dApp pairs a clear dashboard — TVL, estimated APR, your staked balance, live pending rewards — with a rewards-per-second staking contract in the Synthetix mould: approve, stake, withdraw any time, claim, or exit (withdraw all + claim) in a couple of clicks.

The staking and reward assets are configurable: stake an ERC-20 or the chain's native coin, and reward in any ERC-20 or native coin. The owner funds the reward pool and sets the reward rate; the setup wizard wires the tokens, deploys from your wallet and helps you fund rewards.

The contract is shipped as a readable example — it emits a fixed amount of reward per second split across stakers (so the effective APR moves with TVL) and has no schedule or cap. Treat it as a foundation to extend and audit before mainnet, not a finished yield strategy.

docs.h.included

  • Next.js app (App Router, TypeScript, Tailwind)
  • StakingRewards.sol + Hardhat
  • Setup wizard with in-browser deploy and a fund-rewards step
  • Dockerfile + docker-compose
  • README + .env workflow

docs.h.contracts

  • StakingRewards.sol — an example Synthetix-style staking pool: stake a token (or the native coin), accrue a fixed amount of reward per second split across all stakers, and withdraw or claim any time; the owner funds the reward pool and sets the rate. A clean foundation to adapt and audit — emissions scale with TVL and there's no schedule or cap, so it's a starting point, not a production yield design (OpenZeppelin SafeERC20 + ReentrancyGuard).

docs.h.stack

docs.stackLine

docs.chainsLine

docs.h.quickstart

docs.quickstartP

unzip staking-dapp.zip && cd staking-dapp
npm install
npm run dev

docs.quickstartUrl

docs.h.configure

docs.configureP

  1. docs.wizard.1
  2. docs.wizard.2
  3. docs.wizard.3
  4. docs.wizard.4
  5. docs.wizard.5
Tip · docs.configureTip

docs.configureP2

docs.h.customize

docs.h.branding

docs.brandingP

docs.brandingP2

docs.h.languages

docs.languagesP

docs.h.editing

docs.editingP

docs.h.configRef

docs.configRefP

  • docs.configRef.1
  • docs.configRef.2
Tip · docs.configRefTip

docs.h.deployContracts

docs.deployContractsP

# 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

docs.deployContractsP2

docs.h.deployApp

docs.h.vercel

  1. docs.vercel.1
  2. docs.vercel.2
  3. docs.vercel.3

docs.h.docker

docs.dockerP

# 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 3004:3000 staking-dapp

docs.dockerP2

docs.h.vps

docs.vpsP

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

docs.h.checklist

  • docs.checklist.1
  • docs.checklist.2
  • docs.checklist.3
  • docs.checklist.4
  • docs.checklist.5

docs.h.support

docs.supportP