TradingView Lightweight + Bitquery

GraphQL Tutorials
,
1

TradingView Lightweight + Bitquery

TradingViewXBitquery
TradingViewXBitquery3456×1728 1.96 MB

Table of Contents

  1. Introduction
  2. Requirements
  3. Code
  4. Overview

Introduction

In this short post we will see how to use Lightweight Charts™ library — TradingView with a react application.

If you want to go to the code and run it directly, visit: bitquery-resources/bitquery-tradingview

What will it be useful for? This mini application will help us to create an OHLC chart to represent the price of a token, in this case WBNB/BUSD.

This application will be quite simple, however if the article has enough support we will update the application to be able to:

  • Display the marketcap
  • Show the total trades
  • Show the last purchases and sales
  • Other analytics

So don’t forget to comment on this article and let us know what features you would like to see!

Requirements

Some of the things we will need are:

Also, you don’t need to be a javascript or react expert to understand the code.

Code

To start with our application we will use the create-react-app package to create the application in a fast way.

npx create-react-app bitquery-tradingview
cd bitquery-tradingview

Now install axios:
npm install axios --save

What we will do now is to create the following files with the following codes:

src/components/ChartBitquery.js:

import { useEffect, useState } from "react";

import { Chart, CandlestickSeries } from "lightweight-charts-react-wrapper";
import { getTokenInfo } from "../utils/bitqueryData";
export function ChartBitquery() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState();

  useEffect(() => {
    getTokenInfo().then((data) => {
      setData(data);
      setLoading(false);
    });
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ display: "flex", justifyContent: "flex-start" }}>
      <Chart width={800} height={600}>
        <CandlestickSeries data={data.ohlcData}>
          <br />
          <div style={{ fontWeight: "bold", fontSize: "40px" }}>
            Currencies: {data.baseSymbol} / {data.quoteSymbol}
          </div>
          <br />
        </CandlestickSeries>
      </Chart>
    </div>
  );
}

What is this?

This component will help us to obtain the OHLC data using a useEffect without dependencies to load only once the chart and the data. If the data is being obtained it will show a text Loading..., when it finishes loading it will return the component.
Remember to put your API Key in API_KEY

src/utils/bitqueryData.js:

import axios from "axios";

const ENDPOINT = "https://graphql.bitquery.io";
const API_KEY = "API-KEY";

const getBitqueryData = async (query) => {
  const res = await axios({
    method: "POST",
    url: ENDPOINT,
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "X-API-KEY": API_KEY,
    },
    data: JSON.stringify({ query }),
    mode: "cors",
  });
  return await res.data;
};

const dateFunc = (startDate, days, add) => {

  if (add) {
    return new Date(new Date().setDate(startDate.getDate() + days))
      .toISOString()
      .split("T")[0];
  } else {
    return new Date(new Date().setDate(startDate.getDate() - days))
      .toISOString()
      .split("T")[0];
  }
};

export const getTokenInfo = async () => {
  let tillDate = new Date();
  let sinceDate = dateFunc(tillDate, 60);
  tillDate = tillDate.toISOString().split("T")[0];

  let queryOHLC = `{
  ethereum(network: bsc) {
    dexTrades(
      options: {asc: "timeInterval.day"}
      date: {since: "${sinceDate}", till: "${tillDate}"}
      priceAsymmetry: {lteq: 10},
      tradeAmountUsd: {gteq: 1}
      exchangeName: {in: ["Pancake", "Pancake v2"]}
      baseCurrency: {is: "0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c"}
      quoteCurrency: {is: "0xe9e7cea3dedca5984780bafc599bd69add087d56"}
    ) {
      timeInterval {
        day(count: 1)
      }
      baseCurrency {
        symbol
        address
      }
      baseAmount
      quoteCurrency {
        symbol
        address
      }
      high: quotePrice(calculate: maximum)
      low: quotePrice(calculate: minimum)
      open: minimum(of: block, get: quote_price)
      close: maximum(of: block, get: quote_price)
    }
  }
}
`;

  let data = await getBitqueryData(queryOHLC);

  const output = data.data.ethereum;

  const ohlcData = [];
  output.dexTrades.map((item) =>
    ohlcData.push({
      time: item.timeInterval.day,
      open: item.open,
      high: item.high,
      low: item.low,
      close: item.close,
    })
  );

  return {
    quoteSymbol: output.dexTrades[0].quoteCurrency.symbol,
    baseSymbol: output.dexTrades[0].baseCurrency.symbol,
    ohlcData: ohlcData,
  };
};

What is this?

  • We define the endpoint and the api key
  • We create the function getBitqueryData to get the result of a query without having to rewrite the code.
  • We create dateFunc that will be used to pass a Date object to subtract days and use it in the since and till fields of Bitquery.
  • We create the function getTokenInfo which will allow us to obtain the token symbols as well as the OHLC.

Now we will go to the App.js file and delete everything and put this:
App.js:

import { ChartBitquery } from "./components/ChartBitquery";

export default function App() {
  return <ChartBitquery />;
}

This will allow us to load our component in our application.

We have already finished the code, it’s as simple as that!
In order to test our application we will execute:

npm start

This will raise a page on localhost:3000 (or another port if you have it running).

image
image814×688 18.6 KB

Overview:

In this short article we saw how to create a chart with TradingView and Bitquery, if you want us to update the post with new features add a comment and interact!

Something that will be very useful will be to read this article:

https://community.bitquery.io/t/how-to-use-bitquery-in-a-secure-way-in-the-front-end/1177

— Bitquery Resources —

Bitquery Page

Bitquery Forum

Bitquery Telegram