Tanaka Stake

Production-inspired NFT staking dApp built with React, TypeScript, Solidity, wagmi, viem, RainbowKit, TailwindCSS, and The Graph.

Live Demo: Tanaka Stake
Repository: NftCollection-UI

Screenshots

Mint UI

Staking UI

Admin UI

Features

NFT Minting

• Public mint
• Whitelist mint using Merkle proofs
• Dynamic mint mode selection
• Quantity-based total cost calculation
• Admin-controlled mint phases

NFT Staking

• Stake owned TNFTs
• Unstake staked TNFTs
• Claim GOV rewards
• Total staked metric
• Reward-per-second accounting

Admin Features

• Toggle public mint
• Toggle whitelist mint
• Pause / unpause collection
• Set treasury recipient
• Generate Merkle root
• Export whitelist proofs JSON
• Update staking reward rate
• Grant / revoke REWARD_MANAGER_ROLE

Frontend / UX

• Wallet connection with RainbowKit
• Sepolia network guard
• Toast-based transaction feedback
• Dark / light mode
• Responsive UI
• The Graph powered NFT ownership sync

---

Tech Stack

Frontend

• React
• TypeScript
• Vite
• TailwindCSS v4
• RainbowKit
• wagmi v2
• viem
• TanStack Query

Backend / Infrastructure

• Solidity
• Foundry
• The Graph Studio

---

Architecture

Smart Contracts

NFTCollection

ERC721A NFT collection with:

• Public + whitelist minting
• ERC2981 royalties
• Pause functionality
• Merkle whitelist verification

NFTStaking

NFT staking contract with:

• Reward-per-second accounting
• Accumulated reward-per-share model
• Multi-user staking support
• AccessControl roles

GovernanceToken

ERC20 reward token with minting permissions controlled via roles.

Reward Accounting Model

Rewards are distributed using an accumulated reward-per-share accounting model:

• accRewardPerShare
• rewardDebt
• pendingRewards

This allows scalable reward distribution across multiple stakers without iterating over users.

---

Deployed Contracts — Sepolia

NFTCollection: 0x6CA691947f144b33135889b7855e47D30a56c90F
GovernanceToken: 0x380E2C6613d99461f47e522f3DE17914d46e2546
NFTStaking: 0x8D2a23889f0A677Ee13C2E66f16aA931AeaE25A5

---

Indexing

Indexing

NFT ownership is indexed with The Graph using Transfer events.

Current subgraph:

type Account @entity {
  id: Bytes!
  tokens: [Token!]! @derivedFrom(field: "owner")
}

type Token @entity {
  id: String!
  tokenId: BigInt!
  owner: Account!
}

Frontend query:

  tokens(where: { owner: $owner }) {
    tokenId
  }
}

---

Environment Variables

VITE_SEPOLIA_RPC_URL=
VITE_SEPOLIA_WSS_URL=
VITE_SUBGRAPH_URL=
VITE_WALLETCONNECT_PROJECT_ID=

---

Local Development

npm install
npm run dev

Production Build

npm run build

---

Known Limitations

• Contracts are not upgradeable
• Ownership indexing depends on The Graph sync speed
• No backend caching layer
• Designed for Sepolia/demo usage
• Public mint toggle does not emit a dedicated event; frontend uses refetch/polling fallback.

---

Security Notes

• The app is deployed on Sepolia testnet.
• Users should not interact with unknown contracts using mainnet assets.
• Staking requires NFT approval for the staking contract.