chore(developer-hub): reward calculator and image import in ois

apps/developer-hub/content/docs/oracle-integrity-staking/reward-examples.mdx

@@ -5,6 +5,14 @@ description: >-
 ---
 
 import DualModeImage from "../../../src/components/DualModeImage";
+import OISExample1Dark from "./images/OIS_Rewards_Example_Dark_1.png";
+import OISExample1Light from "./images/OIS_Rewards_Example_Light_1.png";
+import OISExample2Dark from "./images/OIS_Rewards_Example_Dark_2.png";
+import OISExample2Light from "./images/OIS_Rewards_Example_Light_2.png";
+import OISExample3Dark from "./images/OIS_Rewards_Example_Dark_3.png";
+import OISExample3Light from "./images/OIS_Rewards_Example_Light_3.png";
+import OISExample4Dark from "./images/OIS_Rewards_Example_Dark_4.png";
+import OISExample4Light from "./images/OIS_Rewards_Example_Light_4.png";
 
 NOTE: All the symbols used in the examples are explained in the [Mathematical Representation](./mathematical-representation) section.
 
@@ -14,8 +22,8 @@ This example takes the case of one pool where the pool has stake from only the p
 
 <br />
 <DualModeImage
-  darkSrc="/images/ois/OIS_Rewards_Example_Dark_1.png"
-  lightSrc="/images/ois/OIS_Rewards_Example_Light_1.png"
+  darkSrc={OISExample1Dark}
+  lightSrc={OISExample1Light}
   alt="Example 1 - Only Publisher Stake"
 />
 
@@ -42,8 +50,8 @@ This example takes the case where the pool has stake from both the publisher and
 
 <br />
 <DualModeImage
-  darkSrc="/images/ois/OIS_Rewards_Example_Dark_2.png"
-  lightSrc="/images/ois/OIS_Rewards_Example_Light_2.png"
+  darkSrc={OISExample2Dark}
+  lightSrc={OISExample2Light}
   alt="Example 2 - Publisher and Delegator Stake"
 />
 
@@ -70,8 +78,8 @@ This example takes the case where the combined stake of both the publisher and t
 
 <br />
 <DualModeImage
-  darkSrc="/images/ois/OIS_Rewards_Example_Dark_3.png"
-  lightSrc="/images/ois/OIS_Rewards_Example_Light_3.png"
+  darkSrc={OISExample3Dark}
+  lightSrc={OISExample3Light}
   alt="Example 3 - Stake Exceeding Cap"
 />
 
@@ -98,8 +106,8 @@ This example demonstrates how the delegation fee affect the reward distribution
 
 <br />
 <DualModeImage
-  darkSrc="/images/ois/OIS_Rewards_Example_Dark_4.png"
-  lightSrc="/images/ois/OIS_Rewards_Example_Light_4.png"
+  darkSrc={OISExample4Dark}
+  lightSrc={OISExample4Light}
   alt="Example 4 - Delegator Fees"
 />
 
@@ -203,3 +211,11 @@ C_{p_{option2}} &= 100 + 100 \cdot \sum_{s \in \text{\{$s_{6}$,.., $s_{10}$\}}}
 &= 100 + 50 = 150
 \end{aligned}
 $$
+
+## Reward Calculator
+
+Use the calculator below to calculate publisher and delegator rewards based on your inputs.
+
+import RewardSimulator from "../../../src/components/RewardSimulator";
+
+<RewardSimulator />

apps/developer-hub/content/docs/oracle-integrity-staking/slashing-rulebook.mdx

@@ -6,6 +6,12 @@ description: >-
 ---
 
 import DualModeImage from "../../../src/components/DualModeImage";
+import OISSlashingInvestigationDark from "./images/ois_slashing_investigation_dark.png";
+import OISSlashingInvestigationLight from "./images/ois_slashing_investigation_light.png";
+import OISSlashingPoolPreDark from "./images/ois_slashing_pool_pre_dark.png";
+import OISSlashingPoolPreLight from "./images/ois_slashing_pool_pre_light.png";
+import OISSlashingPoolPostDark from "./images/ois_slashing_pool_post_dark.png";
+import OISSlashingPoolPostLight from "./images/ois_slashing_pool_post_light.png";
 
 # Purpose and Scope
 
@@ -111,8 +117,8 @@ It was found that 7 of the 9 publishers were influencing the price of `FOO/USD`
 The other 2 publishers were found publish price closely to the mediuan of the reference data.
 
 <DualModeImage
-  darkSrc="/images/ois/ois_slashing_investigation_dark.png"
-  lightSrc="/images/ois/ois_slashing_investigation_light.png"
+  darkSrc={OISSlashingInvestigationDark}
+  lightSrc={OISSlashingInvestigationLight}
   alt="OIS Slashing Investigation"
 />
 
@@ -122,8 +128,8 @@ The other 2 publishers were found publish price closely to the mediuan of the re
 - 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).
 
 <DualModeImage
-  darkSrc="/images/ois/ois_slashing_pool_pre_dark.png"
-  lightSrc="/images/ois/ois_slashing_pool_pre_light.png"
+  darkSrc={OISSlashingPoolPreDark}
+  lightSrc={OISSlashingPoolPreLight}
   alt="Pre Slashing Pool"
 />
 
@@ -134,8 +140,8 @@ The other 2 publishers were found publish price closely to the mediuan of the re
   - Delegators to `pool_1` would see their stake slashed by 100bps of 4M PYTH, ie. 40K PYTH, resulting in **3.96M** residual delegated stake.
 
 <DualModeImage
-  darkSrc="/images/ois/ois_slashing_pool_post_dark.png"
-  lightSrc="/images/ois/ois_slashing_pool_post_light.png"
+  darkSrc={OISSlashingPoolPostDark}
+  lightSrc={OISSlashingPoolPostLight}
   alt="Post Slashing Pool"
 />
 

apps/developer-hub/src/components/RewardSimulator/index.module.scss

@@ -0,0 +1,86 @@
+@use "@pythnetwork/component-library/theme";
+
+.card {
+  margin-top: theme.spacing(6);
+}
+
+.inputGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: theme.spacing(6);
+  padding: theme.spacing(4);
+
+  @include theme.breakpoint("sm") {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(2);
+}
+
+.input {
+  padding: theme.spacing(2) theme.spacing(3);
+  border: 1px solid theme.color("border");
+  border-radius: theme.border-radius("lg");
+  background-color: theme.color("background", "primary");
+  color: theme.color("foreground");
+  transition: all 0.15s ease-in-out;
+
+  &:focus {
+    outline: 2px solid theme.color("focus");
+    outline-offset: -2px;
+    border-color: transparent;
+  }
+}
+
+.resultsSection {
+  border-top: 1px solid theme.color("border");
+  margin-top: theme.spacing(6);
+  padding: theme.spacing(6) theme.spacing(4) 0;
+}
+
+.resultsGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: theme.spacing(6);
+
+  @include theme.breakpoint("sm") {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.resultGroup {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(3);
+}
+
+.resultTitle {
+  font-size: theme.font-size("lg");
+  font-weight: theme.font-weight("semibold");
+  color: theme.color("foreground");
+}
+
+.resultList {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(1);
+  margin: 0;
+}
+
+.resultTerm {
+  font-size: theme.font-size("sm");
+  color: theme.color("muted");
+  font-weight: theme.font-weight("medium");
+  margin: 0;
+}
+
+.resultValue {
+  font-family: theme.font-family("monospace");
+  font-size: theme.font-size("sm");
+  margin: 0;
+  margin-bottom: theme.spacing(2);
+}