Fix/update markets (#72)

* Update token svgs * Fix market stats 24H change * Fix candlesticks chart display * Restore background animation * Fix token popover display
Switcheo · Aug 12, 2022 · 158269a · 158269a
1 parent 267a899
commit 158269a
Show file tree

Hide file tree

Showing 11 changed files with 812 additions and 81 deletions.
diff --git a/src/@demex-info/assets/tokens/AAVE.svg b/src/@demex-info/assets/tokens/AAVE.svg
diff --git a/src/@demex-info/assets/tokens/HUNY.svg b/src/@demex-info/assets/tokens/HUNY.svg
diff --git a/src/@demex-info/assets/tokens/JUNO.svg b/src/@demex-info/assets/tokens/JUNO.svg
diff --git a/src/@demex-info/assets/tokens/LKT.svg b/src/@demex-info/assets/tokens/LKT.svg
diff --git a/src/@demex-info/assets/tokens/MKR.svg b/src/@demex-info/assets/tokens/MKR.svg
diff --git a/src/@demex-info/assets/tokens/SAND.svg b/src/@demex-info/assets/tokens/SAND.svg
diff --git a/src/@demex-info/assets/tokens/index.ts b/src/@demex-info/assets/tokens/index.ts
@@ -79,13 +79,15 @@ export { ReactComponent as HELMET } from "./HELMET.svg";
 export { ReactComponent as HNT } from "./HNT.svg";
 export { ReactComponent as HOT } from "./HOT.svg";
 export { ReactComponent as HT } from "./HT.svg";
+export { ReactComponent as HUNY } from "./HUNY.svg";
 export { ReactComponent as HUSD } from "./HUSD.svg";
 export { ReactComponent as ICP } from "./ICP.svg";
 export { ReactComponent as ICX } from "./ICX.svg";
 export { ReactComponent as INJ } from "./INJ.svg";
 export { ReactComponent as IOST } from "./IOST.svg";
 export { ReactComponent as IOTX } from "./IOTX.svg";
 export { ReactComponent as iUSD } from "./iUSD.svg";
+export { ReactComponent as JUNO } from "./JUNO.svg";
 export { ReactComponent as KCS } from "./KCS.svg";
 export { ReactComponent as KLAY } from "./KLAY.svg";
 export { ReactComponent as KMD } from "./KMD.svg";

diff --git a/src/@demex-info/utils/markets.ts b/src/@demex-info/utils/markets.ts
@@ -1,6 +1,7 @@
 import { DEC_SHIFT } from "@demex-info/constants";
 import BigNumber from "bignumber.js";
 import { CarbonSDK, Models } from "carbon-js-sdk";
+import { WSModels } from "carbon-js-sdk/lib/websocket";
 import moment from "moment";
 import { BN_ZERO, parseNumber } from "./number";
 
@@ -69,16 +70,16 @@ export function parseMarketListMap(marketList: Models.Market[]): MarketListMap {
   return listMarket;
 }
 
-export function parseMarketStats(marketStats: Models.MarketStats): MarketStatItem {
+export function parseMarketStats(marketStats: WSModels.MarketStat): MarketStatItem {
   return {
     ...marketStats,
-    dayOpen: parseNumber(marketStats.dayOpen, BN_ZERO)!,
-    dayClose: parseNumber(marketStats.dayClose, BN_ZERO)!,
-    dayVolume: parseNumber(marketStats.dayVolume, BN_ZERO)!,
-    lastPrice: parseNumber(marketStats.lastPrice, BN_ZERO)!,
+    dayOpen: parseNumber(marketStats.day_open, BN_ZERO)!,
+    dayClose: parseNumber(marketStats.day_close, BN_ZERO)!,
+    dayVolume: parseNumber(marketStats.day_volume, BN_ZERO)!,
+    lastPrice: parseNumber(marketStats.last_price, BN_ZERO)!,
     // open_interest: parseNumber(marketStats.open_interest, BN_ZERO)!,
     open_interest: BN_ZERO, // TODO: Check on market open_interest
-    marketType: marketStats.marketType as MarketType,
+    marketType: marketStats.market_type as MarketType,
   };
 }
 

diff --git a/src/@demex-info/views/MarketsTable/MarketsTable.tsx b/src/@demex-info/views/MarketsTable/MarketsTable.tsx
@@ -6,15 +6,16 @@ import {
 import { RootState } from "@demex-info/store/types";
 import { BN_ZERO } from "@demex-info/utils";
 import {
-  MarketListMap, MarketStatItem, MarketType, MarkType, isExpired, parseMarketListMap, parseMarketStats,
+  MarketListMap, MarketListItem, MarketStatItem, MarketType, MarkType, isExpired, parseMarketListMap, parseMarketStats,
 } from "@demex-info/utils/markets";
 import { lazy } from "@loadable/component";
 import {
   Backdrop, Box, Button, fade, makeStyles, Theme, Typography, useMediaQuery, useTheme,
 } from "@material-ui/core";
 import { Skeleton } from "@material-ui/lab";
 import BigNumber from "bignumber.js";
-import { CarbonSDK, Models } from "carbon-js-sdk";
+import { CarbonSDK, Models, TypeUtils } from "carbon-js-sdk";
+import { WSConnectorTypes, WSModels, WSResult } from "carbon-js-sdk/lib/websocket";
 import clsx from "clsx";
 import Long from "long";
 import moment from "moment";
@@ -25,11 +26,10 @@ import { useSelector } from "react-redux";
 //   FuturesTypes, MarketPaper, MarketTab,
 // } from "./components";
 import {
-  FuturesTypes, MarketPaper,
+  FuturesTypes, MarketPaper, TokenPopover,
 } from "./components";
 
 const MarketGridTable = lazy(() => import("./components/MarketGridTable"));
-const TokenPopover = lazy(() => import("./components/TokenPopover"));
 
 const MarketsTable: React.FC = () => {
   const [runMarkets, loading] = useAsyncTask("runMarkets");
@@ -100,8 +100,9 @@ const MarketsTable: React.FC = () => {
         const listData: MarketListMap = parseMarketListMap(listResponse);
         setList(listData);
 
-        const statsResponse = await sdk.query.marketstats.MarketStats({});
-        const marketStatItems = statsResponse.marketstats.map((stat: Models.MarketStats) => (
+        const response = await ws.request<{ result: TypeUtils.SimpleMap<WSModels.MarketStat> }>(WSConnectorTypes.WSRequest.MarketStats, {}) as WSResult<{ result: TypeUtils.SimpleMap<WSModels.MarketStat> }>;
+        const statsResponse = response.data.result ?? {};
+        const marketStatItems = Object.values(statsResponse).map((stat: WSModels.MarketStat) => (
           parseMarketStats(stat)),
         );
         setStats(marketStatItems);
@@ -114,11 +115,11 @@ const MarketsTable: React.FC = () => {
   };
 
   useEffect(() => {
-    if (sdk && ws && ws?.connected) {
+    if (sdk && ws && ws?.connected === true) {
       reloadMarkets();
     }
     return () => { };
-  }, [sdk, ws]);
+  }, [sdk, ws?.connected]);
 
   useEffect(() => {
     setTimeout(() => setRenderReady(true));
@@ -169,20 +170,23 @@ const MarketsTable: React.FC = () => {
     marketsList.forEach((market: MarketStatItem) => {
       const marketItem = list?.[market.market] ?? {};
       const baseDenom = marketItem?.base ?? "";
-      const quoteDenom = marketItem?.quote ?? "";
 
       const symbolUsd = sdk?.token.getUSDValue(baseDenom) ?? BN_ZERO;
       const adjustedVolume = sdk?.token.toHuman(baseDenom, market.dayVolume) ?? BN_ZERO;
       const usdVolume = symbolUsd.times(adjustedVolume);
       volume24H = volume24H.plus(usdVolume);
 
       openInterest = openInterest.plus(symbolUsd.times(market.open_interest));
+    });
+
+    Object.values(list).forEach((market: MarketListItem) => {
+      if (market.marketType === "futures") return;
 
-      if (!coinsList.includes(baseDenom) && baseDenom.length > 0) {
-        coinsList.push(baseDenom);
+      if (!coinsList.includes(market.base) && market.base.length > 0) {
+        coinsList.push(market.base);
       }
-      if (!coinsList.includes(quoteDenom) && quoteDenom.length > 0) {
-        coinsList.push(quoteDenom);
+      if (!coinsList.includes(market.quote) && market.quote.length > 0) {
+        coinsList.push(market.quote);
       }
     });
 
@@ -369,11 +373,7 @@ const MarketsTable: React.FC = () => {
                               }
                             </Box>
                             <Box className={classes.dropdownContainer}>
-                              {
-                                openTokens && (
-                                  <TokenPopover tokens={coinsList} />
-                                )
-                              }
+                              {openTokens && <TokenPopover tokens={coinsList} />}
                             </Box>
                           </Box>
                         </RenderGuard>

diff --git a/src/@demex-info/views/MarketsTable/components/MarketGridRow.tsx b/src/@demex-info/views/MarketsTable/components/MarketGridRow.tsx
@@ -1,5 +1,5 @@
 import { AssetIcon, RenderGuard, TypographyLabel } from "@demex-info/components";
-import { DEC_SHIFT, getDemexLink, goToLink, Paths } from "@demex-info/constants";
+import { getDemexLink, goToLink, Paths } from "@demex-info/constants";
 import { useAsyncTask } from "@demex-info/hooks";
 import { RootState } from "@demex-info/store/types";
 import { BN_ZERO, formatUsdPrice, SECONDS_PER_DAY, toPercentage } from "@demex-info/utils";
@@ -61,9 +61,9 @@ const MarketGridRow: React.FC<Props> = (props: Props) => {
 
   const baseUsd = sdk?.token.getUSDValue(listItem?.base ?? "") ?? BN_ZERO;
   const quoteUsd = sdk?.token.getUSDValue(listItem?.quote ?? "") ?? BN_ZERO;
-  const openPrice = stat.dayOpen.shiftedBy(-DEC_SHIFT).shiftedBy(-diffDp);
-  const closePrice = stat.dayClose.shiftedBy(-DEC_SHIFT).shiftedBy(-diffDp);
-  const lastPrice = stat.lastPrice.shiftedBy(-DEC_SHIFT).shiftedBy(-diffDp);
+  const openPrice = stat.dayOpen.shiftedBy(-diffDp);
+  const closePrice = stat.dayClose.shiftedBy(-diffDp);
+  const lastPrice = stat.lastPrice.shiftedBy(-diffDp);
   const lastPriceUsd = quoteUsd.times(lastPrice);
   const change24H = openPrice.isZero() ? BN_ZERO : closePrice.minus(openPrice).dividedBy(openPrice);
 
@@ -129,7 +129,6 @@ const MarketGridRow: React.FC<Props> = (props: Props) => {
           to: new Long(currentDate),
         });
         const candlestickArr: CandleStickItem[] = parseMarketCandlesticks(candleResponse.candlesticks, listItem, sdk);
-
         if (candlestickArr.length > 0) {
           candlestickArr.forEach((candle: CandleStickItem) => {
             if (candle.close > newYBounds.max) {
@@ -148,7 +147,33 @@ const MarketGridRow: React.FC<Props> = (props: Props) => {
       }
     });
     return () => {};
-  }, [stat.market]);
+  }, [stat.market, sdk]);
+
+  const candleStickData = React.useMemo(() => {
+    const candleStickLabels = candleSticks ? candleSticks.map((candle: CandleStickItem) => candle.timestamp) : [];
+    return (canvas: HTMLCanvasElement) => {
+      const ctx = canvas.getContext("2d");
+      const gradient = ctx?.createLinearGradient(0, 0, 0, 100);
+      gradient?.addColorStop(0, fade(graphLightColor, 0.6));
+      gradient?.addColorStop(0.5, fade(graphLightColor, 0.3));
+      gradient?.addColorStop(1, fade(graphLightColor, 0));
+      return {
+        labels: candleStickLabels,
+        datasets: [{
+          backgroundColor: gradient ?? graphLightColor,
+          borderColor: graphMainColor,
+          borderWidth: 1,
+          data: candleSticks,
+          fill: "start",
+          parsing: {
+            xAxisKey: "timestamp",
+            yAxisKey: "close",
+          },
+          pointRadius: 0,
+        }],
+      };
+    };
+  }, [candleSticks, graphLightColor, graphMainColor]);
 
   return (
     <TableRow
@@ -244,28 +269,7 @@ const MarketGridRow: React.FC<Props> = (props: Props) => {
                 (!loading && candleSticks) && (
                   <Line
                     type="line"
-                    data={(canvas: HTMLCanvasElement) => {
-                      const ctx = canvas.getContext("2d");
-                      const gradient = ctx?.createLinearGradient(0, 0, 0, 100);
-                      gradient?.addColorStop(0, fade(graphLightColor, 0.6));
-                      gradient?.addColorStop(0.5, fade(graphLightColor, 0.3));
-                      gradient?.addColorStop(1, fade(graphLightColor, 0));
-                      return {
-                        labels: candleSticks.map((candle: CandleStickItem) => candle.timestamp),
-                        datasets: [{
-                          backgroundColor: gradient ?? graphLightColor,
-                          borderColor: graphMainColor,
-                          borderWidth: 1,
-                          data: candleSticks,
-                          fill: "start",
-                          parsing: {
-                            xAxisKey: "timestamp",
-                            yAxisKey: "close",
-                          },
-                          pointRadius: 0,
-                        }],
-                      };
-                    }}
+                    data={candleStickData}
                     width={240}
                     height={88}
                     options={graphOptions}

diff --git a/src/@demex-info/views/MarketsTable/components/TokenPopover.tsx b/src/@demex-info/views/MarketsTable/components/TokenPopover.tsx
@@ -1,5 +1,5 @@
 import {
-  CoinIcon, PaperBox, RenderGuard, TypographyLabel, withLightTheme,
+  CoinIcon, PaperBox, TypographyLabel, withLightTheme,
 } from "@demex-info/components";
 import { RootState } from "@demex-info/store/types";
 import { Box, makeStyles, Theme } from "@material-ui/core";
@@ -23,24 +23,22 @@ const TokenPopover: React.FC<Props> = (props: Props) => {
   const { sdk } = useSelector((state: RootState) => state.app);
 
   return (
-    <RenderGuard renderIf={tokens.length > 0}>
-      <PaperBox boxClass={classes.dropdownPaper}>
-        {
-          tokens.map((token: string) => {
-            const tokenObj = sdk?.token.tokenForDenom(token);
-            const tokenName = sdk?.token.getTokenName(token) ?? "";
-            return (
-              <Box display="flex" key={token}>
-                <CoinIcon className={classes.coinSvg} denom={tokenName.toLowerCase()} />
-                <TypographyLabel className={classes.tokenName} variant="subtitle1" ml={1} color="textSecondary">
-                  {NameOverride[tokenObj?.id ?? ""] ?? tokenObj?.name ?? "-"}
-                </TypographyLabel>
-              </Box>
-            );
-          })
-        }
-      </PaperBox>
-    </RenderGuard>
+    <PaperBox boxClass={classes.dropdownPaper}>
+      {
+        tokens.map((token: string) => {
+          const tokenObj = sdk?.token.tokenForDenom(token);
+          const tokenName = sdk?.token.getTokenName(token) ?? "";
+          return (
+            <Box display="flex" key={token}>
+              <CoinIcon className={classes.coinSvg} denom={tokenName.toLowerCase()} />
+              <TypographyLabel className={classes.tokenName} variant="subtitle1" ml={1} color="textSecondary">
+                {NameOverride[tokenObj?.id ?? ""] ?? tokenObj?.name ?? "-"}
+              </TypographyLabel>
+            </Box>
+          );
+        })
+      }
+    </PaperBox>
   );
 };
 
@@ -50,11 +48,35 @@ const useStyles = makeStyles((theme: Theme) => ({
     maxWidth: "1.125rem",
     minHeight: "1.125rem",
     minWidth: "1.125rem",
+    marginTop: 1,
   },
   dropdownPaper: {
     backgroundColor: theme.palette.background.default,
     padding: theme.spacing(2),
     zIndex: 3,
+    maxHeight: "15rem",
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+      // the actual width is this value minus twice of border width
+      width: theme.spacing(1.5),
+      height: theme.spacing(1.5),
+    },
+    "&::-webkit-scrollbar-corner": {
+      backgroundColor: "transparent",
+      borderRadius: "4px",
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "transparent",
+      borderRadius: "4px",
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundClip: "padding-box",
+      backgroundColor: theme.palette.divider,
+      border: "3px solid",
+      borderColor: "transparent",
+      // the actual border radius should be this value minus twice of border width
+      borderRadius: theme.spacing(2.5),
+    },
     [theme.breakpoints.only("xs")]: {
       padding: theme.spacing(1.5, 2),
     },