ERC721 token mint and staking, claim, unstaking. This is a modern NFT project by forking KryptoPunks. This dapp allows users to mint their KryptoPunks NFT and stake them to receive staking rewards in the form of our own ERC20 token named KryptoNFTToken (KPT).
solidity build, deploy, verify
frontend
This is a modern NFT project, the dapp allows users to mint their KryptoPunks NFT and stake them to receive staking rewards in the form of our own ERC20 token named KryptoPunkToken (KPT).
Table of Contents
The contracts development and testing is done using the Hardhat framework in the smart_contracts folder, for this project there are 3 main contracts :
- KryptoPunks.sol : This is the NFT collection contract, i used the ERC721A standard because it has lower gas usage for multiple NFT mint in the same transaction, the contract will allow user to mint items from the collection which are allowed to be staked in the NFT vault.
- KryptoPunksToken.sol : The KryptoPunksToken or KPT is the ERC20 token used for distributing staking rewards, it's completly controlled by the stakingVault contract which is the only address allowed to mint new tokens to stakers.
- NFTStakingVault.sol : The staking vault contract is at the center of this application, it allows users to stake their KryptoPunks items and calculate the KPT rewards accumulated for each item based on the staking period. When a user wants to unstake or claim the accrued rewards from his NFTs, the contract is responsible for minting the KPT tokens to the user by calling the KryptoPunksToken contract.
The architecture of the application is illustrated in the diagram below :
The front end is built with React JS, it allows users to mint new KryptoPunks nfts and stake them in the vault for receiving KPT rewards over time, the app also give a simple admin dashboard for setting minting prices and maximum NFTs minted per tx.
The front-end is built using the following libraries:
- Ethers.js: used as interface between the UI and the deployed smart contract
- Web3modal: for conecting to Metamask
- @reduxjs/toolkit & redux-persist: for managing the app states (account, balance, blockchain)
- Material UI: used for react components and styles
The home page is a modern NFT landing page that explains the KryptoPunks project and it's progression roadmap :
The mint page allows user to mint new KryptoPunks and it contains all the information about the NFT collection (total supply, minting cost,...), and the details about the nfts held by the user (items owned, items staked, total reward accumulated,...).
On this page the user also finds a list of all the items he owns, which can be directly staked & unstaked from there and claim the reward that was accrued :
The dashboard can only be accessed by the nft contract owner from the account window by clicking on the account button in the top of the page, it gives the owner the possibility of withdraw the contract balance, changing nft minting parametres or changing contract state (paused):
Please install or have installed the following:
- nodejs and yarn
- MetaMask Chrome extension installed in your browser
- Ganache for local smart contracts deployement and testing.
Clone this repo with the command :
git clone https://github.com/kaymen99/KryptoPunks-nft-staking-dapp.git
cd KryptoPunks-nft-staking-dapp
As mentioned before the contracts are developed with the Hardhat framework, before deploying them you must first install the required dependancies by running :
cd smart_contracts
yarn
Next you need to setup the environement variables in the .env file, this are used when deploying the contracts :
POLYGONSCAN_API_KEY = 'your polygonscan api key'
POLYGON_RPC_URL="Your polygon RPC url from alchemy or infura"
MUMBAI_RPC_URL="Your mumbai RPC url from alchemy or infura"
PRIVATE_KEY="your private key"
- NOTE : Only the private key is needed when deploying to the ganache network, the others variables are for deploying to the testnets or real networks and etherscan api key is for verifying your contracts on polygon etherscan.
After going through all the configuration step, you'll need to deploy the 3 contracts to the ganache network by running:
yarn deploy --network ganache
This will create a config.js file and an artifacts folder and transfer them to the src folder to enable the interaction between the contract and the UI
-
IMPORTANT : I used the ganache network for development purposes only, you can choose another testnet or real network if you want, for that you need to add it to the hardhat.config file for example for the mumbai testnet:
mumbai: { url: MUMBAI_RPC_URL, accounts: [process.env.PRIVATE_KEY], chainId: 80001, }
If you want to test the vault/NFT contracts or the staking process, you can do it by running:
yarn test
To start the user interface just run the following commands :
cd front-end
yarn
yarn start
If you have any question or problem running this project just contact me: [email protected]
Distributed under the MIT License. See LICENSE.txt
for more information.