https://github.com/austintgriffith/scaffold-eth/tree/simple-nft-example
Required: Node plus Yarn and Git
git clone https://github.com/luigicallero/nft-ipfs-hardhat.git
cd nft-ipfs-hardhat
yarn install
yarn start
in a second terminal window:
cd simple-nft-example
yarn chain
in a third terminal window:
cd simple-nft-example
yarn deploy
📱 Open http://localhost:3000 to see the app
✏️ Edit the mint script mint.js in packages/hardhat/scripts and update the toAddress to your frontend address (wallet address in the top right or localhost:3000).
in a terminal window run the mint script:
yarn mint
👀 You should see your collectibles show up if you minted to the correct address:
👛 Open an incognito window and navigate to http://localhost:3000 (You'll notice it has a new wallet address).
⛽️ Grab some gas for each account using the faucet:
🎟 Send an NFT to the incognito window address:
🕵🏻♂️ Inspect the Debug Contracts
tab to figure out what address is the owner
of YourCollectible
?
💼 Edit your deployment script deploy.js
in packages/hardhat/scripts
🔏 Edit your smart contract YourCollectible.sol
in packages/hardhat/contracts
📝 Edit your frontend App.jsx
in packages/react-app/src
🔑 Create wallet links to your app with yarn wallet
and yarn fundedwallet
⬇️ Installing a new package to your frontend? You need to cd packages/react-app
and then yarn add PACKAGE
In
packages/hardhat/hardhat.config.js
change thelocalhost
network withrinkeby
In that same file update the rinkeby settings with your INFURA ID // Create at the root directory of the project the .env file with your secret phrase from Metamask
🔐 Generate a deploy account with yarn generate
. This will create a wallet to be used in Rinkeby and the mnemonic file will be generated in hardhat folder.
👛 View your deployer address using yarn account
⛽️ Fund this account, using an instant wallet to fund your account via QR code (like xdai.io) or Grab some gas using the faucet: https://www.rinkeby.io/#faucet. Confirm the wallet is funded with yarn account
👨🎤 Deploy your NFT smart contract:
yarn deploy
✏️ In
packages/react-app/src
edit your frontendApp.jsx
to change thetargetNetwork
to wherever you deployed your contract:
/// 📡 What chain are your contracts deployed to?
//const targetNetwork = NETWORKS.localhost; // <------- select your target frontend network (localhost, rinkeby, xdai, mainnet)
const targetNetwork = NETWORKS.rinkeby;
You should see the network "rinkeby" in the frontend right below account ammount:
🎫 Mint a batch of NFTs for reals?
yarn mint
Add your contract to Testnet OpenSea (add your contract here: https://testnets.opensea.io/get-listed/step-two )
(It can take a while before they show up, but here is an example:) https://testnets.opensea.io/assets/0xc2839329166d3d004aaedb94dde4173651babccf/1
run yarn flatten > flat.txt (You will need to clean up extra junk at the top and bottom of flat.txt. Sorry, rookie stuff here.)
copy the contents of flat.txt to the block explorer and select compiler v0.6.7 and Yes to Optimization (200 runs if anyone asks)
You will need to get a key from infura.io and paste it into constants.js in packages/react-app/src:
⚙️ build and upload your frontend and share the url with your friends...
# build it:
yarn build
# upload it:
yarn surge
yarn s3
yarn ipfs
👩❤️👨 Share your public url with a friend and ask them for their address to send them a collectible :)
For a more in-depth explanation, documentation, quick start guide, tutorials, tips and many more resources, visit our documentation site: docs.scaffoldeth.io
Join the telegram support chat 💬 to ask questions and find others building with 🏗 scaffold-eth!