Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaymen99/kryptopunks-nft-staking-dapp
KryptoPunks NFTs staking dapp built on the polygon network
https://github.com/kaymen99/kryptopunks-nft-staking-dapp
etherjs farming hardhat nft-staking nfts reactjs solidity staking staking-app
Last synced: 2 months ago
JSON representation
KryptoPunks NFTs staking dapp built on the polygon network
- Host: GitHub
- URL: https://github.com/kaymen99/kryptopunks-nft-staking-dapp
- Owner: kaymen99
- License: mit
- Created: 2022-08-05T22:36:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T11:44:44.000Z (over 1 year ago)
- Last Synced: 2023-12-19T16:05:50.086Z (about 1 year ago)
- Topics: etherjs, farming, hardhat, nft-staking, nfts, reactjs, solidity, staking, staking-app
- Language: JavaScript
- Homepage:
- Size: 829 KB
- Stars: 26
- Watchers: 2
- Forks: 43
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://docs.soliditylang.org/)
* [Hardhat](https://hardhat.org/getting-started/)
* [React.js](https://reactjs.org/)
* [ethers.js](https://docs.ethers.io/v5/)
* [web3modal](https://github.com/Web3Modal/web3modal)
* [material ui](https://mui.com/getting-started/installation/)
Table of Contents
## 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 :
- KryptoPunksToken.sol :
- NFTStakingVault.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.
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.
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):
## How to Run
### Prerequisites
Please install or have installed the following:
* [nodejs](https://nodejs.org/en/download/) and [yarn](https://classic.yarnpkg.com/en/)
* [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn) Chrome extension installed in your browser
* [Ganache](https://trufflesuite.com/ganache/) for local smart contracts deployement and testing.
Clone this repo with the command :
```sh
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 :
```sh
cd smart_contracts
yarn
```
Next you need to setup the environement variables in the .env file, this are used when deploying the contracts :
```sh
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:
```sh
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:
```sh
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:
```sh
yarn test
```
### Front end
To start the user interface just run the following commands :
```sh
cd front-end
yarn
yarn start
```
## Contact
If you have any question or problem running this project just contact me: [email protected]
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.