NFT Collection Web3 App

Built with @buildspace 🦄

#Verified: https://rinkeby.etherscan.io/address/0x0B39f1408e5948754f02611f80E988B403288d05#code

Overview

• NFT metadata format:

  {
    "name":"Yeet Love",
    "description":"Some boomers are alright.",
    "image":"data:image/json;base64,<base64_encoded_SVG_address>"
  }
  

How to Use

1. Go to the game site
2. Connect your ETH wallet
3. Mint your NFT!

A vocabulary refresher

• Transaction: an action that changes the blockchain, like deploying a smart contract or minting an NFT
• Deployment:
• On-Chain Data: data stored on the contract itself, rather than via a third party
• SVG: image built with code
• base64: encoding format
• Event: in Solidity, messages that are emitted by smart contracts & captured in real-time by our client

Setup 🛠️

1. Startup a sample HardHat project: npx hardhat
2. Install project dependencies: npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers
3. Install OpenZeppelin library: npm install @openzeppelin/contracts
4. Test setup by deploying to local blockchain: npx hardhat run scripts/sample-script.js results in 👇

Tools

• Alchemy.io
• JSON Keeper ➡️ the metadata's image URL has this format: data:image/svg+xml;base64,<base64_encoded_SVG>

Bugs & Oddities 🐛

If using VSCode:

• make sure ethers are not auto-imported into solidity contract
• imports might be unresolved if the compiler isn't globally installed on your system

HardHat 🎩

"This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts.

Try running some of the following tasks:"

npx hardhat accounts
npx hardhat compile
npx hardhat clean
npx hardhat test
npx hardhat node
node scripts/sample-script.js
npx hardhat help

Testing

1. Deploy contract (using command line) to Rinkeby Testnet to validate: npx hardhat run scripts/deploy.js --network rinkeby
2. Check contract address on Etherscan
3. Search OpenSea's TestNet site using the contract address

Tools

• Rinkeby testnet
• Metamask wallet