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..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,13 +4,20 @@ description: >-
This reference page provides examples of various scenarios to illustrate the Mathematical Representations of OIS.
---
+import DualModeImage from "../../../src/components/DualModeImage";
+
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.
-
+
+
$$
\begin{aligned}
@@ -33,7 +40,12 @@ $$
This example takes the case where the pool has stake from both the publisher and the delegator.
-
+
+
$$
\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.
-
+
+
$$
\begin{aligned}
@@ -79,7 +96,12 @@ $$
This example demonstrates how the delegation fee affect the reward distribution between the publisher and the delegator.
-
+
+
$$
\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..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,6 +5,8 @@ description: >-
on the Pyth network.
---
+import DualModeImage from "../../../src/components/DualModeImage";
+
# 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.
-
+
### 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).
-
+
- 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.
-
+
- 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/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/DualModeImage/index.tsx b/apps/developer-hub/src/components/DualModeImage/index.tsx
new file mode 100644
index 0000000000..23fd004190
--- /dev/null
+++ b/apps/developer-hub/src/components/DualModeImage/index.tsx
@@ -0,0 +1,48 @@
+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;
+ lightSrc: string;
+};
+
+const DualModeImage = ({
+ darkSrc,
+ lightSrc,
+ className,
+ alt,
+ width = 800,
+ height = 600,
+ sizes = "100vw",
+ ...props
+}: Props) => {
+ const commonProps = {
+ alt,
+ width,
+ height,
+ sizes,
+ ...props,
+ };
+
+ return (
+ <>
+
+
+ >
+ );
+};
+
+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..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: false,
+ enabled: false, // Keep this false as the theme switch is handled by the component library
},
searchToggle: {
enabled: false,