Build an NFT Collection

mkdir nft-collection && cd nft-collection
npm init -y
npm install --save-dev hardhat @nomicfoundation/hardhat-toolbox
npm install @openzeppelin/contracts
npx hardhat init

{
  "name": "Cool NFT #1",
  "description": "A unique piece from the Cool Collection",
  "image": "ipfs://QmXxx.../1.png",
  "attributes": [
    {
      "trait_type": "Background",
      "value": "Blue"
    },
    {
      "trait_type": "Rarity",
      "value": "Legendary"
    },
    {
      "display_type": "number",
      "trait_type": "Generation",
      "value": 1
    }
  ]
}

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Strings.sol";

contract CoolNFT is ERC721, ERC721Enumerable, ERC721URIStorage, Ownable {
    using Strings for uint256;

    uint256 private _nextTokenId;
    uint256 public constant MAX_SUPPLY = 10000;
    uint256 public constant MINT_PRICE = 0.05 ether;
    uint256 public constant MAX_PER_WALLET = 5;

    string private _baseTokenURI;
    bool public mintingEnabled = false;

    mapping(address => uint256) public mintedPerWallet;

    event Minted(address indexed to, uint256 indexed tokenId);

    constructor(string memory baseURI)
        ERC721("Cool NFT", "COOL")
        Ownable(msg.sender)
    {
        _baseTokenURI = baseURI;
    }

    function mint(uint256 quantity) external payable {
        require(mintingEnabled, "Minting not enabled");
        require(quantity > 0, "Quantity must be > 0");
        require(_nextTokenId + quantity <= MAX_SUPPLY, "Exceeds max supply");
        require(mintedPerWallet[msg.sender] + quantity <= MAX_PER_WALLET, "Exceeds wallet limit");
        require(msg.value >= MINT_PRICE * quantity, "Insufficient payment");

        for (uint256 i = 0; i < quantity; i++) {
            uint256 tokenId = _nextTokenId++;
            _safeMint(msg.sender, tokenId);
            emit Minted(msg.sender, tokenId);
        }

        mintedPerWallet[msg.sender] += quantity;
    }

    function ownerMint(address to, uint256 quantity) external onlyOwner {
        require(_nextTokenId + quantity <= MAX_SUPPLY, "Exceeds max supply");

        for (uint256 i = 0; i < quantity; i++) {
            uint256 tokenId = _nextTokenId++;
            _safeMint(to, tokenId);
            emit Minted(to, tokenId);
        }
    }

    function setMintingEnabled(bool enabled) external onlyOwner {
        mintingEnabled = enabled;
    }

    function setBaseURI(string memory baseURI) external onlyOwner {
        _baseTokenURI = baseURI;
    }

    function withdraw() external onlyOwner {
        payable(owner()).transfer(address(this).balance);
    }

    function _baseURI() internal view override returns (string memory) {
        return _baseTokenURI;
    }

    function tokenURI(uint256 tokenId) public view override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return string(abi.encodePacked(_baseTokenURI, tokenId.toString(), ".json"));
    }

    // Required overrides
    function _update(address to, uint256 tokenId, address auth)
        internal override(ERC721, ERC721Enumerable) returns (address)
    {
        return super._update(to, tokenId, auth);
    }

    function _increaseBalance(address account, uint128 value)
        internal override(ERC721, ERC721Enumerable)
    {
        super._increaseBalance(account, value);
    }

    function supportsInterface(bytes4 interfaceId)
        public view override(ERC721, ERC721Enumerable, ERC721URIStorage)
        returns (bool)
    {
        return super.supportsInterface(interfaceId);
    }
}

import { useState } from 'react';
import { ethers } from 'ethers';
import CoolNFT from './CoolNFT.json';

const CONTRACT_ADDRESS = "0x...";

function MintButton() {
  const [quantity, setQuantity] = useState(1);
  const [loading, setLoading] = useState(false);

  async function mint() {
    if (!window.ethereum) {
      alert('Please install MetaMask');
      return;
    }

    setLoading(true);
    try {
      const provider = new ethers.BrowserProvider(window.ethereum);
      const signer = await provider.getSigner();
      const contract = new ethers.Contract(
        CONTRACT_ADDRESS,
        CoolNFT.abi,
        signer
      );

      const price = ethers.parseEther("0.05");
      const tx = await contract.mint(quantity, {
        value: price * BigInt(quantity)
      });

      await tx.wait();
      alert('Successfully minted!');
    } catch (error) {
      console.error(error);
      alert('Minting failed');
    }
    setLoading(false);
  }

  return (
    <div>
      <input
        type="number"
        min="1"
        max="5"
        value={quantity}
        onChange={(e) => setQuantity(Number(e.target.value))}
      />
      <button onClick={mint} disabled={loading}>
        {loading ? 'Minting...' : `Mint ${quantity} NFT(s)`}
      </button>
    </div>
  );
}