Merge pull request #2426 from pyth-network/cprussin/ui-16-improve-price-feed-icons

feat(insights): improve feed generic icons

Author: cprussin

apps/insights/src/components/PriceFeedIcon/commodities.svg

@@ -0,0 +1,45 @@
+@use "@pythnetwork/component-library/theme";
+
+.generic {
+  border-radius: theme.border-radius("md");
+
+  &[data-asset-class="Commodities"] {
+    background: theme.pallette-color("zinc", 400);
+    fill: theme.pallette-color("zinc", 700);
+  }
+
+  &[data-asset-class="Crypto Index"] {
+    background: theme.pallette-color("fuchsia", 300);
+    fill: theme.pallette-color("fuchsia", 700);
+  }
+
+  &[data-asset-class="Crypto Redemption Rate"] {
+    background: theme.pallette-color("pink", 300);
+    fill: theme.pallette-color("pink", 700);
+  }
+
+  &[data-asset-class="Crypto"] {
+    background: theme.pallette-color("violet", 300);
+    fill: theme.pallette-color("violet", 700);
+  }
+
+  &[data-asset-class="Equity"] {
+    background: theme.pallette-color("rose", 300);
+    fill: theme.pallette-color("rose", 700);
+  }
+
+  &[data-asset-class="FX"] {
+    background: theme.pallette-color("indigo", 300);
+    fill: theme.pallette-color("indigo", 700);
+  }
+
+  &[data-asset-class="Metal"] {
+    background: theme.pallette-color("orange", 300);
+    fill: theme.pallette-color("orange", 700);
+  }
+
+  &[data-asset-class="Rates"] {
+    background: theme.pallette-color("emerald", 300);
+    fill: theme.pallette-color("stone", 700);
+  }
+}

apps/insights/src/components/PriceFeedIcon/crypto-index.svg

@@ -1,30 +1,67 @@
 import Generic from "cryptocurrency-icons/svg/color/generic.svg";
-import type { ComponentProps } from "react";
+import type { ComponentProps, ComponentType } from "react";
 
+import Commodities from "./commodities.svg";
+import CryptoIndex from "./crypto-index.svg";
+import CryptoRedemptionRate from "./crypto-redemption-rate.svg";
+import Crypto from "./crypto.svg";
+import Equity from "./equity.svg";
+import Fx from "./fx.svg";
 import { icons } from "./icons";
+import styles from "./index.module.scss";
+import Metal from "./metal.svg";
+import Rates from "./rates.svg";
 
 type OwnProps = {
   assetClass: string;
   symbol: string;
 };
-type Props = Omit<
-  ComponentProps<typeof Generic>,
-  keyof OwnProps | "width" | "height" | "viewBox"
-> &
+type Props = Omit<SVGProps, keyof OwnProps | "width" | "height" | "viewBox"> &
   OwnProps;
 
 export const PriceFeedIcon = ({ assetClass, symbol, ...props }: Props) => {
-  const Icon = getIcon(assetClass, symbol);
-  return <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />;
-};
-
-const getIcon = (assetClass: string, symbol: string) => {
   if (assetClass === "Crypto") {
     const firstPart = symbol.split("/")[0];
-    return firstPart && firstPart in icons
-      ? icons[firstPart as keyof typeof icons]
-      : Generic;
+    const Icon = firstPart ? (icons as SVGRecord)[firstPart] : undefined;
+    return Icon ? (
+      <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />
+    ) : (
+      <GenericIcon assetClass={assetClass} {...props} />
+    );
   } else {
-    return Generic;
+    return <GenericIcon assetClass={assetClass} {...props} />;
   }
 };
+
+type GenericProps = ComponentProps<"svg"> & { assetClass: string };
+
+const GenericIcon = ({ assetClass, ...props }: GenericProps) => {
+  const Icon = ASSET_CLASS_TO_ICON[assetClass] ?? Generic;
+  return (
+    <Icon
+      width="100%"
+      height="100%"
+      className={styles.generic}
+      data-asset-class={assetClass}
+      {...(!(assetClass in ASSET_CLASS_TO_ICON) && {
+        viewBox: "0 0 32 32",
+      })}
+      {...props}
+    />
+  );
+};
+
+type SVGProps = ComponentProps<"svg">;
+type SVGComponent = ComponentType<SVGProps>;
+type SVGRecord = Record<string, SVGComponent>;
+
+const ASSET_CLASS_TO_ICON: Record<string, SVGComponent> = {
+  Commodities,
+  "Crypto Index": CryptoIndex,
+  "Crypto Redemption Rate": CryptoRedemptionRate,
+  Crypto,
+  Equity,
+  FX: Fx,
+  Metal,
+  Rates,
+};