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.

+
+ + + + +

+ 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) => (