kaymen99 / KryptoPunks-nft-staking-dapp

KryptoPunks NFTs staking dapp built on the polygon network

KryptoPunks NFT Staking Dapp

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).

Built With

• Solidity
• Hardhat
• React.js
• ethers.js
• web3modal
• material ui

Table of Contents

1. Project structure
   • Smart Contracts
   • User interface
2. How to Run
   • Prerequisites
   • Contracts
   • Front-end
3. Contact
4. License

Project Structure

Smart contracts

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 :

User interface

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):

(back to top)

How to Run

Prerequisites

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

Contracts

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

Front end

To start the user interface just run the following commands :

cd front-end
yarn
yarn start

(back to top)

Contact

If you have any question or problem running this project just contact me: [e-mail]

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)