如何使用 Nextjs 和 Solidity 显示 NFT

Question

我最近开始研究如何开发 web3 dapp，并且正在建立一个 NFT 市场。 我一直在学习一些使用solidity 和web3/ethers 的教程，并设法显示了当前连接的钱包的NFT。

我的下一步是在画廊中显示任何给定地址（不是连接的钱包）的 NFT。我正在尝试从显示已连接钱包的 NFT 的代码构建这个画廊，但我并不完全理解代码，因此不知道如何/更改什么。

这是在连接钱包页面加载NFT的功能：

    const web3Modal = new Web3Modal({
      network: "mainnet",
      cacheProvider: true,
    });

    const connection = await web3Modal.connect()
    const provider = new ethers.providers.Web3Provider(connection)
    const signer = provider.getSigner()

    const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, signer)
    const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
    const data = await marketContract.fetchMyNFTs()
    
    const items = await Promise.all(data.map(async i => {
      const tokenUri = await tokenContract.tokenURI(i.tokenId)
      const meta = await axios.get(tokenUri)
      let price = Web3.utils.fromWei(i.price.toString(), 'ether');
      let item = {
        price,
        tokenId: i.tokenId.toNumber(),
        seller: i.seller,
        owner: i.owner,
        image: meta.data.image,
      }
      return item
    }))
    setNfts(items)
  } 

nfts 将拥有 NFT 的所有元数据。

智能合约中定义的函数fetchMyNFTs如下：

    uint totalItemCount = _itemIds.current();
    uint itemCount = 0;
    uint currentIndex = 0;

    for (uint i = 0; i < totalItemCount; i++) {
      if (idToMarketItem[i + 1].owner == msg.sender) {
        itemCount += 1;
      }
    }

    MarketItem[] memory items = new MarketItem[](itemCount);
    for (uint i = 0; i < totalItemCount; i++) {
      if (idToMarketItem[i + 1].owner == msg.sender) {
        uint currentId = idToMarketItem[i + 1].itemId;
        MarketItem storage currentItem = idToMarketItem[currentId];
        items[currentIndex] = currentItem;
        currentIndex += 1;
      }
    }
   
    return items;
  } 

所以我想我有两个问题：

• 在获取 NFT 元数据时，我们是否总是需要使用智能合约？
• 我们如何显示任何给定帐户的 NFT，例如 zapper.fi 或 context.app？

我知道这可能是一个非常广泛的问题，但任何对教程的帮助或指导都会很棒！

谢谢！

Answer 1

嗯，大多数 nft 合约都有结构或函数，你可以使用它们来获取你需要的信息，比如 ownerOf，它通常是一个接收令牌 id 并返回所有者的函数，通常合约有令牌 id 的映射到所有者或所有者的地址到令牌数组，在这种情况下，您使用的合约具有返回所有者令牌的功能，但大多数合约没有，因此您需要了解如何所有这些数据都被存储以及相互之间的关系