Day 21【Tokens' Owner】[问卦] 宋芸桦和夏宇乔到底是不同一个人?

【前言】
我们已经知道其实 NFT 是以 ERC-721 协定架设的智能合约，也就是说我们最理想找到 token owner的方法就是利用 we3.js, ethers.js 或者是 opensea.js 和以太坊有关的 JS 套件，或说是有办法连接到链上资料的套件来找到我们想要的东西！

【智能合约（Smart Contract）】
智能合约的意义其实是「在区块链中，自动在合约中正确地判断如何行动」的一项合约。也就是一段在区块链里面的程序码，满足特定的条件就会触发，任谁也阻止不了。反之亦然，谁也没办法在这个智能合约的地址上，不经由其他区块同意，随便新增一个不合规章的节点。所谓的以太坊开发者协议 ERC（Ethereum Request for Comments）就是智能合约。

那在智能合约之中应该要提供一个 API，像是 ERC-721 里面的 function ownerOf(uint256 _tokenId) 或相关的 INTERFACE。这样一个方便普通人使用的查询工具，才能够让大家都确认正确无误的所有权。

【But...How to get the token's owner?】
所以我们要怎麽在网站上自动（前端、後端）取得 Token's 的 Ownership 呢？

我目前想到的方法有几个：

1. 使用 web3.js
2. 使用 ethers.js
3. 使用 opensea.js
4. 利用某个程序语言驱动 Solidity 线上编译，然後里用 ERC-721 合约内建的 ownerOf 得到 Ownership，然後把资料储存在後端资料库中，并且在需要时从前端调用资料查询。
5. 每天某个时间利用 Solidity 手动跑一次回圈，遍历完 NFT 的 Ownership 後，在後端资料库更新资料供前端查询。

好後面两个方法是个怪方法，但至少是做得出来的，只是我觉得效率非常不好，在网站上的呈现也会非常差，所以我们聚焦在上面三个方法！

【we3.js ? ethers.js : opensea.js】
如果我们透过 web3.js 来找寻 Token Owners 呢，在论坛上有的人可以有的人不行，那我们到底可不可以用 we3.js 抓到 ERC721 合约的 token 资料呢？

有人说抓的到资料：

retrieving web3 contract.ownerOf NFT ERC721

有人说抓不到资料：

How to find all ERC721 compliant NFTs owned by an address? (Web3 JS)

後来又查了一些 web3.js with erc721 的资料：

List ERC721 tokens owned by a user on a web page

Get ERC721 token total supply using web3.js

而 ethers.js 貌似翻过了整个官方文件都没找到可以套用在 ERC-721 的工具，只有在这个讨论串里面有提到。如果是利用 ABI 的话好像也只能用在 ERC-20，吗。

经过整理还有一些研究之後，直接来试试看就知道可不可以了！

【Trying we3.js to get ERC-721 Token Owner】
我使用了以下程序码跑不动，回报的错误是 eth 不属於 web3 以内QQ。我想可能是我引入套件有问题只是我不知道怎麽解决。

import * as web3 from 'web3'
import { useEffect, useState } from "react";

let ABI = [
  // balanceOf
  {
      "constant":true,
      "inputs":[{"name":"tokenId","type":"uint256"}],
      "name":"ownerOf",
      "outputs":[{"name":"owner","type":"address"}],
      "type":"function"
  },
  // decimals
  {
    "constant":true,
    "inputs":[],
    "name":"decimals",
    "outputs":[{"name":"","type":"uint8"}],
    "type":"function"
  }
];

export function OwnerOf(account, id) {
  const [a, setA] = useState({
    tokenAddress: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D", 
    // https://opensea.io/assets/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/6445
    tokenId: id, // Token ID
    schemaName: 'ERC721'
  });
  const [accountAddress, setAccountAddress] = useState(account)
  // https://opensea.io/MachiBigBrother
  const [OwnerShip, setOwnerShip] = useState(false)

  useEffect(() => {
    // STEP 1：在 useEffect 中定义 async function 取名为 fetchData
    const fetchData = async () => {
      // STEP 2：使用 await 等待 API 取得回应後才继续
      const cc = new web3.eth.Contract(ABI, a.tokenAddress);
      const oo = await cc.methods.ownerOf(a.tokenId).call();

      console.log("hiii: " + oo);
      ...
    fetchData();
  }, []);

  return (
    ...
  );
}

【小结】
我确实早就知道 opensea.js 可以做到想要做的事情，只是想试试看其他方法呵呵。结论是我即便看了 stackoverflow 还是被屌虐啦！希望明天 opensea.js 可以帮我讨回公道呜呜。