Ankrjs를 사용하여 특정 지갑 주소가 소유한 모든 NFT를 가져오는 방법

이 튜토리얼에서는 Ankr's Advanced Multichain APIs ↗를 사용하여 Ethereum, Polygon 및 Fantom과 같은 여러 블록체인에서 특정 지갑 또는 소유자가 소유한 모든 NFT를 가져올 것입니다.

Ankr 고급 API

Ankr의 Advanced Multichain API는 블록체인 데이터 쿼리를 단순화하기 위해 생성된 RPC 메서드 모음입니다. 이러한 API는 몇 초 만에 온체인 데이터를 쿼리할 수 있도록 모든 어려운 작업을 수행합니다.


현재 Ethereum, Fantom, Binance Smart Chain, Syscoin, Optimism, Polygon, Avalanche, Arbitrum 등 8개의 EVM 호환 체인을 지원하며 곧 더 많은 EVM 및 비 EVM 체인이 출시될 예정입니다. Ankr의 고급 API와 상호 작용하기 위해 Ankr.js ↗라는 JavaScript 라이브러리를 사용할 것입니다.

시작하기

전제 조건: 이 가이드를 성공적으로 마치려면 컴퓨터에 Node.js ↗ 및 Yarn ↗가 설치되어 있어야 합니다.

1단계: Next.js 시작 애플리케이션 설정

먼저 이 프로젝트를 시작하려는 디렉토리로 이동하고 터미널에서 다음 명령을 실행하여 새로운 Next.js 시작 페이지를 설정합니다.

yarn create next-app --ts ankrjs-fetch-nfts

몇 개의 파일과 폴더가 만들어지는 것을 볼 수 있습니다. 새로 생성된 디렉토리로 들어가서 localhost:3000에서 개발 서버를 시작하겠습니다.

cd ankrjs-fetch-nfts

yarn dev

시작 응용 프로그램을 보려면 localhost:3000을 방문하십시오. 그러면 아래에 첨부된 화면과 유사합니다.

2단계: Ankr.js 설치 및 설정

이 섹션에서는 주어진 지갑 주소에 대해 블록체인에서 NFT 데이터를 쿼리하기 위해 Ankr.js를 설치하고 설정합니다.

npm에서 ankr.js 패키지를 설치하는 것으로 시작하겠습니다.

yarn add @ankr.com/ankr.js

이제 Ankr.js 라이브러리를 설치했으므로 프로젝트 디렉터리의 루트에 apis.ts라는 새 파일을 만들어 Ankr.js를 설정해 보겠습니다. 이 파일에서 Ankr.js를 초기화합니다.

파일: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

Ankr의 고급 API와 상호 작용하기 위해 데이터를 가져오는 데 필요한 API에 대한 인터페이스 역할을 할 공급자 인스턴스를 만들었습니다.

3단계: getNFTs 함수 생성

이 단계에서는 getNfts를 수락하고 해당 주소가 소유한 NFT 목록을 반환하는 walletAddress 함수를 생성합니다.

여기서는 이를 위해 Ankr.js에서 제공하는 getNFTsByOwner 함수를 활용해 보겠습니다.

파일: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

export const getNfts = async (address: string) => {
  const { assets } = await provider.getNFTsByOwner({
    walletAddress: address,
    blockchain: 'eth',
  });
  return {
    nfts: assets,
  };
};

그리고 그게 다야.

페이지에서 이 함수./pages/index.tsx를 호출하여 소유자의 지갑 주소로 가져온 NFT를 확인하고 출력을 기록해 보겠습니다. 이렇게 하려면 index.tsx 파일에서 코드를 지우고 아래 제공된 코드로 바꿉니다.

파일: ./pages/index.tsx

import type { NextPage } from 'next';
import { useEffect } from 'react';
import { getNfts } from '../apis';

const Home: NextPage = () => {
  useEffect(() => {
    (async () => {
      const { nfts } = await getNfts(
        '0xd8da6bf26964af9d7eed9e03e53415d37aa96045'
      );
      console.log({ nfts });
    })();
  }, []);

  return (
  <div className='p-10 flex flex-col items-center'>
      <h1 className='text-3xl font-bold'>NFTs</h1>
    </div>
  );
};

export default Home;

이제 브라우저의 개발자 콘솔에서 입력한 지갑 주소의 NFT 로그를 확인해보자.

localhost로 가서 Option + ⌘ + J(macOS) 또는 Shift + CTRL + J(Windows/Linux)를 사용합니다.

특정 주소가 소유한 NFT 목록을 볼 수 있어야 합니다.


토글을 확장하여 소유자가 보유한 NFT의 세부 정보를 자세히 살펴볼 수도 있습니다. 세부 사항은 다음과 같습니다.

GitHub 레포

Find Code Here!

여기에서 방금 배운 내용을 빌드 aMultichain NFT Viewer. ↗로 확장할 수도 있습니다.