Feat/v2.26.0 (#119)

* Upgrade sdk version to 0.5.0 * Resolve dependency issues * Convert ws get request to ws subscribe request --------- Co-authored-by: Thong Yuan Yu Sarah <[email protected]>
Switcheo · Jul 2, 2023 · 4bdcefc · 4bdcefc
1 parent bcb4e8f
commit 4bdcefc
Show file tree

Hide file tree

Showing 3 changed files with 1,006 additions and 764 deletions.
diff --git a/package.json b/package.json
@@ -4,9 +4,10 @@
   "private": true,
   "dependencies": {
     "@contentful/rich-text-react-renderer": "^14.1.1",
-    "@cosmjs/encoding": "^0.28.7",
-    "@cosmjs/stargate": "^0.28.7",
-    "@cosmjs/tendermint-rpc": "^0.28.7",
+    "@cosmjs/cosmwasm-stargate": "~0.29.5",
+    "@cosmjs/stargate": "~0.29.5",
+    "@cosmjs/tendermint-rpc": "~0.29.5",
+    "@ledgerhq/hw-app-eth": "~6.31.0",
     "@loadable/component": "^5.15.2",
     "@material-ui/core": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.57",
@@ -24,8 +25,8 @@
     "@types/react-router-dom": "^5.1.7",
     "@types/redux-logger": "^3.0.8",
     "animate.css": "^4.1.1",
-    "bignumber.js": "^9.0.1",
-    "carbon-js-sdk": "^0.4.32",
+    "bignumber.js": "^9.1.0",
+    "carbon-js-sdk": "^0.5.1",
     "chart.js": "^3.2.0",
     "dayjs": "^1.11.5",
     "eslint": "^7.23.0",
@@ -87,7 +88,11 @@
     ]
   },
   "resolutions": {
-    "postcss-safe-parser": "^4.0.0"
+    "postcss-safe-parser": "^4.0.0",
+    "@ledgerhq/hw-app-eth": "~6.24.1",
+    "@ledgerhq/hw-transport-webhid": "~6.24.1",
+    "@ledgerhq/hw-transport-webusb": "~6.24.1",
+    "@ledgerhq/devices": "~6.24.1"
   },
   "devDependencies": {
     "@types/loadable__component": "^5.13.4",

diff --git a/src/@demex-info/views/HeroSection/components/MarketsGrid.tsx b/src/@demex-info/views/HeroSection/components/MarketsGrid.tsx
@@ -1,13 +1,12 @@
 import { CoinIcon, RenderGuard, TypographyLabel } from "@demex-info/components";
 import { Cards } from "@demex-info/components/Cards";
 import { getDemexLink, goToDemexLink, Paths } from "@demex-info/constants";
-import { defaultMarketBlacklist } from "@demex-info/constants/markets";
 import {
   useAsyncTask, useRollingNum, useWebsocket,
 } from "@demex-info/hooks";
 import actions from "@demex-info/store/actions";
 import { RootState } from "@demex-info/store/types";
-import { BN_ZERO, constantLP, estimateApyUSD, parseLiquidityPools, parseNumber, Pool, getTotalUSDPrice, getCollateral } from "@demex-info/utils";
+import { BN_ZERO, constantLP, estimateApyUSD, parseLiquidityPools, parseNumber, Pool, getTotalUSDPrice, getCollateral } from "@demex-info/utils"; // eslint-disable-line
 import {
   MarketListMap, MarketStatItem, parseMarketListMap, parseMarketStats, getAllMarkets, 
 } from "@demex-info/utils/markets";
@@ -18,14 +17,27 @@ import {
 } from "@material-ui/core";
 import { Skeleton } from "@material-ui/lab";
 import BigNumber from "bignumber.js";
-import { Models, WSModels, WSResult, WSConnectorTypes } from "carbon-js-sdk";
+import { Models, WSModels, WSResult, WSConnectorTypes, TypeUtils } from "carbon-js-sdk";
 import clsx from "clsx";
-// import dayjs from "dayjs";
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 const TokenPopover = lazy(() => import("./TokenPopover"));
 
+interface WSData {
+  block_height: number;
+  channel?: string;
+  update_type: string;
+}
+
+interface MarketStatWSData extends WSData {
+  result: TypeUtils.SimpleMap<WSModels.MarketStat>;
+}
+
+interface PoolWSData extends WSData {
+  result: TypeUtils.SimpleMap<WSModels.Pool>;
+}
+
 const MarketsGrid: React.FC = () => {
   const [fetchData, loading] = useAsyncTask("fetchData");
   const [runPools] = useAsyncTask("runPools");
@@ -40,35 +52,39 @@ const MarketsGrid: React.FC = () => {
   const statLoading = loading || Boolean(loadingTasks.runInitSDK);
 
   const [openTokens, setOpenTokens] = React.useState<boolean>(false);
-  const [pools, setPools] = React.useState<Pool[]>([]);
+  const [pools, setPools] = React.useState<Pool[]>([]); // eslint-disable-line
   const [collateral, setCollateral] = React.useState<BigNumber>(BN_ZERO);
   const [weeklyRewards, setWeeklyRewards] = React.useState<BigNumber>(BN_ZERO);
   const [commitCurve, setCommitCurve] = React.useState<Models.CommitmentCurve | undefined>(undefined);
   const [tokenBlacklist, setTokenBlacklist] = React.useState<string[]>([]);
 
-  const reloadPools = () => {
+  const reloadPools = (poolsSubscribeParams: WSConnectorTypes.WsSubscriptionParams) => {
     if (!sdk?.query || !ws) return;
 
     runPools(async () => {
       try {
-        const response = await ws.request<{ result: WSModels.Pool[] }>(WSConnectorTypes.WSRequest.Pools, {}) as WSResult<{ result: WSModels.Pool[] }>;
-
-        const poolsData: Pool[] = parseLiquidityPools(response.data.result, sdk!.token);
-        setPools(poolsData);
-
         const poolsRewards = await sdk!.lp.getWeeklyRewards();
 
         const curveResponse = await sdk.query.liquiditypool.CommitmentCurve({});
         setCommitCurve(curveResponse.commitmentCurve);
 
         setWeeklyRewards(poolsRewards ?? BN_ZERO);
+
+        ws.subscribe(poolsSubscribeParams, (result: any) => {
+          const resultData = result as WSResult<PoolWSData>;
+          if (resultData.data.update_type === "full_state") {
+            const poolsData: Pool[] = parseLiquidityPools(resultData.data.result, sdk!.token);
+            setPools(poolsData);
+            ws.unsubscribe(poolsSubscribeParams);
+          }
+        });
       } catch (err) {
         console.error(err);
       }
     });
   }; 
 
-  const reloadData = () => {
+  const reloadData = (marketSubcribeParams: WSConnectorTypes.WsSubscriptionParams) => {
     if (!sdk?.query || !ws || !ws.connected) return;
 
     fetchData(async () => {
@@ -79,32 +95,49 @@ const MarketsGrid: React.FC = () => {
         const response = await getCollateral(sdk);
         setCollateral(response);
 
-        const marketStatresponse = await ws.request<{ result: WSModels.MarketStat}>(WSConnectorTypes.WSRequest.MarketStats, {}) as WSResult<{ result: WSModels.MarketStat}>;
-        const marketStatItems = Object.values(marketStatresponse.data.result).map((stat: WSModels.MarketStat) => (
-          parseMarketStats(stat)),
-        );
-
         // handle blacklist markets
         const configJsonResponse = await fetch(`https://raw.githubusercontent.com/Switcheo/demex-webapp-config/master/configs/${network}.json`);
         const configJsonData = await configJsonResponse.json();
         const blacklistedMarkets = configJsonData?.blacklisted_markets?.map((market: string) => market.toLowerCase()) ?? [];
         const blacklistedTokens = configJsonData?.blacklisted_tokens?.map((token: string) => token.toLowerCase()) ?? [];
         setTokenBlacklist(blacklistedTokens);
 
-        const filteredMarkets = marketStatItems.filter((market) => !blacklistedMarkets.includes(market.market.toLowerCase()) || !defaultMarketBlacklist.includes(market.market.toLowerCase()));
-        dispatch(actions.App.setMarketStats(filteredMarkets));
+        ws.subscribe(marketSubcribeParams, (result: any) => {
+          const resultData = result as WSResult<MarketStatWSData>;
+          if (resultData.data.update_type === "full_state") {
+            const marketStatItems = Object.values(resultData.data.result ?? {});
+            const filteredMarkets = marketStatItems.reduce((prev: MarketStatItem[], market: WSModels.MarketStat) => {
+              if (blacklistedMarkets.includes(market.market)) return prev;
+              const marketStatItem = parseMarketStats(market);
+              prev.push(marketStatItem);
+              return prev;
+            }, []);
+            dispatch(actions.App.setMarketStats(filteredMarkets));
+            ws.unsubscribe(marketSubcribeParams);
+          }
+        });
       } catch (err) {
         console.error(err);
       }
     });
   };
 
   useEffect(() => {
+    const marketStatsSubscribeParams: WSConnectorTypes.WsSubscriptionParams = {
+      channel: WSConnectorTypes.WSChannel.market_stats,
+    };
+    const poolsSubscribeParams: WSConnectorTypes.WsSubscriptionParams = {
+      channel: WSConnectorTypes.WSChannel.pools,
+    };
+
     if (sdk && ws && ws?.connected) {
-      reloadData();
-      reloadPools();
+      reloadData(marketStatsSubscribeParams);
+      reloadPools(poolsSubscribeParams);
     }
-    return () => { };
+    return () => {
+      ws?.unsubscribe(marketStatsSubscribeParams);
+      ws?.unsubscribe(poolsSubscribeParams);
+    };
   }, [sdk, ws]);