Skip to content

Commit d93e42e

Browse files
cprussincprussin
authored
Merge pull request #2214 from pyth-network/cprussin/add-support-drawer
feat(staking): add support drawer
2 parents 48186b7 + ea76780 commit d93e42e

File tree

7 files changed

+247
-32
lines changed

7 files changed

+247
-32
lines changed

‎apps/insights/src/components/Root/footer.tsx

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import { DiscordLogo } from "@phosphor-icons/react/dist/ssr/DiscordLogo";
2-
import { GithubLogo } from "@phosphor-icons/react/dist/ssr/GithubLogo";
3-
import { TelegramLogo } from "@phosphor-icons/react/dist/ssr/TelegramLogo";
4-
import { XLogo } from "@phosphor-icons/react/dist/ssr/XLogo";
5-
import { YoutubeLogo } from "@phosphor-icons/react/dist/ssr/YoutubeLogo";
61
import {
72
type Props as ButtonProps,
83
Button,
@@ -11,6 +6,8 @@ import { Link } from "@pythnetwork/component-library/Link";
116
import type { ComponentProps, ElementType } from "react";
127

138
import styles from "./footer.module.scss";
9+
import { socialLinks } from "./social-links";
10+
import { SupportDrawer } from "./support-drawer";
1411
import Wordmark from "./wordmark.svg";
1512

1613
export const Footer = () => (
@@ -23,34 +20,20 @@ export const Footer = () => (
2320
</Link>
2421
<div className={styles.divider} />
2522
<div className={styles.help}>
26-
<Link href="/">Help</Link>
23+
<SupportDrawer>
24+
<Link>Help</Link>
25+
</SupportDrawer>
2726
<Link href="https://docs.pyth.network" target="_blank">
2827
Documentation
2928
</Link>
3029
</div>
3130
</div>
3231
<div className={styles.right}>
33-
<SocialLink href="https://t.me/Pyth_Network" icon={TelegramLogo}>
34-
Telegram
35-
</SocialLink>
36-
<SocialLink href="https://github.com/pyth-network" icon={GithubLogo}>
37-
Github
38-
</SocialLink>
39-
<SocialLink href="https://x.com/PythNetwork" icon={XLogo}>
40-
X
41-
</SocialLink>
42-
<SocialLink
43-
href="https://discord.gg/invite/PythNetwork"
44-
icon={DiscordLogo}
45-
>
46-
Discord
47-
</SocialLink>
48-
<SocialLink
49-
href="https://www.youtube.com/@pythnetwork"
50-
icon={YoutubeLogo}
51-
>
52-
YouTube
53-
</SocialLink>
32+
{socialLinks.map(({ name, ...props }) => (
33+
<SocialLink {...props} key={name}>
34+
{name}
35+
</SocialLink>
36+
))}
5437
</div>
5538
</div>
5639
<div className={styles.bottomContent}>

‎apps/insights/src/components/Root/header.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { ComponentProps } from "react";
77
import styles from "./header.module.scss";
88
import Logo from "./logo.svg";
99
import { SearchButton } from "./search-button";
10+
import { SupportDrawer } from "./support-drawer";
1011
import { MainNavTabs } from "./tabs";
1112
import { ThemeSwitch } from "./theme-switch";
1213

@@ -24,9 +25,11 @@ export const Header = ({ className, ...props }: ComponentProps<"header">) => (
2425
<MainNavTabs />
2526
</div>
2627
<div className={styles.rightMenu}>
27-
<Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
28-
Support
29-
</Button>
28+
<SupportDrawer>
29+
<Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
30+
Support
31+
</Button>
32+
</SupportDrawer>
3033
<SearchButton />
3134
<Button
3235
href="https://docs.pyth.network"

‎apps/insights/src/components/Root/social-links.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { DiscordLogo } from "@phosphor-icons/react/dist/ssr/DiscordLogo";
2+
import { GithubLogo } from "@phosphor-icons/react/dist/ssr/GithubLogo";
3+
import { TelegramLogo } from "@phosphor-icons/react/dist/ssr/TelegramLogo";
4+
import { XLogo } from "@phosphor-icons/react/dist/ssr/XLogo";
5+
import { YoutubeLogo } from "@phosphor-icons/react/dist/ssr/YoutubeLogo";
6+
7+
export const socialLinks = [
8+
{
9+
name: "Discord",
10+
icon: DiscordLogo,
11+
href: "https://discord.gg/invite/PythNetwork",
12+
},
13+
{
14+
name: "X",
15+
icon: XLogo,
16+
href: "https://x.com/PythNetwork",
17+
},
18+
{
19+
name: "Telegram",
20+
icon: TelegramLogo,
21+
href: "https://t.me/Pyth_Network",
22+
},
23+
{
24+
name: "GitHub",
25+
icon: GithubLogo,
26+
href: "https://github.com/pyth-network",
27+
},
28+
{
29+
name: "Youtube",
30+
icon: YoutubeLogo,
31+
href: "https://www.youtube.com/channel/UCjCkvPN9ohl0UDvldfn1neg",
32+
},
33+
];

‎apps/insights/src/components/Root/support-drawer.module.scss

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.supportDrawer {
4+
display: flex;
5+
flex-flow: column nowrap;
6+
gap: theme.spacing(8);
7+
8+
& > * {
9+
flex: none;
10+
}
11+
12+
.linkList {
13+
display: flex;
14+
flex-flow: column nowrap;
15+
gap: theme.spacing(4);
16+
17+
.title {
18+
@include theme.text("lg", "medium");
19+
20+
color: theme.color("heading");
21+
}
22+
23+
.items {
24+
list-style-type: none;
25+
padding: 0;
26+
margin: 0;
27+
display: flex;
28+
flex-flow: column nowrap;
29+
gap: theme.spacing(2);
30+
31+
.link {
32+
padding: theme.spacing(3);
33+
display: grid;
34+
grid-template-columns: max-content 1fr max-content;
35+
grid-template-rows: max-content max-content;
36+
text-align: left;
37+
gap: theme.spacing(2) theme.spacing(4);
38+
align-items: center;
39+
width: 100%;
40+
41+
.icon {
42+
font-size: theme.spacing(8);
43+
color: theme.color("states", "data", "normal");
44+
grid-row: span 2 / span 2;
45+
display: grid;
46+
place-content: center;
47+
}
48+
49+
.header {
50+
@include theme.text("sm", "medium");
51+
52+
color: theme.color("heading");
53+
}
54+
55+
.description {
56+
@include theme.text("xs", "normal");
57+
58+
color: theme.color("muted");
59+
grid-column: 2;
60+
grid-row: 2;
61+
}
62+
63+
.caret {
64+
color: theme.color("states", "data", "normal");
65+
font-size: theme.spacing(4);
66+
grid-row: span 2 / span 2;
67+
}
68+
}
69+
}
70+
}
71+
}

‎apps/insights/src/components/Root/support-drawer.tsx

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { BookOpenText } from "@phosphor-icons/react/dist/ssr/BookOpenText";
2+
import { CaretRight } from "@phosphor-icons/react/dist/ssr/CaretRight";
3+
import { Code } from "@phosphor-icons/react/dist/ssr/Code";
4+
import { Coins } from "@phosphor-icons/react/dist/ssr/Coins";
5+
import { Gavel } from "@phosphor-icons/react/dist/ssr/Gavel";
6+
import { Plug } from "@phosphor-icons/react/dist/ssr/Plug";
7+
import { ShieldChevron } from "@phosphor-icons/react/dist/ssr/ShieldChevron";
8+
import {
9+
type Props as CardProps,
10+
Card,
11+
} from "@pythnetwork/component-library/Card";
12+
import { DrawerTrigger, Drawer } from "@pythnetwork/component-library/Drawer";
13+
import type { Link as UnstyledLink } from "@pythnetwork/component-library/unstyled/Link";
14+
import type { ReactNode } from "react";
15+
16+
import { socialLinks } from "./social-links";
17+
import styles from "./support-drawer.module.scss";
18+
19+
type Props = {
20+
children: ReactNode;
21+
};
22+
23+
export const SupportDrawer = ({ children }: Props) => (
24+
<DrawerTrigger>
25+
{children}
26+
<Drawer title="Support" bodyClassName={styles.supportDrawer}>
27+
<LinkList
28+
title="Integration"
29+
links={[
30+
{
31+
icon: <Plug />,
32+
title: "Connect directly with real-time market data",
33+
description: "Integrate the Pyth data feeds into your app",
34+
target: "_blank",
35+
href: "https://docs.pyth.network/price-feeds/use-real-time-data",
36+
},
37+
{
38+
icon: <BookOpenText />,
39+
title: "Learn how to work with Pyth data",
40+
description: "Read the Pyth Network documentation",
41+
target: "_blank",
42+
href: "https://docs.pyth.network",
43+
},
44+
{
45+
icon: <Code />,
46+
title: "Try out the APIs",
47+
description:
48+
"Use the Pyth Network API Reference to experience the Pyth APIs",
49+
target: "_blank",
50+
href: "https://api-reference.pyth.network",
51+
},
52+
]}
53+
/>
54+
<LinkList
55+
title="$PYTH Token"
56+
links={[
57+
{
58+
icon: <Coins />,
59+
title: "Tokenomics",
60+
description:
61+
"Learn about how the $PYTH token is structured and distributed",
62+
target: "_blank",
63+
href: "https://docs.pyth.network/home/pyth-token/pyth-distribution",
64+
},
65+
{
66+
icon: <ShieldChevron />,
67+
title: "Oracle Integrity Staking (OIS) Guide",
68+
description: "Learn how to help secure the oracle and earn rewards",
69+
target: "_blank",
70+
href: "https://docs.pyth.network/home/oracle-integrity-staking",
71+
},
72+
{
73+
icon: <Gavel />,
74+
title: "Pyth Governance Guide",
75+
description:
76+
"Gain voting power to help shape the future of DeFi by participating in governance",
77+
target: "_blank",
78+
href: "https://docs.pyth.network/home/pyth-token#staking-pyth-for-governance",
79+
},
80+
]}
81+
/>
82+
<LinkList
83+
title="Community"
84+
links={socialLinks.map(({ icon: Icon, href, name }) => ({
85+
href,
86+
target: "_blank",
87+
title: name,
88+
description: href,
89+
icon: <Icon />,
90+
}))}
91+
/>
92+
</Drawer>
93+
</DrawerTrigger>
94+
);
95+
96+
type LinkListProps = {
97+
title: ReactNode;
98+
links: (Omit<
99+
CardProps<typeof UnstyledLink>,
100+
"title" | "icon" | "description"
101+
> & {
102+
title: ReactNode;
103+
icon: ReactNode;
104+
description?: ReactNode | undefined;
105+
})[];
106+
};
107+
108+
const LinkList = ({ title, links }: LinkListProps) => (
109+
<div className={styles.linkList}>
110+
<h3 className={styles.title}>{title}</h3>
111+
<ul className={styles.items}>
112+
{links.map(({ title, icon, description, ...link }, i) => (
113+
<Card key={i} {...link}>
114+
<div className={styles.link}>
115+
<div className={styles.icon}>{icon}</div>
116+
<h4 className={styles.header}>{title}</h4>
117+
{description && <p className={styles.description}>{description}</p>}
118+
<CaretRight className={styles.caret} />
119+
</div>
120+
</Card>
121+
))}
122+
</ul>
123+
</div>
124+
);

‎packages/component-library/src/Card/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export const Card = (
4242
// eslint-disable-next-line @typescript-eslint/no-unused-vars
4343
const { nonInteractive, ...otherProps } = props;
4444
return <div {...cardProps(otherProps)} />;
45-
} else if (overlayState !== null || "onPress" in props) {
46-
return <Button {...cardProps(props)} />;
4745
} else if ("href" in props) {
4846
return <Link {...cardProps(props)} />;
47+
} else if (overlayState !== null || "onPress" in props) {
48+
return <Button {...cardProps(props)} />;
4949
} else {
5050
return <div {...cardProps(props)} />;
5151
}

‎packages/component-library/src/Link/index.module.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
text-underline-offset: 0.125em;
1414
outline-offset: 0;
1515
color: theme.color("link", "normal");
16+
cursor: pointer;
1617

1718
&[data-focus-visible] {
1819
outline-color: theme.color("focus-dim");

0 commit comments

Comments
 (0)