创建一个像Opensea一样的NFT市场

000

如何创建一个像Opensea一样的NFT市场：包含 NFT 及NFT 买卖市场合约的编写、以及相应的前端页面。

  • 原文：https://dev.to/yakult/tutorial-build-a-nft-marketplace-dapp-like-opensea-3ng9
  • 译文出自：区块链开发网翻译计划
  • 译者：翻译小组
  • 校对：Tiny 熊
  • 本文永久链接：learnblockchain.cn/article…

创建一个像Opensea一样的NFT市场

使用Solidity和Web3-React构建一个像Opensea一样的NFT市场DApp 是你开启web3之旅的一个好步骤。我们来学习编写一个具有完整功能的智能合约实现一个数字藏品的市场。一个集合的NFT是这里交易的数字物品。

本教程包含的内容

  • 任务1：我们建立什么和项目设置
  • 任务2：NFT集合智能合约
  • 任务3：显示NFT项目的网页
  • 任务4：NFT市场智能合约
  • 任务5：NFTM市场的Web应用

Nader Dabit写了两个版本的在Polygon网络上构建应用的全栈开发指南。受他的想法启发，基于他的智能合约代码库，我编写了这个教程。

你可以阅读我以前的教程，并在之后进行练习。如果没有，我建议你在开始之前阅读以下两篇，因为我不会解释那里已经解释的一些技术。

  • 教程：用Hardhat、React和ethers.js构建DApp
  • 教程：用Web3-React和SWR构建DApp

让我们开始构建吧。

任务1: 创建项目及设置

任务1.1: 项目包含三部分：

  • 一个NFT智能合约和一个简单的网页来显示NFT。我们将使用链上SVG作为NFT项目的图像。我们需要一个NFT集合图片，以便在市场合约和前端市场页面中使用。
  • 一个NFT市场的智能合约用户可以上架NFT及购买NFT。卖家可以将自己的NFT从市场上下架。还需要为前端提供查询功能，以查询市场的数据。我们将尽可能地用单元测试来覆盖这个智能合约。
  • 一个使用React/Web3-React/SWR的NFT前端市场页面。为了简单起见，我们只构建了一个单页面的web市场应用。例如，我们不提供卖家在webapp中向市场上架NFT的功能。

项目的关键部分创建有数据存储、买卖核心功能和查询功能的市场智能合约（NFTMarketplace）。

核心功能：

function createMarketItem(address nftContract,uint256 tokenId,uint256 price) payable 
  function deleteMarketItem(uint256 itemId) public
  function createMarketSale(address nftContract,uint256 id) public payable

查询功能：

function fetchActiveItems() public view returns (MarketItem[] memory) 
  function fetchMyPurchasedItems() public view returns (MarketItem[] memory)
  function fetchMyCreatedItems() public view returns (MarketItem[] memory)

卖方可以使用智能合约来：

  • 授权NFT给市场合约
  • 上架一个项目并设置价格
  • （等待买家购买NFT）
  • 收取价格

当买方在市场上购买时，市场合约则促进购买进行：

  • 买方通过支付价格购买
  • 市场合约简化了购买过程:
    • 将价格金额转移给卖方
    • 卖方将NFT转给买方
    • 将上架费用转给市场所有者
    • 将市场项目的状态从Created改为Release

本教程的GitHub仓库：

  • 智能合约（hardhat项目）：https://github.com/fjun99/nftmarketplace
  • 使用React的网络应用：https://github.com/fjun99/web3app-tutrial-using-web3react（nftmarket分支)

  • 虽然我从Dabit的NFT市场教程中学到了很多东西，但我们要建立的市场有3个主要的区别：

    • Dabit的NFT是一个传统的NFT，它在IPFS上存储图片，而我们的NFT在链上存储SVG图片。这样是为了使我们的教程简单，因为我们不需要处理设置一个服务器来提供NFT tokenURI（restful json api），也不需要处理服务器或IPFS上的图片存储。
    • 在Dabit教程的第一个版本中，他将NFT ERC721代币智能合约和市场智能合约分开。在第二个版本中，他选择了在一个智能合约中建立一个具有maketplace功能的NFT ERC721。我们选择在这里将它们分开，因为我们想建立一个通用的市场。
    • 在Dabit的教程中，当卖家将一个NFT项目上架市场上时，他将NFT转移到市场合约中，并等待它被出售。作为一个NFT用户，我不喜欢这种模式。我想只授权 NFT 到市场合约。在它被售出之前，该物品仍然在我的地址中。(我也不希望使用setApprovalForAll()来授权我地址中的所有NFT到市场合约。我们选择以一个一个的方式来授权）。

任务1.2：项目设置

第1步：创建目录

我们将把项目分成两个子目录，chain用于hardhat项目，webapp用于React/Next.js项目。

--nftmarket
  --chain
  --webapp

第2步：创建Hardhat项目

在chain子目录下，安装hardhat开发环境和@openzeppelin/contracts solidity库。然后我们启动一个空的hardhat项目：

yarn init -y
yarn add hardhat
yarn add @openzeppelin/contracts
yarn hardhat

或者，你可以从github repo下载hardhart的启动项目，在你的nftmarket目录下：

git clone git@github.com:fjun99/chain-tutorial-hardhat-starter.git chain
cd chain
yarn install

第3步：创建React/Next.js webapp项目

你可以下载一个空的webapp 脚手架

git clone https://github.com/fjun99/webapp-tutorial-scaffold.git webapp
cd webapp
yarn install
yarn dev

你也可以下载本教程的webapp代码库：

git clone git@github.com:fjun99/web3app-tutrial-using-web3react.git webapp
cd webapp
git checkout nftmarket
yarn install

任务2：NFT智能合约

任务2.1：写一个NFT智能合约

我们编写一个NFT ERC721智能合约，继承OpenZeppelin的ERC721实现。我们在这里添加三个功能：

  • 自动递增tokenId，从1开始
  • mintTo(address _to)每个人都可以铸币
  • tokenURI()来实现token URI和链上SVG图片
// contracts/BadgeToken.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

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

contract BadgeToken is ERC721 {
    uint256 private _currentTokenId = 0; //tokenId will start from 1

    constructor(
        string memory _name,
        string memory _symbol
    ) ERC721(_name, _symbol) {

    }

    /**
     * @dev Mints a token to an address with a tokenURI.
     * @param _to address of the future owner of the token
     */
    function mintTo(address _to) public {
        uint256 newTokenId = _getNextTokenId();
        _mint(_to, newTokenId);
        _incrementTokenId();
    }

    /**
     * @dev calculates the next token ID based on value of _currentTokenId
     * @return uint256 for the next token ID
     */
    function _getNextTokenId() private view returns (uint256) {
        return _currentTokenId+1;
    }

    /**
     * @dev increments the value of _currentTokenId
     */
    function _incrementTokenId() private {
        _currentTokenId++;
    }

    /**
     * @dev return tokenURI, image SVG data in it.
     */
    function tokenURI(uint256 tokenId) override public pure returns (string memory) {
        string[3] memory parts;

        parts[0] = "<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: 300px; }</style><rect width='100%' height='100%' fill='brown' /><text x='100' y='260' class='base'>";

        parts[1] = Strings.toString(tokenId);

        parts[2] = "</text></svg>";

        string memory json = Base64.encode(bytes(string(abi.encodePacked(
            "{\"name\":\"Badge #", 
            Strings.toString(tokenId), 
            "\",\"description\":\"Badge NFT with on-chain SVG image.\",",
            "\"image\": \"data:image/svg+xml;base64,", 
            // Base64.encode(bytes(output)), 
            Base64.encode(bytes(abi.encodePacked(parts[0], parts[1], parts[2]))),     
            "\"}"
            ))));

        return string(abi.encodePacked("data:application/json;base64,", json));
    }    
}

我们还添加了一个部署srcipt scripts/deploy_BadgeToken.ts，使用名字:BadgeToken和符号:BADGE来部署它。

const token = await BadgeToken.deploy('BadgeToken','BADGE')

任务2.2: 理解tokenURI()

让我们解释一下ERC721 tokenURI()函数的实现：

tokenURI()是ERC721标准的一个元数据函数，在 OpenZeppelin 文档中 :

tokenURI(uint256 tokenId) → string 返回tokenId代币的统一资源标识符（URI）。

通常tokenURI会返回一个URI。我们可以通过连接baseURI和tokenId来获得每个token的URI结果。

在我们的tokenURI()中，将URI作为一个base64编码的对象返回。

首先，构建对象。对象中的svg图片也是base64编码的：

{
"name":"Badge #1",
"description":"Badge NFT with on-chain SVG image."
"image":"data:image/svg+xml;base64,[svg base64 encoded]"
}

然后我们返回base64编码的对象：

data:application/json;base64,(object base64 encoded)

Webapp可以通过调用tokenURI(tokenId)获得URI，并解码以获得名称、描述和SVG图片。

这里的SVG图片由LOOT项目改编的。非常简单，就是在图片中显示tokenId：

<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: 300px; }</style>
<rect width='100%' height='100%' fill='brown' />
    <text x='100' y='260' class='base'>
    1
    </text>
</svg>

任务 2.3: ERC721合约的单元测试

让我们为这个合约写一个单元测试脚本：

// test/BadgeToken.test.ts
import { expect } from "chai"
import { Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken } from  "../typechain"

const base64 = require( "base-64")

const _name='BadgeToken'
const _symbol='BADGE'

describe("BadgeToken", function () {
  let badge:BadgeToken
  let account0:Signer,account1:Signer

  beforeEach(async function () {
    [account0, account1] = await ethers.getSigners()
    const BadgeToken = await ethers.getContractFactory("BadgeToken")
    badge = await BadgeToken.deploy(_name,_symbol)
  })

  it("Should has the correct name and symbol ", async function () {
    expect(await badge.name()).to.equal(_name)
    expect(await badge.symbol()).to.equal(_symbol)
  })

  it("Should tokenId start from 1 and auto increment", async function () {
    const address1=await account1.getAddress()
    await badge.mintTo(address1)
    expect(await badge.ownerOf(1)).to.equal(address1)

    await badge.mintTo(address1)
    expect(await badge.ownerOf(2)).to.equal(address1)
    expect(await badge.balanceOf(address1)).to.equal(2)
  })

  it("Should mint a token with event", async function () {
    const address1=await account1.getAddress()
    await expect(badge.mintTo(address1))
      .to.emit(badge, 'Transfer')
      .withArgs(ethers.constants.AddressZero,address1, 1)
  })

  it("Should mint a token with desired tokenURI (log result for inspection)", async function () {
    const address1=await account1.getAddress()
    await badge.mintTo(address1)

    const tokenUri = await badge.tokenURI(1)
    // console.log("tokenURI:")
    // console.log(tokenUri)

    const tokenId = 1
    const data = base64.decode(tokenUri.slice(29))
    const itemInfo = JSON.parse(data)
    expect(itemInfo.name).to.be.equal('Badge #'+String(tokenId))
    expect(itemInfo.description).to.be.equal('Badge NFT with on-chain SVG image.')

    const svg = base64.decode(itemInfo.image.slice(26))
    const idInSVG = svg.slice(256,-13)
    expect(idInSVG).to.be.equal(String(tokenId))
    // console.log("SVG image:")
    // console.log(svg)
  })  

  it("Should mint 10 token with desired tokenURI", async function () {
    const address1=await account1.getAddress()

    for(let i=1;i<=10;i++){
      await badge.mintTo(address1)
      const tokenUri = await badge.tokenURI(i)

      const data = base64.decode(tokenUri.slice(29))
      const itemInfo = JSON.parse(data)
      expect(itemInfo.name).to.be.equal('Badge #'+String(i))
      expect(itemInfo.description).to.be.equal('Badge NFT with on-chain SVG image.')

      const svg = base64.decode(itemInfo.image.slice(26))
      const idInSVG = svg.slice(256,-13)
      expect(idInSVG).to.be.equal(String(i))
    }

    expect(await badge.balanceOf(address1)).to.equal(10)
  })  
})

运行单元测试:

yarn hardhat test test/BadgeToken.test.ts

结果：

BadgeToken
     Should has the correct name and symbol
     Should tokenId start from 1 and auto increment
     Should mint a token with event
     Should mint a token with desired tokenURI (log result for inspection) (62ms)
     Should mint 10 token with desired tokenURI (346ms)
  5 passing (1s)

我们也可以打印单元测试中得到的tokenURI，以便检查:

tokenURI:
data:application/json;base64,eyJuYW1lIjoiQmFkZ2UgIzEiLCJkZXNjcmlwdGlvbiI6IkJhZGdlIE5GVCB3aXRoIG9uLWNoYWluIFNWRyBpbWFnZS4iLCJpbWFnZSI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MG5hSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY25JSEJ5WlhObGNuWmxRWE53WldOMFVtRjBhVzg5SjNoTmFXNVpUV2x1SUcxbFpYUW5JSFpwWlhkQ2IzZzlKekFnTUNBek5UQWdNelV3Sno0OGMzUjViR1UrTG1KaGMyVWdleUJtYVd4c09pQjNhR2wwWlRzZ1ptOXVkQzFtWVcxcGJIazZJSE5sY21sbU95Qm1iMjUwTFhOcGVtVTZJRE13TUhCNE95QjlQQzl6ZEhsc1pUNDhjbVZqZENCM2FXUjBhRDBuTVRBd0pTY2dhR1ZwWjJoMFBTY3hNREFsSnlCbWFXeHNQU2RpY205M2JpY2dMejQ4ZEdWNGRDQjRQU2N4TURBbklIazlKekkyTUNjZ1kyeGhjM005SjJKaGMyVW5QakU4TDNSbGVIUStQQzl6ZG1jKyJ9
SVG image:
<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: 300px; }</style><rect width='100%' height='100%' fill='brown' /><text x='100' y='260' class='base'>1</text></svg>

任务3：一个显示NFT的网页

任务3.1：使用Web3-React和Chakra UI设置webapp项目

我们将使用web3连接框架Web3-React来完成我们的工作。网络应用程序栈:

  • React
  • Next.js
  • Chakra UI
  • Web3-React
  • ethers.js
  • SWR

_app.tsx 内容如下：

// src/pages/_app.tsx
import { ChakraProvider } from '@chakra-ui/react'
import type { AppProps } from 'next/app'
import { Layout } from 'components/layout'
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'

function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider)
  return library
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <ChakraProvider>
        <Layout>
        <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </Web3ReactProvider>
  )
}

export default MyApp

我们将在之前的教程中使用ConnectMetamask组件。参考教程：用Web3-React和SWR构建DApp。

任务3.2：编写组件来显示NFT

在这个组件中，我们也使用了SWR，就像我们在教程：用Web3-React和SWR构建DApp中做的那样。SWR的获取器在utils/fetcher.tsx中。

// components/CardERC721.tsx
import React, { useEffect,useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Box, Text} from '@chakra-ui/react'
import useSWR from 'swr'
import { ERC721ABI as abi} from "abi/ERC721ABI"
import { BigNumber } from 'ethers'
import { fetcher } from 'utils/fetcher'
const base64 = require( "base-64")

interface Props {
    addressContract: string,
    tokenId:BigNumber
}

interface ItemInfo{
  name:string,
  description:string,
  svg:string
}

export default function CardERC721(props:Props){
  const addressContract = props.addressContract
  const {  account, active, library } = useWeb3React<Web3Provider>()

  const [itemInfo, setItemInfo] = useState<ItemInfo>()

  const { data: nftURI } = useSWR([addressContract, 'tokenURI', props.tokenId], {
    fetcher: fetcher(library, abi),
  })

useEffect( () => {
  if(!nftURI) return

  const data = base64.decode(nftURI.slice(29))
  const itemInfo = JSON.parse(data)
  const svg = base64.decode(itemInfo.image.slice(26))
  setItemInfo({
    "name":itemInfo.name,
    "description":itemInfo.description,
    "svg":svg})

},[nftURI])

return (
  <Box my={2} bg='gray.100' borderRadius='md' width={220} height={260} px={3} py={4}>
  {itemInfo
  ?<Box>
    <img src={`data:image/svg+xml;utf8,${itemInfo.svg}`} alt={itemInfo.name} width= '200px' />
    <Text fontSize='xl' px={2} py={2}>{itemInfo.name}</Text>
  </Box>
  :<Box />
  }
  </Box>
)
}

进行一些解释：

  • 当连接到Metamask钱包时，这个组件查询tokenURI(tokenId)以获得NFT项目的名称、描述和svg图像。

让我们写一个页面来显示NFT

// src/pages/samplenft.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { VStack, Heading } from "@chakra-ui/layout"
import ConnectMetamask from 'components/ConnectMetamask'
import CardERC721 from 'components/CardERC721'
import { BigNumber } from 'ethers'

const nftAddress = '0x5fbdb2315678afecb367f032d93f642f64180aa3'
const tokenId = BigNumber.from(1)
const SampleNFTPage: NextPage = () => {

  return (
    <>
      <Head>
        <title>My DAPP</title>
      </Head>

      <Heading as="h3"  my={4}>NFT Marketplace</Heading>

      <ConnectMetamask />

      <VStack>
          <CardERC721 addressContract={nftAddress} tokenId={tokenId} ></CardERC721>
      </VStack>
    </>
  )
}

export default SampleNFTPage

任务3.3: 运行webapp项目

第1步：运行一个独立的本地测试网

在另一个终端，在chain/目录下运行：

yarn hardhat node

第2步：将BadgeToken（ERC721）部署到本地测试网中

yarn hardhat run scripts/deploy_BadgeToken.ts --network localhost

结果：

Deploying BadgeToken ERC721 token...
BadgeToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

第3步：在hardhat控制台铸造一个BadgeToken（tokenId = 1）。

运行hardhat控制台连接到本地testenet

yarn hardhat console --network localhost

在控制台中运行：

nftaddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3'
nft = await ethers.getContractAt("BadgeToken", nftaddress)

await nft.name()
//'BadgeToken'

await nft.mintTo('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
// tx response ...

await nft.tokenURI(1)
//'data:application/json;base64,eyJuYW1lIjoiQmFkZ2UgIzEiLCJk...'

现在我们有了NFT项目。我们将在网页中显示它。

第三步：准备你的MetaMask

确保你的MetaMask链接本地测试网（RPC URL http://localhost:8545和链ID 31337）。

第4步：运行webapp

在webapp/中，运行：

yarn dev

在chrome浏览器中，进入页面。http://localhost:3000/samplenft。

连接MetaMask，NFT项目将显示在该页面上。(请注意，图片是懒惰的加载。等待加载完成。

NFT项目

我们可以看到，带有tokenId1的NFT Badge #1被正确显示。

任务4：NFT市场合约

任务4.1: 合约数据结构

我们从Nader Dabit的教程（V1）中改编了Market.sol智能合约来编写市场合约。但是你应该注意到，我们在这个合约中改变了很多。

我们定义了一个struct MarketItem：

struct MarketItem {
    uint id;
    address nftContract;
    uint256 tokenId;
    address payable seller;
    address payable buyer;
    uint256 price;
    State state;
  }

每个MarketItem可以是三种状态之一：

enum State { Created, Release, Inactive }

请注意，我们不能依赖Created状态。如果卖方将NFT转让给其他人，或者卖方取消了对NFT的授权，该状态仍然是Created，它表明其他人可以在市场上购买。实际上，其他人无法购买它。

所有MarketItem都存储在一个映射中。

mapping(uint256 => MarketItem) private marketItems;

市场合约有一个所有者，也就是合约部署者。当一个NFT在市场上出售时，上架费将被交给市场所有者。

在未来，我们可能会增加功能，将所有权转移到其他地址或多签钱包。为了使教程简单，我们跳过这些功能。

市场合约有一个固定的上架费用。

uint256 public listingFee = 0.025 ether;
  function getListingFee() public view returns (uint256)

任务4.2：编写市场合约函数

市场合约你有两类功能：

核心功能：

function createMarketItem(address nftContract,uint256 tokenId,uint256 price) payable 
  function deleteMarketItem(uint256 itemId) public
  function createMarketSale(address nftContract,uint256 id) public payable

查询功能：

function fetchActiveItems() public view returns (MarketItem[] memory) 
  function fetchMyPurchasedItems() public view returns (MarketItem[] memory)
  function fetchMyCreatedItems() public view returns (MarketItem[] memory)

完整的合约代码如下：

// contracts/NFTMarketplace.sol
// SPDX-License-Identifier: MIT OR Apache-2.0
// 
// adapt and edit from (Nader Dabit): 
//    https://github.com/dabit3/polygon-ethereum-nextjs-marketplace/blob/main/contracts/Market.sol

pragma solidity ^0.8.3;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/security/ReentrancyGuard.sol";
import "@openzeppelin/contracts/utils/Address.sol";

import "hardhat/console.sol";

contract NFTMarketplace is ReentrancyGuard {
  using Counters for Counters.Counter;
  Counters.Counter private _itemCounter;//start from 1
  Counters.Counter private _itemSoldCounter;

  address payable public marketowner;
  uint256 public listingFee = 0.025 ether;

  enum State { Created, Release, Inactive }

  struct MarketItem {
    uint id;
    address nftContract;
    uint256 tokenId;
    address payable seller;
    address payable buyer;
    uint256 price;
    State state;
  }

  mapping(uint256 => MarketItem) private marketItems;

  event MarketItemCreated (
    uint indexed id,
    address indexed nftContract,
    uint256 indexed tokenId,
    address seller,
    address buyer,
    uint256 price,
    State state
  );

  event MarketItemSold (
    uint indexed id,
    address indexed nftContract,
    uint256 indexed tokenId,
    address seller,
    address buyer,
    uint256 price,
    State state
  );

  constructor() {
    marketowner = payable(msg.sender);
  }

  /**
   * @dev Returns the listing fee of the marketplace
   */
  function getListingFee() public view returns (uint256) {
    return listingFee;
  }

  /**
   * @dev create a MarketItem for NFT sale on the marketplace.
   * 
   * List an NFT.
   */
  function createMarketItem(
    address nftContract,
    uint256 tokenId,
    uint256 price
  ) public payable nonReentrant {

    require(price > 0, "Price must be at least 1 wei");
    require(msg.value == listingFee, "Fee must be equal to listing fee");

    require(IERC721(nftContract).getApproved(tokenId) == address(this), "NFT must be approved to market");

    // change to approve mechanism from the original direct transfer to market
    // IERC721(nftContract).transferFrom(msg.sender, address(this), tokenId);

    _itemCounter.increment();
    uint256 id = _itemCounter.current();

    marketItems[id] =  MarketItem(
      id,
      nftContract,
      tokenId,
      payable(msg.sender),
      payable(address(0)),
      price,
      State.Created
    );

    emit MarketItemCreated(
      id,
      nftContract,
      tokenId,
      msg.sender,
      address(0),
      price,
      State.Created
    );
  }

  /**
   * @dev delete a MarketItem from the marketplace.
   * 
   * de-List an NFT.
   * 
   * todo ERC721.approve can't work properly!! comment out
   */
  function deleteMarketItem(uint256 itemId) public nonReentrant {
    require(itemId <= _itemCounter.current(), "id must <= item count");
    require(marketItems[itemId].state == State.Created, "item must be on market");
    MarketItem storage item = marketItems[itemId];

    require(IERC721(item.nftContract).ownerOf(item.tokenId) == msg.sender, "must be the owner");
    require(IERC721(item.nftContract).getApproved(item.tokenId) == address(this), "NFT must be approved to market");

    item.state = State.Inactive;

    emit MarketItemSold(
      itemId,
      item.nftContract,
      item.tokenId,
      item.seller,
      address(0),
      0,
      State.Inactive
    );

  }

  /**
   * @dev (buyer) buy a MarketItem from the marketplace.
   * Transfers ownership of the item, as well as funds
   * NFT:         seller    -> buyer
   * value:       buyer     -> seller
   * listingFee:  contract  -> marketowner
   */
  function createMarketSale(
    address nftContract,
    uint256 id
  ) public payable nonReentrant {

    MarketItem storage item = marketItems[id]; //should use storge!!!!
    uint price = item.price;
    uint tokenId = item.tokenId;

    require(msg.value == price, "Please submit the asking price");
    require(IERC721(nftContract).getApproved(tokenId) == address(this), "NFT must be approved to market");

    IERC721(nftContract).transferFrom(item.seller, msg.sender, tokenId);

    payable(marketowner).transfer(listingFee);
    item.seller.transfer(msg.value);

    item.buyer = payable(msg.sender);
    item.state = State.Release;
    _itemSoldCounter.increment();    

    emit MarketItemSold(
      id,
      nftContract,
      tokenId,
      item.seller,
      msg.sender,
      price,
      State.Release
    );    
  }

  /**
   * @dev Returns all unsold market items
   * condition: 
   *  1) state == Created
   *  2) buyer = 0x0
   *  3) still have approve
   */
  function fetchActiveItems() public view returns (MarketItem[] memory) {
    return fetchHepler(FetchOperator.ActiveItems);
  }

  /**
   * @dev Returns only market items a user has purchased
   * todo pagination
   */
  function fetchMyPurchasedItems() public view returns (MarketItem[] memory) {
    return fetchHepler(FetchOperator.MyPurchasedItems);
  }

  /**
   * @dev Returns only market items a user has created
   * todo pagination
  */
  function fetchMyCreatedItems() public view returns (MarketItem[] memory) {
    return fetchHepler(FetchOperator.MyCreatedItems);
  }

  enum FetchOperator { ActiveItems, MyPurchasedItems, MyCreatedItems}

  /**
   * @dev fetch helper
   * todo pagination   
   */
   function fetchHepler(FetchOperator _op) private view returns (MarketItem[] memory) {     
    uint total = _itemCounter.current();

    uint itemCount = 0;
    for (uint i = 1; i <= total; i++) {
      if (isCondition(marketItems[i], _op)) {
        itemCount ++;
      }
    }

    uint index = 0;
    MarketItem[] memory items = new MarketItem[](itemCount);
    for (uint i = 1; i <= total; i++) {
      if (isCondition(marketItems[i], _op)) {
        items[index] = marketItems[i];
        index ++;
      }
    }
    return items;
  } 

  /**
   * @dev helper to build condition
   *
   * todo should reduce duplicate contract call here
   * (IERC721(item.nftContract).getApproved(item.tokenId) called in two loop
   */
  function isCondition(MarketItem memory item, FetchOperator _op) private view returns (bool){
    if(_op == FetchOperator.MyCreatedItems){ 
      return 
        (item.seller == msg.sender
          && item.state != State.Inactive
        )? true
         : false;
    }else if(_op == FetchOperator.MyPurchasedItems){
      return
        (item.buyer ==  msg.sender) ? true: false;
    }else if(_op == FetchOperator.ActiveItems){
      return 
        (item.buyer == address(0) 
          && item.state == State.Created
          && (IERC721(item.nftContract).getApproved(item.tokenId) == address(this))
        )? true
         : false;
    }else{
      return false;
    }
  }

}

这个NFTMarket合约可以工作，但它并不理想。至少有两项工作要做：

  • 我们应该在查询函数中加入分页功能。如果市场上有成千上万的物品，查询函数就不能很好地工作。
  • 当我们试图验证一个卖家是否已经将NFT项目转让给其他人，或者已经取消授权时，我们会调用nft.getApproved成千上万次。这是很糟糕的做法。我们应该尝试找出一个解决方案。

我们还可能发现，让webapp直接从智能合约中查询数据并不是一个好的设计。应该有一个数据索引层。The Graph协议和subgraph可以完成这项工作。你可以在dabit的NFT市场教程中找到关于如何使用subgraph的解释。

任务4.3 NFTMarketplace（核心功能）的单元测试

我们将为NFTMarketplace添加两个单元测试脚本：

  • 一个用于核心功能
  • 一个用于查询/获取功能

核心功能的单元测试脚本：

// NFTMarketplace.test.ts
import { expect } from "chai"
import { BigNumber, Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"
import { TransactionResponse, TransactionReceipt } from "@ethersproject/providers"

const _name='BadgeToken'
const _symbol='BADGE'

describe("NFTMarketplace", function () {
  let nft:BadgeToken
  let market:NFTMarketplace
  let account0:Signer,account1:Signer,account2:Signer
  let address0:string, address1:string, address2:string

  let listingFee:BigNumber
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  beforeEach(async function () {
    [account0, account1, account2] = await ethers.getSigners()
    address0 = await account0.getAddress()
    address1 = await account1.getAddress()
    address2 = await account2.getAddress()

    const BadgeToken = await ethers.getContractFactory("BadgeToken")
    nft = await BadgeToken.deploy(_name,_symbol)

    const Market = await ethers.getContractFactory("NFTMarketplace")
    market = await Market.deploy()
    listingFee = await market.getListingFee()

  })

  it("Should create market item successfully", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    const items = await market.fetchMyCreatedItems()
    expect(items.length).to.be.equal(1)
  })

  it("Should create market item with EVENT", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await expect(market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee }))
      .to.emit(market, 'MarketItemCreated')
      .withArgs(
        1,
        nft.address,
        1,
        address0,
        ethers.constants.AddressZero,
        auctionPrice, 
        0)
  })

  it("Should revert to create market item if nft is not approved", async function() {
    await nft.mintTo(address0)  //tokenId=1
    // await nft.approve(market.address,1)
    await expect(market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee }))
      .to.be.revertedWith('NFT must be approved to market')
  })

  it("Should create market item and buy (by address#1) successfully", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    await expect(market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice}))
      .to.emit(market, 'MarketItemSold')
      .withArgs(
        1,
        nft.address,
        1,
        address0,
        address1,
        auctionPrice, 
        1)

    expect(await nft.ownerOf(1)).to.be.equal(address1)

  })

  it("Should revert buy if seller remove approve", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    await nft.approve(ethers.constants.AddressZero,1)

    await expect(market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice}))
      .to.be.reverted
  })

  it("Should revert buy if seller transfer the token out", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    await nft.transferFrom(address0,address2,1)

    await expect(market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice}))
      .to.be.reverted
  })

  it("Should revert to delete(de-list) with wrong params", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    //not a correct id
    await expect(market.deleteMarketItem(2)).to.be.reverted

    //not owner
    await expect(market.connect(account1).deleteMarketItem(1)).to.be.reverted

    await nft.transferFrom(address0,address1,1)
    //not approved to market now
    await expect(market.deleteMarketItem(1)).to.be.reverted
  })

  it("Should create market item and delete(de-list) successfully", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)

    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })
    await market.deleteMarketItem(1)

    await nft.approve(ethers.constants.AddressZero,1)

    // should revert if trying to delete again
    await expect(market.deleteMarketItem(1))
      .to.be.reverted
  })

  it("Should seller, buyer and market owner correct ETH value after sale", async function() {
    let txresponse:TransactionResponse, txreceipt:TransactionReceipt
    let gas
    const marketownerBalance = await ethers.provider.getBalance(address0)

    await nft.connect(account1).mintTo(address1)  //tokenId=1
    await nft.connect(account1).approve(market.address,1)

    let sellerBalance = await ethers.provider.getBalance(address1)
    txresponse = await market.connect(account1).createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })
    const sellerAfter = await ethers.provider.getBalance(address1)

    txreceipt = await txresponse.wait()
    gas = txreceipt.gasUsed.mul(txreceipt.effectiveGasPrice)

    // sellerAfter = sellerBalance - listingFee - gas
    expect(sellerAfter).to.equal(sellerBalance.sub( listingFee).sub(gas))

    const buyerBalance = await ethers.provider.getBalance(address2)
    txresponse =  await market.connect(account2).createMarketSale(nft.address, 1, { value: auctionPrice})
    const buyerAfter = await ethers.provider.getBalance(address2)

    txreceipt = await txresponse.wait()
    gas = txreceipt.gasUsed.mul(txreceipt.effectiveGasPrice)
    expect(buyerAfter).to.equal(buyerBalance.sub(auctionPrice).sub(gas))

    const marketownerAfter = await ethers.provider.getBalance(address0)
    expect(marketownerAfter).to.equal(marketownerBalance.add(listingFee))
  })
})

运行：

yarn hardhat test test/NFTMarketplace.test.ts

结果：

NFTMarketplace
     Should create market item successfully (49ms)
     Should create market item with EVENT
     Should revert to create market item if nft is not approved
     Should create market item and buy (by address#1) successfully (48ms)
     Should revert buy if seller remove approve (49ms)
     Should revert buy if seller transfer the token out (40ms)
     Should revert to delete(de-list) with wrong params (49ms)
     Should create market item and delete(de-list) successfully (44ms)
     Should seller, buyer and market owner correct ETH value after sale (43ms)
  9 passing (1s)

任务4.4: NFTMarketplace的单元测试(查询功能)

查询功能的单元测试脚本：

// NFTMarketplaceFetch.test.ts
import { expect } from "chai"
import { BigNumber, Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"

const _name='BadgeToken'
const _symbol='BADGE'

describe("NFTMarketplace Fetch functions", function () {
  let nft:BadgeToken
  let market:NFTMarketplace
  let account0:Signer,account1:Signer,account2:Signer
  let address0:string, address1:string, address2:string

  let listingFee:BigNumber
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  beforeEach(async function () {
    [account0, account1, account2] = await ethers.getSigners()
    address0 = await account0.getAddress()
    address1 = await account1.getAddress()
    address2 = await account2.getAddress()

    const BadgeToken = await ethers.getContractFactory("BadgeToken")
    nft = await BadgeToken.deploy(_name,_symbol)
    // tokenAddress = nft.address

    const Market = await ethers.getContractFactory("NFTMarketplace")
    market = await Market.deploy()
    listingFee = await market.getListingFee()

    // console.log("1. == mint 1-6 to account#0")
    for(let i=1;i<=6;i++){
      await nft.mintTo(address0)
    }

    // console.log("3. == mint 7-9 to account#1")
    for(let i=7;i<=9;i++){
      await nft.connect(account1).mintTo(address1)
    }

    // console.log("2. == list 1-6 to market")
    for(let i=1;i<=6;i++){
      await nft.approve(market.address,i)
      await market.createMarketItem(nft.address, i, auctionPrice, { value: listingFee })
    }    
  })

  it("Should fetchActiveItems correctly", async function() {
    const items = await market.fetchActiveItems()
    expect(items.length).to.be.equal(6)
  })  

  it("Should fetchMyCreatedItems correctly", async function() {
    const items = await market.fetchMyCreatedItems()
    expect(items.length).to.be.equal(6)

    //should delete correctly
    await market.deleteMarketItem(1)
    const newitems = await market.fetchMyCreatedItems()
    expect(newitems.length).to.be.equal(5)
  })

  it("Should fetchMyPurchasedItems correctly", async function() {
    const items = await market.fetchMyPurchasedItems()
    expect(items.length).to.be.equal(0)
  })

  it("Should fetchActiveItems with correct return values", async function() {
    const items = await market.fetchActiveItems()

    expect(items[0].id).to.be.equal(BigNumber.from(1))
    expect(items[0].nftContract).to.be.equal(nft.address)
    expect(items[0].tokenId).to.be.equal(BigNumber.from(1))
    expect(items[0].seller).to.be.equal(address0)
    expect(items[0].buyer).to.be.equal(ethers.constants.AddressZero)
    expect(items[0].state).to.be.equal(0)//enum State.Created
  }) 

  it("Should fetchMyPurchasedItems with correct return values", async function() {
    await market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice})
    const items = await market.connect(account1).fetchMyPurchasedItems()

    expect(items[0].id).to.be.equal(BigNumber.from(1))
    expect(items[0].nftContract).to.be.equal(nft.address)
    expect(items[0].tokenId).to.be.equal(BigNumber.from(1))
    expect(items[0].seller).to.be.equal(address0)
    expect(items[0].buyer).to.be.equal(address1)//address#1
    expect(items[0].state).to.be.equal(1)//enum State.Release

  })    

})

运行：

yarn hardhat test test/NFTMarketplaceFetch.test.ts

结果：

NFTMarketplace Fetch functions
     Should fetchActiveItems correctly (48ms)
     Should fetchMyCreatedItems correctly (54ms)
     Should fetchMyPurchasedItems correctly
     Should fetchActiveItems with correct return values
     Should fetchMyPurchasedItems with correct return values
  5 passing (2s)

任务 4.5: playMarket.ts开发智能合约的辅助脚本

我们写了一个脚本src/playMarket.ts。在开发和调试过程中，我一次又一次地运行这个脚本。它可以帮助我看到市场合约是否能像我想的那样工作:

// src/playMarket.ts
import { Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"

const base64 = require( "base-64")

const _name='BadgeToken'
const _symbol='BADGE'

async function main() {

  let account0:Signer,account1:Signer
  [account0, account1] = await ethers.getSigners()
  const address0=await account0.getAddress()
  const address1=await account1.getAddress()

  /* deploy the marketplace */
  const Market = await ethers.getContractFactory("NFTMarketplace")
  const market:NFTMarketplace = await Market.deploy()
  await market.deployed()
  const marketAddress = market.address

  /* deploy the NFT contract */
  const NFT = await ethers.getContractFactory("BadgeToken")
  const nft:BadgeToken = await NFT.deploy(_name,_symbol)
  await nft.deployed()
  const tokenAddress = nft.address

  console.log("marketAddress",marketAddress)
  console.log("nftContractAddress",tokenAddress)

  /* create two tokens */
  await nft.mintTo(address0) //'1'
  await nft.mintTo(address0) //'2' 
  await nft.mintTo(address0) //'3'

  const listingFee = await market.getListingFee()
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  await nft.approve(marketAddress,1)
  await nft.approve(marketAddress,2)
  await nft.approve(marketAddress,3)
  console.log("Approve marketAddress",marketAddress)

  // /* put both tokens for sale */
  await market.createMarketItem(tokenAddress, 1, auctionPrice, { value: listingFee })
  await market.createMarketItem(tokenAddress, 2, auctionPrice, { value: listingFee })
  await market.createMarketItem(tokenAddress, 3, auctionPrice, { value: listingFee })

  // test transfer
  await nft.transferFrom(address0,address1,2)

  /* execute sale of token to another user */
  await market.connect(account1).createMarketSale(tokenAddress, 1, { value: auctionPrice})

  /* query for and return the unsold items */
  console.log("==after purchase & Transfer==")

  let items = await market.fetchActiveItems()
  let printitems
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,false)})
  // console.log( await parseItems(items,nft))

  console.log("==after delete==")
  await market.deleteMarketItem(3)

  items = await market.fetchActiveItems()
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,false)})
  // console.log( await parseItems(items,nft))

  console.log("==my list items==")
  items = await market.fetchMyCreatedItems()
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,false)})

  console.log("")
  console.log("==address1 purchased item (only one, tokenId =1)==")
  items = await market.connect(account1).fetchMyPurchasedItems()
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,true)})

}

async function parseItems(items:any,nft:BadgeToken) {
  let parsed=  await Promise.all(items.map(async (item:any) => {
    const tokenUri = await nft.tokenURI(item.tokenId)
    return {
      price: item.price.toString(),
      tokenId: item.tokenId.toString(),
      seller: item.seller,
      buyer: item.buyer,
      tokenUri
    }
  }))

  return parsed
}

function printHelper(item:any,flagUri=false,flagSVG=false){
  if(flagUri){
    const {name,description,svg}= parseNFT(item)
    console.log("id & name:",item.tokenId,name)
    if(flagSVG) console.log(svg)
  }else{
    console.log("id       :",item.tokenId)
  }
}

function parseNFT(item:any){
  const data = base64.decode(item.tokenUri.slice(29))
  const itemInfo = JSON.parse(data)
  const svg = base64.decode(itemInfo.image.slice(26))
  return(
    {"name":itemInfo.name,
     "description":itemInfo.description,
     "svg":svg})  
}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

我们在这个脚本中做什么？

  • 部署BadgeToken NFT和NFTMarketplace
  • 铸造3个NFT项目到地址0
  • 授权3个NFT项目到NFTMarketplace
  • 上架3个NFT项目到NFTMarketplace
  • 将#3 NFT 转移到其他地方
  • 上架的项目应该是#1,#2
  • address1(account1)购买NFT #1
  • 地址1购买的项目应该是#1
  • 打印tokenId, name, svg以备检查

运行：

yarn hardhat run src/playMarket.ts

结果：

marketAddress 0x5FbDB2315678afecb367f032d93F642f64180aa3
nftContractAddress 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
Approve marketAddress 0x5FbDB2315678afecb367f032d93F642f64180aa3
==after purchase & Transfer==
id & name: 3 Badge #3
==after delete==
==my list items==
id & name: 1 Badge #1
id & name: 2 Badge #2

==address1 purchased item svg (only one, tokenId =1)==
id & name: 1 Badge #1
<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: 300px; }</style><rect width='100%' height='100%' fill='brown' /><text x='100' y='260' class='base'>1</text></svg>
  Done in 4.42s.

任务4.6：为webapp准备的脚本

我们需要为webapp准备模拟数据:

// src/prepare.ts
import { Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"
import { tokenAddress, marketAddress } from "./projectsetting"

const _name='BadgeToken'
const _symbol='BADGE'

async function main() {

  console.log("========   deploy to a **new** localhost ======")

  /* deploy the NFT contract */
  const NFT = await ethers.getContractFactory("BadgeToken")
  const nftContract:BadgeToken = await NFT.deploy(_name,_symbol)
  await nftContract.deployed()

  /* deploy the marketplace */
  const Market = await ethers.getContractFactory("NFTMarketplace")
  const marketContract:NFTMarketplace = await Market.deploy()

  console.log("nftContractAddress:",nftContract.address)
  console.log("marketAddress     :",marketContract.address)

  console.log("========   Prepare for webapp dev ======")
  console.log("nftContractAddress:",tokenAddress)
  console.log("marketAddress     :",marketAddress)
  console.log("**should be the same**")

  let owner:Signer,account1:Signer,account2:Signer

  [owner, account1,account2] = await ethers.getSigners()
  const address0 = await owner.getAddress()
  const address1 = await account1.getAddress()
  const address2 = await account2.getAddress()

  const market:NFTMarketplace = await ethers.getContractAt("NFTMarketplace", marketAddress)
  const nft:BadgeToken = await ethers.getContractAt("BadgeToken", tokenAddress)

  const listingFee = await market.getListingFee()
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  console.log("1. == mint 1-6 to account#0")
  for(let i=1;i<=6;i++){
    await nft.mintTo(address0)
  }

  console.log("2. == list 1-6 to market")
  for(let i=1;i<=6;i++){
    await nft.approve(marketAddress,i)
    await market.createMarketItem(tokenAddress, i, auctionPrice, { value: listingFee })
  }

  console.log("3. == mint 7-9 to account#1")
  for(let i=7;i<=9;i++){
    await nft.connect(account1).mintTo(address1)
  }

  console.log("4. == list 1-6 to market")
  for(let i=7;i<=9;i++){
    await nft.connect(account1).approve(marketAddress,i)
    await market.connect(account1).createMarketItem(tokenAddress, i, auctionPrice, { value: listingFee })
  }

  console.log("5. == account#0 buy 7 & 8")
  await market.createMarketSale(tokenAddress, 7, { value: auctionPrice})
  await market.createMarketSale(tokenAddress, 8, { value: auctionPrice})

  console.log("6. == account#1 buy 1")
  await market.connect(account1).createMarketSale(tokenAddress, 1, { value: auctionPrice})

  console.log("7. == account#2 buy 2")
  await market.connect(account2).createMarketSale(tokenAddress, 2, { value: auctionPrice})

  console.log("8. == account#0 delete 6")
  await market.deleteMarketItem(6)

}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

在另一个终端上运行一个独立的本地测试网。

yarn hardhat node

运行：

yarn hardhat run src/prepare.ts --network localhost

结果：

========   deploy to a **new** localhost ======
nftContractAddress: 0x5FbDB2315678afecb367f032d93F642f64180aa3
marketAddress     : 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
========   Prepare for webapp dev ======
nftContractAddress: 0x5FbDB2315678afecb367f032d93F642f64180aa3
marketAddress     : 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
**should be the same**
1. == mint 1-6 to account#0
2. == list 1-6 to market
3. == mint 7-9 to account#1
4. == list 1-6 to market
5. == account#0 buy 7 & 8
6. == account#1 buy 1
7. == account#2 buy 2
8. == account#0 delete 6
  Done in 5.81s.

任务5：NFTMarketplace的Webapp

任务5.1：添加组件ReadNFTMarket。

目前，我们在这个代码段中直接查询市场合约，而不是使用SWR：

// components/ReadNFTMarket.tsx
import React from 'react'
import { useEffect,useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Contract } from "@ethersproject/contracts";
import { Grid, GridItem, Box, Text, Button } from "@chakra-ui/react"
import { BigNumber, ethers } from 'ethers';
import useSWR from 'swr'
import { addressNFTContract, addressMarketContract }  from '../projectsetting'
import  CardERC721  from "./CardERC721"

interface Props {
    option: number
}

export default function ReadNFTMarket(props:Props){
  const abiJSON = require("abi/NFTMarketplace.json")
  const abi = abiJSON.abi
  const [items,setItems] = useState<[]>()

  const {  account, active, library} = useWeb3React<Web3Provider>()

  // const { data: items} = useSWR([addressContract, 'fetchActiveItems'], {
  //   fetcher: fetcher(library, abi),
  // })

useEffect( () => {
    if(! active)
      setItems(undefined)

    if(!(active && account && library)) return

    // console.log(addressContract,abi,library)
    const market:Contract = new Contract(addressMarketContract, abi, library);
    console.log(market.provider)
    console.log(account)

    library.getCode(addressMarketContract).then((result:string)=>{
      //check whether it is a contract
      if(result === '0x') return

      switch(props.option){
        case 0:
          market.fetchActiveItems({from:account}).then((items:any)=>{
            setItems(items)
          })    
          break;
        case 1:
          market.fetchMyPurchasedItems({from:account}).then((items:any)=>{
            setItems(items)
          })    
          break;
        case 2:
          market.fetchMyCreatedItems({from:account}).then((items:any)=>{
            setItems(items)
            console.log(items)
          })    
          break;
        default:
      }

    })

    //called only when changed to active
},[active,account])

async function buyInNFTMarket(event:React.FormEvent,itemId:BigNumber) {
  event.preventDefault()

  if(!(active && account && library)) return

  //TODO check whether item is available beforehand

  const market:Contract = new Contract(addressMarketContract, abi, library.getSigner());
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')
  market.createMarketSale(
      addressNFTContract, 
      itemId, 
      { value: auctionPrice}
    ).catch('error', console.error)
}

const state = ["On Sale","Sold","Inactive"]

return (
  <Grid templateColumns='repeat(3, 1fr)' gap={0} w='100%'>

    {items
    ? 
    (items.length ==0)
      ?<Box>no item</Box>
      :items.map((item:any)=>{
        return(
          <GridItem key={item.id} >
            <CardERC721 addressContract={item.nftContract} tokenId={item.tokenId} ></CardERC721>
            <Text fontSize='sm' px={5} pb={1}> {state[item.state]} </Text> 
            {((item.seller == account && item.buyer == ethers.constants.AddressZero) || (item.buyer == account))
            ?<Text fontSize='sm' px={5} pb={1}> owned by you </Text> 
            :<Text></Text>
            }
            <Box>{
            (item.seller != account && item.state == 0)
            ? <Button width={220} type="submit" onClick={(e)=>buyInNFTMarket(e,item.id)}>Buy this!</Button>
            : <Text></Text>
            }
            </Box>
          </GridItem>)
      })
    :<Box></Box>}
  </Grid>

  )
}

任务5.2：添加ReadNFTMarket到索引中

我们在index.tsx中添加三个ReadNFTMarket：

  • 一个用于所有市场NFT
  • 一个是我购买的NFT
  • 一个是我创建的NFT

dapp

任务 5.3: 运行DApp

第1步：新的本地测试网络

在另一个终端，在chain/中运行

yarn hardhat node

第2步：为webapp准备数据 在chain/中运行：

yarn hardhat run src/prepare.ts --network localhost

第3步：运行webapp

在webapp/中运行：

yarn dev

第4步：浏览器http://localhost:3000/并连接MetaMask

第5步：以0号账户购买NFT#9

第6步：切换到MetaMask的账户#1，购买NFT #3

现在你有了一个NFT市场。恭喜你。

你可以继续把它部署到公共测试网（ropsten）、以太坊主网、侧链（BSC/Polygon）、Layer2（Arbitrum/Optimism）。

如果现在你需要可升级的智能合约(代理合约模式)。你可以参考教程：使用OpenZeppelin编写可升级的智能合约。

本翻译由 Duet Protocol 赞助支持。

本文参与区块链开发网写作激励计划 ，好文好收益，欢迎正在阅读的你也加入。

  • 发表于 2022-06-28 18:37
  • 阅读 ( 2397 )
  • 学分 ( 282 )
  • 分类：DApp
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
以太坊
# NFT# ethers.js# react
喜欢就支持一下吧
点赞0
分享
相关推荐
评论 抢沙发
区块链技术的头像-区块链开发网

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][se][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
热门
DAO 工具观测台-区块链开发网
125人已阅读
DAO 工具观测台
TOP1
十分钟开发一个混币-原理篇-区块链开发网
十分钟开发一个混币-原理篇
10月前46人已阅读
TOP2
Aptos钱包使用指南-区块链开发网
Aptos钱包使用指南
9月前40人已阅读
TOP3
零知识证明 - Plookup算法介绍-区块链开发网
零知识证明 – Plookup算法介绍
10月前37人已阅读
TOP4
FISCO BCOS离线无网络部署安装系列教程之WeBase v1.4.1部署安装-区块链开发网
FISCO BCOS离线无网络部署安装系列教程之WeBase v1.4.1部署安装
10月前36人已阅读
TOP5
以太坊可用RPC节点列表-区块链开发网
以太坊可用RPC节点列表
10月前31人已阅读
TOP6
HEALTH 事件分析-区块链开发网
HEALTH 事件分析
7月前29人已阅读
TOP7
区块链技术入门学习指引-区块链开发网
区块链技术入门学习指引
10月前24人已阅读
TOP8
使用Echidna测试智能合约库-区块链开发网
使用Echidna测试智能合约库
10月前23人已阅读
TOP9
智能合约实现白名单的3个机制-区块链开发网
智能合约实现白名单的3个机制
10月前22人已阅读
TOP10
猜你喜欢

NFT 新手教程：如何在钱包中查看NFT（第3部分）

BCH硬分叉成功，烧钱之战才刚刚开始

比特币现金大涨28% BCH阵营之争会有新的分叉币空投？

俄罗斯银行称其ICO实验取得了成功

以太坊黑暗森林中的一束光：读懂 MEV 竞赛下的博弈

将陈安之们赶出区块链

关于Filecoin四大实现

解决Unexpected end of JSON input while parsing near 问题

对比 Aave，Dy/Dx，Kollateral 闪电贷

一文读懂以太坊的各大扩容方案

加密小镇Zug运行瑞士首个基于区块链的市政投票

EIP-1559 是什么：以太坊的费用燃烧提案解释

比特吴：全球社区疯传！凭什么说比特币爆发就靠它？

加拿大航空将整合基于区块链的旅行分销平台

每周以太坊进展 2021/07/03

2018年11月区块链游戏行业发展现状分析

先知APP先锋用户招募计划

为什么去中心化身份很重要？

每周以太坊进展 2022/10/8

Chainlink在智能合约中的77种应用方式（一）

最新

通过 NFTScan 实时监控钱包地址和 NFT 合约地址

Move语言安全性分析及合约审计要点之提案攻击

MEV 回调函数漏洞分析

Chainlink: 连接区块链生态的 Web3 服务平台

hardhat使用的rpc请求解读

平均价格算法：TWAP vs. VWAP

hackerdao攻击事件分析

AES攻击事件分析

以太七日谈 • 2022/12/13

指南：关于secp256k1、ECDH、ECDSA

解构Solidity合约 #1 – 字节码

DFX Finance攻击事件分析

ChainAegis分析报告：Dogecoin排名前10的市值从何而来？

SharkTeam完成APTOS生态项目NFMS的合约审计

区块链开发必备（3）—— Remix IDE 使用流程

如何入门智能合约开发

Iceberg-Trino 如何解决链上数据面临的挑战

解构 Solidity 合约 #2 – 函数选择器

BGLD 通缩代币漏洞分析

5 个步骤创建 Solana 代币

关键词
默克尔树黑客松黑客攻击黄皮书高效数据交互协议骗局风险评估预言机操控预言机预编译合约非对称加密静态分析零知识证明虚拟机零知识证明零知识零时科技隔离见证隐私计算隐私保护隐私交易隐私随机数阈值签名闪电贷攻击闪电贷闪电网络闪电攻击闪电兑门罗币链码链下门限签名链下扩容链上数据链上扩容钻石标准钱包接入钱包安全钱包钓鱼攻击金融科技量子计算重入攻击部署合约部署逻辑漏洞通道通证经济进展更新软件转账