はじめに

ゴール

対象読者

• NFT 保有者向け会員サイトを作りたい開発者・起業家
• NFT 保有者向け会員サイトを作っている開発者・起業家
• 独自コントラクトを用いて開発している方

対象ではない読者

• ERC1155 で実装を考えている方
• Opensea の共通コントラクトを利用している方

注意点

• 本記事は ERC721 のみを対象にしており、ERC1155 は対象にしておりません。あらかじめご了承ください。
• この記事は「トークン一覧」を取得することを高速化することを目的としています。 トークンを持っているかいないかだけを判定したい場合 は、別途記事を作成しお伝えします。（記事作成予定）

この記事の成果物

本題

NG 例

取得が低速になってしまうパターン

const getOwnedTokenIds = (holderAddress) =>
  [...new Array(tokenCounts)]
    .map(async (i) => ({
      tokenId: i,
      owner: await erc721.ownerOf(i).catch(() => constants.AddressZero),
    }))
    .filter((i) => holderAddress.toLowerCase() === i.owner?.toLowerCase())
    .map((i) => BigNumber.from(i.tokenId));

上記コードの解説

• tokenId ごとに ownerOf を問い合わせ、tokenId と wallet の組み合わせを配列に格納。これを tokenId の最大数までやる。
• 配列に格納された上記の組み合わせから、ユーザーのウォレットの tokenId のみを抽出する

何が問題か

💡 10,000 トークン近くになると使い物にならなくなることを確認済み

💡 thirdweb の getOwnedTokenIds について

OK 例：解決策

前提知識：Event ログについて

event Transfer(address indexed _from, address indexed _to, uint256 indexed _tokenId);

結論：Event ログを利用した取得方法

import { ethers } from "ethers";

const getCollection = async (holderAddress: string): Promise<number[]> => {
  // アドレスが同値かどうかを判定する関数
  const isAddressesEqual = (address1: string, address2: string) => {
    return address1.toLowerCase() === address2.toLowerCase();
  };

  // 設定値： ABI(Transferイベントのみ抽出)
  const sampleAbi = [
    {
      anonymous: false,
      inputs: [
        {
          indexed: true,
          internalType: "address",
          name: "from",
          type: "address",
        },
        {
          indexed: true,
          internalType: "address",
          name: "to",
          type: "address",
        },
        {
          indexed: true,
          internalType: "uint256",
          name: "tokenId",
          type: "uint256",
        },
      ],
      name: "Transfer",
      type: "event",
    },
  ];

  // ① Provider　インスタンスを作成する。
  const provider = new ethers.providers.JsonRpcProvider(
    process.env.RPC_URL as string,
    process.env.NETWORK as string
  );

  // ② 　Contract インスタンスを作成する。
  const token = new ethers.Contract(
    process.env.NFT_CONTRACT_ADDRESS as string,
    sampleAbi,
    provider
  );

  // ③ 調べたいホルダーのウォレットの過去のtokenIdの送信イベントログすべて取得する。
  const sentLogs = await token.queryFilter(
    token.filters.Transfer(holderAddress, null)
  );

  // ④ 調べたいホルダーのウォレットの過去のtokenIdの受信イベントログすべて取得する。
  const receivedLogs = await token.queryFilter(
    token.filters.Transfer(null, holderAddress)
  );

  // ⑤ ③と④のログを結合し、EventLogを時間が古いものから順に時系列で並べる。
  const logs = sentLogs
    .concat(receivedLogs)
    .sort(
      (a, b) =>
        a.blockNumber - b.blockNumber || a.transactionIndex - b.transactionIndex
    );

  // ⑥ ⑤のログを操作して、調べたいウォレットが最終的に持っている最新のtokenIdを取得する
  const owned = new Set<number>();

  for (const log of logs) {
    if (log.args) {
      const { from, to, tokenId } = log.args;

      if (isAddressesEqual(to, holderAddress)) {
        owned.add(Number(tokenId));
      } else if (isAddressesEqual(from, holderAddress)) {
        owned.delete(Number(tokenId));
      }
    }
  }

  // ⑦ Setをarrayに戻して返却
  return Array.from(owned);
};

// 実行
getCollection(process.env.YOUR_WALLET_ADDRESS as string).then((result) => {
  console.log("result", result);
});

コード解説

① 　 provider を作成する

// ① providerを作成する。
const provider = new ethers.providers.JsonRpcProvider(
  process.env.RPC_URL as string,
  process.env.NETWORK as string
)

② Contract インスタンスを作成する。

// ② 　Contract インスタンスを作成する。
const contract = new ethers.Contract(
  process.env.NFT_CONTRACT_ADDRESS as string,
  sampleAbi,
  provider
);

const sampleAbi = [
  {
    anonymous: false,
    inputs: [
      {
        indexed: true,
        internalType: "address",
        name: "from",
        type: "address",
      },
      {
        indexed: true,
        internalType: "address",
        name: "to",
        type: "address",
      },
      {
        indexed: true,
        internalType: "uint256",
        name: "tokenId",
        type: "uint256",
      },
    ],
    name: "Transfer",
    type: "event",
  },
];

③ 調べたいホルダーの　過去の送信履歴をすべて取得する

// ③ 調べたいホルダーのウォレットの過去のtokenIdの送信イベントログすべて取得する。
const sentLogs = await contract.queryFilter(
  contract.filters.Transfer(holderAddress, null)
);

// 第１引数に送信元のアドレスを指定、第2引数は指定しないした検索条件
console.log(contract.filters.Transfer(holderAddress, null));

transfer {
 address: '0x...',
 topics: [
   '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
   '0x000000000000000000000000c23f9279acb04fedd827a36d086a454e81fa5adc'
 ]
}

④ 調べたいホルダーの　過去の受信履歴をすべて取得する

// ④ 調べたいホルダーのウォレットの過去のtokenIdの受信イベントログすべて取得する。
const receivedLogs = await contract.queryFilter(
  contract.filters.Transfer(null, holderAddress)
);

// 第１引数に送信元のアドレスを指定、第2引数は指定しないした検索条件
console.log(contract.filters.Transfer(null, holderAddress));

transfer {
  address: '0x...',
  topics: [
    '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef',
    null,
    '0x000000000000000000000000c23f9279acb04fedd827a36d086a454e81fa5adc'
  ]
}

⑤ ③ と ④ のログを結合し、送受信履歴を時系列で古い順にソート

// ⑤ ③と④のログを結合し、EventLogを時間が古いものから順に時系列で並べる。
const logs = sentLogs
  .concat(receivedLogs)
  .sort(
    (a, b) =>
      a.blockNumber - b.blockNumber || a.transactionIndex - b.transactionIndex
  );

⑥ 現在保有している分だけを抽出

// ⑥ ⑤のログを操作して、調べたいウォレットが最終的に持っている最新のtokenIdを取得する
const owned = new Set<number>();

for (const log of logs) {
  if (log.args) {
    const { from, to, tokenId } = log.args;

    if (isAddressesEqual(to, holderAddress)) {
      owned.add(Number(tokenId));
    } else if (isAddressesEqual(from, holderAddress)) {
      owned.delete(Number(tokenId));
    }
  }
}

⑦ Set を array に戻して返却

[1, 10, 30];

この実装の懸念

まとめ

宣伝

NFT 会員サイトの発注をしたい

オンラインで学びたい

筆者について