diff --git a/apps/insights/src/components/PriceFeedIcon/commodities.svg b/apps/insights/src/components/PriceFeedIcon/commodities.svg
new file mode 100644
index 0000000000..cfa91955e1
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/commodities.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/crypto-index.svg b/apps/insights/src/components/PriceFeedIcon/crypto-index.svg
new file mode 100644
index 0000000000..cfed8cc1b7
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/crypto-index.svg
@@ -0,0 +1,4 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/crypto-redemption-rate.svg b/apps/insights/src/components/PriceFeedIcon/crypto-redemption-rate.svg
new file mode 100644
index 0000000000..97f55ba0de
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/crypto-redemption-rate.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/crypto.svg b/apps/insights/src/components/PriceFeedIcon/crypto.svg
new file mode 100644
index 0000000000..601fa3a75d
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/crypto.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/equity.svg b/apps/insights/src/components/PriceFeedIcon/equity.svg
new file mode 100644
index 0000000000..688b108b67
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/equity.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/fx.svg b/apps/insights/src/components/PriceFeedIcon/fx.svg
new file mode 100644
index 0000000000..e79131961a
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/fx.svg
@@ -0,0 +1,4 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/index.module.scss b/apps/insights/src/components/PriceFeedIcon/index.module.scss
new file mode 100644
index 0000000000..4fc25c382c
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/index.module.scss
@@ -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);
+ }
+}
diff --git a/apps/insights/src/components/PriceFeedIcon/index.tsx b/apps/insights/src/components/PriceFeedIcon/index.tsx
index efeb7ec0e6..ac3b1e317b 100644
--- a/apps/insights/src/components/PriceFeedIcon/index.tsx
+++ b/apps/insights/src/components/PriceFeedIcon/index.tsx
@@ -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,
- keyof OwnProps | "width" | "height" | "viewBox"
-> &
+type Props = Omit &
OwnProps;
export const PriceFeedIcon = ({ assetClass, symbol, ...props }: Props) => {
- const Icon = getIcon(assetClass, symbol);
- return ;
-};
-
-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 ? (
+
+ ) : (
+
+ );
} else {
- return Generic;
+ return ;
}
};
+
+type GenericProps = ComponentProps<"svg"> & { assetClass: string };
+
+const GenericIcon = ({ assetClass, ...props }: GenericProps) => {
+ const Icon = ASSET_CLASS_TO_ICON[assetClass] ?? Generic;
+ return (
+
+ );
+};
+
+type SVGProps = ComponentProps<"svg">;
+type SVGComponent = ComponentType;
+type SVGRecord = Record;
+
+const ASSET_CLASS_TO_ICON: Record = {
+ Commodities,
+ "Crypto Index": CryptoIndex,
+ "Crypto Redemption Rate": CryptoRedemptionRate,
+ Crypto,
+ Equity,
+ FX: Fx,
+ Metal,
+ Rates,
+};
diff --git a/apps/insights/src/components/PriceFeedIcon/metal.svg b/apps/insights/src/components/PriceFeedIcon/metal.svg
new file mode 100644
index 0000000000..7b52360e62
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/metal.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/insights/src/components/PriceFeedIcon/rates.svg b/apps/insights/src/components/PriceFeedIcon/rates.svg
new file mode 100644
index 0000000000..9f05a56e9b
--- /dev/null
+++ b/apps/insights/src/components/PriceFeedIcon/rates.svg
@@ -0,0 +1,5 @@
+