Browse Source

feat(insights): omit icon when an asset class has no icon

Currently, we display the Generic icon from the cryptocurrency icons set when we
have an asset class which no associated icon.  However, that icon really doesn't
make sense for asset classes that aren't cryptos, so instead this PR just blanks
out the icon for such cases.
Connor Prussin 3 months ago
parent
commit
3596f34020
1 changed files with 16 additions and 7 deletions
  1. 16 7
      apps/insights/src/components/PriceFeedIcon/index.tsx

+ 16 - 7
apps/insights/src/components/PriceFeedIcon/index.tsx

@@ -1,4 +1,3 @@
-import Generic from "cryptocurrency-icons/svg/color/generic.svg";
 import type { ComponentProps, ComponentType } from "react";
 
 import Commodities from "./commodities.svg";
@@ -26,17 +25,22 @@ export const PriceFeedIcon = ({ assetClass, symbol, ...props }: Props) => {
     return Icon ? (
       <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />
     ) : (
-      <GenericIcon assetClass={assetClass} {...props} />
+      <GenericIcon assetClass="Crypto" {...props} />
     );
   } else {
-    return <GenericIcon assetClass={assetClass} {...props} />;
+    return assetClassHasIcon(assetClass) ? (
+      <GenericIcon assetClass={assetClass} {...props} />
+    ) : // eslint-disable-next-line unicorn/no-null
+    null;
   }
 };
 
-type GenericProps = ComponentProps<"svg"> & { assetClass: string };
+type GenericProps = ComponentProps<"svg"> & {
+  assetClass: keyof typeof ASSET_CLASS_TO_ICON;
+};
 
 const GenericIcon = ({ assetClass, ...props }: GenericProps) => {
-  const Icon = ASSET_CLASS_TO_ICON[assetClass] ?? Generic;
+  const Icon = ASSET_CLASS_TO_ICON[assetClass];
   return (
     <Icon
       width="100%"
@@ -55,7 +59,7 @@ type SVGProps = ComponentProps<"svg">;
 type SVGComponent = ComponentType<SVGProps>;
 type SVGRecord = Record<string, SVGComponent>;
 
-const ASSET_CLASS_TO_ICON: Record<string, SVGComponent> = {
+const ASSET_CLASS_TO_ICON = {
   Commodities,
   "Crypto Index": CryptoIndex,
   "Crypto Redemption Rate": CryptoRedemptionRate,
@@ -64,4 +68,9 @@ const ASSET_CLASS_TO_ICON: Record<string, SVGComponent> = {
   FX: Fx,
   Metal,
   Rates,
-};
+} as const;
+
+const assetClassHasIcon = (
+  assetClass: string,
+): assetClass is keyof typeof ASSET_CLASS_TO_ICON =>
+  Object.keys(ASSET_CLASS_TO_ICON).includes(assetClass);