小白教程 | 如何跨多链查询账户余额

最新推荐文章于 2024-11-07 09:59:48 发布

weixin_57427530

最新推荐文章于 2024-11-07 09:59:48 发布

阅读量722

点赞数 1

文章标签：区块链

本文主要介绍，如果通过 Ankr 高级 API，跨多链获取 ETH, Polygon, BNB Chain, Fantom, Avalanche, Arbitrum 等区块链的账户余额。

准备工作

要成功完成本文内容，您只需在机器上安装 Node.js 和 Yarn 。

Node.js

https://nodejs.org/

Yarn

https://yarnpkg.com/

设置 Next.js

导航到项目目录，在终端中运行以下命令，设置新的 Node.js 起始页：

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

您将看到正在创建的几个文件和文件夹，进入新创建的目录并在 localhost:3000 上启动开发服务器。

cd ankrjs-account-balance

yarn dev

访问 localhost:3000，查看启动应用程序，它将类似于下图：

安装和设置 Ankr.js

安装和设置 Ankr.js，用于跨多链查询账户余额。

我们从安装 npm 的 ankr.js 包开始：

yarn add @ankr.com/ankr.js

现在我们已经安装了 Ankr.js 库，请在项目根目录下创建一个名为 apis.ts 的新文件来设置 Ankr.js，并在这个文件中初始化 Ankr.js。

File: ./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 交互，我们创建了一个提供程序实例，作为获取数据所需的接口。

创建函数以获取总余额

在这一步中，我们将首先在 ./apis.ts 文件中创建一个 getAccountBalance 函数，该文件将接收 walletAddress，并返回 Coin 和相应的 Token 余额。这里我们将使用 Ankr.js 提供的 getAccountBalance 方法。

File:./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 文件中清除代码并将其替换为下面给出的代码：

File: ./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;

现在，可在浏览器的开发者控制台中查看钱包地址的账户余额。

使用 Option + ⌘ + J（macOS）或 Shift + CTRL + J（Windows/Linux），便可看到链列表及各 Token 和账户余额。

可选：计算净值

为了计算跨链余额总和（净值），我们将在 apis.ts 文件中创建一个新函数，并将其命名为 getTotalMultichainBalance。

File:./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;
};

在页面上调用函数来检查总账户余额。

File: ./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;

在浏览器的开发者控制台中查看输入的钱包地址的净值。