From 49eaf48c0af9b28d1d876af825d0497beac8432f Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Tue, 16 Sep 2025 15:13:11 +0530 Subject: [PATCH 1/5] dual image mode enable and theme switch --- .../reward-examples.mdx | 30 +++++++++++-- .../slashing-rulebook.mdx | 20 +++++++-- .../src/components/dual-mode-image.tsx | 42 +++++++++++++++++++ .../src/config/layout.config.tsx | 2 +- 4 files changed, 86 insertions(+), 8 deletions(-) create mode 100644 apps/developer-hub/src/components/dual-mode-image.tsx diff --git a/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx b/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx index 1c0463fbb6..bfca778388 100644 --- a/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx +++ b/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx @@ -4,13 +4,20 @@ description: >- This reference page provides examples of various scenarios to illustrate the Mathematical Representations of OIS. --- +import DualModeImage from '../../../src/components/dual-mode-image'; + NOTE: All the symbols used in the examples are explained in the [Mathematical Representation](./mathematical-representation) section. ## Example 1: Only Publisher Stake This example takes the case of one pool where the pool has stake from only the publisher. -![Example 1 - Only Publisher Stake](/images/ois/OIS_Rewards_Example_Light_1.png) +
+ $$ \begin{aligned} @@ -33,7 +40,12 @@ $$ This example takes the case where the pool has stake from both the publisher and the delegator. -![Example 2 - Publisher and Delegator Stake](/images/ois/OIS_Rewards_Example_Light_2.png) +
+ $$ \begin{aligned} @@ -56,7 +68,12 @@ $$ This example takes the case where the combined stake of both the publisher and the delegator exceeds the cap. -![Example 3 - Stake Exceeding Cap](/images/ois/OIS_Rewards_Example_Light_3.png) +
+ $$ \begin{aligned} @@ -79,7 +96,12 @@ $$ This example demonstrates how the delegation fee affect the reward distribution between the publisher and the delegator. -![Example 4 - Delegator Fees](/images/ois/OIS_Rewards_Example_Light_4.png) +
+ $$ \begin{aligned} diff --git a/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx b/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx index 61bfe45330..83fd016b6e 100644 --- a/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx +++ b/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx @@ -5,6 +5,8 @@ description: >- on the Pyth network. --- +import DualModeImage from '../../../src/components/dual-mode-image'; + # Purpose and Scope This Pyth Slashing Rulebook (this "Rulebook") outlines the Terms & Conditions for slashing PYTH that has been staked for price feed accuracy on the Pyth network. This document develops the rules that the DAO must adhere to when assessing conditions and amounts of slashing. @@ -108,14 +110,22 @@ The Pythian councile identifies there were 9 active publishers for `FOO/USD` at It was found that 7 of the 9 publishers were influencing the price of `FOO/USD` at the time of the incident. The other 2 publishers were found publish price closely to the mediuan of the reference data. -![OIS Slashing Investigation](/images/ois/ois_slashing_investigation_light.png) + ### Pythian Council Process for Slashing - Assume that the Pyth DAO has set the maximum slashable amount at 500 bps of the total stake of each responsible publisher's assigned pool, the maximum amount that can be slashed is $500 \text{ bps} \times 50\text{M} = 2.5\text{M PYTH}$. - From the investigation, \$200K of preventable liquidations were identified from on chain data, the Pythian Council could adjust the amount of stake slashed to 500K PYTH or 100bps (assuming PYTH/USD = $0.40). -![Pre Slashing Pool](/images/ois/ois_slashing_pool_pre_light.png) + - The 500K PYTH slashed is charged pro-rata to the 7 pools that constitute the stake subject to slashing (i.e. calculated according to the total stake in the 7 pools assigned to the 7 publishers found responsible for the misprint). @@ -123,7 +133,11 @@ The other 2 publishers were found publish price closely to the mediuan of the re - The publisher assigned to `pool_1` would see its self-stake slashed 100bps of 6M PYTH, ie. 60K PYTH, resulting in **5.84M** residual self-stake. - Delegators to `pool_1` would see their stake slashed by 100bps of 4M PYTH, ie. 40K PYTH, resulting in **3.96M** residual delegated stake. -![Post Slashing Pool](/images/ois/ois_slashing_pool_post_light.png) + - The total amount slashed in this example is 500K PYTH. This amount goes to the Pyth DAO treasury. The Pythian Council or the community can propose to the DAO to vote on means to distribute the slashed amount. diff --git a/apps/developer-hub/src/components/dual-mode-image.tsx b/apps/developer-hub/src/components/dual-mode-image.tsx new file mode 100644 index 0000000000..86c9d3997d --- /dev/null +++ b/apps/developer-hub/src/components/dual-mode-image.tsx @@ -0,0 +1,42 @@ +import type { ComponentProps } from "react"; +import Image from "next/image"; + +type ImageProps = ComponentProps; +type Props = Omit & { + darkSrc: string; + lightSrc: string; + alt: string; +}; + +const DualModeImage = ({ + darkSrc, + lightSrc, + className, + alt, + width = 800, + height = 600, + ...props +}: Props) => { + return ( + <> + {alt} + {alt} + + ); +}; + +export default DualModeImage; diff --git a/apps/developer-hub/src/config/layout.config.tsx b/apps/developer-hub/src/config/layout.config.tsx index a4c870d54a..d794212ba4 100644 --- a/apps/developer-hub/src/config/layout.config.tsx +++ b/apps/developer-hub/src/config/layout.config.tsx @@ -8,7 +8,7 @@ export const baseOptions: BaseLayoutProps = { enabled: true, }, themeSwitch: { - enabled: false, + enabled: true, }, searchToggle: { enabled: false, From d545ac2cf95c8fcd91a22c8e906d6534f413d213 Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Tue, 16 Sep 2025 15:35:20 +0530 Subject: [PATCH 2/5] formatting --- .../content/docs/oracle-integrity-staking/reward-examples.mdx | 2 +- .../content/docs/oracle-integrity-staking/slashing-rulebook.mdx | 2 +- apps/developer-hub/src/components/dual-mode-image.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx b/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx index bfca778388..c1889693f5 100644 --- a/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx +++ b/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx @@ -4,7 +4,7 @@ description: >- This reference page provides examples of various scenarios to illustrate the Mathematical Representations of OIS. --- -import DualModeImage from '../../../src/components/dual-mode-image'; +import DualModeImage from "../../../src/components/dual-mode-image"; NOTE: All the symbols used in the examples are explained in the [Mathematical Representation](./mathematical-representation) section. diff --git a/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx b/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx index 83fd016b6e..84dcd7c177 100644 --- a/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx +++ b/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx @@ -5,7 +5,7 @@ description: >- on the Pyth network. --- -import DualModeImage from '../../../src/components/dual-mode-image'; +import DualModeImage from "../../../src/components/dual-mode-image"; # Purpose and Scope diff --git a/apps/developer-hub/src/components/dual-mode-image.tsx b/apps/developer-hub/src/components/dual-mode-image.tsx index 86c9d3997d..30c694dc5f 100644 --- a/apps/developer-hub/src/components/dual-mode-image.tsx +++ b/apps/developer-hub/src/components/dual-mode-image.tsx @@ -1,5 +1,5 @@ -import type { ComponentProps } from "react"; import Image from "next/image"; +import type { ComponentProps } from "react"; type ImageProps = ComponentProps; type Props = Omit & { From 408ed622e9e626ebeac9563077f4f67c238759af Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Tue, 16 Sep 2025 16:40:37 +0530 Subject: [PATCH 3/5] use imagezoom --- .../src/components/dual-mode-image.tsx | 25 +++++++++++-------- .../src/config/layout.config.tsx | 2 +- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/apps/developer-hub/src/components/dual-mode-image.tsx b/apps/developer-hub/src/components/dual-mode-image.tsx index 30c694dc5f..b282bc89f6 100644 --- a/apps/developer-hub/src/components/dual-mode-image.tsx +++ b/apps/developer-hub/src/components/dual-mode-image.tsx @@ -1,11 +1,11 @@ import Image from "next/image"; +import { ImageZoom } from "fumadocs-ui/components/image-zoom"; import type { ComponentProps } from "react"; type ImageProps = ComponentProps; type Props = Omit & { darkSrc: string; lightSrc: string; - alt: string; }; const DualModeImage = ({ @@ -15,25 +15,28 @@ const DualModeImage = ({ alt, width = 800, height = 600, + sizes = "100vw", ...props }: Props) => { + const commonProps = { + alt, + width, + height, + sizes, + ...props, + }; + return ( <> - {alt} - {alt} ); diff --git a/apps/developer-hub/src/config/layout.config.tsx b/apps/developer-hub/src/config/layout.config.tsx index d794212ba4..2048a76d9c 100644 --- a/apps/developer-hub/src/config/layout.config.tsx +++ b/apps/developer-hub/src/config/layout.config.tsx @@ -8,7 +8,7 @@ export const baseOptions: BaseLayoutProps = { enabled: true, }, themeSwitch: { - enabled: true, + enabled: false, // Keep this false as the theme switch is handled by the component library }, searchToggle: { enabled: false, From 543dc3c9ab0071841724a67421f144b424ec34e9 Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Tue, 16 Sep 2025 16:45:59 +0530 Subject: [PATCH 4/5] import order --- apps/developer-hub/src/components/dual-mode-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/developer-hub/src/components/dual-mode-image.tsx b/apps/developer-hub/src/components/dual-mode-image.tsx index b282bc89f6..b87bb1e383 100644 --- a/apps/developer-hub/src/components/dual-mode-image.tsx +++ b/apps/developer-hub/src/components/dual-mode-image.tsx @@ -1,5 +1,5 @@ -import Image from "next/image"; import { ImageZoom } from "fumadocs-ui/components/image-zoom"; +import Image from "next/image"; import type { ComponentProps } from "react"; type ImageProps = ComponentProps; From d346f43f65584f36fdb3f3196dfc7c152c180dd6 Mon Sep 17 00:00:00 2001 From: nidhi-singh02 Date: Tue, 16 Sep 2025 17:07:05 +0530 Subject: [PATCH 5/5] make css modules for dual mode image --- .../oracle-integrity-staking/reward-examples.mdx | 2 +- .../slashing-rulebook.mdx | 2 +- .../components/DualModeImage/index.module.scss | 15 +++++++++++++++ .../index.tsx} | 7 +++++-- 4 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 apps/developer-hub/src/components/DualModeImage/index.module.scss rename apps/developer-hub/src/components/{dual-mode-image.tsx => DualModeImage/index.tsx} (80%) diff --git a/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx b/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx index c1889693f5..c95c535013 100644 --- a/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx +++ b/apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx @@ -4,7 +4,7 @@ description: >- This reference page provides examples of various scenarios to illustrate the Mathematical Representations of OIS. --- -import DualModeImage from "../../../src/components/dual-mode-image"; +import DualModeImage from "../../../src/components/DualModeImage"; NOTE: All the symbols used in the examples are explained in the [Mathematical Representation](./mathematical-representation) section. diff --git a/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx b/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx index 84dcd7c177..55f1381743 100644 --- a/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx +++ b/apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx @@ -5,7 +5,7 @@ description: >- on the Pyth network. --- -import DualModeImage from "../../../src/components/dual-mode-image"; +import DualModeImage from "../../../src/components/DualModeImage"; # Purpose and Scope diff --git a/apps/developer-hub/src/components/DualModeImage/index.module.scss b/apps/developer-hub/src/components/DualModeImage/index.module.scss new file mode 100644 index 0000000000..6f8a489bef --- /dev/null +++ b/apps/developer-hub/src/components/DualModeImage/index.module.scss @@ -0,0 +1,15 @@ +.lightImage { + display: block; + + :global(.dark) & { + display: none; + } +} + +.darkImage { + display: none; + + :global(.dark) & { + display: block; + } +} diff --git a/apps/developer-hub/src/components/dual-mode-image.tsx b/apps/developer-hub/src/components/DualModeImage/index.tsx similarity index 80% rename from apps/developer-hub/src/components/dual-mode-image.tsx rename to apps/developer-hub/src/components/DualModeImage/index.tsx index b87bb1e383..23fd004190 100644 --- a/apps/developer-hub/src/components/dual-mode-image.tsx +++ b/apps/developer-hub/src/components/DualModeImage/index.tsx @@ -1,7 +1,10 @@ +import clsx from "clsx"; import { ImageZoom } from "fumadocs-ui/components/image-zoom"; import Image from "next/image"; import type { ComponentProps } from "react"; +import styles from "./index.module.scss"; + type ImageProps = ComponentProps; type Props = Omit & { darkSrc: string; @@ -30,12 +33,12 @@ const DualModeImage = ({ <>