DevLog250321

Creating NFT Metadata and Uploading to IPFS (Web3.Storage)

Date: 250321

Project: NFT Collection #1 (“Aurora’s Echo” and 9 others)

Step 1: Prepare Image Files

• Created 10 digital paintings, saved as PNG files.
• Named sequentially: painting_01.png, painting_02.png, etc.

Step 2: Upload Paintings to IPFS

• Used https://web3.storage/ to upload all 10 painting images.
• Each file received a unique IPFS CID.
• Confirmed image availability by visiting: https://ipfs.io/ipfs/<CID>/<filename>.png

Step 3: Write Metadata JSON Files

• Created names and descriptions for each painting.

• Format:

  {
    "name": "Aurora's Echo",
    "description": "A feathered traveler bathed in the hues of dawn...",
    "image": "ipfs://<CID>/painting_01.png"
  }

• Wrote a Python script (generate_metadata.py) to generate all 10 metadata JSON files. this fiile can be found in blockchain/scripts folder.

• Important correction: Replaced incorrect links like ipfs://...ipfs.w3s.link with proper IPFS paths.

Step 4: Upload Metadata to Web3.Storage

• Uploaded the metadata/ folder to Web3.Storage.
• Copied the root CID (for use in the smart contract).
• Verified metadata accessibility:
  • Opened: https://ipfs.io/ipfs/<metadata_CID>/metadata1.json
  • Checked that image field correctly pointed to painting PNG.
  • Previewed images by replacing ipfs:// with https://ipfs.io/ipfs/

What’s Working

• All metadata and image files load correctly via IPFS.
• Each metadata file has:
  • Title
  • Description
  • Valid IPFS image link

Next Step

• Write smart contract (TopSecurityNFT.sol) using tokenURI() pattern:

  function tokenURI(uint256 tokenId) public view override returns (string memory) {
      return string(abi.encodePacked("ipfs://<metadata_CID>/metadata", Strings.toString(tokenId), ".json"));
  }

• Deploy to Polygon Mumbai and test first mint!

Notes: - This process was stressful at times, especially verifying IPFS links and getting the image references right. - Learned that ipfs:// is preferred in metadata, and platforms like OpenSea will resolve it via gateway.

Status: Metadata is complete and verified. Smart contract phase begins next.

Project: CLI Setup

What Was Completed

Installed Node and NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Added to .zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Then installed and used Node:

nvm install 18
nvm use 18

Installed Web3.Storage CLI

npm install -g web3.storage

Attempted Web3.Storage Upload

• Uploaded zipped metadata folder, but resulted in a download-only CID
• Attempted to generate API key at web3.storage, but the page did not load
• CLI is installed and ready

To-Do List for Next Session

1. Get a Working API Key

Try the following: - https://web3.storage/account

Set it in terminal:

export WEB3_STORAGE_TOKEN="your-api-key-here"

Optional: add it to .zshrc:

echo 'export WEB3_STORAGE_TOKEN="your-api-key-here"' >> ~/.zshrc
source ~/.zshrc

2. Upload Metadata Folder via CLI

cd ~/2025NFT
web3.storage upload --name "My NFT Metadata" --directory metadata

Copy the returned CID and verify:

https://ipfs.io/ipfs/<your_cid_here>/metadata1.json

3. Use CID in Smart Contract

Update contract to use:

baseURI = "ipfs://<your_cid_here>/";

4. Get Test MATIC for Polygon Mumbai

• Visit: https://faucet.polygon.technology
• Check wallet balance at: https://mumbai.polygonscan.com/

5. Deploy and Mint

• Deploy contract using Foundry
• Mint 1 token for testing
• View it on OpenSea testnet view

Status

• Metadata: Complete and verified
• Smart Contract: Ready to deploy
• Web3 Upload: Waiting on folder CID
• Test MATIC: Pending
• Deployment: Next step after CID and funding