Update token icons

package.json

@@ -24,7 +24,7 @@
     "@types/redux-logger": "^3.0.8",
     "animate.css": "^4.1.1",
     "bignumber.js": "^9.0.1",
-    "carbon-js-sdk": "^0.2.8",
+    "carbon-js-sdk": "^0.3.13",
     "chart.js": "^3.2.0",
     "dayjs": "^1.11.5",
     "eslint": "^7.23.0",

src/@demex-info/assets/tokens/index.ts

@@ -53,6 +53,7 @@ export { ReactComponent as DGB } from "./DGB.svg";
 export { ReactComponent as DODO } from "./DODO.svg";
 export { ReactComponent as DOGE } from "./DOGE.svg";
 export { ReactComponent as DOT } from "./DOT.svg";
+export { ReactComponent as DYDX } from "./DYDX.svg";
 export { ReactComponent as EGLD } from "./EGLD.svg";
 export { ReactComponent as ELA } from "./ELA.svg";
 export { ReactComponent as ENJ } from "./ENJ.svg";
@@ -154,10 +155,13 @@ export { ReactComponent as SHIB } from "./SHIB.svg";
 export { ReactComponent as SNT } from "./SNT.svg";
 export { ReactComponent as SNX } from "./SNX.svg";
 export { ReactComponent as SOL } from "./SOL.svg";
+export { ReactComponent as STATOM } from "./STATOM.svg";
 export { ReactComponent as STEEM } from "./STEEM.svg";
 export { ReactComponent as STMX } from "./STMX.svg";
 export { ReactComponent as STORJ } from "./STORJ.svg";
+export { ReactComponent as STOSMO } from "./STOSMO.svg";
 export { ReactComponent as STRAX } from "./STRAX.svg";
+export { ReactComponent as STRD } from "./STRD.svg";
 export { ReactComponent as STX } from "./STX.svg";
 export { ReactComponent as SUSHI } from "./SUSHI.svg";
 export { ReactComponent as SWTH } from "./SWTH.svg";
@@ -175,6 +179,7 @@ export { ReactComponent as TUSD } from "./TUSD.svg";
 export { ReactComponent as UBQ } from "./UBQ.svg";
 export { ReactComponent as UNA } from "./UNA.svg";
 export { ReactComponent as UNI } from "./UNI.svg";
+export { ReactComponent as USC } from "./USC.svg";
 export { ReactComponent as USD } from "./USD.svg";
 export { ReactComponent as USDC } from "./USDC.svg";
 export { ReactComponent as USDT } from "./USDT.svg";

src/@demex-info/components/CoinIcon/CoinIcon.tsx

@@ -1,5 +1,5 @@
 import * as COINS from "@demex-info/assets";
-import { makeStyles, SvgIconProps } from "@material-ui/core";
+import { makeStyles, SvgIconProps, Theme } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";
 
@@ -45,22 +45,26 @@ const CoinIcon: React.FunctionComponent<CoinIconProps> = (
     defaultIcon = undefined;
   }
 
-  const Icon = symbolToIcon[tokenName] || defaultIcon;
+  const selectedIcon = symbolToIcon[tokenName];
+  const Icon = selectedIcon ?? defaultIcon;
 
   return (
     <Icon
       {...rest}
-      className={clsx(classes.svg, className)}
+      className={clsx(classes.svg, className, { isDefault: !selectedIcon })}
     />
   );
 };
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme: Theme) => ({
   svg: {
     fontSize: "inherit",
     width: "2em",
     height: "2em",
+    "&.isDefault path": {
+      fill: theme.palette.common.white,
+    },
   },
-});
+}));
 
 export default CoinIcon;