Skip to content

Commit c9631e2

Browse files
committed
feat(insights): improve feed generic icons
1 parent fbe30c4 commit c9631e2

File tree

10 files changed

+124
-14
lines changed

10 files changed

+124
-14
lines changed
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 4 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 4 additions & 0 deletions
Loading
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.generic {
4+
border-radius: theme.border-radius("md");
5+
6+
&[data-asset-class="Commodities"] {
7+
background: theme.pallette-color("zinc", 400);
8+
fill: theme.pallette-color("zinc", 700);
9+
}
10+
11+
&[data-asset-class="Crypto Index"] {
12+
background: theme.pallette-color("fuchsia", 300);
13+
fill: theme.pallette-color("fuchsia", 700);
14+
}
15+
16+
&[data-asset-class="Crypto Redemption Rate"] {
17+
background: theme.pallette-color("pink", 300);
18+
fill: theme.pallette-color("pink", 700);
19+
}
20+
21+
&[data-asset-class="Crypto"] {
22+
background: theme.pallette-color("violet", 300);
23+
fill: theme.pallette-color("violet", 700);
24+
}
25+
26+
&[data-asset-class="Equity"] {
27+
background: theme.pallette-color("rose", 300);
28+
fill: theme.pallette-color("rose", 700);
29+
}
30+
31+
&[data-asset-class="FX"] {
32+
background: theme.pallette-color("indigo", 300);
33+
fill: theme.pallette-color("indigo", 700);
34+
}
35+
36+
&[data-asset-class="Metal"] {
37+
background: theme.pallette-color("orange", 300);
38+
fill: theme.pallette-color("orange", 700);
39+
}
40+
41+
&[data-asset-class="Rates"] {
42+
background: theme.pallette-color("emerald", 300);
43+
fill: theme.pallette-color("stone", 700);
44+
}
45+
}
Lines changed: 51 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,67 @@
11
import Generic from "cryptocurrency-icons/svg/color/generic.svg";
2-
import type { ComponentProps } from "react";
2+
import type { ComponentProps, ComponentType } from "react";
33

4+
import Commodities from "./commodities.svg";
5+
import CryptoIndex from "./crypto-index.svg";
6+
import CryptoRedemptionRate from "./crypto-redemption-rate.svg";
7+
import Crypto from "./crypto.svg";
8+
import Equity from "./equity.svg";
9+
import Fx from "./fx.svg";
410
import { icons } from "./icons";
11+
import styles from "./index.module.scss";
12+
import Metal from "./metal.svg";
13+
import Rates from "./rates.svg";
514

615
type OwnProps = {
716
assetClass: string;
817
symbol: string;
918
};
10-
type Props = Omit<
11-
ComponentProps<typeof Generic>,
12-
keyof OwnProps | "width" | "height" | "viewBox"
13-
> &
19+
type Props = Omit<SVGProps, keyof OwnProps | "width" | "height" | "viewBox"> &
1420
OwnProps;
1521

1622
export const PriceFeedIcon = ({ assetClass, symbol, ...props }: Props) => {
17-
const Icon = getIcon(assetClass, symbol);
18-
return <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />;
19-
};
20-
21-
const getIcon = (assetClass: string, symbol: string) => {
2223
if (assetClass === "Crypto") {
2324
const firstPart = symbol.split("/")[0];
24-
return firstPart && firstPart in icons
25-
? icons[firstPart as keyof typeof icons]
26-
: Generic;
25+
const Icon = firstPart ? (icons as SVGRecord)[firstPart] : undefined;
26+
return Icon ? (
27+
<Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />
28+
) : (
29+
<GenericIcon assetClass={assetClass} {...props} />
30+
);
2731
} else {
28-
return Generic;
32+
return <GenericIcon assetClass={assetClass} {...props} />;
2933
}
3034
};
35+
36+
type GenericProps = ComponentProps<"svg"> & { assetClass: string };
37+
38+
const GenericIcon = ({ assetClass, ...props }: GenericProps) => {
39+
const Icon = ASSET_CLASS_TO_ICON[assetClass] ?? Generic;
40+
return (
41+
<Icon
42+
width="100%"
43+
height="100%"
44+
className={styles.generic}
45+
data-asset-class={assetClass}
46+
{...(!(assetClass in ASSET_CLASS_TO_ICON) && {
47+
viewBox: "0 0 32 32",
48+
})}
49+
{...props}
50+
/>
51+
);
52+
};
53+
54+
type SVGProps = ComponentProps<"svg">;
55+
type SVGComponent = ComponentType<SVGProps>;
56+
type SVGRecord = Record<string, SVGComponent>;
57+
58+
const ASSET_CLASS_TO_ICON: Record<string, SVGComponent> = {
59+
Commodities,
60+
"Crypto Index": CryptoIndex,
61+
"Crypto Redemption Rate": CryptoRedemptionRate,
62+
Crypto,
63+
Equity,
64+
FX: Fx,
65+
Metal,
66+
Rates,
67+
};
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 5 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)