- Project Description
- Screencast link
- Deployed Website url
- Public Ethereum wallet
- Workflow
- Related docs
- Directory structure
- Clone, Install and Build steps
- Troubleshooting
- TODO
Utility NFT Marketplace is a marketplace where users can buy, sell and mint Unique images, which are ERC-721 standard (NFT) tokens.
The NFT images consist of 3 main characteristics, Weapon, Area of Control, and Rank.
- Weapon - Sword, Spear, Shield, Hammer, Saber, Axe, Bow, Staff, Wand, Fist, Dagger, Scythe, Mace, Blade, Katana
- Area of Control - Fire, Wind, Wave, Earth, Light, Shadow, Thunder, Space, Time, Gravity, Ice
- Rank - Lord, King, Emperor, Venerable, Ancestor, Saint, God
<<<<<<< HEAD https://youtu.be/ddcQU3dwEe8
https://www.loom.com/share/e80b24c920084a598c946a7e7bf057a2
f16e92d1107c6649490ed82f24dcc4e783e7eb51
https://utilitynftplace.vercel.app/
0x78C267869e588823F6D1660EBE6e286deE297f0a
-
User load the website address and connect their wallet, which is set to rinkeby network
-
After users have connected to the dApp, they can:
- Mint NFT
- User goes to mint page and click on the Mint NFT button.
- Metamask pops up and asks user to confirm the transaction.
- After the transaction is successfully processed the user can see the minted character.
- The minted character is also added to My NFT page under Minted NFT section. The user can see NFTs they minted.
-
Buy NFTs
- The homepage consist of NFTs listed by other users. So user can click on any NFT they want to buy.
- User will be redirected to the BuyNFT page which shows the price and other details about the NFT they clicked in step 1 .
- Click on the Buy button to buy the NFT.
- Metamask pops up and asks user to confirm the transaction for the price of the NFT.
- After the transaction is successfully processed, user is redirected to the My NFT page.
- The bought NFT is displayed under the NFT Bought From Marketplace section
-
Sell NFTs
- Go to the My NFT page and click on the Sell button under the minted NFT which user want to sell.
- User will be redirected to the SellNFT page where user can enter the price they want to sell their NFT.
- After entering the desired price, click on the Sell button to list the NFT in the market place.
- Metamask pops up and asks to confirm the transaction for the listing price.
- After the transaction is successfully processed user is redirected to the Home page.
- The NFT will be listed in the marketplace to be bought for the price entered by the user.
blockchain-developer-bootcamp-final-project
┣ client
┃ ┣ pages
┃ ┃ ┣ _app.js
┃ ┃ ┣ buynft.js
┃ ┃ ┣ index.js
┃ ┃ ┣ mint.js
┃ ┃ ┣ mynft.js
┃ ┃ ┗ sellnft.js
┃ ┣ public
┃ ┃ ┣ favicon.ico
┃ ┃ ┗ vercel.svg
┃ ┣ utils
┃ ┃ ┣ UtilityMarketplace.json
┃ ┃ ┗ UtilityNFT.json
┃ ┣ .gitignore
┃ ┣ README.md
┃ ┣ config.js
┃ ┣ package-lock.json
┃ ┣ package.json
┃ ┣ postcss.config.js
┃ ┗ tailwind.config.js
┣ contracts
┃ ┣ libraries
┃ ┃ ┗ Base64.sol
┃ ┣ UtilityMarketplace.sol
┃ ┗ UtilityNFT.sol
┣ scripts
┃ ┣ deploy.js
┃ ┗ run.js
┣ test
┃ ┗ UtilityTest.js
┣.DS_Store
┣.gitattributes
┣.gitignore
┣ README.md
┣ avoiding_common_attacks.md
┣ deployed_address.txt
┣ design_pattern_decisions.md
┣ final-project-checklist.txt
┣ hardhat.config.js
┣ package-lock.json
┗ package.json
- Git
- Node JS (everything was installed and tested under v15.12.0)
- Test Ether on the Rinkeby network.
- A Browser with the MetaMask extension installed.
- Clone my project repository and run it on your local machine
git clone https://github.com/Utilitycoder/blockchain-developer-bootcamp-final-project.git
cd blockchain-developer-bootcamp-final-project
- Installing dependencies
- For contracts -
npm install - For client -
cd client npm install
For testing contracts, run command:
npx hardhat test
For running frontend locally run command:
cd client
npm run dev
- For deploying and running the dApp against a local instance run commands:
npx hardhat node
- This should create a local network with 19 accounts. Keep it running, and in another terminal run:
npx hardhat run scripts/deploy.js --network localhost
- When the deployment is complete, the CLI should print out the addresses of the contracts that were deployed:
nftMarket contract deployed to: 'UtilityMarketplace contract address'
nft contract deployed to: 'UtilityNFT contract address'
- Copy these addresses and paste them in the config.js file inside the client floder, in place of current addresses.
export const nftMarketAddress = 'UtilityNFT contract address'
export const nftContractAddress = 'UtilityMarketplace contract address'
-
For importing account to metamask
- Import account using private key from one of the accounts that were logged on running
npx hardhat node - Create a custom network (if not already there) pointing to http://127.0.0.1:8545 with chainId 1337
- Switch to this network and connect it to the dApp and reload it.
- For better testing of the transfer of tokens and transactions import at least 2 accounts*_
- For changing chainId and other possible errors see Troubleshooting
- Import account using private key from one of the accounts that were logged on running
-
Now run the frontend locally in another terminal using command:
cd client
npm run dev
After this you can run and test the dApp locally in your web browser.
RINKEBY_URL =
PRIVATE_KEY =
The default chainId for network localhost8545 is 1337. To change the chainId, the user should follow these steps :
- Change the chainId in networks under hardhat in hardhat.config.js file.
hardhat: {
chainId: 1337,
}
- After this the user needs to change the devChainId in the _app.js file on line 61 and 86 under the functions connectWallet() and checkCorrectNetwork() respectively.
const devChainId = 1337
While testing the dApp on against a local instance, if you get the Nonce too high error in the hardhat node terminal or the UI does not show processing your transaction after confirming a transaction, try resetting your metamask account. This can be done by going to Settings > Advanced > Reset Account in Metamask.
- Using oracle for on chain randomness in generating NFTs
- Allowing Users to mint NFT from their local machine
- Letting users list NFTs that are minted from other places
- Improve the look and feel of the User Interface.
- Add other trendy features that can hook users to the service the project offers.
- Switching the account in Metamask is not handled on the website. Needs to be reloaded manually.