Fix/token asset icons (#121)

* Fix token asset icons on Demex homepage * Refine displaying/hiding of Tokens dropdown
Switcheo · Jul 28, 2023 · 4bc3548 · 4bc3548
1 parent 0f3d4b4
commit 4bc3548
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 83 deletions.
diff --git a/src/@demex-info/assets/icons/Placeholder.svg b/src/@demex-info/assets/icons/Placeholder.svg
diff --git a/src/@demex-info/assets/icons/index.ts b/src/@demex-info/assets/icons/index.ts
@@ -5,6 +5,7 @@ export { ReactComponent as ExternalLink } from "./ExternalLink.svg";
 export { ReactComponent as InternetOfBlockchains } from "./InternetOfBlockchains.svg";
 export { ReactComponent as MenuIcon } from "./Menu.svg";
 export { ReactComponent as Nitron } from "./Nitron.svg";
+export { ReactComponent as Placeholder } from "./Placeholder.svg";
 export { ReactComponent as TendermintCore } from "./TendermintCore.svg";
 export { ReactComponent as TickIcon } from "./Tick.svg";
 export { ReactComponent as OSMOGradient } from "./OSMOGradient.svg";
diff --git a/src/@demex-info/components/AssetIcon/AssetIcon.tsx b/src/@demex-info/components/AssetIcon/AssetIcon.tsx
@@ -26,10 +26,13 @@ const AssetIcon: React.FunctionComponent<Props> = (
   let denomA = inputDenomA;
   let denomB = inputDenomB;
 
-  const symbols = sdk?.token.getTokenName(denom ?? "").split("-") ?? [];
+  let symbols: string[] = [];
+  if (denom && !denom.startsWith("ibc/")) {
+    symbols = sdk?.token.getTokenName(denom).split("-") ?? [];
+  }
+
   if (symbols.length > 1) {
-    denomA = symbols[0];
-    denomB = symbols[1];
+    [denomA, denomB] = symbols;
   }
 
   return (

diff --git a/src/@demex-info/components/CoinIcon/CoinIcon.tsx b/src/@demex-info/components/CoinIcon/CoinIcon.tsx
@@ -1,55 +1,60 @@
 /* eslint-disable no-unused-vars */
-import AttachMoney from "@demex-info/assets/icons/AttachMoney.svg";
-import { makeStyles, Theme } from "@material-ui/core";
+import { Placeholder } from "@demex-info/assets/icons";
+import { TOKEN_ICON_REPO_URL } from "@demex-info/constants";
+import { SvgIconProps, makeStyles, Theme } from "@material-ui/core";
 import clsx from "clsx";
-import React, { ComponentPropsWithoutRef } from "react";
-import { TokenAssets, TokenNameMap } from "./constants";
+import React from "react";
+import { SvgIcon } from "../SvgIcon";
 
-export interface CoinIconProps extends ComponentPropsWithoutRef<"img"> {
-  denom?: string;
-  outlined?: boolean;
-  hideUnknown?: boolean;
+export interface CoinIconProps extends SvgIconProps {
+  denom?: string
 }
 
-const getTokenName = (
-  denom: CoinIconProps["denom"],
-  outlined: CoinIconProps["outlined"] = false,
-): string => {
-  let tokenName = (denom ?? "").toUpperCase();
-  if (TokenNameMap[tokenName]) {
-    tokenName = TokenNameMap[tokenName];
-  }
-  if (outlined) {
-    tokenName += "Outlined";
-  }
-  return tokenName;
+const getTokenIconURL = (symbol: string, fileType: string) => {
+  return TOKEN_ICON_REPO_URL.replace(":token_name", symbol).replace(":file_type", fileType);
+};
+
+const tokenNameMap: {
+  [index: string]: string
+} = {
+  "LKT.BEP20": "LKT",
+  BTCB: "BTC",
+  USD: "cUSD",
+  SWTHB: "SWTH",
+  USTC: "UST",
+  CUSDC: "USDC",
 };
 
 const CoinIcon: React.FunctionComponent<CoinIconProps> = ({
   denom,
-  outlined = false,
-  hideUnknown = false,
   className,
   ...rest
 }: CoinIconProps) => {
   const classes = useStyles();
+  const [imageSrcIndex, setImageSrcIndex] = React.useState(0);
+  const [imageSrcError, setImageSrcError] = React.useState(false);
+
+  let symbolToFetch = denom ?? "";
+  symbolToFetch = tokenNameMap[symbolToFetch] ?? symbolToFetch;
+
+  const imageSrcArray = symbolToFetch ? ["svg", "png"].map((fileType) => getTokenIconURL(symbolToFetch, fileType)) : [];
 
-  const tokenName = getTokenName(denom, outlined);
-  const iconFile = `${tokenName}.svg`;
-  const fallbackIconFile = AttachMoney;
+  const handleImgSrcError = () => {
+    if (imageSrcIndex < imageSrcArray.length - 1) {
+      setImageSrcIndex(imageSrcIndex + 1);
+    } else {
+      console.error(symbolToFetch);
+      setImageSrcError(true);
+    }
+  };
 
-  const hasAsset: boolean = !!TokenAssets?.[iconFile];
-  if (!hasAsset && hideUnknown) return null;
-  return (
-    <img
-      src={TokenAssets?.[iconFile]?.default ?? fallbackIconFile}
-      alt={tokenName}
-      className={clsx(
-        classes.svg, 
-        className,
-        { isDefault: !hasAsset },
-      )}
+  return !imageSrcError && symbolToFetch ? (
+    <img className={clsx(classes.svg, className)} src={imageSrcArray[imageSrcIndex]} onError={handleImgSrcError} alt={symbolToFetch} />
+  ) : (
+    <SvgIcon
+      component={Placeholder}
       {...rest}
+      className={clsx(classes.svg, className)}
     />
   );
 };
@@ -58,9 +63,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   svg: {
     fontSize: "inherit",
     borderRadius: "100%",
-    "&.isDefault": {
-      filter: "invert(1)",
-    },
   },
 }));
 

diff --git a/src/@demex-info/constants/assets.ts b/src/@demex-info/constants/assets.ts
@@ -7,3 +7,5 @@ export const lottieDefaultOptions = {
     preserveAspectRatio: "xMidYMid slice",
   },
 };
+
+export const TOKEN_ICON_REPO_URL = "https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/:token_name.:file_type";
diff --git a/src/@demex-info/views/HeroSection/components/MarketsGrid.tsx b/src/@demex-info/views/HeroSection/components/MarketsGrid.tsx
@@ -13,7 +13,7 @@ import {
 import { StyleUtils } from "@demex-info/utils/styles";
 import { lazy } from "@loadable/component";
 import {
-  Backdrop, Box, Button, Grid, Hidden, makeStyles, Theme,
+  Box, Button, ClickAwayListener, Grid, Hidden, makeStyles, Theme,
 } from "@material-ui/core";
 import { Skeleton } from "@material-ui/lab";
 import BigNumber from "bignumber.js";
@@ -236,6 +236,14 @@ const MarketsGrid: React.FC = () => {
     setOpenTokens(false);
   };
 
+  const handleToggle = () => {
+    if (openTokens) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  };
+
   const volumeCountUp = useRollingNum(volume24H, 2, 4);
   const liquidityCountUp = useRollingNum(totalValueLocked, 2, 4);
   // const spotCountUp = useRollingNum(spotMarketsList.length, 0, 2);
@@ -361,61 +369,70 @@ const MarketsGrid: React.FC = () => {
                   </TypographyLabel>
                 </RenderGuard>
                 <RenderGuard renderIf={!statLoading && coinsList.length > 0}>
-                  <Box position="relative">
+                  <ClickAwayListener onClickAway={handleClose}>
                     <Box
-                      className={classes.labelBox}
-                      display="flex"
-                      alignItems="center"
+                      position="relative"
                       onMouseEnter={handleOpen}
                       onFocus={handleOpen}
+                      onMouseLeave={handleClose}
+                      onTouchEnd={handleToggle}
+                      minHeight={38}
                     >
-                      {coinsList.map((coin: string, index: number) => {
-                        if (index <= 3) {
-                          const coinName = sdk?.token.getTokenName(coin) ?? "";
-                          return (
-                            <CoinIcon
-                              className={clsx(classes.coinIcon, `coin-${index}`)}
-                              key={coin}
-                              denom={coinName.toLowerCase()}
-                            />
-                          );
+                      <Box
+                        className={classes.labelBox}
+                        display="flex"
+                        alignItems="center"
+                      >
+                        {coinsList.map((coin: string, index: number) => {
+                          if (index <= 3) {
+                            const coinName = sdk?.token.getTokenName(coin) ?? "";
+                            return (
+                              <CoinIcon
+                                className={clsx(classes.coinIcon, `coin-${index}`)}
+                                key={coin}
+                                denom={coinName}
+                              />
+                            );
+                          }
+                          return null;
+                        })}
+                        {
+                          coinsList.length > 4 && (
+                            <Box>
+                              <TypographyLabel
+                                className={classes.plusLabel}
+                              >
+                                +{coinsList.length - 4}
+                              </TypographyLabel>
+                            </Box>
+                          )
                         }
-                        return null;
-                      })}
-                      {
-                        coinsList.length > 4 && (
-                          <Box>
-                            <TypographyLabel
-                              className={classes.plusLabel}
-                            >
-                              +{coinsList.length - 4}
-                            </TypographyLabel>
-                          </Box>
-                        )
-                      }
+                      </Box>
+                      <Box>
+                        <Box className={classes.dropdownInner}>
+                          {
+                            openTokens && (
+                              <TokenPopover tokens={coinsList} />
+                            )
+                          }
+                        </Box>
+                      </Box>
                     </Box>
-                    <Box className={classes.dropdownContainer}>
-                      {
-                        openTokens && (
-                          <TokenPopover tokens={coinsList} />
-                        )
-                      }
-                    </Box>
-                  </Box>
+                  </ClickAwayListener>
                 </RenderGuard>
                 <RenderGuard renderIf={statLoading}>
                   <Box alignItems="center" display="flex" justifyContent="center">
                     <Skeleton className={classes.coinSkeleton} />
                   </Box>
                 </RenderGuard>
               </Box>
-              <Backdrop
+              {/* <Backdrop
                 className={classes.backdrop}
                 open={openTokens}
                 invisible
                 onClick={handleClose}
                 onMouseEnter={handleClose}
-              />
+              /> */}
             </React.Fragment>
           }
         </Cards>
@@ -476,7 +493,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       width: "120px",
     },
   },
-  dropdownContainer: {
+  dropdownInner: {
     position: "absolute",
     top: theme.spacing(4.25),
     right: theme.spacing(-1.25),

diff --git a/src/@demex-info/views/HeroSection/components/TokenPopover.tsx b/src/@demex-info/views/HeroSection/components/TokenPopover.tsx
@@ -31,7 +31,7 @@ const TokenPopover: React.FC<Props> = (props: Props) => {
             const tokenName = sdk?.token.getTokenName(token) ?? "";
             return (
               <Box key={token} className={classes.tokenWrapper}>
-                <CoinIcon className={classes.coinSvg} denom={tokenName.toLowerCase()} />
+                <CoinIcon className={classes.coinSvg} denom={tokenName} />
                 <TypographyLabel className={classes.tokenName}>
                   {NameOverride[tokenObj?.id ?? ""] ?? tokenObj?.name ?? "-"}
                 </TypographyLabel>

diff --git a/src/@demex-info/views/UnleashTrader/components/TokensMarquee.tsx b/src/@demex-info/views/UnleashTrader/components/TokensMarquee.tsx
@@ -89,7 +89,7 @@ const TokensMarquee: React.FC<Props> = () => {
                       <TypographyLabel className={clsx(classes.usdValue, classes.text)}>{baseMarket.usdValue}</TypographyLabel>
                     </Box>
                   </Box>
-                  <CoinIcon className={classes.coinSvg} denom={tokenName.toLowerCase()} />
+                  <CoinIcon className={classes.coinSvg} denom={tokenName} />
                 </Cards>
               );
             })}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,3 +7,5 @@ export const lottieDefaultOptions = { @@
         preserveAspectRatio: "xMidYMid slice",
       },
     };
+    export const TOKEN_ICON_REPO_URL = "https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/:token_name.:file_type";