Получение балансов из Covalent API с помощью Axios: подробное руководство

В быстро меняющемся мире разработки Web3 доступ к данным блокчейна в масштабе уже давно является сложной задачей. Covalent предлагает унифицированный API, который революционизирует способы доступа разработчиков к данным блокчейна и взаимодействия с ними, позволяя им строить более эффективно и уверенно. В этой статье мы углубимся в основную концепцию Covalent и рассмотрим, как использовать его возможности для простого получения данных о балансе из API Covalent.

Установка зависимостей для Covalent API и интеграции Axios

Axios — чрезвычайно популярный пакет NPM, который делает HTTP-запросы очень простыми как с сервера, так и непосредственно в браузере.

Первое, что нам нужно сделать, это установить пакет Axios NPM в наше приложение React.

Откройте окно терминала, перейдите в корневой каталог вашего приложения React и выполните одну из приведенных ниже команд, чтобы установить пакет NPM:

npm install axios 

Откройте файл app.js вашего приложения React (или любой другой файл, который вы хотите использовать) и импортируйте библиотеку axios вверху:

import axios from "axios"

Использование хуков React

Мы используем React Hooks и будем использовать следующие React-хуки, useState и useEffect.

Хук useState — это простой, но мощный способ управления состоянием в функциональных компонентах. До того, как были введены хуки, компоненты класса были единственным способом управления состоянием в React. Однако useState также позволяет управлять состоянием функциональных компонентов, что приводит к более лаконичному и удобочитаемому коду.

Используя useEffect, вы можете сообщить React, что ваш компонент должен что-то сделать после рендеринга. React запомнит переданную вами функцию (мы будем называть ее нашим «эффектом») и вызовет ее позже после выполнения обновлений DOM. В этом случае мы устанавливаем заголовок документа, но мы также можем выполнять выборку данных или вызывать какой-либо другой императивный API.

import { useState, useEffect } from 'react';

const [tokenBalances, setTokenBalances] = useState([]);

Получение данных из Covalent API

Как только вы получите ключ API и адрес кошелька, вы будете готовы получить свои данные. Но прежде чем мы продолжим, давайте обеспечим безопасность этой конфиденциальной информации и не разглашаем ее публично. Используя переменные среды или безопасный файл конфигурации, мы можем безопасно интегрировать ваши ключевые элементы API в наше приложение, защищая их от посторонних глаз и обеспечивая защиту наших данных на протяжении всего процесса разработки.

Убедитесь, что вы заменили 'YOUR_COVALENT_API_KEY' своим фактическим ключом API Covalent, а 'YOUR_WALLET_ADDRESS' — адресом кошелька, для которого вы хотите получить баланс токенов.

Преобразование баланса из ответа API в читаемый формат

В приведенном выше коде мы добавили функцию formatBalance, которая берет баланс из ответа API и преобразует его в читаемый формат путем деления значения на 1e18 (при условии, что токен имеет 18 знаков после запятой) и фиксирования его до шести знаков после запятой.

Отображение данных во внешнем интерфейсе

Это, безусловно, самая простая часть всего процесса! Все, что вам нужно сделать, это map по tokenBalances в ответе и вернуть информацию, которую вы так желаете. В этом случае мы просто вернем данные в виде неупорядоченного списка.

Ваш app.js должен выглядеть так: