该课程是为期10周，只要你在10周完成就可以。

今天我们先来说下第一个任务课程：如何使用 Alchemy 开发 NFT 智能合约（ERC721）

官方提供了一个本课程的大纲：

• 如何使用 OpenZeppelin 和 Remix 编写和修改智能合约

• 使用Goerl网络获得免费的 Rinkeby ETH

• 将其部署在以太坊 Goerl测试网区块链上以节省汽油费

• 使用 Filebase 在 IPFS 上托管 NFT 令牌元数据。

• 铸造 NFT 并在 OpenSea 上可视化

1.编写合约

首先我们来到合约编写页面

合约编写页面

2.将合约使用Remix修改和部署

导入Remix后合约的结构如下：

我们需要修改如下几点：

1.该NFT是任何人都可以mint的，所以修改如下

  function safeMint(address to, string memory uri) public {
        require(_tokenIdCounter.current() <= MAX_SUPPLY, "I'm sorry we reached the cap");
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

2.修改NFT的供应总量

 uint256 MAX_SUPPLY = 100000; //将该代码添加在Counters.Counter private _tokenIdCounter下一行

3.获取测试token

我们去到下面的网站获取测试Token，同时需要大家去Alchemy注册一个账号

4.创建一个Alchemy的app

1.首先我们去到Alchemy注册一个账户，同时新建一个app（需要选择以太坊生态和Rikney）

查看我们的Key

5.将 Alchemy Rinkeby 添加到 Metamask 钱包，信息如下

• Network name: Alchemy Rinkeby

• New RPC URL: 你申请的app的地址，去上面的viewkey获取即可

• Chain ID: 4

• Currency Symbol: ETH

• Block Explorer: https://rinkeby.etherscan.io/

6.部署发布我们的合约

部署合约

将出现一个 Metamask 弹出窗口，点击“签名”，然后继续支付 gas 费用。如果一切都按预期工作，10 秒后，应该会在 Deployed Contracts 下看到该合约：

已经部署完成的合约

7.上传我们的NFT元数据

Pinata网站可以管理我们的元数据，一定要去学会怎么使用，我们只需要申请一个账号，会免费给1g的存储空间。

mint我们的NFT，在safeMint输入我们的钱包地址和刚才编写的uri（ipfs://\<your\_metadata\_cid>）使用json的。

8.查看我们的NFT

我们去到OpenSea测试网站查看我们做的NFT

我们找到对应合约的NFT，现在我们看到的合约地址和我们刚才部署的合约地址是否对应上，现在还是盲盒，需要我们自己去操作下

9.开盲盒

在tokenUri 插入“0”作为 id 参数，点击call，它应该显示你的 tokenURI。

需要等待一段时间，大家可以先试试。

step1 创建项目设置

1.打开控制台并输入以下代码，从而创建 Next JS 项目样板并安装 TailwindCSS。

npx create-next-app -e with-tailwindcss nameoftheproject ，如图。

2.输入cd nameoftheproject && code . （最后那个点别掉了，掉了打开的就是之前的项目）

3.在控制台输入npm run dev ，如果电脑弹出防火墙，就点允许访问，不弹出也没关系。

4.回到vscode，将index.tsx和_app.tsx的后缀改成.jsx，删除_app.jsx中报错的部分，如图。

或者直接粘贴下面的代码替换。

import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

step2 修改index.jsx代码

1.这一步具体每行代码的意义可以到官方看，我这里放最终的代码，方便大家完成任务，但是这对于学习web3是毫无作用的。将index.jsx的代码更改成如下代码。如图。

import { NFTCard } from "./nftCard"
import { useState } from 'react'

const Home = () => {
 const [wallet, setWalletAddress] = useState("");
 const [collection, setCollectionAddress] = useState("");
 const [NFTs, setNFTs] = useState([])
 const [fetchForCollection, setFetchForCollection]=useState(false)


  const fetchNFTs = async() => {
    let nfts; 
    console.log("fetching nfts");
    const api_key = "75dGSnZXuLyiwz-TRVYrJAhhZthlG9Tj"
    const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTs/`;
    var requestOptions = {
        method: 'GET'
      };
     
    if (!collection.length) {
    
      const fetchURL = `${baseURL}?owner=${wallet}`;
  
      nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
    } else {
      console.log("fetching nfts for collection owned by address")
      const fetchURL = `${baseURL}?owner=${wallet}&contractAddresses%5B%5D=${collection}`;
      nfts= await fetch(fetchURL, requestOptions).then(data => data.json())
    }
  
    if (nfts) {
      console.log("nfts:", nfts)
      setNFTs(nfts.ownedNfts)
    }
  }
  
  const fetchNFTsForCollection = async () => {
    if (collection.length) {
      var requestOptions = {
        method: 'GET'
      };
      const api_key = "75dGSnZXuLyiwz-TRVYrJAhhZthlG9Tj"
      const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTsForCollection/`;
      const fetchURL = `${baseURL}?contractAddress=${collection}&withMetadata=${"true"}`;
      const nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
      if (nfts) {
        console.log("NFTs in collection:", nfts)
        setNFTs(nfts.nfts)
      }
    }
  }

 return (
   <div className="flex flex-col items-center justify-center py-8 gap-y-3">
     <div className="flex flex-col w-full justify-center items-center gap-y-2">
     <input disabled={fetchForCollection} type={"text"} placeholder="Add your wallet address" onChange={e => setWalletAddress(e.target.value)} value={wallet}></input>
       <input type={"text"} placeholder="Add the collection address"></input>
       <label className="text-gray-600 "><input onChange={(e)=>{setFetchForCollection(e.target.checked)}} type={"checkbox"} className="mr-2"></input>Fetch for collection</label>
       <button className={"disabled:bg-slate-500 text-white bg-blue-400 px-4 py-2 mt-3 rounded-sm w-1/5"} onClick={
          () => {
           if (fetchForCollection) {
             fetchNFTsForCollection()
           }else fetchNFTs()
         }
       }>Let's go! </button>
     </div>
     <div className='flex flex-wrap gap-y-12 mt-4 w-5/6 gap-x-2 justify-center'>
       {
         NFTs.length && NFTs.map(nft => {
           return (
             <NFTCard nft={nft}></NFTCard>
           )
         })
       }
     </div>
   </div>
 )
}

export default Home

step3 创建一个新的炼金术应用程序

1.进入alchemy.com ，点击create app。

2.输入信息，点击create app。

3.点击view key，将红框内的API KEY复制下来。

4.回到vscode，在index.jsx中ctrl+f搜索const api_key，应该会搜索到2处，全部改成上一步复制的代码，然后保存。

step4 创建 NFT Card 组件

1.在pages下面新建一个名为nftCard.jsx的文件，并将下面的代码粘贴进去。

export const NFTCard = ({ nft }) => {

    return (
        <div className="w-1/4 flex flex-col ">
        <div className="rounded-md">
            <img className="object-cover h-128 w-full rounded-t-md" src={nft.media[0].gateway} ></img>
        </div>
        <div className="flex flex-col y-gap-2 px-2 py-3 bg-slate-100 rounded-b-md h-110 ">
            <div className="">
                <h2 className="text-xl text-gray-800">{nft.title}</h2>
                <p className="text-gray-600">Id: {nft.id.tokenId}</p>
                <p className="text-gray-600" >{nft.contract.address}</p>
            </div>

            <div className="flex-grow mt-2">
                <p className="text-gray-600">{nft.description}</p>
            </div>
        </div>

    </div>
    )
}

step5 运行测试

1.在控制台输入cd nameoftheproject，按回车，然后输入npm run dev，如图所示即可。

2.然后将http://localhost:3000 （我这里是这个链接，我看官方视频是3001，可能会不一样啊，我也不知道哈哈），就是上面那个图的第一行的链接，复制到浏览器。出现下图即可。

3.输入你自己的地址，点击let‘s go，下面出现图片即可。

step6 上传至github

step7 项目提交

直接填写上传的项目的github网址即可。

但这有一个问题：

不将元数据存储在区块链上将使您无法通过智能合约与之交互，因为区块无法与“外部世界”通信。**如果我们想直接从我们的智能合约更新我们的元数据，我们需要将其存储在链上，但是汽油费呢？幸运的是，像 Polygon 这样的 L2 链可以提供帮助，大大降低了 Gas 成本，并引入了许多优势，使开发人员能够扩展其应用程序的功能。

在本教程中，学习如何创建区块链游戏的基础知识，开发一个完全动态的 NFT，其链上元数据会根据您与它的交互而变化，并将其部署在Polygon Mumbai上以降低汽油费。

更准确地说，您将学习：

• 如何在链上存储 NFT 元数据

• 什么是 Polygon 以及为什么降低 Gas 费用很重要。

• 如何在 Polygon Mumbai 上部署

• 如何处理和存储链上 SVG 图像和 JSON 对象

• 如何根据您与 NFT 的交互来修改元数据

1.Polygon PoS - 更低的 Gas 费用和更快的交易

Polygon 是一个去中心化的 EVM 兼容扩展平台，使开发人员能够在不牺牲安全性的情况下以低交易费用构建可扩展的用户友好型 DApp。

它属于被描述为**第 2 层链 (L2)**的一组链，这意味着它建立在以太坊之上，以解决一些表征它的问题 - 同时依赖它来运行。

众所周知，以太坊既不快也不便宜，在其上部署智能合约可能会迅速变得非常昂贵，这就是Polygon或Optimism等 L2 解决方案发挥作用的地方。

例如，多边形有两个主要优点：

• 更快的交易（65,000 tx/秒 vs ~14）

• 每笔交易的gas 成本比以太坊低约 10,000 倍

第二个正是我们在 Polygon 上部署带有链上元数据的 NFT 智能合约的原因。一方面，如果在以太坊上存储我们的元数据时，我们可以预期每笔交易花费数百美元，那么在 Polygon 上它的成本不会超过几美分。

1.1将 Polygon Mumbai 添加到您的 Metamask 钱包

首先，让我们将 Polygon Mumbai 添加到我们的 Metamask 钱包中。

导航测试polygon网络并向下滚动到页面底部。您将看到**“添加多边形网络”按钮**，单击它并确认您要将其添加到 Metamask：

1.2获取免费的 Matic 以部署NFT 智能合约

我们去到mumbaifaucet.com获取测试币，输入我们的地址获取测试币即可

10-20 秒后，会看到 MATIC 出现在 Metamask 钱包中。

2.1项目设置

# 新建一个文件夹用于此次项目的搭建
mkdir ChainBattled
cd ChainBattled
# 安装yarn并查看版本
npm install -g yarn
yarn --version
yarn add hardhat
# 初始化项目
npx hardhat init

现在我们需要安装OpenZeppelin包来访问ERC721 智能合约我们将使用该标准作为模板来构建我们的 NFT 智能合约。

yarn add @openzeppelin/contracts

2.2修改 hardhat.config.js 文件

将我们的hardhat.config.js 文件修改如下：

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

module.exports = {
  solidity: "0.8.10",
  networks: {
    mumbai: {
      url: process.env.TESTNET_RPC,
      accounts: [process.env.PRIVATE_KEY]
    },
  },
  etherscan: {
    apiKey: process.env.POLYGONSCAN_API_KEY
  }
};

2.3开发智能合约

在 contracts 文件夹中，创建一个新文件并将其命名为“ChainBattles.sol”。

与往常一样，我们需要指定SPDX-Licence-Identifier、pragma ，并从OpenZeppelin导入几个库，我们将用作智能合约的基础，合约内容如下：

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

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/utils/Strings.sol";
import "@openzeppelin/contracts/utils/Base64.sol";

contract ChainBattles is ERC721URIStorage  {
    using Strings for uint256;
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    mapping(uint256 => uint256) public tokenIdToLevels;

    constructor() ERC721 ("Chain Battles", "CBTLS"){
    }

    function generateCharacter(uint256 tokenId) public returns(string memory){

    bytes memory svg = 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: 14px; }</style>',
        '<rect width="100%" height="100%" fill="black" />',
        '<text x="50%" y="40%" class="base" dominant-baseline="middle" text-anchor="middle">',"Warrior",'</text>',
        '<text x="50%" y="50%" class="base" dominant-baseline="middle" text-anchor="middle">', "Levels: ",getLevels(tokenId),'</text>',
        '</svg>'
    );
    return string(
        abi.encodePacked(
            "data:image/svg+xml;base64,",
            Base64.encode(svg)
        )    
    );
  }
function getLevels(uint256 tokenId) public view returns (string memory) {
    uint256 levels = tokenIdToLevels[tokenId];
    return levels.toString();
}
 function getTokenURI(uint256 tokenId) public returns (string memory){
    bytes memory dataURI = abi.encodePacked(
        '{',
            '"name": "Chain Battles #', tokenId.toString(), '",',
            '"description": "Battles on chain",',
            '"image": "', generateCharacter(tokenId), '"',
        '}'
    );
    return string(
        abi.encodePacked(
            "data:application/json;base64,",
            Base64.encode(dataURI)
        )
    );
}
function mint() public {
    _tokenIds.increment();
    uint256 newItemId = _tokenIds.current();
    _safeMint(msg.sender, newItemId);
    tokenIdToLevels[newItemId] = 0;
    _setTokenURI(newItemId, getTokenURI(newItemId));
}

function train(uint256 tokenId) public{
  require(_exists(tokenId),"The tokenId does not exist");
  require(_isApprovedOrOwner(msg.sender, tokenId),"You are not the owner of the NFT"); 
  tokenIdToLevels[tokenId] += 1;
  _setTokenURI(tokenId, getTokenURI(tokenId));
}
}

我们在上面将合约全部完善了，也新增了 4 个不同的功能：

• **generateCharacter：**生成和更新我们 NFT 的 SVG 图像

• **getLevels：**获取 NFT 的当前级别

• **getTokenURI ：**获取 NFT 的 TokenURI

• **mint:**到 mint - 当然

• **train：**训练 NFT 并提高其等级

首先，让我们在项目的根文件夹中新建一个 .env 文件，并添加以下变量：

TESTNET_RPC=""
PRIVATE_KEY=""
POLYGONSCAN_API_KEY=""

然后，导航到alchemy.com并创建一个新的 Polygon Mumbai 应用程序：

单击新创建的应用程序，复制 API HTTP URL，并将 API 作为“ TESTNET_RPC ”值粘贴到我们在上面创建的 .env 文件中。

打开您的Metamask钱包，点击三个点菜单 > 帐户详细信息 > 并将您的私钥复制粘贴为..env

最后，继续Polygon,并创建一个新帐户，登录后，进入个人资料菜单并单击 API Keys，如果没有则需要新建一个：

现在将 Api-Key 令牌复制粘贴为 .env 中的“ POLYGONSCAN API_KEY ”值。最终结果如下：

在部署我们的智能合约之前的最后一步，我们需要创建部署脚本。

3.1创建部署脚本

首先安装依赖

npm install dotenv
npm install @nomiclabs/hardhat-waffle

我们将deploy.js的脚本替换如下：

const main = async () => {
  try {
    const nftContractFactory = await hre.ethers.getContractFactory(
      "ChainBattles"
    );
    const nftContract = await nftContractFactory.deploy();
    await nftContract.deployed();

    console.log("Contract deployed to:", nftContract.address);
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};
  
main();

3.2编译和部署智能合约

当我们把脚本写好后，编译智能合约，只需在项目内的终端中运行以下命令：

npx hardhat compile

如果一切按预期进行，你将在 artifacts 文件夹中看到已编译的智能合约。

现在，让我们在运行的 Polygon Mumbai 链上部署智能合约

npx hardhat run scripts/deploy.js --network mumbai

如果一切正常你将在页面看到合约的地址

3.3在 Polygon Scan 上检查智能合约

复制刚刚部署的智能合约的地址，去测试polygon网络，然后**在搜索栏中粘贴智能合约的地址。**进入智能合约页面后，单击“合约”选项卡。你会注意到合约代码不可读：

这是因为我们还没有验证我们的代码。

为了验证我们的智能合约，我们需要回到我们的项，并在终端中运行以下代码：

# npx hardhat verify --network mumbai 合约地址
npx hardhat verify --network mumbai 

0xE49617678DeA173D147e484a10f7dbcc4aE568e1

报错信息：

Error in plugin @nomiclabs/hardhat-etherscan: Failed to send contract verification request.
Endpoint URL: https://api-testnet.polygonscan.com/api
Reason: read ECONNRESET

通过网站添加方法，点击立即验证即可：

3.4通过多边形扫描与您的智能合约交互

现在智能合约已经通过验证，mumbai.polygonscan.com 将在其附近显示一个绿色小勾：

然后寻找“min​​t”函数并点击Write：

这将打开一个 Metamask 弹出窗口，要求支付 gas 费用，单击签名按钮。恭喜！您刚刚铸造了您的第一个动态 NFT - 让我们转移到 OpenSea 测试网来现场查看它。

4.在 OpenSea 上查看您的动态 NFT

复制智能合约地址，前往testnet.opensea.com，并将其粘贴到搜索栏中：

如果一切正常，现在应该会看到您的 NFT 显示在 OpenSea 上，其中包含动态图像、标题和描述。

4.1更新动态 NFT 图像训练 NFT

导航回测试.polygons网络，点击合约标签 > 写合约并寻找“train”功能。

插入您的 NFT 的 ID - 在这种情况下为“1”，因为我们只铸造了一个，然后单击写入：

然后回到testnets.opensea.com并刷新页面：

1.先决条件

• npm (npx) version 8.5.5

• node version 16.13.1

• 如果你会js代码更好

2.创建项目

#创建一个项目目录并且初始化package.json
mkdir BuyMeACoffee-contracts
cd BuyMeACoffee-contracts
npm init -y

创建目录

创建目录

# 使用hardhat生成项目框架
npx hardhat
# 该命令建议执行，因为依赖可能有问题
npm install --save-dev hardhat@^2.9.3 @nomiclabs/hardhat-waffle@^2.0.0 ethereum-waffle@^3.0.0 chai@^4.2.0 @nomiclabs/hardhat-ethers@^2.0.0 ethers@^5.0.0

# 当你创建成功后目录如下所示：
.
├── README.md
├── contracts
├── hardhat.config.js
├── node_modules
├── package-lock.json
├── package.json
├── scripts
└── test

contracts- 您的智能合约所在的文件夹
  在这个项目中，我们将只创建一个，来组织我们的逻辑BuyMeACoffee
scripts- 您的安全帽 javscript 脚本所在的文件夹
  我们将编写逻辑deploy
  示例脚本buy-coffee
  和一个兑现我们小费的脚本withdraw
hardhat.config.js- 带有solidity版本和部署设置的配置文件

3.开始开发项目

我们可以使用任意的vim方式打开上面创建的项目，这里就用VScode了，如果有需要的可以去官网下载

我们可以看到生成的目录已经有了一个合约，我们只需要去替换即可，首先将合约文件名替换为 BuyMeACoffee.sol 同时将合约内容替换成下面的。

//SPDX-License-Identifier: Unlicense

// contracts/BuyMeACoffee.sol
pragma solidity ^0.8.0;

// Switch this to your own contract address once deployed, for bookkeeping!

contract BuyMeACoffee {
    // Event to emit when a Memo is created.
    event NewMemo(
        address indexed from,
        uint256 timestamp,
        string name,
        string message
    );
    
    // Memo struct.
    struct Memo {
        address from;
        uint256 timestamp;
        string name;
        string message;
    }
    
    // Address of contract deployer. Marked payable so that
    // we can withdraw to this address later.
    address payable owner;

    // List of all memos received from coffee purchases.
    Memo[] memos;

    constructor() {
        // Store the address of the deployer as a payable address.
        // When we withdraw funds, we'll withdraw here.
        owner = payable(msg.sender);
    }

    /**
     * @dev fetches all stored memos
     */
    function getMemos() public view returns (Memo[] memory) {
        return memos;
    }

    /**
     * @dev buy a coffee for owner (sends an ETH tip and leaves a memo)
     * @param _name name of the coffee purchaser
     * @param _message a nice message from the purchaser
     */
    function buyCoffee(string memory _name, string memory _message) public payable {
        // Must accept more than 0 ETH for a coffee.
        require(msg.value > 0, "can't buy coffee for free!");

        // Add the memo to storage!
        memos.push(Memo(
            msg.sender,
            block.timestamp,
            _name,
            _message
        ));

        // Emit a NewMemo event with details about the memo.
        emit NewMemo(
            msg.sender,
            block.timestamp,
            _name,
            _message
        );
    }

    /**
     * @dev send the entire balance stored in this contract to the owner
     */
    function withdrawTips() public {
        require(owner.send(address(this).balance));
    }
}

替换后的合约

4.测试部署合约

将scripts下面的deploy.js的内容替换为下面的

const hre = require("hardhat");

// Returns the Ether balance of a given address.
async function getBalance(address) {
  const balanceBigInt = await hre.ethers.provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
}

// Logs the Ether balances for a list of addresses.
async function printBalances(addresses) {
  let idx = 0;
  for (const address of addresses) {
    console.log(`Address ${idx} balance: `, await getBalance(address));
    idx ++;
  }
}

// Logs the memos stored on-chain from coffee purchases.
async function printMemos(memos) {
  for (const memo of memos) {
    const timestamp = memo.timestamp;
    const tipper = memo.name;
    const tipperAddress = memo.from;
    const message = memo.message;
    console.log(`At ${timestamp}, ${tipper} (${tipperAddress}) said: "${message}"`);
  }
}

async function main() {
  // Get the example accounts we'll be working with.
  const [owner, tipper, tipper2, tipper3] = await hre.ethers.getSigners();

  // We get the contract to deploy.
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
  const buyMeACoffee = await BuyMeACoffee.deploy();

  // Deploy the contract.
  await buyMeACoffee.deployed();
  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);

  // Check balances before the coffee purchase.
  const addresses = [owner.address, tipper.address, buyMeACoffee.address];
  console.log("== start ==");
  await printBalances(addresses);

  // Buy the owner a few coffees.
  const tip = {value: hre.ethers.utils.parseEther("1")};
  await buyMeACoffee.connect(tipper).buyCoffee("Carolina", "You're the best!", tip);
  await buyMeACoffee.connect(tipper2).buyCoffee("Vitto", "Amazing teacher", tip);
  await buyMeACoffee.connect(tipper3).buyCoffee("Kay", "I love my Proof of Knowledge", tip);

  // Check balances after the coffee purchase.
  console.log("== bought coffee ==");
  await printBalances(addresses);

  // Withdraw.
  await buyMeACoffee.connect(owner).withdrawTips();

  // Check balances after withdrawal.
  console.log("== withdrawTips ==");
  await printBalances(addresses);

  // Check out the memos.
  console.log("== memos ==");
  const memos = await buyMeACoffee.getMemos();
  printMemos(memos);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

当我们将上面的替换完毕后，通过命令行运行JS

npx hardhat run scripts/deploy.js

测试我们的合约，当你执行成功会有下面的现实

BuyMeACoffee deployed to: 0x90f64aABA6f526219ff9B8DB40854740E7F3804a
== start ==
Address 0 balance:  9999.998754619375
Address 1 balance:  10000.0
Address 2 balance:  0.0
== bought coffee ==
Address 0 balance:  9999.998754619375
Address 1 balance:  9998.999752893990255063
Address 2 balance:  3.0
== withdrawTips ==
Address 0 balance:  10002.998708719732606388
Address 1 balance:  9998.999752893990255063
Address 2 balance:  0.0
== memos ==
At 1660268820, Carolina (0x70997970C51812dc3A010C7d01b50e0d17dc79C8) said: "You're the best!"
At 1660268821, Vitto (0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC) said: "Amazing teacher"
At 1660268822, Kay (0x90F79bf6EB2c4f870365E785982E1f101E93b906) said: "I love my Proof of Knowledge"

5.使用 Alchemy 和 MetaMask 将 BuyMeACoffe.sol 智能合约部署到以太坊 Goerli 测试网

新建一个deploy01.js，内容如下：

// scripts/deploy01.js

const hre = require("hardhat");

async function main() {
  // We get the contract to deploy.
  const BuyMeACoffee = await hre.ethers.getContractFactory("BuyMeACoffee");
  const buyMeACoffee = await BuyMeACoffee.deploy();

  await buyMeACoffee.deployed();

  console.log("BuyMeACoffee deployed to:", buyMeACoffee.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

现在我们的项目整体结构就如下了：

新的项目结构

新的项目结构

运行我们刚才脚本：

npx hardhat run scripts/deploy01.js

如果成功的话，你会看到下面这样的提示：

BuyMeACoffee deployed to: 0x90f64aABA6f526219ff9B8DB40854740E7F3804a

这里需要注意哦，当我们多次运行的话，你每次都会看到完全相同的部署地址，这是因为当你运行脚本时，Hardhat 工具使用的默认设置是本地开发网络，就在您的计算机上。它快速且具有确定性，非常适合进行一些快速的健全性检查。

但是，为了实际部署到在 Internet 上运行且节点遍布世界各地的测试网络，我们需要更改我们的 Hardhat 配置文件以提供选项。

6.修改hardhat.config.js 进行配置部署

首先我们将hardhat.config.js先行修改如下：

// hardhat.config.js

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

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

const GOERLI_URL = process.env.GOERLI_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.4",
  networks: {
    goerli: {
      url: GOERLI_URL,
      accounts: [PRIVATE_KEY]
    }
  }
};

# 安装dotenv
npm install dotenv
# 创建一个.env文件
touch .env
# 将下面内容写入env中
GOERLI_URL=https://eth-goerli.alchemyapi.io/v2/<your api key>
GOERLI_API_KEY=<your api key>
PRIVATE_KEY=<your metamask api key>

此外，为了获得所需的环境变量，可以使用以下资源：

• GOERLI_URL- 注册一个帐户炼金术，创建一个 Ethereum -> Goerli 应用程序，并使用 HTTP URL

• GOERLI_API_KEY- 从您的同一个 Alchemy Ethereum Goerli 应用程序中，您可以获得 URL 的最后一部分，这将是您的 API KEY

• PRIVATE_KEY- 遵循这些来自 MetaMask 的说明导出您的私钥。

项目新的结构

项目新的结构

获取Goerli测试币，去下面网址获取测试币

运行脚本发布到测试网络

npx hardhat run scripts/deploy01.js --network goerli

当你成功部署页面会显示：

:BuyMeACoffee-contracts paul$ npx hardhat run scripts/deploy01.js --network goerli
Compiled 1 Solidity file successfully
BuyMeACoffee deployed to: 0x90f64aABA6f526219ff9B8DB40854740E7F3804a

验证下合约是否部署上测试网成功。

7.实现一个脚本withdraw

我们在刚才的脚本下面新建一个withdraw.js的脚本，内容如下：

// scripts/withdraw.js

const hre = require("hardhat");
const abi = require("../artifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json");

async function getBalance(provider, address) {
  const balanceBigInt = await provider.getBalance(address);
  return hre.ethers.utils.formatEther(balanceBigInt);
}

async function main() {
  // Get the contract that has been deployed to Goerli.
  const contractAddress="你的合约地址";
  const contractABI = abi.abi;

  // Get the node connection and wallet connection.
  const provider = new hre.ethers.providers.AlchemyProvider("goerli", process.env.GOERLI_API_KEY);

  // Ensure that signer is the SAME address as the original contract deployer,
  // or else this script will fail with an error.
  const signer = new hre.ethers.Wallet(process.env.PRIVATE_KEY, provider);

  // Instantiate connected contract.
  const buyMeACoffee = new hre.ethers.Contract(contractAddress, contractABI, signer);

  // Check starting balances.
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
  const contractBalance = await getBalance(provider, buyMeACoffee.address);
  console.log("current balance of contract: ", await getBalance(provider, buyMeACoffee.address), "ETH");

  // Withdraw funds if there are funds to withdraw.
  if (contractBalance !== "0.0") {
    console.log("withdrawing funds..")
    const withdrawTxn = await buyMeACoffee.withdrawTips();
    await withdrawTxn.wait();
  } else {
    console.log("no funds to withdraw!");
  }

  // Check ending balance.
  console.log("current balance of owner: ", await getBalance(provider, signer.address), "ETH");
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

在本地测试

# 运行该命令在本地测试
npx hardhat run scripts/withdraw.js

如果没有报错你会有下面的提示：

current balance of owner:  0.14511094798885063 ETH
current balance of contract:  0.0 ETH
no funds to withdraw!
current balance of owner:  0.14511094798885063 ETH

8.使用 Replit 和 Ethers.js 构建前端 Buy Me A Coffee 网站 dapp

首先在Replit IDE将下面的仓库进行fork

fork

fork

在fork之后我们会来到自己的工作台，如下所示：

将文件中写好的变量进行修改

• 更新输入contractAddresspages/index.js

• 将名称字符串更新为您自己的名字pages/index.js

• 确保合同 ABI 与您的合同相匹配utils/BuyMeACoffee.json

可以看到 contractAddress 变量已经填充了地址。修改成你自己部署的合约

将复制过来的仓库的Albert修改成你想要的任意名字都可以

将刚才在编译器生成的ABI复制到Replit中的utils/BuyMeACoffee.json

运行项目

• 如何使用 Apollo GraphQL 客户端设置 Next.js 应用程序

• 如何使用 Lens 协议 API 获取存储在 Polygon 区块链上的个人资料、帖子和其他数据

• MintKudos API 简介——以便您可以将您的 PoK 代币集成到您的 dapp 中！

• Lit 协议简介——如果您想加密某些帖子以仅显示给各个社区成员

• 如何使用 Repl.it 部署你的去中心化社交媒体应用程序前端网站

• 扩展此项目的多个挑战选项！

话不多说了，我们开始今天的课程吧。

1.设置依赖安装Apollo

我们今天的课程需要在VScode中去执行，首先我们需要建立一个项目

# 创建一个road-to-lens 这是注释 不要输入命令行
npx create-next-app road-to-lens
# 安装graphql
npm install @apollo/client graphql
# 运行项目验证
npm run dev

当你出现这样的结果，恭喜你已经成功完成第一步了。

2.在 index.js 页面上使用 Lens 推荐的配置文件尝试 Apollo GraphQL

2.1新建apollo-client.js

我们在当前项目新建一个apollo-client.js输入下面的内容：

// ./apollo-client.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://api.lens.dev",
    cache: new InMemoryCache(),
});

export default client;

修改我们的/pages/_app.js：

// pages/_app.js

import '../styles/globals.css'
import { ApolloProvider } from "@apollo/client";
import client from "../apollo-client";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp

修改/pages/index.js

import { useQuery } from "@apollo/client";
import recommendedProfilesQuery from '../queries/recommendedProfilesQuery.js';
import Profile from '../components/Profile.js';

export default function Home() {
  const {loading, error, data} = useQuery(recommendedProfilesQuery);


  if (loading) return 'Loading..';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.recommendedProfiles.map((profile, index) => {
        console.log(`Profile ${index}:`, profile);
        return <Profile key={profile.id} profile={profile} displayFullProfile={false} />;
      })}
    </div>
  )
}

新建查询js

mkdir queries
touch queries/recommendedProfilesQuery.js

将下面的代码写入recommendedProfilesQuery.js

// queries/recommendedProfilesQuery.js

import {gql} from '@apollo/client';

export default gql`
  query RecommendedProfiles {
    recommendedProfiles {
          id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
          followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
          type
          }
          ... on RevertFollowModuleSettings {
          type
          }
        }
    }
  }
`;

新建组件js

mkdir components
touch components/Profile.js

将下面代码写入Profile.js

// components/Profile.js

import Link from "next/link";
export default function Profile(props) {
  const profile = props.profile;

  // When displayFullProfile is true, we show more info.
  const displayFullProfile = props.displayFullProfile;

  return (
    <div className="p-8">
      <Link href={`/profile/${profile.id}`}>
        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
          <div className="md:flex">
            <div className="md:shrink-0">
              {profile.picture ? (
                <img
                  src={
                    profile.picture.original
                      ? profile.picture.original.url
                      : profile.picture.uri
                  }
                  className="h-48 w-full object-cover md:h-full md:w-48"
                />
              ) : (
                <div
                  style={{
                    backgrondColor: "gray",
                  }}
                  className="h-48 w-full object-cover md:h-full md:w-48"
                />
              )}
            </div>
            <div className="p-8">
              <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
                {profile.handle}
                {displayFullProfile &&
                  profile.name &&
                  " (" + profile.name + ")"}
              </div>
              <div className="block mt-1 text-sm leading-tight font-medium text-black hover:underline">
                {profile.bio}
              </div>
              <div className="mt-2 text-sm text-slate-900">{profile.ownedBy}</div>
              <p className="mt-2 text-xs text-slate-500">
                following: {profile.stats.totalFollowing} followers:{" "}
                {profile.stats.totalFollowers}
              </p>
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
}

我们将项目运行起来出现下面的结果说明你已经离成功不远了，但是现在页面的样式太丑了，让我们来优化下。

2.2优化页面样式

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
# 当你执行完下面这个命令，系统会给你生成一个tailwind.config.js
npx tailwindcss init -p

在生成的tailwind.config.js中写入一下内容：

// tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

同时将我们的globals.css文件末尾加入下面的内容：

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

最终我们的结果展示如下：

3. 创建个人资料页面

首先我们创建个人资料文件夹：

mkdir pages/profile
road-to-lens % touch pages/profile/\[id\].js
touch queries/fetchProfileQuery.js

在fetchProfileQuery.js中写入下面的代码：

// queries/fetchProfileQuery.js

import { gql } from '@apollo/client';

export default gql`
query($request: SingleProfileQueryRequest!) {
    profile(request: $request) {
        id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
        followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
            type
          }
          ... on RevertFollowModuleSettings {
            type
          }
        }
    }
  }
`;

在id.js文件中写入下面的代码：

// pages/profile/[id].js

import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import fetchProfileQuery from "../../queries/fetchProfileQuery.js";

import Profile from "../../components/Profile.js";

export default function ProfilePage() {
  const router = useRouter();
  const { id } = router.query;

  console.log("fetching profile for", id);
  const { loading, error, data } = useQuery(fetchProfileQuery, {
    variables: { request: { profileId: id } },
  });

  if (loading) return "Loading..";
  if (error) return `Error! ${error.message}`;

  console.log("on profile page data: ", data);

  return <Profile profile={data.profile} displayFullProfile={true}/>
}

当我们上面代码编写完毕后，可以输入下面的链接进行验证

• http://localhost:3000/profile/0x9752

• http://localhost:3000/profile/0x25c4

如果到目前为止一切顺利的话，你已经完成了一半了。

4.在个人资料页面上加载用户帖子

将fetchProfileQuery.js覆盖为下面的：

import { gql } from "@apollo/client";

export default gql`
  query (
    $request: SingleProfileQueryRequest!
    $publicationsRequest: PublicationsQueryRequest!
  ) {
    publications( request: $publicationsRequest) {
      items {
        __typename
        ... on Post {
          ...PostFields
        }
        ... on Comment {
          ...CommentFields
        }
        ... on Mirror {
          ...MirrorFields
        }
      }
      pageInfo {
        prev
        next
        totalCount
      }
    }
    profile(request: $request) {
      id
      name
      bio
      attributes {
        displayType
        traitType
        key
        value
      }
      followNftAddress
      metadata
      isDefault
      picture {
        ... on NftImage {
          contractAddress
          tokenId
          uri
          verified
        }
        ... on MediaSet {
          original {
            url
            mimeType
          }
        }
        __typename
      }
      handle
      coverPicture {
        ... on NftImage {
          contractAddress
          tokenId
          uri
          verified
        }
        ... on MediaSet {
          original {
            url
            mimeType
          }
        }
        __typename
      }
      ownedBy
      dispatcher {
        address
        canUseRelay
      }
      stats {
        totalFollowers
        totalFollowing
        totalPosts
        totalComments
        totalMirrors
        totalPublications
        totalCollects
      }
      followModule {
        ... on FeeFollowModuleSettings {
          type
          amount {
            asset {
              symbol
              name
              decimals
              address
            }
            value
          }
          recipient
        }
        ... on ProfileFollowModuleSettings {
          type
        }
        ... on RevertFollowModuleSettings {
          type
        }
      }
    }
  }

  fragment MediaFields on Media {
    url
    mimeType
  }

  fragment ProfileFields on Profile {
    id
    name
    bio
    attributes {
      displayType
      traitType
      key
      value
    }
    isFollowedByMe
    isFollowing(who: null)
    followNftAddress
    metadata
    isDefault
    handle
    picture {
      ... on NftImage {
        contractAddress
        tokenId
        uri
        verified
      }
      ... on MediaSet {
        original {
          ...MediaFields
        }
      }
    }
    coverPicture {
      ... on NftImage {
        contractAddress
        tokenId
        uri
        verified
      }
      ... on MediaSet {
        original {
          ...MediaFields
        }
      }
    }
    ownedBy
    dispatcher {
      address
    }
    stats {
      totalFollowers
      totalFollowing
      totalPosts
      totalComments
      totalMirrors
      totalPublications
      totalCollects
    }
    followModule {
      ... on FeeFollowModuleSettings {
        type
        amount {
          asset {
            name
            symbol
            decimals
            address
          }
          value
        }
        recipient
      }
      ... on ProfileFollowModuleSettings {
        type
      }
      ... on RevertFollowModuleSettings {
        type
      }
    }
  }

  fragment PublicationStatsFields on PublicationStats {
    totalAmountOfMirrors
    totalAmountOfCollects
    totalAmountOfComments
  }

  fragment MetadataOutputFields on MetadataOutput {
    name
    description
    content
    media {
      original {
        ...MediaFields
      }
    }
    attributes {
      displayType
      traitType
      value
    }
  }

  fragment Erc20Fields on Erc20 {
    name
    symbol
    decimals
    address
  }

  fragment CollectModuleFields on CollectModule {
    __typename
    ... on FreeCollectModuleSettings {
      type
      followerOnly
      contractAddress
    }
    ... on FeeCollectModuleSettings {
      type
      amount {
        asset {
          ...Erc20Fields
        }
        value
      }
      recipient
      referralFee
    }
    ... on LimitedFeeCollectModuleSettings {
      type
      collectLimit
      amount {
        asset {
          ...Erc20Fields
        }
        value
      }
      recipient
      referralFee
    }
    ... on LimitedTimedFeeCollectModuleSettings {
      type
      collectLimit
      amount {
        asset {
          ...Erc20Fields
        }
        value
      }
      recipient
      referralFee
      endTimestamp
    }
    ... on RevertCollectModuleSettings {
      type
    }
    ... on TimedFeeCollectModuleSettings {
      type
      amount {
        asset {
          ...Erc20Fields
        }
        value
      }
      recipient
      referralFee
      endTimestamp
    }
  }

  fragment PostFields on Post {
    id
    profile {
      ...ProfileFields
    }
    stats {
      ...PublicationStatsFields
    }
    metadata {
      ...MetadataOutputFields
    }
    createdAt
    collectModule {
      ...CollectModuleFields
    }
    referenceModule {
      ... on FollowOnlyReferenceModuleSettings {
        type
      }
    }
    appId
    hidden
    mirrors(by: null)
    hasCollectedByMe
  }

  fragment MirrorBaseFields on Mirror {
    id
    profile {
      ...ProfileFields
    }
    stats {
      ...PublicationStatsFields
    }
    metadata {
      ...MetadataOutputFields
    }
    createdAt
    collectModule {
      ...CollectModuleFields
    }
    referenceModule {
      ... on FollowOnlyReferenceModuleSettings {
        type
      }
    }
    appId
    hidden
    hasCollectedByMe
  }

  fragment MirrorFields on Mirror {
    ...MirrorBaseFields
    mirrorOf {
      ... on Post {
        ...PostFields
      }
      ... on Comment {
        ...CommentFields
      }
    }
  }

  fragment CommentBaseFields on Comment {
    id
    profile {
      ...ProfileFields
    }
    stats {
      ...PublicationStatsFields
    }
    metadata {
      ...MetadataOutputFields
    }
    createdAt
    collectModule {
      ...CollectModuleFields
    }
    referenceModule {
      ... on FollowOnlyReferenceModuleSettings {
        type
      }
    }
    appId
    hidden
    mirrors(by: null)
    hasCollectedByMe
  }

  fragment CommentFields on Comment {
    ...CommentBaseFields
    mainPost {
      ... on Post {
        ...PostFields
      }
      ... on Mirror {
        ...MirrorBaseFields
        mirrorOf {
          ... on Post {
            ...PostFields
          }
          ... on Comment {
            ...CommentMirrorOfFields
          }
        }
      }
    }
  }

  fragment CommentMirrorOfFields on Comment {
    ...CommentBaseFields
    mainPost {
      ... on Post {
        ...PostFields
      }
      ... on Mirror {
        ...MirrorBaseFields
      }
    }
  }
`;

在components/Post.js 新建一个Post.js并且写入一下代码：

// components/Post.js
export default function Post(props) {
  const post = props.post;

  return (
    <div className="p-8">
      <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
        <div className="md:flex">
          <div className="p-8">
            <p className="mt-2 text-xs text-slate-500 whitespace-pre-line">
              {post.metadata.content}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

将[id].js覆盖为下面的：

import { useQuery, useMutation } from "@apollo/client";
import { useRouter } from "next/router";
import fetchProfileQuery from "../../queries/fetchProfileQuery.js";
import Profile from "../../components/Profile.js";
import Post from "../../components/Post.js";

export default function ProfilePage() {
  const router = useRouter();
  const { id } = router.query;

  console.log("fetching profile for", id);
  const { loading, error, data } = useQuery(fetchProfileQuery, {
    variables: {
      request: { profileId: id },
      publicationsRequest: {
        profileId: id,
        publicationTypes: ["POST"],
      },
    },
  });

  if (loading) return "Loading..";
  if (error) return `Error! ${error.message}`;

  return (
    <div className="flex flex-col p-8 items-center">
      <Profile profile={data.profile} displayFullProfile={true} />
      {data.publications.items.map((post, idx) => {
        return <Post key={idx} post={post}/>;
      })}
    </div>
  );
}

验证结果 http://localhost:3000/profile/0x28a2，恭喜，你正在成为一个去中心化的社交媒体开发者。

在本教程结束时，将学习如何执行以下操作：

• 了解为什么流动性聚合很重要

• 查询并显示ERC20 代币列表

• 使用0x API /swap 端点

• 设置代币限额

• 构建一个使用web3.js连接到MetaMask的简单代币交换DApp

结果展示

正课开始

1.clone 代码

因为我们需要在浏览器中使用节点模块，所以需要安装下面的依赖

# 可能权限不足 则使用sudo
npm install -g browserify
npm i qs
# 每一步修改了代码为了最新的代码都必须执行下面的
browserify index.js --standalone bundle -o bundle.js
npm install bignumber.js

2.使用vscode打开我们的代码

我们将clone的代码使用VScode打开后，为了方便使用则需要安装一些扩展工具，按照下面安装即可：

当上面都安装好后，我们使用安装的工具运行代码，会出现下面的页面，系统会自动去加载token信息。

系统会自动给我们计算Gas，我们连接上钱包，点击Swap，小狐狸钱包会提示我们授权

当我们批准授权后，小狐狸钱包会再次提醒我们去和合约交互做Swap，我们再次同意后就可以等待事物的完成。

当你完成后，可以多种方式查询结构，如去区块浏览器查询，或者在自己钱包查看

注意事项：因为合理0x是使用主网的哦，切记。

最后我们别忘了去填写表格哦。

1.新建端点

首先我们的去Alchemy网站新建Optimism的端点。

2.clone代码

当我们将代码clone到本地之后，因为一般代码上传不会上传依赖，所以我们去安装依赖。

# 安装依赖
yarn

3.修改配置部署合约

当我们将依赖安装完毕后，我们去修改我们的hardhat.config.js，修改内容如下：

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

// This is a sample Hardhat task. To learn how to create your own go to
// https://hardhat.org/guides/create-task.html
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(account.address);
  }
});

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more


// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

/**
 * 切记私钥不要上传到仓库 切记 切记
 */

module.exports = {
  solidity: "0.8.4",
  networks: {
    
    "optimism": {
       url: "第一步新建的Optimism的url",
       accounts: [ "你的私钥" ]
    }
  }
};

修改完毕后我们在控制台输入：

yarn  hardhat console --network optimism

系统会自动给我们编译合约，因为我们加了console命令，所以会进入控制台，同时我们会生成几个文件：

上面我们已经进入了控制台，下面的命令就在控制台输入了：

# 查看自己的当前账户是否是你的小狐狸账户
signer = await ethers.getSigner();

# 查询当前账户的余额
balance0 = await ethers.provider.getBalance((await ethers.getSigner()).address)
BigNumber { value: "48335146483888624" }

#开始编译合约 
factory = ethers.getContractFactory("Casino")
# 下面这条命令会返回我们bytecode等信息
factory = await factory
# 部署合约 你的optimism一定要有费用，具体的可以看下面怎么给optimism充值
casino = await factory.deploy()

找到你部署的hash去区块浏览器进行查询，当然也可以用你的钱包查询

3.开始游戏

我们仍然在控制台输入：

# 直接粘贴复制进去
const valA = ethers.utils.keccak256(0xBAD060A7)
const hashA = ethers.utils.keccak256(valA)
const valBwin = ethers.utils.keccak256(0x600D60A7)
tx1 = await casino.proposeBet(hashA,{ value: 1e5})

最后再来一次游戏就结束了：

# 如果你的value和上面的不一致，会需要重新覆盖且报错
tx2 = await casino.acceptBet(hashA, valBwin, {value: 1e5})

当你运行命令出现了下面的情况，就说明你的钱包余额不足，所以需要我们去转下ETH到optimism

我们去到 optimism的网站转入ETH即可。

• 注册一个 Alchemy 帐户并创建一个新应用程序

• MetaMask切换到Goerli且你的钱包里面至少有 0.1 Goerli ETH

• 如果您没有 Goerli 地址，将 MetaMask 连接到 Goerli 网络， 接着使用 Goerli 水龙头请求 Goerli ETH. 您将需要 Goerli ETH 来部署智能合约并将 NFT 上传到您的 NFT 市场。

在MetaMask中添加下面的链信息：

• Network Name: Goerli Test Network

  RPC base URL: https://eth-goerli.alchemyapi.io/v2/{INSERT YOUR API KEY}

  Chain ID: 5

  Block Explorer URL: https://goerli.etherscan.io/

1.设置存储库、设置环境变量和 Hardhat 配置

本次课程我们继续使用repli来做

首先我们将本次需要的前端代码clone下来，具体操作如下：

导入仓库文件

导入仓库文件，等到项目倒入完成，当项目完成后，我们需要去修改配置文件

导入文件

导入文件

然后在项目下执行

npm install
npm start

首先我们将hardhat.config.js的内容修改如下：

require("@nomiclabs/hardhat-waffle");
require("@nomiclabs/hardhat-ethers");
const fs = require('fs');
// const infuraId = fs.readFileSync(".infuraid").toString().trim() || "";
require('dotenv').config();

task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(account.address);
  }
});

module.exports = {
  defaultNetwork: "hardhat",
  networks: {
    hardhat: {
      chainId: 1337
    },
    goerli: {
      url: process.env.REACT_APP_ALCHEMY_API_URL,
      accounts: [ process.env.REACT_APP_PRIVATE_KEY ]
    }
  },
  solidity: {
    version: "0.8.4",
    settings: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    }
  }
};

同时新建一个.env文件，文件容易如下，如果无法新建直接将该值替换即可

REACT_APP_ALCHEMY_API_URL="<YOUR_API_URL>"
REACT_APP_PRIVATE_KEY="<YOUR_PRIVATE_KEY>"

当我们上面做好了，我们在shell中输入一下命令，让系统帮助我们安装依赖等信息：

npm install dotenv --save

2.使用 Piñata 将数据上传到 IPFS

如果没有 Piñata 帐户，注册一个即可。当注册登录进去后我们需要去获取api_key.

我们需要新建一个key，同时将Admin权限开启，给自己的key命名

当我们新建成功后，页面会提示一个有关key的信息，将它复制到安全的地方

同时将我们的.env文件进行修改：

REACT_APP_ALCHEMY_API_URL="<YOUR_API_URL>"
REACT_APP_PRIVATE_KEY="<YOUR_PRIVATE_KEY>"
REACT_APP_PINATA_KEY="<YOUR_PINATA_KEY>"
REACT_APP_PINATA_SECRET="<YOUR_PINATA_SECRET>"

3.编写合约

现在去修改NFTMarketplace.sol这个文件，合约代码如下：

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract NFTMarketplace is ERC721URIStorage {

    using Counters for Counters.Counter;
    //_tokenIds variable has the most recent minted tokenId
    Counters.Counter private _tokenIds;
    //Keeps track of the number of items sold on the marketplace
    Counters.Counter private _itemsSold;
    //owner is the contract address that created the smart contract
    address payable owner;
    //The fee charged by the marketplace to be allowed to list an NFT
    uint256 listPrice = 0.01 ether;

    //The structure to store info about a listed token
    struct ListedToken {
        uint256 tokenId;
        address payable owner;
        address payable seller;
        uint256 price;
        bool currentlyListed;
    }

    //the event emitted when a token is successfully listed
    event TokenListedSuccess (
        uint256 indexed tokenId,
        address owner,
        address seller,
        uint256 price,
        bool currentlyListed
    );

    //This mapping maps tokenId to token info and is helpful when retrieving details about a tokenId
    mapping(uint256 => ListedToken) private idToListedToken;

    constructor() ERC721("NFTMarketplace", "NFTM") {
        owner = payable(msg.sender);
    }

    function updateListPrice(uint256 _listPrice) public payable {
        require(owner == msg.sender, "Only owner can update listing price");
        listPrice = _listPrice;
    }

    function getListPrice() public view returns (uint256) {
        return listPrice;
    }

    function getLatestIdToListedToken() public view returns (ListedToken memory) {
        uint256 currentTokenId = _tokenIds.current();
        return idToListedToken[currentTokenId];
    }

    function getListedTokenForId(uint256 tokenId) public view returns (ListedToken memory) {
        return idToListedToken[tokenId];
    }

    function getCurrentToken() public view returns (uint256) {
        return _tokenIds.current();
    }

    //The first time a token is created, it is listed here
    function createToken(string memory tokenURI, uint256 price) public payable returns (uint) {
        //Increment the tokenId counter, which is keeping track of the number of minted NFTs
        _tokenIds.increment();
        uint256 newTokenId = _tokenIds.current();

        //Mint the NFT with tokenId newTokenId to the address who called createToken
        _safeMint(msg.sender, newTokenId);

        //Map the tokenId to the tokenURI (which is an IPFS URL with the NFT metadata)
        _setTokenURI(newTokenId, tokenURI);

        //Helper function to update Global variables and emit an event
        createListedToken(newTokenId, price);

        return newTokenId;
    }

    function createListedToken(uint256 tokenId, uint256 price) private {
        //Make sure the sender sent enough ETH to pay for listing
        require(msg.value == listPrice, "Hopefully sending the correct price");
        //Just sanity check
        require(price > 0, "Make sure the price isn't negative");

        //Update the mapping of tokenId's to Token details, useful for retrieval functions
        idToListedToken[tokenId] = ListedToken(
            tokenId,
            payable(address(this)),
            payable(msg.sender),
            price,
            true
        );

        _transfer(msg.sender, address(this), tokenId);
        //Emit the event for successful transfer. The frontend parses this message and updates the end user
        emit TokenListedSuccess(
            tokenId,
            address(this),
            msg.sender,
            price,
            true
        );
    }
    
    //This will return all the NFTs currently listed to be sold on the marketplace
    function getAllNFTs() public view returns (ListedToken[] memory) {
        uint nftCount = _tokenIds.current();
        ListedToken[] memory tokens = new ListedTokenUnsupported embed;
        uint currentIndex = 0;

        //at the moment currentlyListed is true for all, if it becomes false in the future we will 
        //filter out currentlyListed == false over here
        for(uint i=0;i<nftCount;i++)
        {
            uint currentId = i + 1;
            ListedToken storage currentItem = idToListedToken[currentId];
            tokens[currentIndex] = currentItem;
            currentIndex += 1;
        }
        //the array 'tokens' has the list of all NFTs in the marketplace
        return tokens;
    }
    
    //Returns all the NFTs that the current user is owner or seller in
    function getMyNFTs() public view returns (ListedToken[] memory) {
        uint totalItemCount = _tokenIds.current();
        uint itemCount = 0;
        uint currentIndex = 0;
        
        //Important to get a count of all the NFTs that belong to the user before we can make an array for them
        for(uint i=0; i < totalItemCount; i++)
        {
            if(idToListedToken[i+1].owner == msg.sender || idToListedToken[i+1].seller == msg.sender){
                itemCount += 1;
            }
        }

        //Once you have the count of relevant NFTs, create an array then store all the NFTs in it
        ListedToken[] memory items = new ListedTokenUnsupported embed;
        for(uint i=0; i < totalItemCount; i++) {
            if(idToListedToken[i+1].owner == msg.sender || idToListedToken[i+1].seller == msg.sender) {
                uint currentId = i+1;
                ListedToken storage currentItem = idToListedToken[currentId];
                items[currentIndex] = currentItem;
                currentIndex += 1;
            }
        }
        return items;
    }

    function executeSale(uint256 tokenId) public payable {
        uint price = idToListedToken[tokenId].price;
        address seller = idToListedToken[tokenId].seller;
        require(msg.value == price, "Please submit the asking price in order to complete the purchase");

        //update the details of the token
        idToListedToken[tokenId].currentlyListed = true;
        idToListedToken[tokenId].seller = payable(msg.sender);
        _itemsSold.increment();

        //Actually transfer the token to the new owner
        _transfer(address(this), msg.sender, tokenId);
        //approve the marketplace to sell NFTs on your behalf
        approve(address(this), tokenId);

        //Transfer the listing fee to the marketplace creator
        payable(owner).transfer(listPrice);
        //Transfer the proceeds from the sale to the seller of the NFT
        payable(seller).transfer(msg.value);
    }

    //We might add a resell token function in the future
    //In that case, tokens won't be listed by default but users can send a request to actually list a token
    //Currently NFTs are listed by default
}

4.在 Goerli 上部署智能合约

找到部署合约的deploy.js，将下面的代码写入：

const { ethers } = require("hardhat");
const hre = require("hardhat");
const fs = require("fs");

async function main() {
  //get the signer that we will use to deploy
  const [deployer] = await ethers.getSigners();
  
  //Get the NFTMarketplace smart contract object and deploy it
  const Marketplace = await hre.ethers.getContractFactory("NFTMarketplace");
  const marketplace = await Marketplace.deploy();

  await marketplace.deployed();
  
  //Pull the address and ABI out while you deploy, since that will be key in interacting with the smart contract later
  const data = {
    address: marketplace.address,
    abi: JSON.parse(marketplace.interface.format('json'))
  }

  //This writes the ABI and address to the marketplace.json
  //This data is then used by frontend files to connect with the smart contract
  fs.writeFileSync('./src/Marketplace.json', JSON.stringify(data))
}

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

使用下面的命令部署合约

npx hardhat run --network goerli scripts/deploy.js

当你看到生成了一下的文件则说明你已经成功部署了

我们在部署的json文件中也可以找到合约的地址，我们去浏览器查看下合约地址是：

0x75E88d1B05014A5B8B24EfA73e3A740ae050063a

5.添加将 NFT 元数据上传到 Piñata 的功能

我们首先新建一个pinata.js并将下面的代码填写进去，记住如果是硬编码，需要替换你的key等信息：

//require('dotenv').config();
const key = process.env.REACT_APP_PINATA_KEY;
const secret = process.env.REACT_APP_PINATA_SECRET;

const axios = require('axios');
const FormData = require('form-data');

export const uploadJSONToIPFS = async(JSONBody) => {
    const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`;
    //making axios POST request to Pinata ⬇️
    return axios 
        .post(url, JSONBody, {
            headers: {
                pinata_api_key: key,
                pinata_secret_api_key: secret,
            }
        })
        .then(function (response) {
           return {
               success: true,
               pinataURL: "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash
           };
        })
        .catch(function (error) {
            console.log(error)
            return {
                success: false,
                message: error.message,
            }

    });
};

export const uploadFileToIPFS = async(file) => {
    const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;
    //making axios POST request to Pinata ⬇️
    
    let data = new FormData();
    data.append('file', file);

    const metadata = JSON.stringify({
        name: 'testname',
        keyvalues: {
            exampleKey: 'exampleValue'
        }
    });
    data.append('pinataMetadata', metadata);

    //pinataOptions are optional
    const pinataOptions = JSON.stringify({
        cidVersion: 0,
        customPinPolicy: {
            regions: [
                {
                    id: 'FRA1',
                    desiredReplicationCount: 1
                },
                {
                    id: 'NYC1',
                    desiredReplicationCount: 2
                }
            ]
        }
    });
    data.append('pinataOptions', pinataOptions);

    return axios 
        .post(url, data, {
            maxBodyLength: 'Infinity',
            headers: {
                'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
                pinata_api_key: key,
                pinata_secret_api_key: secret,
            }
        })
        .then(function (response) {
            console.log("image uploaded", response.data.IpfsHash)
            return {
               success: true,
               pinataURL: "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash
           };
        })
        .catch(function (error) {
            console.log(error)
            return {
                success: false,
                message: error.message,
            }

    });
};

6.将前端与智能合约集成

为了使平台无缝工作，将前端与智能合约中的功能集成，需要将下面的代码直接覆盖即可

src/components/SellNFT.js：

import Navbar from "./Navbar";
import { useState } from "react";
import { uploadFileToIPFS, uploadJSONToIPFS } from "../pinata";
import Marketplace from '../Marketplace.json';
import { useLocation } from "react-router";

export default function SellNFT() {
  const [formParams, updateFormParams] = useState({ name: '', description: '', price: '' });
  const [fileURL, setFileURL] = useState(null);
  const ethers = require("ethers");
  const [message, updateMessage] = useState('');
  const location = useLocation();
  //This function uploads the NFT image to IPFS
  async function OnChangeFile(e) {
    var file = e.target.files[0];
    //check for file extension
    try {
      //upload the file to IPFS
      const response = await uploadFileToIPFS(file);
      if (response.success === true) {
        console.log("Uploaded image to Pinata: ", response.pinataURL)
        setFileURL(response.pinataURL);
      }
    }
    catch (e) {
      console.log("Error during file upload", e);
    }
  }

  //This function uploads the metadata to IPDS
  async function uploadMetadataToIPFS() {
    const { name, description, price } = formParams;
    //Make sure that none of the fields are empty
    if (!name || !description || !price || !fileURL)
      return;

    const nftJSON = {
      name, description, price, image: fileURL
    }

    try {
      //upload the metadata JSON to IPFS
      const response = await uploadJSONToIPFS(nftJSON);
      if (response.success === true) {
        console.log("Uploaded JSON to Pinata: ", response)
        return response.pinataURL;
      }
    }
    catch (e) {
      console.log("error uploading JSON metadata:", e)
    }
  }

  async function listNFT(e) {
    e.preventDefault();

    //Upload data to IPFS
    try {
      const metadataURL = await uploadMetadataToIPFS();
      //After adding your Hardhat network to your metamask, this code will get providers and signers
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      updateMessage("Please wait.. uploading (upto 5 mins)")

      //Pull the deployed contract instance
      let contract = new ethers.Contract(Marketplace.address, Marketplace.abi, signer)

      //massage the params to be sent to the create NFT request
      const price = ethers.utils.parseUnits(formParams.price, 'ether')
      let listingPrice = await contract.getListPrice()
      listingPrice = listingPrice.toString()

      //actually create the NFT
      let transaction = await contract.createToken(metadataURL, price, { value: listingPrice })
      await transaction.wait()

      alert("Successfully listed your NFT!");
      updateMessage("");
      updateFormParams({ name: '', description: '', price: '' });
      window.location.replace("/")
    }
    catch (e) {
      alert("Upload error" + e)
    }
  }

  return (
    <div className="">
      <Navbar></Navbar>
      <div className="flex flex-col place-items-center mt-10" id="nftForm">
        <form className="bg-white shadow-md rounded px-8 pt-4 pb-8 mb-4">
          <h3 className="text-center font-bold text-purple-500 mb-8">Upload your NFT to the marketplace</h3>
          <div className="mb-4">
            <label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="name">NFT Name</label>
            <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Axie#4563" onChange={e => updateFormParams({ ...formParams, name: e.target.value })} value={formParams.name}></input>
          </div>
          <div className="mb-6">
            <label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="description">NFT Description</label>
            <textarea className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" cols="40" rows="5" id="description" type="text" placeholder="Axie Infinity Collection" value={formParams.description} onChange={e => updateFormParams({ ...formParams, description: e.target.value })}></textarea>
          </div>
          <div className="mb-6">
            <label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="price">Price (in ETH)</label>
            <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="number" placeholder="Min 0.01 ETH" step="0.01" value={formParams.price} onChange={e => updateFormParams({ ...formParams, price: e.target.value })}></input>
          </div>
          <div>
            <label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="image">Upload Image</label>
            <input type={"file"} onChange={""}></input>
          </div>
          <br></br>
          <div className="text-green text-center">{message}</div>
          <button onClick={""} className="font-bold mt-10 w-full bg-purple-500 text-white rounded p-2 shadow-lg">
            List NFT
          </button>
        </form>
      </div>
    </div>
  )
}

src/components/Marketplace.js：

import Navbar from "./Navbar";
import NFTTile from "./NFTTile";
import MarketplaceJSON from "../Marketplace.json";
import axios from "axios";
import { useState } from "react";

export default function Marketplace() {
  const sampleData = [
    {
      "name": "NFT#1",
      "description": "Alchemy's First NFT",
      "website": "http://axieinfinity.io",
      "image": "https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5",
      "price": "0.03ETH",
      "currentlySelling": "True",
      "address": "0xe81Bf5A757CB4f7F82a2F23b1e59bE45c33c5b13",
    },
    {
      "name": "NFT#2",
      "description": "Alchemy's Second NFT",
      "website": "http://axieinfinity.io",
      "image": "https://gateway.pinata.cloud/ipfs/QmdhoL9K8my2vi3fej97foiqGmJ389SMs55oC5EdkrxF2M",
      "price": "0.03ETH",
      "currentlySelling": "True",
      "address": "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13",
    },
    {
      "name": "NFT#3",
      "description": "Alchemy's Third NFT",
      "website": "http://axieinfinity.io",
      "image": "https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5",
      "price": "0.03ETH",
      "currentlySelling": "True",
      "address": "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13",
    },
  ];
  const [data, updateData] = useState(sampleData);
  const [dataFetched, updateFetched] = useState(false);
async function getAllNFTs() {
    const ethers = require("ethers");
    //After adding your Hardhat network to your metamask, this code will get providers and signers
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    //Pull the deployed contract instance
    let contract = new ethers.Contract(MarketplaceJSON.address, MarketplaceJSON.abi, signer)
    //create an NFT Token
    let transaction = await contract.getAllNFTs()

    //Fetch all the details of every NFT from the contract and display
    const items = await Promise.all(transaction.map(async i => {
        const tokenURI = await contract.tokenURI(i.tokenId);
        let meta = await axios.get(tokenURI);
        meta = meta.data;

        let price = ethers.utils.formatUnits(i.price.toString(), 'ether');
        let item = {
            price,
            tokenId: i.tokenId.toNumber(),
            seller: i.seller,
            owner: i.owner,
            image: meta.image,
            name: meta.name,
            description: meta.description,
        }
        return item;
    }))

    updateFetched(true);
    updateData(items);
}

if(!dataFetched)
    getAllNFTs();

  return (
    <div>
      <Navbar></Navbar>
      <div className="flex flex-col place-items-center mt-20">
        <div className="md:text-xl font-bold text-white">
          Top NFTs
        </div>
        <div className="flex mt-5 justify-between flex-wrap max-w-screen-xl text-center">
          {data.map((value, index) => {
            return <NFTTile data={value} key={index}></NFTTile>;
          })}
        </div>
      </div>
    </div>
  );

}

src/components/Profile.js：

import Navbar from "./Navbar";
import { useLocation, useParams } from 'react-router-dom';
import MarketplaceJSON from "../Marketplace.json";
import axios from "axios";
import { useState } from "react";
import NFTTile from "./NFTTile";

export default function Profile() {
  const [data, updateData] = useState([]);
  const [address, updateAddress] = useState("0x");
  const [totalPrice, updateTotalPrice] = useState("0");
  const [dataFetched, updateFetched] = useState(false);
  async function getNFTData(tokenId) {
    const ethers = require("ethers");
    let sumPrice = 0;

    //After adding your Hardhat network to your metamask, this code will get providers and signers
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const addr = await signer.getAddress();

    //Pull the deployed contract instance
    let contract = new ethers.Contract(MarketplaceJSON.address, MarketplaceJSON.abi, signer)

    //create an NFT Token
    let transaction = await contract.getMyNFTs()

    /*
    * Below function takes the metadata from tokenURI and the data returned by getMyNFTs() contract function
    * and creates an object of information that is to be displayed
    */

    const items = await Promise.all(transaction.map(async i => {
      const tokenURI = await contract.tokenURI(i.tokenId);
      let meta = await axios.get(tokenURI);
      meta = meta.data;

      let price = ethers.utils.formatUnits(i.price.toString(), 'ether');
      let item = {
        price,
        tokenId: i.tokenId.toNumber(),
        seller: i.seller,
        owner: i.owner,
        image: meta.image,
        name: meta.name,
        description: meta.description,
      }
      sumPrice += Number(price);
      return item;
    }))

    updateData(items);
    updateFetched(true);
    updateAddress(addr);
    updateTotalPrice(sumPrice.toPrecision(3));
  }

  const params = useParams();
  const tokenId = params.tokenId;
  if (!dataFetched)
    getNFTData(tokenId);
  return (
    <div className="profileClass" style={{ "min-height": "100vh" }}>
      <Navbar></Navbar>
      <div className="profileClass">
        <div className="flex text-center flex-col mt-11 md:text-2xl text-white">
          <div className="mb-5">
            <h2 className="font-bold">Wallet Address</h2>
            {address}
          </div>
        </div>
        <div className="flex flex-row text-center justify-center mt-10 md:text-2xl text-white">
          <div>
            <h2 className="font-bold">No. of NFTs</h2>
            {data.length}
          </div>
          <div className="ml-20">
            <h2 className="font-bold">Total Value</h2>
            {totalPrice} ETH
          </div>
        </div>
        <div className="flex flex-col text-center items-center mt-11 text-white">
          <h2 className="font-bold">Your NFTs</h2>
          <div className="flex justify-center flex-wrap max-w-screen-xl">
            {data.map((value, index) => {
              return <NFTTile data={value} key={index}></NFTTile>;
            })}
          </div>
          <div className="mt-10 text-xl">
            {data.length == 0 ? "Oops, No NFT data to display (Are you logged in?)" : ""}
          </div>
        </div>
      </div>
    </div>
  )
};

src/components/NFTPage.js

import Navbar from "./Navbar";
import axie from "../tile.jpeg";
import { useLocation, useParams } from 'react-router-dom';
import MarketplaceJSON from "../Marketplace.json";
import axios from "axios";
import { useState } from "react";

export default function NFTPage(props) {

  const [data, updateData] = useState({});
  const [message, updateMessage] = useState("");
  const [currAddress, updateCurrAddress] = useState("0x");
  const [dataFetched, updateDataFetched] = useState(false);
  async function getNFTData(tokenId) {
    const ethers = require("ethers");
    //After adding your Hardhat network to your metamask, this code will get providers and signers
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    //Pull the deployed contract instance
    let contract = new ethers.Contract(MarketplaceJSON.address, MarketplaceJSON.abi, signer)
    //create an NFT Token
    const tokenURI = await contract.tokenURI(tokenId);
    const listedToken = await contract.getListedTokenForId(tokenId);
    let meta = await axios.get(tokenURI);
    meta = meta.data;
    console.log(listedToken);

    let item = {
      price: meta.price,
      tokenId: tokenId,
      seller: listedToken.seller,
      owner: listedToken.owner,
      image: meta.image,
      name: meta.name,
      description: meta.description,
    }
    console.log(item);
    updateData(item);
    updateDataFetched(true);
  }

  async function buyNFT(tokenId) {
    try {
      const ethers = require("ethers");
      //After adding your Hardhat network to your metamask, this code will get providers and signers
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      //Pull the deployed contract instance
      let contract = new ethers.Contract(MarketplaceJSON.address, MarketplaceJSON.abi, signer);
      const salePrice = ethers.utils.parseUnits(data.price, 'ether')
      let transaction = await contract.executeSale(tokenId, { value: salePrice });
      await transaction.wait();

      alert('You successfully bought the NFT!');
    }
    catch (e) {
      alert("Upload Error" + e)
    }
  }

  return (
    <div style={{ "min-height": "100vh" }}>
      <Navbar></Navbar>
      <div className="flex ml-20 mt-20">
        <img src={data.image} alt="" className="w-2/5" />
        <div className="text-xl ml-20 space-y-8 text-white shadow-2xl rounded-lg border-2 p-5">
          <div>
            Name: {data.name}
          </div>
          <div>
            Description: {data.description}
          </div>
          <div>
            Price: <span className="">{data.price + " ETH"}</span>
          </div>
          <div>
            Owner: <span className="text-sm">{data.owner}</span>
          </div>
          <div>
            Seller: <span className="text-sm">{data.seller}</span>
          </div>
          <div>
            {currAddress == data.owner || currAddress == data.seller ?
              <div className="text-emerald-700">You are the owner of this NFT</div>
              : <button className="enableEthereumButton bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">Buy this NFT</button>
            }

            <div className="text-green text-center mt-3">{message}</div>
          </div>
        </div>
      </div>
    </div>
  )
}

7.测试代码

我们在shell输入npm start 则会出现这样的页面