Как создать NFT (цифровой предмет коллекционирования) для благодарных фанатов

$ node -v

$ mkdir ty-nft && cd ty-nft
$ npm init -y

$ npm install —save truffle

$ npx truffle init

$ npx truffle test

$ npm install @openzeppelin/contracts

$ npm install @truffle/hdwallet-provider

$ npm install dotenv

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

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/Counters.sol";
import "@openzeppelin/contracts/utils/Base64.sol";
import "@openzeppelin/contracts/utils/Strings.sol";


contract ThankYouNft is ERC721, ERC721Enumerable, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;

    Counters.Counter private _tokenIds;

    // Define a Donation object
    struct Donation {
        uint id;
        uint amount;
        address donor;
        string donorName;
    }

    Donation[] donations;

    constructor() ERC721("Thank You NFT", "TYN") {}

    // Donate money and mint thank you NFT
    function mintThankYou(string memory donorName) public payable {
        require(msg.value >= 0.001 ether, "Smallest donation is 0.001 ETH");

        string memory metadata = generateMetadata(_tokenIds.current(), donorName);
        donations.push(Donation(_tokenIds.current(), msg.value, msg.sender, donorName));
        _mintSingleNft(metadata);
    }

    // Generate NFT metadata
    function generateMetadata(uint tokenId, string memory donorName) public pure returns (string memory) {
        string memory svg = string(abi.encodePacked(
            "<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinyMin meet' viewBox='0 0 350 350'>",
            "<style>.base { fill: white; font-family: serif; font-size: 25px; }</style>",
            "<rect width='100%' height='100%' fill='orange' />",
            "<text x='50%' y='40%' class='base' dominant-baseline='middle' text-anchor='middle'>",
            "<tspan y='40%' x='50%'>Thank You for Donating!</tspan>",
            "<tspan y='50%' x='50%'>",
            donorName,
            "</tspan></text></svg>"
        ));

        string memory json = Base64.encode(
            bytes(
                string(
                    abi.encodePacked(
                        '{"name": "Thank You NFT #',
                        Strings.toString(tokenId),
                        '", "description": "A token of thanks for donating!", "image": "data:image/svg+xml;base64,',
                        Base64.encode(bytes(svg)),
                        '", "attributes": [{"trait_type": "Donor", "value": "',
                        donorName,
                        '"}]}'
                    )
                )
            )
        );

        string memory metadata = string(
            abi.encodePacked("data:application/json;base64,", json)
        );

        return metadata;
    }

    // Mint a single NFT with on-chain metadata
    function _mintSingleNft(string memory _tokenURI) private {
        uint newTokenID = _tokenIds.current();
        _safeMint(msg.sender, newTokenID);
        _setTokenURI(newTokenID, _tokenURI);
        _tokenIds.increment();
    }

    // Get tokens of an owner
    function tokensOfOwner(address _owner) external view returns (uint[] memory) {

        uint tokenCount = balanceOf(_owner);
        uint[] memory tokensId = new uint256[](tokenCount);

        for (uint i = 0; i < tokenCount; i++) {
            tokensId[i] = tokenOfOwnerByIndex(_owner, i);
        }
        return tokensId;
    }

    // Withdraw ether donations made 
    function withdraw() public payable onlyOwner {
        uint balance = address(this).balance;
        require(balance > 0, "No ether left to withdraw");

        (bool success, ) = (msg.sender).call{value: balance}("");
        require(success, "Transfer failed.");
    }

    // The following functions are overrides required by Solidity.

    function _beforeTokenTransfer(address from, address to, uint256 tokenId, uint256 batchSize)
        internal
        override(ERC721, ERC721Enumerable)
    {
        super._beforeTokenTransfer(from, to, tokenId, batchSize);
    }

    function _burn(uint256 tokenId) internal override(ERC721, ERC721URIStorage) {
        super._burn(tokenId);
    }

    function tokenURI(uint256 tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return super.tokenURI(tokenId);
    }

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

npx truffle compile

INFURA_API_KEY = "https://goerli.infura.io/v3/<Your-API-Key>"
MNEMONIC = "<Your-MetaMask-Secret-Recovery-Phrase>"

require('dotenv').config();
const HDWalletProvider = require('@truffle/hdwallet-provider');
const { INFURA_API_KEY, MNEMONIC } = process.env;

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 8545,
      network_id: "*"
    },
    goerli: {
      provider: () => new HDWalletProvider(MNEMONIC, INFURA_API_KEY),
      network_id: '5',
    }
  }
};

// Get instance of the NFT contract
const nftContract = artifacts.require("ThankYouNft");

module.exports = function (deployer) {
    // Deploy the contract
    deployer.deploy(nftContract);
};

truffle migrate --network goerli

Starting migrations...
======================
> Network name:    'goerli'
> Network id:      5
> Block gas limit: 30000000 (0x1c9c380)


1_deploy_contract.js
====================

   Deploying 'ThankYouNft'
   -----------------------
   > transaction hash:    0x0a4fabe13a2c62e335486dc8359eecbe8b1432e5ab7a162e6bd9a167036cdcd4
   > Blocks: 2            Seconds: 33
   > contract address:    0x4EBC03568822c4Af39ca02002C3771Ae4e8bb3ED
   > block number:        8641567
   > block timestamp:     1678616928
   > account:             0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
   > balance:             0.734846151579135017
   > gas used:            4108239 (0x3eafcf)
   > gas price:           29.254126274 gwei
   > value sent:          0 ETH
   > total cost:          0.120182942469771486 ETH

   > Saving artifacts
   -------------------------------------
   > Total cost:     0.120182942469771486 ETH

Summary
=======
> Total deployments:   1
> Final cost:          0.120182942469771486 ETH

npm install

const apiKey = "<-- INFURA API KEY –>";
const ownerAddress = "<-- Wallet address –>";
const contractAddress = "<-- Address of deployed NFT contract from Part 1 –>";

export { apiKey, ownerAddress, contractAddress }

// Standard Next and CSS imports
import Head from "next/head";
import { Fragment, useState, useEffect } from "react";
import styles from "../styles/mainpage.module.css";
import { useRouter } from "next/router";

// Imports from the constants.js file
import { apiKey, contractAddress } from "@/data/constants";

// Wagmi import for connected wallet info
import { useAccount } from "wagmi";

// Ethers for invoking functions on smart contract
import { ethers } from 'ethers';

// Contract ABI import
import contract from '@/contracts/ThankYouNft.json';

// Extract ABI from the ABI JSON file
const abi = contract.abi;

export default function Home() {

  // Standard Next router definition
  const router = useRouter();

  // Get connected wallet address and connection status
  const { address, isConnected } = useAccount();

  // Donor name
  const [donorName, setDonorName] = useState(null);

  // Tip amount
  const [amount, setAmount] = useState(null);

  // Page mounting info to prevent hydration errors
  const [hasMounted, setHasMounted] = useState(false);

  // Minting state
  const [isMinting, setIsMinting] = useState(false);

  // Flag to check if minting has succeeded
  const [success, setSuccess] = useState(false);

  // Form error message
  const [formError, setFormError] = useState(null);

  // Mounting fix to avoid hydration errors
  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Do not render until entire UI is mounted  
  if (!hasMounted) return null;

  // Redirect to Connect page if wallet is not connected
  if (!isConnected) {
    router.replace('/connect');
  }

  // Handlers for form inputs
  const amountHandler = (e) => {
    setAmount(e.target.value);
  }

  const nameHandler = (e) => {
    setDonorName(e.target.value);
  }

  // Mint function invoked when form is submitted
  const mintNft = async (e) => {

    e.preventDefault();
    setFormError(false);

    // Basic check for correctness of data
    if (donorName.length === 0 || parseFloat(amount) < 0.001) {
      console.log("Incorrect form input");
      setFormError(true);
      return;
    }

    try {

      // Get MetaMask Ethereum instance
      const { ethereum } = window;

      if (ethereum) {

        // Reset states
        setIsMinting(true);
        setFormError(false);
        setSuccess(false);

        // Define provider, signer, and an instance of the contract
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const nftContract = new ethers.Contract(contractAddress, abi, signer);

        // Call the mint function
        console.log("Initialize payment");
        let nftTxn = await nftContract.mintThankYou("Satoshi", { value: ethers.utils.parseEther('0.001') });

        console.log("Mining... please wait");
        await nftTxn.wait();

        console.log(`Mined, see transaction: https://goerli.etherscan.io/tx/${nftTxn.hash}`);

        // Set final states
        setIsMinting(false);
        setSuccess(true);
        setDonorName(null);
        setAmount(null)
      } else {
        console.log("Ethereum object does not exist");
      }

    } catch (err) {

      // Something wrong has happened. Set error and minting states
      setIsMinting(false);
      setFormError(true);
      console.log(err);
    }
  }

  return (
    <Fragment>
      <Head>
        <title>Tip and Mint a Thank You NFT!</title>
      </Head>

      <div className={styles.jumbotron}>

        <h1>Tip and Mint a Thank You NFT!</h1>

        {/* Main Form */}
        <form onSubmit={mintNft} className={styles.mint_form}>
          <input type="text" id="name" name="name" placeholder="Your Name" onChange={nameHandler} value={donorName} />
          <input type="number" id="amount" name="amount" min={0.001} placeholder="Donation Amount in ETH (min 0.001 ETH)" onChange={amountHandler} value={amount} step={0.001} />
          <button type="submit">
            Tip
          </button>
        </form>

        {/* Helpful messages for end user to know what's going on */}
        {isMinting && <p>Your NFT is minting...</p>}
        {success && <p>Thank you for your donation! Check out your NFT on OpenSea!</p>}
        {formError && <p>Something went wrong! Try again.</p>}
      </div>
    </Fragment>
  )
}

npm run dev