feat(staking): add support drawer

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

@@ -1,8 +1,3 @@
-import { DiscordLogo } from "@phosphor-icons/react/dist/ssr/DiscordLogo";
-import { GithubLogo } from "@phosphor-icons/react/dist/ssr/GithubLogo";
-import { TelegramLogo } from "@phosphor-icons/react/dist/ssr/TelegramLogo";
-import { XLogo } from "@phosphor-icons/react/dist/ssr/XLogo";
-import { YoutubeLogo } from "@phosphor-icons/react/dist/ssr/YoutubeLogo";
 import {
   type Props as ButtonProps,
   Button,
@@ -11,6 +6,8 @@ import { Link } from "@pythnetwork/component-library/Link";
 import type { ComponentProps, ElementType } from "react";
 
 import styles from "./footer.module.scss";
+import { socialLinks } from "./social-links";
+import { SupportDrawer } from "./support-drawer";
 import Wordmark from "./wordmark.svg";
 
 export const Footer = () => (
@@ -23,34 +20,20 @@ export const Footer = () => (
         </Link>
         <div className={styles.divider} />
         <div className={styles.help}>
-          <Link href="/">Help</Link>
+          <SupportDrawer>
+            <Link>Help</Link>
+          </SupportDrawer>
           <Link href="https://docs.pyth.network" target="_blank">
             Documentation
           </Link>
         </div>
       </div>
       <div className={styles.right}>
-        <SocialLink href="https://t.me/Pyth_Network" icon={TelegramLogo}>
-          Telegram
-        </SocialLink>
-        <SocialLink href="https://github.com/pyth-network" icon={GithubLogo}>
-          Github
-        </SocialLink>
-        <SocialLink href="https://x.com/PythNetwork" icon={XLogo}>
-          X
-        </SocialLink>
-        <SocialLink
-          href="https://discord.gg/invite/PythNetwork"
-          icon={DiscordLogo}
-        >
-          Discord
-        </SocialLink>
-        <SocialLink
-          href="https://www.youtube.com/@pythnetwork"
-          icon={YoutubeLogo}
-        >
-          YouTube
-        </SocialLink>
+        {socialLinks.map(({ name, ...props }) => (
+          <SocialLink {...props} key={name}>
+            {name}
+          </SocialLink>
+        ))}
       </div>
     </div>
     <div className={styles.bottomContent}>

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

@@ -7,6 +7,7 @@ import type { ComponentProps } from "react";
 import styles from "./header.module.scss";
 import Logo from "./logo.svg";
 import { SearchButton } from "./search-button";
+import { SupportDrawer } from "./support-drawer";
 import { MainNavTabs } from "./tabs";
 import { ThemeSwitch } from "./theme-switch";
 
@@ -24,9 +25,11 @@ export const Header = ({ className, ...props }: ComponentProps<"header">) => (
         <MainNavTabs />
       </div>
       <div className={styles.rightMenu}>
-        <Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
-          Support
-        </Button>
+        <SupportDrawer>
+          <Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
+            Support
+          </Button>
+        </SupportDrawer>
         <SearchButton />
         <Button
           href="https://docs.pyth.network"

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

@@ -0,0 +1,33 @@
+import { DiscordLogo } from "@phosphor-icons/react/dist/ssr/DiscordLogo";
+import { GithubLogo } from "@phosphor-icons/react/dist/ssr/GithubLogo";
+import { TelegramLogo } from "@phosphor-icons/react/dist/ssr/TelegramLogo";
+import { XLogo } from "@phosphor-icons/react/dist/ssr/XLogo";
+import { YoutubeLogo } from "@phosphor-icons/react/dist/ssr/YoutubeLogo";
+
+export const socialLinks = [
+  {
+    name: "Discord",
+    icon: DiscordLogo,
+    href: "https://discord.gg/invite/PythNetwork",
+  },
+  {
+    name: "X",
+    icon: XLogo,
+    href: "https://x.com/PythNetwork",
+  },
+  {
+    name: "Telegram",
+    icon: TelegramLogo,
+    href: "https://t.me/Pyth_Network",
+  },
+  {
+    name: "GitHub",
+    icon: GithubLogo,
+    href: "https://github.com/pyth-network",
+  },
+  {
+    name: "Youtube",
+    icon: YoutubeLogo,
+    href: "https://www.youtube.com/channel/UCjCkvPN9ohl0UDvldfn1neg",
+  },
+];

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

@@ -0,0 +1,71 @@
+@use "@pythnetwork/component-library/theme";
+
+.supportDrawer {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(8);
+
+  & > * {
+    flex: none;
+  }
+
+  .linkList {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(4);
+
+    .title {
+      @include theme.text("lg", "medium");
+
+      color: theme.color("heading");
+    }
+
+    .items {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-flow: column nowrap;
+      gap: theme.spacing(2);
+
+      .link {
+        padding: theme.spacing(3);
+        display: grid;
+        grid-template-columns: max-content 1fr max-content;
+        grid-template-rows: max-content max-content;
+        text-align: left;
+        gap: theme.spacing(2) theme.spacing(4);
+        align-items: center;
+        width: 100%;
+
+        .icon {
+          font-size: theme.spacing(8);
+          color: theme.color("states", "data", "normal");
+          grid-row: span 2 / span 2;
+          display: grid;
+          place-content: center;
+        }
+
+        .header {
+          @include theme.text("sm", "medium");
+
+          color: theme.color("heading");
+        }
+
+        .description {
+          @include theme.text("xs", "normal");
+
+          color: theme.color("muted");
+          grid-column: 2;
+          grid-row: 2;
+        }
+
+        .caret {
+          color: theme.color("states", "data", "normal");
+          font-size: theme.spacing(4);
+          grid-row: span 2 / span 2;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,124 @@
+import { BookOpenText } from "@phosphor-icons/react/dist/ssr/BookOpenText";
+import { CaretRight } from "@phosphor-icons/react/dist/ssr/CaretRight";
+import { Code } from "@phosphor-icons/react/dist/ssr/Code";
+import { Coins } from "@phosphor-icons/react/dist/ssr/Coins";
+import { Gavel } from "@phosphor-icons/react/dist/ssr/Gavel";
+import { Plug } from "@phosphor-icons/react/dist/ssr/Plug";
+import { ShieldChevron } from "@phosphor-icons/react/dist/ssr/ShieldChevron";
+import {
+  type Props as CardProps,
+  Card,
+} from "@pythnetwork/component-library/Card";
+import { DrawerTrigger, Drawer } from "@pythnetwork/component-library/Drawer";
+import type { Link as UnstyledLink } from "@pythnetwork/component-library/unstyled/Link";
+import type { ReactNode } from "react";
+
+import { socialLinks } from "./social-links";
+import styles from "./support-drawer.module.scss";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const SupportDrawer = ({ children }: Props) => (
+  <DrawerTrigger>
+    {children}
+    <Drawer title="Support" bodyClassName={styles.supportDrawer}>
+      <LinkList
+        title="Integration"
+        links={[
+          {
+            icon: <Plug />,
+            title: "Connect directly with real-time market data",
+            description: "Integrate the Pyth data feeds into your app",
+            target: "_blank",
+            href: "https://docs.pyth.network/price-feeds/use-real-time-data",
+          },
+          {
+            icon: <BookOpenText />,
+            title: "Learn how to work with Pyth data",
+            description: "Read the Pyth Network documentation",
+            target: "_blank",
+            href: "https://docs.pyth.network",
+          },
+          {
+            icon: <Code />,
+            title: "Try out the APIs",
+            description:
+              "Use the Pyth Network API Reference to experience the Pyth APIs",
+            target: "_blank",
+            href: "https://api-reference.pyth.network",
+          },
+        ]}
+      />
+      <LinkList
+        title="$PYTH Token"
+        links={[
+          {
+            icon: <Coins />,
+            title: "Tokenomics",
+            description:
+              "Learn about how the $PYTH token is structured and distributed",
+            target: "_blank",
+            href: "https://docs.pyth.network/home/pyth-token/pyth-distribution",
+          },
+          {
+            icon: <ShieldChevron />,
+            title: "Oracle Integrity Staking (OIS) Guide",
+            description: "Learn how to help secure the oracle and earn rewards",
+            target: "_blank",
+            href: "https://docs.pyth.network/home/oracle-integrity-staking",
+          },
+          {
+            icon: <Gavel />,
+            title: "Pyth Governance Guide",
+            description:
+              "Gain voting power to help shape the future of DeFi by participating in governance",
+            target: "_blank",
+            href: "https://docs.pyth.network/home/pyth-token#staking-pyth-for-governance",
+          },
+        ]}
+      />
+      <LinkList
+        title="Community"
+        links={socialLinks.map(({ icon: Icon, href, name }) => ({
+          href,
+          target: "_blank",
+          title: name,
+          description: href,
+          icon: <Icon />,
+        }))}
+      />
+    </Drawer>
+  </DrawerTrigger>
+);
+
+type LinkListProps = {
+  title: ReactNode;
+  links: (Omit<
+    CardProps<typeof UnstyledLink>,
+    "title" | "icon" | "description"
+  > & {
+    title: ReactNode;
+    icon: ReactNode;
+    description?: ReactNode | undefined;
+  })[];
+};
+
+const LinkList = ({ title, links }: LinkListProps) => (
+  <div className={styles.linkList}>
+    <h3 className={styles.title}>{title}</h3>
+    <ul className={styles.items}>
+      {links.map(({ title, icon, description, ...link }, i) => (
+        <Card key={i} {...link}>
+          <div className={styles.link}>
+            <div className={styles.icon}>{icon}</div>
+            <h4 className={styles.header}>{title}</h4>
+            {description && <p className={styles.description}>{description}</p>}
+            <CaretRight className={styles.caret} />
+          </div>
+        </Card>
+      ))}
+    </ul>
+  </div>
+);

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

@@ -42,10 +42,10 @@ export const Card = (
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { nonInteractive, ...otherProps } = props;
     return <div {...cardProps(otherProps)} />;
-  } else if (overlayState !== null || "onPress" in props) {
-    return <Button {...cardProps(props)} />;
   } else if ("href" in props) {
     return <Link {...cardProps(props)} />;
+  } else if (overlayState !== null || "onPress" in props) {
+    return <Button {...cardProps(props)} />;
   } else {
     return <div {...cardProps(props)} />;
   }

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

@@ -13,6 +13,7 @@
   text-underline-offset: 0.125em;
   outline-offset: 0;
   color: theme.color("link", "normal");
+  cursor: pointer;
 
   &[data-focus-visible] {
     outline-color: theme.color("focus-dim");