使用 Polygon 2.0 构建 NFT 市场：完整开发指南

// hardhat.config.js
require("@nomiclabs/hardhat-waffle");
require("dotenv").config();

module.exports = {
  networks: {
    hardhat: {
      chainId: 1337
    },
    mumbai: {
      url: `https://polygon-mumbai.g.alchemy.com/v2/${process.env.ALCHEMY_API_KEY}`,
      accounts: [process.env.PRIVATE_KEY]
    }
  },
  solidity: "0.8.17",
};

// scripts/deploy.js
const hre = require("hardhat");

async function main() {
  const NFT = await hre.ethers.getContractFactory("PolygonNFT");
  const nft = await NFT.deploy();
  await nft.deployed();
  console.log("NFT contract deployed to:", nft.address);

  const Market = await hre.ethers.getContractFactory("NFTMarketplace");
  const market = await Market.deploy();
  await market.deployed();
  console.log("Marketplace contract deployed to:", market.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

// src/utils/blockchain.js
import { ethers } from "ethers";
import NFTAbi from "../contracts/PolygonNFT.json";
import MarketplaceAbi from "../contracts/NFTMarketplace.json";

const nftAddress = "your_nft_contract_address";
const marketplaceAddress = "your_marketplace_contract_address";

export async function connectWallet() {
  if (window.ethereum) {
    try {
      await window.ethereum.request({ method: "eth_requestAccounts" });
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      return provider.getSigner();
    } catch (error) {
      console.error("User denied account access");
    }
  } else {
    console.error("Metamask not detected");
  }
}

export async function loadNFTs() {
  const provider = new ethers.providers.JsonRpcProvider("https://rpc-mumbai.maticvigil.com");
  const tokenContract = new ethers.Contract(nftAddress, NFTAbi.abi, provider);
  const marketContract = new ethers.Contract(marketplaceAddress, MarketplaceAbi.abi, provider);
  
  const data = await marketContract.fetchMarketItems();
  
  const items = await Promise.all(data.map(async i => {
    const tokenUri = await tokenContract.tokenURI(i.tokenId);
    const meta = await fetch(tokenUri).then(res => res.json());
    let item = {
      price: ethers.utils.formatUnits(i.price.toString(), "ether"),
      tokenId: i.tokenId.toNumber(),
      seller: i.seller,
      owner: i.owner,
      image: meta.image,
      name: meta.name,
      description: meta.description,
    };
    return item;
  }));
  
  return items;
}

// src/pages/Home.js
import React, { useState, useEffect } from "react";
import { loadNFTs } from "../utils/blockchain";

function Home() {
  const [nfts, setNfts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchNFTs() {
      const items = await loadNFTs();
      setNfts(items);
      setLoading(false);
    }
    fetchNFTs();
  }, []);

  return (
    <div className="container">
      <h1>NFT Marketplace on Polygon</h1>
      {loading ? (
        <p>Loading NFTs...</p>
      ) : nfts.length === 0 ? (
        <p>No NFTs currently listed for sale</p>
      ) : (
        <div className="nft-grid">
          {nfts.map((nft, i) => (
            <div key={i} className="nft-card">
              <img src={nft.image} alt={nft.name} />
              <div className="nft-info">
                <h3>{nft.name}</h3>
                <p>{nft.description}</p>
                <div className="price">{nft.price} MATIC</div>
                <button onClick={() => buyNFT(nft)}>
                  Buy NFT
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default Home;

// src/pages/CreateNFT.js
import React, { useState } from "react";
import { ethers } from "ethers";
import { create as ipfsHttpClient } from "ipfs-http-client";
import { connectWallet } from "../utils/blockchain";
import NFTAbi from "../contracts/PolygonNFT.json";
import MarketplaceAbi from "../contracts/NFTMarketplace.json";

const client = ipfsHttpClient("https://ipfs.infura.io:5001/api/v0");
const nftAddress = "your_nft_contract_address";
const marketplaceAddress = "your_marketplace_contract_address";

function CreateNFT() {
  const [fileUrl, setFileUrl] = useState(null);
  const [formInput, setFormInput] = useState({ name: "", description: '', price: "" });
  const [loading, setLoading] = useState(false);

  async function onChange(e) {
    const file = e.target.files[0];
    try {
      const added = await client.add(
        file,
        {
          progress: (prog) => console.log(`Uploading: ${prog}`)
        }
      );
      const url = `https://ipfs.infura.io/ipfs/${added.path}`;
      setFileUrl(url);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  }

  async function createNFT() {
    const { name, description, price } = formInput;
    if (!name || !description || !price || !fileUrl) return;
    
    setLoading(true);
    try {
      const data = JSON.stringify({
        name, description, image: fileUrl
      });
      const added = await client.add(data);
      const url = `https://ipfs.infura.io/ipfs/${added.path}`;
      await createSale(url);
    } catch (error) {
      console.log("Error creating NFT: ", error);
    }
    setLoading(false);
  }

  async function createSale(url) {
    const signer = await connectWallet();
    
    // Create token
    let contract = new ethers.Contract(nftAddress, NFTAbi.abi, signer);
    let transaction = await contract.createToken(url);
    let tx = await transaction.wait();
    let event = tx.events[0];
    let value = event.args[2];
    let tokenId = value.toNumber();

    const price = ethers.utils.parseUnits(formInput.price, "ether");
    
    // List on marketplace
    contract = new ethers.Contract(marketplaceAddress, MarketplaceAbi.abi, signer);
    let listingFee = await contract.getListingFee();
    listingFee = listingFee.toString();
    
    transaction = await contract.createMarketItem(
      nftAddress, tokenId, price, { value: listingFee }
    );
    await transaction.wait();
  }

  return (
    <div className="container">
      <h1>Create New NFT</h1>
      <div className="create-form">
        <input
          type="text"
          placeholder="Asset Name"
          onChange={e => setFormInput({ ...formInput, name: e.target.value })}
        />
        <textarea
          placeholder="Asset Description"
          onChange={e => setFormInput({ ...formInput, description: e.target.value })}
        />
        <input
          type="number"
          placeholder="Asset Price in MATIC"
          onChange={e => setFormInput({ ...formInput, price: e.target.value })}
        />
        <input
          type="file"
          onChange={onChange}
        />
        {fileUrl && <img src={fileUrl} alt="Upload preview" />}
        <button onClick={createNFT} disabled={loading}>
          {loading ? "Creating..." : "Create NFT"}
        </button>
      </div>
    </div>
  );
}

export default CreateNFT;