feat(staking): add changelog

apps/staking/src/components/Changelog/index.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useDateFormatter } from "react-aria";
+
+import { useChangelog } from "../../hooks/use-changelog";
+import { Link } from "../Link";
+import { ModalDialog } from "../ModalDialog";
+
+export const Changelog = () => {
+ const { isOpen, toggleOpen } = useChangelog();
+
+ return (
+ <ModalDialog title="Changelog" isOpen={isOpen} onOpenChange={toggleOpen}>
+ <ul className="flex max-w-prose flex-col divide-y divide-neutral-600/50">
+ {messages.map(({ id, message }) => (
+ <li key={id}>{message}</li>
+ ))}
+ </ul>
+ </ModalDialog>
+ );
+};
+
+type ChangelogMessageProps = {
+ date: Date;
+ children: ReactNode | ReactNode[];
+};
+
+export const ChangelogMessage = ({ date, children }: ChangelogMessageProps) => {
+ const dateFormatter = useDateFormatter({
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+
+ return (
+ <section className="py-8">
+ <h2 className="text-sm uppercase text-pythpurple-400">
+ {dateFormatter.format(date)}
+ </h2>
+ {children}
+ </section>
+ );
+};
+
+type ChangelogSectionProps = {
+ title: ReactNode;
+ children: ReactNode | ReactNode[];
+};
+
+export const ChangelogSection = ({
+ title,
+ children,
+}: ChangelogSectionProps) => (
+ <section className="mt-4">
+ <h3 className="text-lg font-semibold text-white">{title}</h3>
+ <div className="flex flex-col gap-2 pl-2 text-sm opacity-70">
+ {children}
+ </div>
+ </section>
+);
+
+export const messages = [
+ {
+ id: 1,
+ message: (
+ <ChangelogMessage date={new Date("2024-10-10")}>
+ <ChangelogSection title="Milestones">
+ <div>
+ <p>
+ We are pleased to announce the following Oracle Integrity Staking
+ milestones:
+ </p>
+ <ul className="list-disc pl-8">
+ <li>143M PYTH staked and securing DeFi.</li>
+ <li>9.6K unique stakers participating.</li>
+ <li>237K in PYTH programmatically distributed.</li>
+ </ul>
+ </div>
+ <p>We’re thrilled to see so many community participants.</p>
+ </ChangelogSection>
+ <ChangelogSection title="New Features to the Staking Frontend">
+ <ul className="list-disc pl-4">
+ <li>
+ New sort filter for publishers list. Publishers with self-stake
+ are displayed first by default. You can sort by publisher details,
+ pool composition, and more.
+ </li>
+ <li>
+ Publishers interested in de-anonymizing themselves can have their
+ names displayed in the publisher list.
+ </li>
+ <li>New OIS live stats added to navigation bar.</li>
+ <li>
+ New dialogue added under “Help” where you can view current program
+ parameters.
+ </li>
+ <li>
+ Option to remove PYTH from the smart contract program for parties
+ with restricted access to the staking frontend.
+ </li>
+ <li>
+ Full access to Pyth Governance for certain restricted
+ jurisdictions.
+ </li>
+ <li>APYs are now shown as net of delegation fees.</li>
+ <li>
+ Updates to educational materials (all Guides and FAQs) for clarity
+ and readability.
+ </li>
+ <li>
+ New Oracle Integrity Staking{" "}
+ <Link
+ href="https://forum.pyth.network/c/oracle-integrity-staking-ois-discussion/8"
+ className="underline"
+ target="_blank"
+ >
+ discussion catalogue
+ </Link>{" "}
+ opened in Pyth DAO forum. Let the community know your thoughts and
+ feedback!
+ </li>
+ </ul>
+ </ChangelogSection>
+ <ChangelogSection title="Security">
+ <p>
+ The Pyth contributors take security extremely seriously. The
+ contract code is{" "}
+ <Link
+ href="https://github.com/pyth-network/governance/tree/main/staking/programs/staking"
+ className="underline"
+ target="_blank"
+ >
+ open source
+ </Link>{" "}
+ and the upgrade authority is governed by the Pyth DAO. The official{" "}
+ <Link
+ href="https://github.com/pyth-network/audit-reports/blob/main/2024_09_11/pyth_cip_final_report.pdf"
+ className="underline"
+ target="_blank"
+ >
+ audit report
+ </Link>{" "}
+ is publicly accessible. All on-chain contract codes are verified
+ using{" "}
+ <Link
+ href="https://github.com/Ellipsis-Labs/solana-verifiable-build/"
+ className="underline"
+ target="_blank"
+ >
+ Solana verifiable build
+ </Link>{" "}
+ and the Pyth DAO governs the upgrade authority.
+ </p>
+ </ChangelogSection>
+ <ChangelogSection title="Best Practices">
+ <p>
+ Please remember that publishers have priority for programmatic
+ rewards distributions. By protocol design, if a pool’s stake cap is
+ exceeded, the programmatic reward rate for other stakers
+ participating in that pool will be lower than the Pyth DAO-set
+ maximum reward rate.
+ </p>
+ </ChangelogSection>
+ <ChangelogSection title="Acknowledgements">
+ <p>
+ The Pyth contributors are glad to see so many network participants
+ getting involved with Oracle Integrity Staking to help secure the
+ oracle and protect the wider DeFi industry. OIS wouldn’t be possible
+ without you!
+ </p>
+ </ChangelogSection>
+ <ChangelogSection title="Feedback">
+ <p>
+ Please reach out in the official{" "}
+ <Link
+ href="https://discord.com/invite/PythNetwork"
+ className="underline"
+ target="_blank"
+ >
+ Pyth Discord
+ </Link>{" "}
+ or the{" "}
+ <Link
+ href="https://forum.pyth.network"
+ className="underline"
+ target="_blank"
+ >
+ Pyth DAO Forum
+ </Link>{" "}
+ to share your questions, ideas, or feedback. We want to hear what
+ you think.
+ </p>
+ </ChangelogSection>
+ </ChangelogMessage>
+ ),
+ },
+];

apps/staking/src/components/Header/help-menu.tsx

@@ -9,6 +9,7 @@ import { MenuTrigger, Button } from "react-aria-components";
 
 import { ProgramParameters } from "./program-parameters";
 import { StateType, useApi } from "../../hooks/use-api";
+import { useChangelog } from "../../hooks/use-changelog";
 import { GeneralFaq } from "../GeneralFaq";
 import { GovernanceGuide } from "../GovernanceGuide";
 import { Menu, MenuItem, Section, Separator } from "../Menu";
@@ -41,6 +42,7 @@ export const HelpMenu = () => {
  const openParameters = useCallback(() => {
  setParametersOpen(true);
  }, [setParametersOpen]);
+ const { open: openChangelog } = useChangelog();
 
  return (
  <>
@@ -73,17 +75,16 @@ export const HelpMenu = () => {
  Data Publisher Guide
  </MenuItem>
  </Section>
- {(api.type === StateType.Loaded ||
- api.type === StateType.LoadedNoStakeAccount) && (
- <>
- <Separator />
- <Section>
- <MenuItem onAction={openParameters}>
- Current Program Parameters
- </MenuItem>
- </Section>
- </>
- )}
+ <Separator />
+ <Section>
+ {(api.type === StateType.Loaded ||
+ api.type === StateType.LoadedNoStakeAccount) && (
+ <MenuItem onAction={openParameters}>
+ Current Program Parameters
+ </MenuItem>
+ )}
+ <MenuItem onAction={openChangelog}>Changelog</MenuItem>
+ </Section>
  </Menu>
  </MenuTrigger>
  <GeneralFaq isOpen={faqOpen} onOpenChange={setFaqOpen} />

apps/staking/src/components/ModalDialog/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import type { ComponentProps, ReactNode } from "react";

apps/staking/src/components/Root/index.tsx

@@ -20,6 +20,7 @@ import { LoggerProvider } from "../../hooks/use-logger";
 import { NetworkProvider } from "../../hooks/use-network";
 import { ToastProvider } from "../../hooks/use-toast";
 import { Amplitude } from "../Amplitude";
+import { Changelog } from "../Changelog";
 import { Footer } from "../Footer";
 import { Header } from "../Header";
 import { MaxWidth } from "../MaxWidth";
@@ -64,6 +65,7 @@ export const Root = ({ children }: Props) => (
  </MaxWidth>
  <Footer className="z-10" />
  <ToastRegion />
+ <Changelog />
  </body>
  {GOOGLE_ANALYTICS_ID && <GoogleAnalytics gaId={GOOGLE_ANALYTICS_ID} />}
  {AMPLITUDE_API_KEY && <Amplitude apiKey={AMPLITUDE_API_KEY} />}

apps/staking/src/hooks/use-changelog.ts

@@ -0,0 +1,41 @@
+import { useLocalStorageValue } from "@react-hookz/web";
+import { useCallback, useMemo } from "react";
+
+import { messages } from "../components/Changelog";
+
+export const useChangelog = () => {
+ const lastMessageSeen = useLocalStorageValue<number>(
+ "last-changelog-message-seen",
+ {
+ parse: (value) =>
+ // eslint-disable-next-line unicorn/no-null
+ value === null || value === "" ? null : Number.parseInt(value, 10),
+ stringify: (value) => value.toString(),
+ },
+ );
+
+ const isOpen = useMemo(() => {
+ const lastClosed = lastMessageSeen.value;
+ return (
+ lastClosed === undefined ||
+ messages.some((message) => message.id > lastClosed)
+ );
+ }, [lastMessageSeen.value]);
+
+ const toggleOpen = useCallback(
+ (isOpen: boolean) => {
+ if (isOpen) {
+ lastMessageSeen.remove();
+ } else {
+ lastMessageSeen.set(Math.max(...messages.map(({ id }) => id)));
+ }
+ },
+ [lastMessageSeen],
+ );
+
+ const open = useCallback(() => {
+ toggleOpen(true);
+ }, [toggleOpen]);
+
+ return { isOpen, toggleOpen, open };
+};