How to create Graph builder for Cryptocurrency quote of over time

Blockchain technologies become more and more popular nowadays, every day new and new projects start. Last year Defi technology broke the crypto world, this year NFT rules. So, how to start your way in crypto, how to start building apps, wallets, Nft dashboards, how to connect to the crypto world as a software developer. Fortunately, there is a solution and its name Covalent.

Covalent is a project which provides a unified API to access blockchains data, transaction data, and many many more. Let’s dive a little bit into Covalent API and watch what we can build with this API.

We know that JavaScript is very popular today and especially its framework React. We decided to build a web application to display the history of the token price according to a particular date/time window. For visualization we choose Recharts package, this library provides a simple, cool UI out of the box and easy to install.

1. First of all we need to create a react application template, and install some useful packages: Material-UI for some ready components, axios for data fetching, and Recharts for creating graph representation. Then import all required stuff in the App.js file.

import React, { useState, useEffect } from "react";
import axios from "axios";
import {LineChart,Line,XAxis,YAxis,CartesianGrid,Tooltip,Legend,
ResponsiveContainer} from "recharts";
import moment from "moment";
import { Select, TextField, Box } from "@material-ui/core";

2. Before drawing a chart we should get data from the Covalent API. API divided into parts, here we use Pricing Endpoints. Endpoint Get historical prices by ticker symbol, actually all what we need in this application. This endpoint returns historical prices for specific ticker symbols ex. ETH

We set this axios query to track all dynamic parameters — ticker, dateFrom, dateTo and currency. and re-fetch data.

useEffect(() => {
axios.get(`https://api.covalenthq.com/v1/pricing/historical/${currency}/${ticker}/?from=${dateFrom}&to=${dateTo}&prices-at-asc=true`)
.then((response) => setState(response.data))
.catch((error) => console.error(error));
}, 
[ticker, dateFrom, dateTo, currency]);

Using axios library we easily query data from api. As a result we receive data response from api as json.

1 {
2   "data": {
3     "contract_decimals": 8,
4     "contract_name": "Wrapped BTC",
5     "contract_ticker_symbol": "WBTC",
6     "contract_address": "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
7     "supports_erc": [
8       "erc20"
9     ],
10     "logo_url": "https://logos.covalenthq.com/tokens/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599.png",
11     "update_at": "2021-04-26T18:32:09.632321820Z",
12     "quote_currency": "USD",
13     "prices": [
14       {
15         "contract_metadata": {
16           "contract_decimals": 8,
17           "contract_name": "Wrapped BTC",
18           "contract_ticker_symbol": "WBTC",
19           "contract_address": "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
20           "supports_erc": [
21             "erc20"
22           ],
23           "logo_url": "https://logos.covalenthq.com/tokens/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599.png"
24         },
.....
{
6748       {
6749         "contract_metadata": {
6750           "contract_decimals": 8,
6751           "contract_name": "Wrapped BTC",
6752           "contract_ticker_symbol": "WBTC",
6753           "contract_address": "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
6754           "supports_erc": [
6755             "erc20"
6756           ],
6757           "logo_url": "https://logos.covalenthq.com/tokens/0x2260fac5e5542a773aa44fbcfedf7c193bc2c599.png"
6758         },
6759         "date": "2021-04-26",
6760         "price": 54099.22
6761       }
6762     ]
6763   },
6764   "error": false,
6765   "error_message": null,
6766   "error_code": null
6767 }

3. Then we did data parsing and mapping data for recharts display requirements.

const data = state?.data?.prices.map(({ date, price }) => ({
name: date,
[ticker]: price
}));

And then passed already transformed data into the chart.

<ResponsiveContainer>
  <LineChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey={ticker} stroke="#8884d8"
     dot={false}  strokeWidth={2} />
  </LineChart>
</ResponsiveContainer>

We also can change our parameters using select inputs, and take dynamic re-render graph dependency.

How it looks.

Conclusion. By doing these 3 simple steps everyone can build a blockchain based application. Covalent API makes it possible to easily build apps you need by providing information in an easy to use format.

Application: https://covalent-app.vercel.app/pricing-endpoints/
GitHub: https://github.com/andreitsivm/covalent-app

Twitter: @Covalent_HQ

Telegram: https://t.me/CovalentHQ

Telegram: https://t.me/CovalentHQ

Discord: https://discord.gg/M4aRubV

Web: https://www.covalenthq.com/