chore: better asset availability control

Author: xnyl

src/features/gateway/steps/GatewayInitialStep.tsx

@@ -22,10 +22,7 @@ import { PaperContent } from "../../../components/layout/Paper";
 import { TooltipWithIcon } from "../../../components/tooltips/TooltipWithIcon";
 import { paths } from "../../../pages/routes";
 import { chainsConfig, getChainConfig } from "../../../utils/chainsConfig";
-import {
-  getAssetConfig,
-  supportedLockAssets,
-} from "../../../utils/tokensConfig";
+import { getAssetConfig, supportedAssets } from "../../../utils/tokensConfig";
 import { useWallet } from "../../wallet/walletHooks";
 import {
   getAssetOptionData,
@@ -43,7 +40,7 @@ import {
 import { GatewayStepProps } from "./stepUtils";
 import { setPickerOpened } from "../../wallet/walletSlice";
 
-const assets = supportedLockAssets;
+const assets = supportedAssets;
 const chains = Object.keys(chainsConfig);
 
 const forceShowDropdowns = false;

src/features/gateway/steps/GatwayFeesStep.tsx

@@ -35,6 +35,7 @@ import {
   getAssetConfig,
   getRenAssetName,
 } from "../../../utils/tokensConfig";
+import { $exchangeRates, $marketData } from "../../marketData/marketDataSlice";
 import { useChains } from "../../network/networkHooks";
 import { $network } from "../../network/networkSlice";
 import { useWallet } from "../../wallet/walletHooks";
@@ -79,6 +80,7 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
     minimumAmount,
     amountsPending,
   } = fees;
+  const rates = useSelector($exchangeRates);
   const outputAmountUsd = Number(outputAmount) * 69.42; // TODO
 
   const Header = (
@@ -164,7 +166,7 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
       <PaperContent topPadding bottomPadding>
         <span>Feessss</span>
       </PaperContent>
-      <Debug it={{ fees }} />
+      <Debug it={{ fees, transactions }} />
     </>
   );
 };

src/features/marketData/marketDataHooks.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useInterval } from "react-use";
 import { getBandchain } from "../../services/bandchain";
+import { useReportSystemStatus } from "../ui/uiHooks";
 import {
   setSystemMonitorStatus,
   SystemStatus,
@@ -20,69 +21,43 @@ import {
 
 const dataRefreshInterval = 30; // seconds
 
+const fetchBandchainExchangeRates = () => {
+  return getBandchain().getReferenceData(bandchainReferencePairs, 10, 16);
+};
+
+const fetchCoingeckoExchangeRates = async () => {
+  return fetch(
+    "https://api.coingecko.com/api/v3" +
+      `/coins/markets?vs_currency=usd&ids=${coingeckoSymbols.join(",")}`
+  ).then((response) => response.json());
+};
+
 export const useExchangeRates = () => {
   const dispatch = useDispatch();
-
-  const fetchMarketDataRates = useCallback(async () => {
-    const bandchain = await getBandchain()
-      .getReferenceData(bandchainReferencePairs, 10, 16)
+  const report = useReportSystemStatus();
+  const fetchData = useCallback(() => {
+    fetchBandchainExchangeRates()
       .then((data: Array<BandchainReferenceData>) => {
-        dispatch(
-          setSystemMonitorStatus({
-            type: SystemType.Bandchain,
-            status: SystemStatus.Operational,
-          })
-        );
-
-        return mapBandchainToExchangeData(data);
+        report(SystemType.Bandchain, SystemStatus.Operational);
+        const rates = mapBandchainToExchangeData(data);
+        dispatch(setExchangeRates(rates));
       })
       .catch((error: any) => {
+        report(SystemType.Bandchain, SystemStatus.Failure);
         console.error(error);
-        dispatch(
-          setSystemMonitorStatus({
-            type: SystemType.Bandchain,
-            status: SystemStatus.Failure,
-          })
-        );
-        return [];
-      });
-
-    const coingecko = await fetch(
-      "https://api.coingecko.com/api/v3" +
-        `/coins/markets?vs_currency=usd&ids=${coingeckoSymbols.join(",")}`
-    )
-      .then((response) => response.json())
-      .then((data: Array<CoingeckoReferenceData>) => {
-        dispatch(
-          setSystemMonitorStatus({
-            type: SystemType.Coingecko,
-            status: SystemStatus.Operational,
-          })
-        );
-        return mapCoingeckoToExchangeData(data);
-      })
-      .catch((error: any) => {
-        dispatch(
-          setSystemMonitorStatus({
-            type: SystemType.Coingecko,
-            status: SystemStatus.Failure,
-          })
-        );
-        return [];
       });
 
-    return [...bandchain, ...coingecko];
-  }, [dispatch]);
-
-  const fetchData = useCallback(() => {
-    fetchMarketDataRates()
-      .then((rates) => {
-        dispatch(setExchangeRates(rates));
-      })
-      .catch((e) => {
-        console.error(e);
-      });
-  }, [dispatch, fetchMarketDataRates]);
+    // fetchCoingeckoExchangeRates()
+    //   .then((data: Array<CoingeckoReferenceData>) => {
+    //     report(SystemType.Coingecko, SystemStatus.Operational);
+    //     const rates = mapCoingeckoToExchangeData(data);
+    //     dispatch(setExchangeRates(rates));
+    //   })
+    //   .catch((error: any) => {
+    //     report(SystemType.Coingecko, SystemStatus.Failure);
+    //     console.error(error);
+    //   });
+  }, [dispatch, report]);
 
   useEffect(fetchData, [fetchData]);
   useInterval(fetchData, dataRefreshInterval * 1000);

src/features/marketData/marketDataSlice.ts

@@ -19,6 +19,10 @@ const slice = createSlice({
     setExchangeRates(state, action: PayloadAction<Array<ExchangeRate>>) {
       state.exchangeRates = action.payload;
     },
+    updateExchangeRates(state, action: PayloadAction<Array<ExchangeRate>>) {
+      // TODO: finish updating
+      state.exchangeRates = action.payload;
+    },
     setGasPrices(state, action: PayloadAction<Array<GasPrice>>) {
       state.gasPrices = action.payload;
     },

src/features/marketData/marketDataUtils.ts

@@ -1,4 +1,5 @@
 import { ReferenceData } from "@bandprotocol/bandchain.js/lib/data";
+import { Asset } from "@renproject/chains";
 import { env } from "../../constants/environmentVariables";
 import { uniqueArray } from "../../utils/arrays";
 import {
@@ -7,12 +8,11 @@ import {
   currenciesConfig,
   getCurrencyConfigByBandchainSymbol,
 } from "../../utils/assetConfigs";
-
-// move to assetConfig
-const mapToBandchainCurrencySymbol = (symbol: BridgeCurrency) => {
-  const config = currenciesConfig[symbol];
-  return config.bandchainSymbol || symbol;
-};
+import {
+  AssetRateService,
+  assetsConfig,
+  supportedAssets,
+} from "../../utils/tokensConfig";
 
 const mapBandchainToCurrencySymbol = (symbol: string) => {
   const config = getCurrencyConfigByBandchainSymbol(symbol);
@@ -24,14 +24,16 @@ export const USD_SYMBOL = "USD";
 const getPair = (base: string, quote: string) => `${base}/${quote}`;
 
 export const bandchainReferencePairs = uniqueArray(
-  Object.values(BridgeCurrency)
+  Object.entries(assetsConfig)
+    .filter(([asset]) => supportedAssets.includes(asset as Asset))
     .filter(
-      (symbol) =>
-        symbol !== BridgeCurrency.UNKNOWN && symbol !== BridgeCurrency.AVAX
+      ([asset, config]) => config.rateService === AssetRateService.Bandchain
     )
-    .map(mapToBandchainCurrencySymbol)
+    .map(([asset, config]) => config.rateSymbol || asset)
 ).map((symbol: string) => getPair(symbol, USD_SYMBOL));
 
+console.log("bandchainReferencePairs", bandchainReferencePairs);
+
 export const coingeckoSymbols = Object.values(currenciesConfig)
   .filter((entry) => Boolean(entry.coingeckoSymbol))
   .map((entry) => entry.coingeckoSymbol);
@@ -47,9 +49,9 @@ export const mapBandchainToExchangeData = (
   referenceData: Array<BandchainReferenceData>
 ) => {
   return referenceData.map((entry: any) => {
-    const [base, quote] = entry.pair.split("/");
+    const [rateSymbol, quote] = entry.pair.split("/");
     const data: ExchangeRate = {
-      pair: getPair(mapBandchainToCurrencySymbol(base), quote),
+      pair: getPair(mapBandchainToCurrencySymbol(rateSymbol), quote),
       rate: entry.rate,
     };
     return data;
@@ -77,14 +79,14 @@ export type GasPrice = {
 
 export const findExchangeRate = (
   exchangeRates: Array<ExchangeRate>,
-  base: BridgeCurrency,
+  base: Asset,
   quote = USD_SYMBOL
 ) => {
-  const baseBandchainSymbol = mapToBandchainCurrencySymbol(base);
+  const symbol = assetsConfig[base].rateSymbol || base;
   const rateEntry = exchangeRates.find(
-    (entry) => entry.pair === getPair(baseBandchainSymbol, quote)
+    (entry) => entry.pair === getPair(symbol, quote)
   );
-  return rateEntry?.rate || 0;
+  return rateEntry?.rate;
 };
 
 export type AnyBlockGasPrices = {

src/features/ui/uiHooks.ts

@@ -1,19 +1,13 @@
-import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useCallback, useEffect } from "react";
+import { useDispatch } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { paths } from "../../pages/routes";
 import {
-  BridgeChain,
-  EthTestnet,
-  getCurrencyConfig,
-  isMainnetNetwork,
-  toMintedCurrency,
-} from "../../utils/assetConfigs";
-import { $mintCurrency } from "../mint-old/mintSlice";
-import { $network } from "../network/networkSlice";
-import { $releaseCurrency } from "../release-old/releaseSlice";
-import { $wallet } from "../wallet/walletSlice";
-import { setPaperShaking } from "./uiSlice";
+  setPaperShaking,
+  setSystemMonitorStatus,
+  SystemStatus,
+  SystemType,
+} from "./uiSlice";
 
 export const useShakePaper = (shake: boolean, timeout = 600) => {
   const dispatch = useDispatch();
@@ -30,6 +24,21 @@ export const useShakePaper = (shake: boolean, timeout = 600) => {
   }, [dispatch, shake, timeout]);
 };
 
+export const useReportSystemStatus = () => {
+  const dispatch = useDispatch();
+  return useCallback(
+    (type: SystemType, status: SystemStatus) => {
+      dispatch(
+        setSystemMonitorStatus({
+          type,
+          status,
+        })
+      );
+    },
+    [dispatch]
+  );
+};
+
 export const useLocationFlow = () => {
   const location = useLocation();
   if (location.pathname.indexOf(paths.MINT) > -1) {

src/utils/tokensConfig.ts

@@ -4,6 +4,7 @@ import {
   BtcFullIcon,
   BtcIcon,
   CustomSvgIconComponent,
+  DogeFullIcon,
   EmptyCircleIcon,
   ZecFullIcon,
 } from "../components/icons/RenIcons";
@@ -19,20 +20,23 @@ export type AssetLabelsConfig = {
   fullName: string;
 };
 
-// export type AssetChainConfig = {
-//   sourceChain: string;
-// };
+export enum AssetRateService {
+  Bandchain = "Bandchain",
+  Coingecko = "Coingecko",
+}
 
-export type MarketDataConfig = {
-  bandchainSymbol?: string;
-  coingeckoSymbol?: string;
+export type AssetRateConfig = {
+  rateService?: AssetRateService;
+  rateSymbol?: string;
 };
 
-type AssetBaseConfig = AssetIconsConfig & AssetLabelsConfig & {};
+type AssetBaseConfig = AssetIconsConfig &
+  AssetLabelsConfig &
+  AssetRateConfig & {};
 
 const unsetAssetConfig: AssetBaseConfig = {
   Icon: EmptyCircleIcon,
-  shortName: "???",
+  shortName: "UNSET",
   fullName: "Unset full name",
 };
 
@@ -44,12 +48,14 @@ const assetsBaseConfig: Record<Asset, AssetBaseConfig> = {
     Icon: BchFullIcon,
     shortName: "BCH",
     fullName: "Bitcoin Cash",
+    rateService: AssetRateService.Bandchain,
   },
   BNB: unsetAssetConfig,
   BTC: {
     Icon: BtcFullIcon,
     shortName: "BTC",
     fullName: "Bitcoin",
+    rateService: AssetRateService.Bandchain,
   },
   BUSD: unsetAssetConfig,
   CRV: unsetAssetConfig,
@@ -59,7 +65,12 @@ const assetsBaseConfig: Record<Asset, AssetBaseConfig> = {
     fullName: "Dai",
   },
   DGB: unsetAssetConfig,
-  DOGE: unsetAssetConfig,
+  DOGE: {
+    Icon: DogeFullIcon,
+    shortName: "DOGE",
+    fullName: "Dogecoin",
+    rateService: AssetRateService.Bandchain,
+  },
   ETH: unsetAssetConfig,
   EURT: unsetAssetConfig,
   FIL: unsetAssetConfig,
@@ -110,15 +121,15 @@ export const getAssetConfig = (asset: Asset) => {
 };
 
 // TODO: invent naming similar to renJS, Noah
-export const getRenAssetName = (asset: Asset) => `ren${asset}`;
+export const getRenAssetName = (asset: Asset) => `ren${asset}`; //or mint?
 export const getLockAssetName = (renAsset: string) => {
   if (renAsset.indexOf("ren") !== 0) {
     throw new Error(`Unable to convert asset to origin (locked): ${renAsset}`);
   }
   return renAsset.substr(3);
 };
 
-export const supportedLockAssets =
+export const supportedAssets =
   env.ENABLED_ASSETS[0] === "*"
     ? [
         Asset.BTC,
@@ -137,3 +148,5 @@ export const supportedLockAssets =
         }
         return included;
       }).map((x) => x as Asset);
+
+console.log("supportedAssets", supportedAssets);