Преглед изворни кода

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 месеци
родитељ
комит
3596f34020
1 измењених фајлова са 16 додато и 7 уклоњено
  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 type { ComponentProps, ComponentType } from "react";
 
 
 import Commodities from "./commodities.svg";
 import Commodities from "./commodities.svg";
@@ -26,17 +25,22 @@ export const PriceFeedIcon = ({ assetClass, symbol, ...props }: Props) => {
     return Icon ? (
     return Icon ? (
       <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />
       <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />
     ) : (
     ) : (
-      <GenericIcon assetClass={assetClass} {...props} />
+      <GenericIcon assetClass="Crypto" {...props} />
     );
     );
   } else {
   } 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 GenericIcon = ({ assetClass, ...props }: GenericProps) => {
-  const Icon = ASSET_CLASS_TO_ICON[assetClass] ?? Generic;
+  const Icon = ASSET_CLASS_TO_ICON[assetClass];
   return (
   return (
     <Icon
     <Icon
       width="100%"
       width="100%"
@@ -55,7 +59,7 @@ type SVGProps = ComponentProps<"svg">;
 type SVGComponent = ComponentType<SVGProps>;
 type SVGComponent = ComponentType<SVGProps>;
 type SVGRecord = Record<string, SVGComponent>;
 type SVGRecord = Record<string, SVGComponent>;
 
 
-const ASSET_CLASS_TO_ICON: Record<string, SVGComponent> = {
+const ASSET_CLASS_TO_ICON = {
   Commodities,
   Commodities,
   "Crypto Index": CryptoIndex,
   "Crypto Index": CryptoIndex,
   "Crypto Redemption Rate": CryptoRedemptionRate,
   "Crypto Redemption Rate": CryptoRedemptionRate,
@@ -64,4 +68,9 @@ const ASSET_CLASS_TO_ICON: Record<string, SVGComponent> = {
   FX: Fx,
   FX: Fx,
   Metal,
   Metal,
   Rates,
   Rates,
-};
+} as const;
+
+const assetClassHasIcon = (
+  assetClass: string,
+): assetClass is keyof typeof ASSET_CLASS_TO_ICON =>
+  Object.keys(ASSET_CLASS_TO_ICON).includes(assetClass);