|
|
@@ -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,
|
|
|
+};
|
Connor Prussin
