feat(fe) updating to bandchain 2

Author: xnyl

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/helper-call-delegate": "^7.12.1",
-    "@bandprotocol/bandchain.js": "1.1.6",
+    "@bandprotocol/bandchain.js": "2.0.1",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",

src/constants/environmentVariables.ts

@@ -1,8 +1,6 @@
 const NETWORK = process.env.REACT_APP_NETWORK || "testnet";
 const INFURA_ID = process.env.REACT_APP_INFURA_ID || "";
 
-const BANDCHAIN_ENDPOINT =
-  process.env.REACT_APP_BANDCHAIN_ENDPOINT || "https://api-gm-lb.bandchain.org";
 const GAS_FEE_ENDPOINT =
   process.env.REACT_APP_GAS_FEE_ENDPOINT ||
   "https://api.anyblock.tools/ethereum/latest-minimum-gasprice/?pretty";
@@ -36,7 +34,6 @@ export const env = {
   DEV,
   NETWORK,
   INFURA_ID,
-  BANDCHAIN_ENDPOINT,
   GAS_FEE_ENDPOINT,
   XSTATE_DEVTOOLS,
   BSC_MM_ENABLED,

src/features/marketData/marketDataHooks.ts

@@ -9,9 +9,9 @@ import {
 } from "../ui/uiSlice";
 import { setExchangeRates, setGasPrices } from "./marketDataSlice";
 import {
-  BandchainExchangeRateEntry,
+  BandchainReferenceData,
   bandchainReferencePairs,
-  CoingeckoExchangeRateEntry,
+  CoingeckoReferenceData,
   coingeckoSymbols,
   fetchMarketDataGasPrices,
   mapBandchainToExchangeData,
@@ -25,8 +25,8 @@ export const useExchangeRates = () => {
 
   const fetchMarketDataRates = useCallback(async () => {
     const bandchain = await getBandchain()
-      .getReferenceData(bandchainReferencePairs)
-      .then((data: Array<BandchainExchangeRateEntry>) => {
+      .getReferenceData(bandchainReferencePairs, 3, 4)
+      .then((data: Array<BandchainReferenceData>) => {
         dispatch(
           setSystemMonitorStatus({
             type: SystemType.Bandchain,
@@ -52,7 +52,7 @@ export const useExchangeRates = () => {
         `/coins/markets?vs_currency=usd&ids=${coingeckoSymbols.join(",")}`
     )
       .then((response) => response.json())
-      .then((data: Array<CoingeckoExchangeRateEntry>) => {
+      .then((data: Array<CoingeckoReferenceData>) => {
         dispatch(
           setSystemMonitorStatus({
             type: SystemType.Coingecko,

src/features/marketData/marketDataUtils.ts

@@ -1,5 +1,5 @@
+import { ReferenceData } from "@bandprotocol/bandchain.js/lib/data";
 import { env } from "../../constants/environmentVariables";
-import { getBandchain } from "../../services/bandchain";
 import { uniqueArray } from "../../utils/arrays";
 import {
   BridgeChain,
@@ -36,22 +36,15 @@ export const coingeckoSymbols = Object.values(currenciesConfig)
   .filter((entry) => Boolean(entry.coingeckoSymbol))
   .map((entry) => entry.coingeckoSymbol);
 
-export type BandchainExchangeRateEntry = {
-  pair: string;
-  rate: number;
-  updated: {
-    base: number;
-    quote: number;
-  };
-};
+export type BandchainReferenceData = ReferenceData;
 
-export type CoingeckoExchangeRateEntry = {
+export type CoingeckoReferenceData = {
   symbol: string;
   current_price: number;
 };
 
 export const mapBandchainToExchangeData = (
-  referenceData: Array<BandchainExchangeRateEntry>
+  referenceData: Array<BandchainReferenceData>
 ) => {
   return referenceData.map((entry: any) => {
     const [base, quote] = entry.pair.split("/");
@@ -64,7 +57,7 @@ export const mapBandchainToExchangeData = (
 };
 
 export const mapCoingeckoToExchangeData = (
-  entries: Array<CoingeckoExchangeRateEntry>
+  entries: Array<CoingeckoReferenceData>
 ) => {
   return entries.map((entry: any) => ({
     pair: getPair(entry.symbol, "USD"),
@@ -82,29 +75,6 @@ export type GasPrice = {
   standard: number;
 };
 
-export const fetchMarketDataRates = async () => {
-  const bandchain = await getBandchain()
-    .getReferenceData(bandchainReferencePairs)
-    .then(mapBandchainToExchangeData)
-    .catch((error: any) => {
-      console.error(error);
-      return [];
-    });
-
-  const coingecko = await fetch(
-    "https://api.coingecko.com/api/v3" +
-      `/coins/markets?vs_currency=usd&ids=${coingeckoSymbols.join(",")}`
-  )
-    .then((response) => response.json())
-    .then(mapCoingeckoToExchangeData)
-    .catch((error: any) => {
-      console.error(error);
-      return [];
-    });
-
-  return [...bandchain, ...coingecko];
-};
-
 export const findExchangeRate = (
   exchangeRates: Array<ExchangeRate>,
   base: BridgeCurrency,

src/lib/declarations/bandchain.d.ts

@@ -1,11 +1,13 @@
-import BandChain from '@bandprotocol/bandchain.js'
-import { env } from '../constants/environmentVariables'
+import Client from "@bandprotocol/bandchain.js/lib/client";
 
-let bandchainInstance: typeof BandChain | null = null;
+let bandchainInstance: any | null = null;
+
+// BandChain's Proof-of-Authority REST endpoint
+const endpoint = "https://laozi-testnet4.bandchain.org/grpc-web";
 
 export const getBandchain = () => {
   if (bandchainInstance === null) {
-    bandchainInstance = new BandChain(env.BANDCHAIN_ENDPOINT);
+    bandchainInstance = new Client(endpoint);
   }
   return bandchainInstance;
 };