Ankrjs를 사용하여 여러 블록체인에서 계정 잔액을 확인하는 방법

이 튜토리얼에서는 Ankr's Advanced Multichain APIs ↗를 사용하여 Ethereum, Polygon 및 Fantom과 같은 여러 블록체인에서 계정 잔액을 가져올 것입니다.

Ankr 고급 API에 대한 복습

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



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

시작하기

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

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

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

yarn create next-app --ts ankrjs-account-balance

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

cd ankrjs-account-balance

yarn dev

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

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

이 섹션에서는 다중 체인에서 계정 잔액을 쿼리하기 위해 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단계: 총 잔액을 가져오는 함수 만들기

이 단계에서는 먼저 getAccountBalance 파일에 ./apis.ts 함수를 만들고 walletAddress 를 수락하고 코인과 해당 토큰 잔액을 반환합니다. 여기서는 Ankr.js에서 제공하는 getAccountBalance ↗ 메소드를 활용하겠습니다.

파일: ./apis.ts

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

const provider = new AnkrscanProvider('');

//defining the list of supported blockchains
const listOfChains: Blockchain[] = ['eth', 'arbitrum', 'avalanche', 
'bsc', 'fantom', 'polygon', ];

//key-value pair mapping of chains to their native symbols
export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

//getAccountBalance function to fetch coins and their respective token balances
export const getAccountBalance = async (walletAddress: string) => {
  return provider.getAccountBalance({
    walletAddress,
  });
};

페이지에서 이 함수./pages/index.tsx를 호출하여 계정 잔액을 확인합니다. 이렇게 하려면 index.tsx 파일에서 코드를 지우고 아래 제공된 코드로 바꿉니다.

파일: ./pages/index.tsx

import { useEffect } from 'react';

import {
  getAccountBalance,
} from '../apis';

function App() {

  useEffect(() => {
    (async () => {
      const  total  = await getAccountBalance(
        "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
      );
      console.log({ total });
    })();
  }, []);

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

export default App;

이제 브라우저의 개발자 콘솔에서 입력한 지갑 주소의 계정 잔액을 확인해 봅시다.

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

각각의 토큰 및 계정 잔액과 함께 체인 목록을 볼 수 있어야 합니다.

[선택]: 순자산 계산

체인 전체의 잔액 합계(순자산)를 계산하기 위해 apis.ts 파일에 새 함수를 만들고 getTotalMultichainBalance라고 합니다.

파일: ./apis.ts

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

const provider = new AnkrscanProvider('');

//defining the list of supported blockchains
const listOfChains: Blockchain[] = ['eth', 'arbitrum', 'avalanche', 
'bsc', 'fantom', 'polygon', ];

//key-value pair mapping of chains to their native symbols
export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

//getAccountBalance function to fetch coins and their respective token balances
export const getAccountBalance = async (
  walletAddress: string,
  blockchain: Blockchain
) => {
  return provider.getAccountBalance({
    walletAddress,
    blockchain,
  });
};

//use getAccountBalance to sum total balance across chains
export const getTotalMultichainBalance = async (walletAddress: string) => {
  let total = 0;
  for await (const chain of listOfChains) {
    const { totalBalanceUsd, assets } = await getAccountBalance(
      walletAddress,
      chain
    );
    total += +totalBalanceUsd;
  }
  return total;
};

전체 계정 잔액을 확인하기 위해 페이지에서 이 함수를 호출해 보겠습니다.

파일: ./pages/index.tsx

import { useEffect } from 'react';

import {
  getTotalMultichainBalance,
} from '../apis';

function App() {

  useEffect(() => {
    (async () => {
      const  total  = await getTotalMultichainBalance(
        "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      );
      console.log({ total });
    })();
  }, []);

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

export default App;

브라우저의 개발자 콘솔에서 입력한 지갑 주소의 순자산을 봅시다.

localhost로 이동하여 Option + ⌘ + J(macOS) 또는 Shift + CTRL + J(Windows/Linux)를 사용합니다.

순자산을 볼 수 있어야 합니다.

GitHub 레포

Find Code Here!

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