Chore(ois) add images

components/DualModeImage.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps } from "react";
+import Image from "next/image";
+
+type ImageProps = ComponentProps<typeof Image>;
+type Props = Omit<ImageProps, "src"> & {
+  darkSrc: ImageProps["src"];
+  lightSrc: ImageProps["src"];
+  alt: string;
+};
+
+const DualModeImage = ({
+  darkSrc,
+  lightSrc,
+  className,
+  alt,
+  ...props
+}: Props) => {
+  return (
+    <>
+      <Image
+        src={lightSrc}
+        className={`dark:hidden ${className}`}
+        alt={alt}
+        {...props}
+      />
+      <Image
+        src={darkSrc}
+        className={`hidden dark:block ${className}`}
+        alt={alt}
+        {...props}
+      />
+    </>
+  );
+};
+
+export default DualModeImage;

pages/home/oracle-integrity-staking/reward-examples.mdx

@@ -1,5 +1,14 @@
 import RewardSimulator from "@/components/RewardSimulator";
+import DualModeImage from "../../../components/DualModeImage";
 import Image from "next/image";
+import OIS_Rewards_Example_Dark_1 from "../../../images/ois/OIS_Rewards_Example_Dark_1.png";
+import OIS_Rewards_Example_Light_1 from "../../../images/ois/OIS_Rewards_Example_Light_1.png";
+import OIS_Rewards_Example_Dark_2 from "../../../images/ois/OIS_Rewards_Example_Dark_2.png";
+import OIS_Rewards_Example_Light_2 from "../../../images/ois/OIS_Rewards_Example_Light_2.png";
+import OIS_Rewards_Example_Dark_3 from "../../../images/ois/OIS_Rewards_Example_Dark_3.png";
+import OIS_Rewards_Example_Light_3 from "../../../images/ois/OIS_Rewards_Example_Light_3.png";
+import OIS_Rewards_Example_Dark_4 from "../../../images/ois/OIS_Rewards_Example_Dark_4.png";
+import OIS_Rewards_Example_Light_4 from "../../../images/ois/OIS_Rewards_Example_Light_4.png";
 
 # Examples
 
@@ -28,6 +37,14 @@ $$
 \end{aligned}
 $$
 
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_1}
+  lightSrc={OIS_Rewards_Example_Light_1}
+  alt="Example 1"
+  sizes="100%"
+  placeholder="blur"
+/>
+
 ## Example 2: Publisher and Delegator Stake
 
 This example takes the case where the pool has stake from both the publisher and the delegator.
@@ -49,6 +66,14 @@ $$
 \end{aligned}
 $$
 
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_2}
+  lightSrc={OIS_Rewards_Example_Light_2}
+  alt="Example 2"
+  sizes="100%"
+  placeholder="blur"
+/>
+
 ## Example 3: Publisher and Delegator Stake more than the Cap
 
 This example takes the case where the combined stake of both the publisher and the delegator exceeds the cap.
@@ -70,6 +95,14 @@ $$
 \end{aligned}
 $$
 
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_3}
+  lightSrc={OIS_Rewards_Example_Light_3}
+  alt="Example 3"
+  sizes="100%"
+  placeholder="blur"
+/>
+
 ## Example 4: Introducing Delegator Fees
 
 This example demonstrates how the delegation fee affect the reward distribution between the publisher and the delegator.
@@ -95,6 +128,14 @@ $$
 \end{aligned}
 $$
 
+<DualModeImage
+  darkSrc={OIS_Rewards_Example_Dark_4}
+  lightSrc={OIS_Rewards_Example_Light_4}
+  alt="Example 4"
+  sizes="100%"
+  placeholder="blur"
+/>
+
 In the example, the delegator pays a 2\% fee on their rewards to the publisher. This fee is deducted from the delegator's reward and added to the publisher's reward.
 
 ## Example 5: Slashing event on the pool
@@ -117,6 +158,8 @@ $$
 
 In this example, the stake is uniformly slashed by 5\%, affecting both the publisher and the delegator. Slashing impact the total stake into the pool, regardless of the Cap.
 
+Checkout out the detailed slashing example at [Slashing Rulebook](./slashing-rulebook#slashing-example)
+
 ## Example 6: Increasing the cap of the pool
 
 This example shows how a publisher can increase the cap of the pool assigned to them.

pages/home/oracle-integrity-staking/slashing-rulebook.mdx

@@ -1,3 +1,13 @@
+import DualModeImage from "../../../components/DualModeImage";
+import ois_slashing_investigation_dark from "../../../images/ois/ois_slashing_investigation_dark.png";
+import ois_slashing_investigation_light from "../../../images/ois/ois_slashing_investigation_light.png";
+import ois_slashing_pool_post_dark from "../../../images/ois/ois_slashing_pool_post_dark.png";
+import ois_slashing_pool_post_light from "../../../images/ois/ois_slashing_pool_post_light.png";
+import ois_slashing_pool_pre_dark from "../../../images/ois/ois_slashing_pool_pre_dark.png";
+import ois_slashing_pool_pre_light from "../../../images/ois/ois_slashing_pool_pre_light.png";
+
+import Image from "next/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.
@@ -101,22 +111,40 @@ 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_slashin_investigation_dark.png)
+<DualModeImage
+  darkSrc={ois_slashing_investigation_dark}
+  lightSrc={ois_slashing_investigation_light}
+  alt="OIS Slashing Investigation"
+  sizes="100%"
+  placeholder="blur"
+/>
 
 ### 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_dark.png)
+<DualModeImage
+  darkSrc={ois_slashing_pool_pre_dark}
+  lightSrc={ois_slashing_pool_pre_light}
+  alt="Pre Slashing Pool"
+  sizes="100%"
+  placeholder="blur"
+/>
 
 - 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).
 
 - Assume `pool_1` has 10M staked, made up of **6M self-staked and 4M delegated PYTH**.
   - 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_dark.png)
+<DualModeImage
+  darkSrc={ois_slashing_pool_post_dark}
+  lightSrc={ois_slashing_pool_post_light}
+  alt="Post Slashing Pool"
+  sizes="100%"
+  placeholder="blur"
+/>
 
 - 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.