Skip to content

Commit 65fe843

Browse files
cprussincprussin
committed
feat(staking): add support drawer
1 parent 48186b7 commit 65fe843

File tree

7 files changed

+232
-32
lines changed

7 files changed

+232
-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,17 +1,14 @@
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,
94
} from "@pythnetwork/component-library/Button";
105
import { Link } from "@pythnetwork/component-library/Link";
116
import type { ComponentProps, ElementType } from "react";
127

8+
import { SupportDrawer } from "./support-drawer";
139
import styles from "./footer.module.scss";
1410
import Wordmark from "./wordmark.svg";
11+
import { socialLinks } from "./social-links";
1512

1613
export const Footer = () => (
1714
<footer className={styles.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}>
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
@@ -9,6 +9,7 @@ import Logo from "./logo.svg";
99
import { SearchButton } from "./search-button";
1010
import { MainNavTabs } from "./tabs";
1111
import { ThemeSwitch } from "./theme-switch";
12+
import { SupportDrawer } from "./support-drawer";
1213

1314
export const Header = ({ className, ...props }: ComponentProps<"header">) => (
1415
<header className={clsx(styles.header, className)} {...props}>
@@ -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: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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+
color: theme.color("heading");
20+
}
21+
22+
.items {
23+
list-style-type: none;
24+
padding: 0;
25+
margin: 0;
26+
display: flex;
27+
flex-flow: column nowrap;
28+
gap: theme.spacing(2);
29+
30+
.link {
31+
padding: theme.spacing(3);
32+
display: grid;
33+
grid-template-columns: max-content 1fr max-content;
34+
grid-template-rows: max-content max-content;
35+
text-align: left;
36+
column-gap: theme.spacing(4);
37+
row-gap: theme.spacing(2);
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+
color: theme.color("heading");
52+
}
53+
54+
.description {
55+
@include theme.text("xs", "normal");
56+
color: theme.color("muted");
57+
grid-column: 2;
58+
grid-row: 2;
59+
}
60+
61+
.caret {
62+
color: theme.color("states", "data", "normal");
63+
font-size: theme.spacing(4);
64+
grid-row: span 2 / span 2;
65+
}
66+
}
67+
}
68+
}
69+
}

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

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

‎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)