This project is a simple ERC721 (ethereum) NFT minting contract & user interface. It uses IPFS Protocol to create unique CIDs that point to the NFT data, it then stores this information on Filecoin for reliable & persistent storage.
It takes advantage of the very handy IPFS & Filecoin dev ecosystem tool NFT.Storage to make doing this easy (& free!).
The DApp UI is deployed on fleek.co. Fleek makes it easy to deploy websites and apps on the new open web: permissionless, trustless, censorship resistant, and free of centralized gatekeepers.
Please make sure you only use Rinkeby Testnet ETH for this! It is ONLY deployed on testnet!!!!!!
You can see the project live here: https://shrill-wave-1303.on.fleek.co/
There is a video presentation walking through the main features of NFT.Storage here: https://www.youtube.com/watch?v=bIZNW_c6Hx4
Be aware the way I am storing the svg in the front-end is not secure. It's easily hackable. The main point of the repo is really to show how easy it is to use NFT.storage to save and retrieve files, as well as how easy it is to use Fleek as your decentralised front end server (instead of, say, netlify or vercel).
I'll be doing some updates on this package in future to build on it and ensure more security, Please make sure you only use Rinkeby Testnet ETH for this!
Thanks to Buildspace.so for the initial styling on this app
- Clone the project & move to project directory
>git clone https://github.com/DeveloperAlly/filecoin_nft_starter.git && cd filecoin-nft-starter - Create a .env file in the root
>touch .env - Get an NFT.Storage API key https://nft.storage/ and add this to the .env
- Add your rinkeby blockchain server api and url to the .env file (ive used alchemy here, though moralis & infura are also awesome)
- Install packages
>npm install - Deploy the solidity contract to the rinkeby testnet using hardhat
>npx hardhat run scripts/deploy.js --network rinkeby - Add your contract address to the .env file
- Run your front end in dev mode
>npm startOR deploy with Fleek https://fleek.co/
Dev Things (contracts):
- Solidity
- Hardhat
- Alchemy
Ways to save your NFT SVG
- You can save it in the contract itself
- You can save it as an IPFS CID
- You can use web2... (we wouldn't do that though would we!)
Run contract: npx hardhat
run scripts/run.js
Deploy contract to rinkeby: npx hardhat run scripts/deploy.js --network rinkeby
Running the front end localy (or host on Fleek) npm install && npm start
To make this project from scratch:
Dependencies: Node installed. Metamask, https://metamask.io/download.html Alchemy server details (or infura/moralis), etherscan account (for verifying contract)
Setup from scratch instead:
npx create-react-app my-app-name cd my-app-name npm install --save-dev hardhat npx hardhat (to get a sample project - choose basic project so we get all the folders. Choose no to gitignore and y to dependencies)
install dependencies:
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers @nomiclabs/hardhat-etherscan @openzeppelin/contracts npm install ethers dotenv
Tasks - development of contract
touch .env add .env to the .gitignore file rm ./contracts/Greeter.sol rm ./scripts/sample-script.js
touch ./contracts/FilecoinNFTHack.sol touch ./scripts/run.js touch ./scripts/deploy.js
Write solidity contract Write run.js and test your contract
npx hardhat run scripts/run.js
Tasks - Deployment of Solidity contract Sign up for Moralis and get a QuickNode Add it to hardhat config Sign up for etherscan / get an API key & add it to hardhat.config networks: { rinkeby: { url: process.env.MORALIS_RINKEBY_API_URL, accounts: [process.env.METAMASK_RINKEBY_PRIVATE_KEY], }, }, etherscan: { // Your API key for Etherscan // Obtain one at https://etherscan.io/ apiKey: process.env.ETHERSCAN_API_KEY, }
npx hardhat run scripts/deploy.js --network rinkeby
Tasks - development of front end
- create a utils folder and put the deployed contract ABI json here
Tasks - deployment of front end
- Use Fleek.co
Resources
- Read the IPFS best practice guide for NFT's https://docs.ipfs.io/how-to/mint-nfts-with-ipfs/#a-short-introduction-to-nfts
- See the NFT.School guide https://nftschool.dev/
- Public Gateway status checker: https://ipfs.github.io/public-gateway-checker/
- Faucets for rinkeby eth: https://faucets.chain.link/rinkeby