From 667c4fcee92b4dab682972e975ba784e7a39e641 Mon Sep 17 00:00:00 2001 From: Connor Prussin Date: Wed, 9 Oct 2024 15:57:08 -0700 Subject: [PATCH] feat(staking): add changelog --- .../src/components/Changelog/index.tsx | 198 ++++++++++++++++++ .../src/components/Header/help-menu.tsx | 23 +- .../src/components/ModalDialog/index.tsx | 2 + apps/staking/src/components/Root/index.tsx | 2 + apps/staking/src/hooks/use-changelog.ts | 41 ++++ 5 files changed, 255 insertions(+), 11 deletions(-) create mode 100644 apps/staking/src/components/Changelog/index.tsx create mode 100644 apps/staking/src/hooks/use-changelog.ts diff --git a/apps/staking/src/components/Changelog/index.tsx b/apps/staking/src/components/Changelog/index.tsx new file mode 100644 index 000000000..6e37bb5d4 --- /dev/null +++ b/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 ( + + + + ); +}; + +type ChangelogMessageProps = { + date: Date; + children: ReactNode | ReactNode[]; +}; + +export const ChangelogMessage = ({ date, children }: ChangelogMessageProps) => { + const dateFormatter = useDateFormatter({ + year: "numeric", + month: "short", + day: "numeric", + }); + + return ( +
+

+ {dateFormatter.format(date)} +

+ {children} +
+ ); +}; + +type ChangelogSectionProps = { + title: ReactNode; + children: ReactNode | ReactNode[]; +}; + +export const ChangelogSection = ({ + title, + children, +}: ChangelogSectionProps) => ( +
+

{title}

+
+ {children} +
+
+); + +export const messages = [ + { + id: 1, + message: ( + + +
+

+ We are pleased to announce the following Oracle Integrity Staking + milestones: +

+
    +
  • 143M PYTH staked and securing DeFi.
  • +
  • 9.6K unique stakers participating.
  • +
  • 237K in PYTH programmatically distributed.
  • +
+
+

We’re thrilled to see so many community participants.

+
+ +
    +
  • + 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. +
  • +
  • + Publishers interested in de-anonymizing themselves can have their + names displayed in the publisher list. +
  • +
  • New OIS live stats added to navigation bar.
  • +
  • + New dialogue added under “Help” where you can view current program + parameters. +
  • +
  • + Option to remove PYTH from the smart contract program for parties + with restricted access to the staking frontend. +
  • +
  • + Full access to Pyth Governance for certain restricted + jurisdictions. +
  • +
  • APYs are now shown as net of delegation fees.
  • +
  • + Updates to educational materials (all Guides and FAQs) for clarity + and readability. +
  • +
  • + New Oracle Integrity Staking{" "} + + discussion catalogue + {" "} + opened in Pyth DAO forum. Let the community know your thoughts and + feedback! +
  • +
+
+ +

+ The Pyth contributors take security extremely seriously. The + contract code is{" "} + + open source + {" "} + and the upgrade authority is governed by the Pyth DAO. The official{" "} + + audit report + {" "} + is publicly accessible. All on-chain contract codes are verified + using{" "} + + Solana verifiable build + {" "} + and the Pyth DAO governs the upgrade authority. +

+
+ +

+ 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. +

+
+ +

+ 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! +

+
+ +

+ Please reach out in the official{" "} + + Pyth Discord + {" "} + or the{" "} + + Pyth DAO Forum + {" "} + to share your questions, ideas, or feedback. We want to hear what + you think. +

+
+
+ ), + }, +]; diff --git a/apps/staking/src/components/Header/help-menu.tsx b/apps/staking/src/components/Header/help-menu.tsx index 1cfba19c0..fece5a6e3 100644 --- a/apps/staking/src/components/Header/help-menu.tsx +++ b/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 - {(api.type === StateType.Loaded || - api.type === StateType.LoadedNoStakeAccount) && ( - <> - -
- - Current Program Parameters - -
- - )} + +
+ {(api.type === StateType.Loaded || + api.type === StateType.LoadedNoStakeAccount) && ( + + Current Program Parameters + + )} + Changelog +
diff --git a/apps/staking/src/components/ModalDialog/index.tsx b/apps/staking/src/components/ModalDialog/index.tsx index 7997cfbc0..3886135f8 100644 --- a/apps/staking/src/components/ModalDialog/index.tsx +++ b/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"; diff --git a/apps/staking/src/components/Root/index.tsx b/apps/staking/src/components/Root/index.tsx index c8e4544f3..2b81ebd46 100644 --- a/apps/staking/src/components/Root/index.tsx +++ b/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) => (