From d388137e1c340a56c12772da0e329ca9b3f26742 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 17 Sep 2025 12:34:50 +0530
Subject: [PATCH 1/8] reward calculator

---
 .../reward-examples.mdx                       |   8 +
 .../RewardSimulator/index.module.scss         |  84 +++++++
 .../src/components/RewardSimulator/index.tsx  | 232 ++++++++++++++++++
 3 files changed, 324 insertions(+)
 create mode 100644 apps/developer-hub/src/components/RewardSimulator/index.module.scss
 create mode 100644 apps/developer-hub/src/components/RewardSimulator/index.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 c95c535013..4eb0b90c1b 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
@@ -203,3 +203,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 />
diff --git a/apps/developer-hub/src/components/RewardSimulator/index.module.scss b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
new file mode 100644
index 0000000000..9e92299e2d
--- /dev/null
+++ b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
@@ -0,0 +1,84 @@
+@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);
+
+  @media (width >= 640px) {
+    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 var(--color-fd-border);
+  border-radius: theme.border-radius("lg");
+  background-color: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  transition: all 0.15s ease-in-out;
+
+  &:focus {
+    outline: 2px solid var(--color-fd-accent);
+    outline-offset: -2px;
+    border-color: transparent;
+  }
+}
+
+.resultsSection {
+  border-top: 1px solid var(--color-fd-border);
+  margin-top: theme.spacing(6);
+  padding-top: theme.spacing(6);
+}
+
+.resultsGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: theme.spacing(6);
+
+  @media (width >= 640px) {
+    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: var(--color-fd-foreground);
+}
+
+.resultValues {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(2);
+}
+
+.resultItem {
+  font-size: theme.font-size("sm");
+  color: var(--color-fd-muted-foreground);
+}
+
+.resultLabel {
+  font-weight: theme.font-weight("medium");
+}
+
+.resultValue {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+}
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/RewardSimulator/index.tsx b/apps/developer-hub/src/components/RewardSimulator/index.tsx
new file mode 100644
index 0000000000..5e845bb181
--- /dev/null
+++ b/apps/developer-hub/src/components/RewardSimulator/index.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { Card } from "@pythnetwork/component-library/Card";
+import { Label } from "@pythnetwork/component-library/unstyled/Label";
+import { Input } from "@pythnetwork/component-library/unstyled/TextField";
+import clsx from "clsx";
+import React, { useState, useEffect } from "react";
+
+import styles from "./index.module.scss";
+
+// Simple Math component for inline mathematical expressions
+const MathExpression: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <span className="katex">{children}</span>;
+};
+
+// Component for subscripts and superscripts
+const Sub: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <sub>{children}</sub>
+);
+const Sup: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <sup>{children}</sup>
+);
+
+const RewardSimulator: React.FC = () => {
+  const [publisherStake, setPublisherStake] = useState(200);
+  const [delegatorStake, setDelegatorStake] = useState(300);
+  const [maxCap, setMaxCap] = useState(500);
+  const [delegatorFee, setDelegatorFee] = useState(20);
+  const [rewardRate, setRewardRate] = useState(10);
+
+  const [publisherReward, setPublisherReward] = useState(0);
+  const [delegatorReward, setDelegatorReward] = useState(0);
+  const [publisherRewardRate, setPublisherRewardRate] = useState(0);
+  const [delegatorRewardRate, setDelegatorRewardRate] = useState(0);
+
+  useEffect(() => {
+    const calculateRewards = () => {
+      const totalStake = publisherStake + delegatorStake;
+      const eligibleAmount = Math.min(totalStake, maxCap);
+      const totalReward = (rewardRate / 100) * eligibleAmount;
+
+      const publisherRewardBase =
+        (rewardRate / 100) * Math.min(publisherStake, maxCap);
+      const delegatorRewardBase = totalReward - publisherRewardBase;
+
+      const delegatorFeeAmount = (delegatorFee / 100) * delegatorRewardBase;
+
+      const finalDelegatorReward = delegatorRewardBase - delegatorFeeAmount;
+      const finalPublisherReward = publisherRewardBase + delegatorFeeAmount;
+
+      setPublisherReward(Number(finalPublisherReward.toFixed(2)));
+      setDelegatorReward(Number(finalDelegatorReward.toFixed(2)));
+      setPublisherRewardRate(
+        Number(((finalPublisherReward * 100) / publisherStake).toFixed(2)),
+      );
+      setDelegatorRewardRate(
+        Number(((finalDelegatorReward * 100) / delegatorStake).toFixed(2)),
+      );
+    };
+
+    calculateRewards();
+  }, [publisherStake, delegatorStake, maxCap, delegatorFee, rewardRate]);
+
+  return (
+    <Card
+      variant="secondary"
+      title="Reward Simulator"
+      nonInteractive
+      className={clsx(styles.card)}
+    >
+      <div className={clsx(styles.inputGrid)}>
+        <div className={clsx(styles.inputGroup)}>
+          <Label htmlFor="publisher-stake">
+            Publisher Stake (
+            <MathExpression>
+              S<Sub>p</Sub><Sup>p</Sup>
+            </MathExpression>
+            ):
+          </Label>
+          <Input
+            id="publisher-stake"
+            type="number"
+            value={publisherStake}
+            onChange={(e) => {
+              setPublisherStake(Number(e.target.value));
+            }}
+            className={clsx(styles.input)}
+            min="0"
+          />
+        </div>
+        <div className={clsx(styles.inputGroup)}>
+          <Label htmlFor="delegator-stake">
+            Delegator Stake (
+            <MathExpression>
+              S<Sub>p</Sub><Sup>d</Sup>
+            </MathExpression>
+            ):
+          </Label>
+          <Input
+            id="delegator-stake"
+            type="number"
+            value={delegatorStake}
+            onChange={(e) => {
+              setDelegatorStake(Number(e.target.value));
+            }}
+            className={clsx(styles.input)}
+            min="0"
+          />
+        </div>
+        <div className={clsx(styles.inputGroup)}>
+          <Label htmlFor="max-cap">
+            Maximum Cap (
+            <MathExpression>
+              C<Sub>p</Sub>
+            </MathExpression>
+            ):
+          </Label>
+          <Input
+            id="max-cap"
+            type="number"
+            value={maxCap}
+            onChange={(e) => {
+              setMaxCap(Number(e.target.value));
+            }}
+            className={clsx(styles.input)}
+            min="0"
+          />
+        </div>
+        <div className={clsx(styles.inputGroup)}>
+          <Label htmlFor="delegator-fee">
+            Delegator Fee (<MathExpression>f</MathExpression>) (%):
+          </Label>
+          <Input
+            id="delegator-fee"
+            type="number"
+            value={delegatorFee}
+            onChange={(e) => {
+              setDelegatorFee(Number(e.target.value));
+            }}
+            className={clsx(styles.input)}
+            min="0"
+            max="100"
+            step="0.1"
+          />
+        </div>
+        <div className={clsx(styles.inputGroup)}>
+          <Label htmlFor="reward-rate">
+            Reward Rate (<MathExpression>r</MathExpression>) (%):
+          </Label>
+          <Input
+            id="reward-rate"
+            type="number"
+            value={rewardRate}
+            onChange={(e) => {
+              setRewardRate(Number(e.target.value));
+            }}
+            className={clsx(styles.input)}
+            min="0"
+            max="100"
+            step="0.1"
+          />
+        </div>
+      </div>
+      <div className={clsx(styles.resultsSection)}>
+        <div className={clsx(styles.resultsGrid)}>
+          <div className={clsx(styles.resultGroup)}>
+            <h4 className={clsx(styles.resultTitle)}>Calculated Rewards</h4>
+            <div className={clsx(styles.resultValues)}>
+              <p className={clsx(styles.resultItem)}>
+                <span className={clsx(styles.resultLabel)}>
+                  Publisher Reward (
+                  <MathExpression>
+                    R<Sup>p</Sup><Sub>p</Sub>
+                  </MathExpression>
+                  ):
+                </span>{" "}
+                <span className={clsx(styles.resultValue)}>
+                  {publisherReward}
+                </span>
+              </p>
+              <p className={clsx(styles.resultItem)}>
+                <span className={clsx(styles.resultLabel)}>
+                  Delegator Reward (
+                  <MathExpression>
+                    R<Sup>d</Sup><Sub>p</Sub>
+                  </MathExpression>
+                  ):
+                </span>{" "}
+                <span className={clsx(styles.resultValue)}>
+                  {delegatorReward}
+                </span>
+              </p>
+            </div>
+          </div>
+          <div className={clsx(styles.resultGroup)}>
+            <h4 className={clsx(styles.resultTitle)}>
+              Calculated Reward Rates (Yearly)
+            </h4>
+            <div className={clsx(styles.resultValues)}>
+              <p className={clsx(styles.resultItem)}>
+                <span className={clsx(styles.resultLabel)}>
+                  Publisher Rate (
+                  <MathExpression>
+                    r<Sup>p</Sup><Sub>p</Sub>
+                  </MathExpression>
+                  ):
+                </span>{" "}
+                <span className={clsx(styles.resultValue)}>
+                  {publisherRewardRate}%
+                </span>
+              </p>
+              <p className={clsx(styles.resultItem)}>
+                <span className={clsx(styles.resultLabel)}>
+                  Delegator Rate (
+                  <MathExpression>
+                    r<Sup>d</Sup><Sub>p</Sub>
+                  </MathExpression>
+                  ):
+                </span>{" "}
+                <span className={clsx(styles.resultValue)}>
+                  {delegatorRewardRate}%
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default RewardSimulator;
\ No newline at end of file

From 032fae302426754fa804bcc67673c0e0afc72605 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 17 Sep 2025 15:05:36 +0530
Subject: [PATCH 2/8] design enhance

---
 .../RewardSimulator/index.module.scss         |  9 ++--
 .../src/components/RewardSimulator/index.tsx  | 43 ++++++++++++-------
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/apps/developer-hub/src/components/RewardSimulator/index.module.scss b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
index 9e92299e2d..6b4156b348 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.module.scss
+++ b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
@@ -39,7 +39,7 @@
 .resultsSection {
   border-top: 1px solid var(--color-fd-border);
   margin-top: theme.spacing(6);
-  padding-top: theme.spacing(6);
+  padding: theme.spacing(6) theme.spacing(4) 0;
 }
 
 .resultsGrid {
@@ -67,7 +67,7 @@
 .resultValues {
   display: flex;
   flex-direction: column;
-  gap: theme.spacing(2);
+  gap: theme.spacing(1);
 }
 
 .resultItem {
@@ -80,5 +80,6 @@
 }
 
 .resultValue {
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
-}
\ No newline at end of file
+  font-family:
+    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+}
diff --git a/apps/developer-hub/src/components/RewardSimulator/index.tsx b/apps/developer-hub/src/components/RewardSimulator/index.tsx
index 5e845bb181..eaa3fbfd64 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.tsx
+++ b/apps/developer-hub/src/components/RewardSimulator/index.tsx
@@ -3,21 +3,22 @@
 import { Card } from "@pythnetwork/component-library/Card";
 import { Label } from "@pythnetwork/component-library/unstyled/Label";
 import { Input } from "@pythnetwork/component-library/unstyled/TextField";
-import clsx from "clsx";
-import React, { useState, useEffect } from "react";
+import { clsx } from "clsx";
+import { useState, useEffect } from "react";
 
 import styles from "./index.module.scss";
 
-// Simple Math component for inline mathematical expressions
-const MathExpression: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <span className="katex">{children}</span>;
-};
+// Components for mathematical notation
+const MathExpression = ({ children }: { children: React.ReactNode }) => (
+  <span className={clsx(styles.mathExpression)}>{children}</span>
+);
 
 // Component for subscripts and superscripts
-const Sub: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const Sub = ({ children }: { children: React.ReactNode }) => (
   <sub>{children}</sub>
 );
-const Sup: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+
+const Sup = ({ children }: { children: React.ReactNode }) => (
   <sup>{children}</sup>
 );
 
@@ -73,7 +74,8 @@ const RewardSimulator: React.FC = () => {
           <Label htmlFor="publisher-stake">
             Publisher Stake (
             <MathExpression>
-              S<Sub>p</Sub><Sup>p</Sup>
+              S<Sub>p</Sub>
+              <Sup>p</Sup>
             </MathExpression>
             ):
           </Label>
@@ -88,11 +90,13 @@ const RewardSimulator: React.FC = () => {
             min="0"
           />
         </div>
+
         <div className={clsx(styles.inputGroup)}>
           <Label htmlFor="delegator-stake">
             Delegator Stake (
             <MathExpression>
-              S<Sub>p</Sub><Sup>d</Sup>
+              S<Sub>p</Sub>
+              <Sup>d</Sup>
             </MathExpression>
             ):
           </Label>
@@ -107,6 +111,7 @@ const RewardSimulator: React.FC = () => {
             min="0"
           />
         </div>
+
         <div className={clsx(styles.inputGroup)}>
           <Label htmlFor="max-cap">
             Maximum Cap (
@@ -126,6 +131,7 @@ const RewardSimulator: React.FC = () => {
             min="0"
           />
         </div>
+
         <div className={clsx(styles.inputGroup)}>
           <Label htmlFor="delegator-fee">
             Delegator Fee (<MathExpression>f</MathExpression>) (%):
@@ -143,6 +149,7 @@ const RewardSimulator: React.FC = () => {
             step="0.1"
           />
         </div>
+
         <div className={clsx(styles.inputGroup)}>
           <Label htmlFor="reward-rate">
             Reward Rate (<MathExpression>r</MathExpression>) (%):
@@ -161,6 +168,7 @@ const RewardSimulator: React.FC = () => {
           />
         </div>
       </div>
+
       <div className={clsx(styles.resultsSection)}>
         <div className={clsx(styles.resultsGrid)}>
           <div className={clsx(styles.resultGroup)}>
@@ -170,7 +178,8 @@ const RewardSimulator: React.FC = () => {
                 <span className={clsx(styles.resultLabel)}>
                   Publisher Reward (
                   <MathExpression>
-                    R<Sup>p</Sup><Sub>p</Sub>
+                    R<Sup>p</Sup>
+                    <Sub>p</Sub>
                   </MathExpression>
                   ):
                 </span>{" "}
@@ -182,7 +191,8 @@ const RewardSimulator: React.FC = () => {
                 <span className={clsx(styles.resultLabel)}>
                   Delegator Reward (
                   <MathExpression>
-                    R<Sup>d</Sup><Sub>p</Sub>
+                    R<Sup>d</Sup>
+                    <Sub>p</Sub>
                   </MathExpression>
                   ):
                 </span>{" "}
@@ -192,6 +202,7 @@ const RewardSimulator: React.FC = () => {
               </p>
             </div>
           </div>
+
           <div className={clsx(styles.resultGroup)}>
             <h4 className={clsx(styles.resultTitle)}>
               Calculated Reward Rates (Yearly)
@@ -201,7 +212,8 @@ const RewardSimulator: React.FC = () => {
                 <span className={clsx(styles.resultLabel)}>
                   Publisher Rate (
                   <MathExpression>
-                    r<Sup>p</Sup><Sub>p</Sub>
+                    r<Sup>p</Sup>
+                    <Sub>p</Sub>
                   </MathExpression>
                   ):
                 </span>{" "}
@@ -213,7 +225,8 @@ const RewardSimulator: React.FC = () => {
                 <span className={clsx(styles.resultLabel)}>
                   Delegator Rate (
                   <MathExpression>
-                    r<Sup>d</Sup><Sub>p</Sub>
+                    r<Sup>d</Sup>
+                    <Sub>p</Sub>
                   </MathExpression>
                   ):
                 </span>{" "}
@@ -229,4 +242,4 @@ const RewardSimulator: React.FC = () => {
   );
 };
 
-export default RewardSimulator;
\ No newline at end of file
+export default RewardSimulator;

From 14c140fb3884e17da7846fcdad11e7d543adb50d Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 17 Sep 2025 15:28:37 +0530
Subject: [PATCH 3/8] use image import instead of url

---
 .../images}/OIS_Rewards_Example_Dark_1.png    | Bin
 .../images}/OIS_Rewards_Example_Dark_2.png    | Bin
 .../images}/OIS_Rewards_Example_Dark_3.png    | Bin
 .../images}/OIS_Rewards_Example_Dark_4.png    | Bin
 .../images}/OIS_Rewards_Example_Light_1.png   | Bin
 .../images}/OIS_Rewards_Example_Light_2.png   | Bin
 .../images}/OIS_Rewards_Example_Light_3.png   | Bin
 .../images}/OIS_Rewards_Example_Light_4.png   | Bin
 .../ois_slashing_investigation_dark.png       | Bin
 .../ois_slashing_investigation_light.png      | Bin
 .../images}/ois_slashing_pool_post_dark.png   | Bin
 .../images}/ois_slashing_pool_post_light.png  | Bin
 .../images}/ois_slashing_pool_pre_dark.png    | Bin
 .../images}/ois_slashing_pool_pre_light.png   | Bin
 .../reward-examples.mdx                       |  24 ++++++++++++------
 .../slashing-rulebook.mdx                     |  18 ++++++++-----
 16 files changed, 28 insertions(+), 14 deletions(-)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Dark_1.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Dark_2.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Dark_3.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Dark_4.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Light_1.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Light_2.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Light_3.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/OIS_Rewards_Example_Light_4.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/ois_slashing_investigation_dark.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/ois_slashing_investigation_light.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/ois_slashing_pool_post_dark.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/ois_slashing_pool_post_light.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/ois_slashing_pool_pre_dark.png (100%)
 rename apps/developer-hub/{public/images/ois => content/docs/oracle-integrity-staking/images}/ois_slashing_pool_pre_light.png (100%)

diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_1.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_1.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_1.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_1.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_2.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_2.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_2.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_2.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_3.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_3.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_3.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_3.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_4.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_4.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Dark_4.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Dark_4.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_1.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_1.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_1.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_1.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_2.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_2.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_2.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_2.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_3.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_3.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_3.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_3.png
diff --git a/apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_4.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_4.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/OIS_Rewards_Example_Light_4.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/OIS_Rewards_Example_Light_4.png
diff --git a/apps/developer-hub/public/images/ois/ois_slashing_investigation_dark.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_investigation_dark.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/ois_slashing_investigation_dark.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_investigation_dark.png
diff --git a/apps/developer-hub/public/images/ois/ois_slashing_investigation_light.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_investigation_light.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/ois_slashing_investigation_light.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_investigation_light.png
diff --git a/apps/developer-hub/public/images/ois/ois_slashing_pool_post_dark.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_post_dark.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/ois_slashing_pool_post_dark.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_post_dark.png
diff --git a/apps/developer-hub/public/images/ois/ois_slashing_pool_post_light.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_post_light.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/ois_slashing_pool_post_light.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_post_light.png
diff --git a/apps/developer-hub/public/images/ois/ois_slashing_pool_pre_dark.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_pre_dark.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/ois_slashing_pool_pre_dark.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_pre_dark.png
diff --git a/apps/developer-hub/public/images/ois/ois_slashing_pool_pre_light.png b/apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_pre_light.png
similarity index 100%
rename from apps/developer-hub/public/images/ois/ois_slashing_pool_pre_light.png
rename to apps/developer-hub/content/docs/oracle-integrity-staking/images/ois_slashing_pool_pre_light.png
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 4eb0b90c1b..fd9ce27931 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
@@ -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"
 />
 
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 55f1381743..a205031907 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
@@ -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"
 />
 

From 63721451370c314e4432c87a0b9934cd2e7e81e8 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Wed, 17 Sep 2025 20:07:19 +0530
Subject: [PATCH 4/8] use theme breakpoint and other comments

---
 .../RewardSimulator/index.module.scss         |   4 +-
 .../src/components/RewardSimulator/index.tsx  | 117 ++++++++----------
 2 files changed, 56 insertions(+), 65 deletions(-)

diff --git a/apps/developer-hub/src/components/RewardSimulator/index.module.scss b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
index 6b4156b348..da5a2ea497 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.module.scss
+++ b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
@@ -10,7 +10,7 @@
   gap: theme.spacing(6);
   padding: theme.spacing(4);
 
-  @media (width >= 640px) {
+  @include theme.breakpoint("sm") {
     grid-template-columns: 1fr 1fr;
   }
 }
@@ -47,7 +47,7 @@
   grid-template-columns: 1fr;
   gap: theme.spacing(6);
 
-  @media (width >= 640px) {
+  @include theme.breakpoint("sm") {
     grid-template-columns: 1fr 1fr;
   }
 }
diff --git a/apps/developer-hub/src/components/RewardSimulator/index.tsx b/apps/developer-hub/src/components/RewardSimulator/index.tsx
index eaa3fbfd64..468b413bcb 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.tsx
+++ b/apps/developer-hub/src/components/RewardSimulator/index.tsx
@@ -3,14 +3,13 @@
 import { Card } from "@pythnetwork/component-library/Card";
 import { Label } from "@pythnetwork/component-library/unstyled/Label";
 import { Input } from "@pythnetwork/component-library/unstyled/TextField";
-import { clsx } from "clsx";
 import { useState, useEffect } from "react";
 
 import styles from "./index.module.scss";
 
 // Components for mathematical notation
 const MathExpression = ({ children }: { children: React.ReactNode }) => (
-  <span className={clsx(styles.mathExpression)}>{children}</span>
+  <span className={styles.mathExpression}>{children}</span>
 );
 
 // Component for subscripts and superscripts
@@ -35,31 +34,27 @@ const RewardSimulator: React.FC = () => {
   const [delegatorRewardRate, setDelegatorRewardRate] = useState(0);
 
   useEffect(() => {
-    const calculateRewards = () => {
-      const totalStake = publisherStake + delegatorStake;
-      const eligibleAmount = Math.min(totalStake, maxCap);
-      const totalReward = (rewardRate / 100) * eligibleAmount;
-
-      const publisherRewardBase =
-        (rewardRate / 100) * Math.min(publisherStake, maxCap);
-      const delegatorRewardBase = totalReward - publisherRewardBase;
-
-      const delegatorFeeAmount = (delegatorFee / 100) * delegatorRewardBase;
-
-      const finalDelegatorReward = delegatorRewardBase - delegatorFeeAmount;
-      const finalPublisherReward = publisherRewardBase + delegatorFeeAmount;
-
-      setPublisherReward(Number(finalPublisherReward.toFixed(2)));
-      setDelegatorReward(Number(finalDelegatorReward.toFixed(2)));
-      setPublisherRewardRate(
-        Number(((finalPublisherReward * 100) / publisherStake).toFixed(2)),
-      );
-      setDelegatorRewardRate(
-        Number(((finalDelegatorReward * 100) / delegatorStake).toFixed(2)),
-      );
-    };
-
-    calculateRewards();
+    const totalStake = publisherStake + delegatorStake;
+    const eligibleAmount = Math.min(totalStake, maxCap);
+    const totalReward = (rewardRate / 100) * eligibleAmount;
+
+    const publisherRewardBase =
+      (rewardRate / 100) * Math.min(publisherStake, maxCap);
+    const delegatorRewardBase = totalReward - publisherRewardBase;
+
+    const delegatorFeeAmount = (delegatorFee / 100) * delegatorRewardBase;
+
+    const finalDelegatorReward = delegatorRewardBase - delegatorFeeAmount;
+    const finalPublisherReward = publisherRewardBase + delegatorFeeAmount;
+
+    setPublisherReward(Number(finalPublisherReward.toFixed(2)));
+    setDelegatorReward(Number(finalDelegatorReward.toFixed(2)));
+    setPublisherRewardRate(
+      Number(((finalPublisherReward * 100) / publisherStake).toFixed(2)),
+    );
+    setDelegatorRewardRate(
+      Number(((finalDelegatorReward * 100) / delegatorStake).toFixed(2)),
+    );
   }, [publisherStake, delegatorStake, maxCap, delegatorFee, rewardRate]);
 
   return (
@@ -67,10 +62,10 @@ const RewardSimulator: React.FC = () => {
       variant="secondary"
       title="Reward Simulator"
       nonInteractive
-      className={clsx(styles.card)}
+      className={styles.card}
     >
-      <div className={clsx(styles.inputGrid)}>
-        <div className={clsx(styles.inputGroup)}>
+      <div className={styles.inputGrid}>
+        <div className={styles.inputGroup}>
           <Label htmlFor="publisher-stake">
             Publisher Stake (
             <MathExpression>
@@ -86,12 +81,12 @@ const RewardSimulator: React.FC = () => {
             onChange={(e) => {
               setPublisherStake(Number(e.target.value));
             }}
-            className={clsx(styles.input)}
+            className={styles.input ?? ""}
             min="0"
           />
         </div>
 
-        <div className={clsx(styles.inputGroup)}>
+        <div className={styles.inputGroup}>
           <Label htmlFor="delegator-stake">
             Delegator Stake (
             <MathExpression>
@@ -107,12 +102,12 @@ const RewardSimulator: React.FC = () => {
             onChange={(e) => {
               setDelegatorStake(Number(e.target.value));
             }}
-            className={clsx(styles.input)}
+            className={styles.input ?? ""}
             min="0"
           />
         </div>
 
-        <div className={clsx(styles.inputGroup)}>
+        <div className={styles.inputGroup}>
           <Label htmlFor="max-cap">
             Maximum Cap (
             <MathExpression>
@@ -127,12 +122,12 @@ const RewardSimulator: React.FC = () => {
             onChange={(e) => {
               setMaxCap(Number(e.target.value));
             }}
-            className={clsx(styles.input)}
+            className={styles.input ?? ""}
             min="0"
           />
         </div>
 
-        <div className={clsx(styles.inputGroup)}>
+        <div className={styles.inputGroup}>
           <Label htmlFor="delegator-fee">
             Delegator Fee (<MathExpression>f</MathExpression>) (%):
           </Label>
@@ -143,14 +138,14 @@ const RewardSimulator: React.FC = () => {
             onChange={(e) => {
               setDelegatorFee(Number(e.target.value));
             }}
-            className={clsx(styles.input)}
+            className={styles.input ?? ""}
             min="0"
             max="100"
             step="0.1"
           />
         </div>
 
-        <div className={clsx(styles.inputGroup)}>
+        <div className={styles.inputGroup}>
           <Label htmlFor="reward-rate">
             Reward Rate (<MathExpression>r</MathExpression>) (%):
           </Label>
@@ -161,7 +156,7 @@ const RewardSimulator: React.FC = () => {
             onChange={(e) => {
               setRewardRate(Number(e.target.value));
             }}
-            className={clsx(styles.input)}
+            className={styles.input ?? ""}
             min="0"
             max="100"
             step="0.1"
@@ -169,13 +164,13 @@ const RewardSimulator: React.FC = () => {
         </div>
       </div>
 
-      <div className={clsx(styles.resultsSection)}>
-        <div className={clsx(styles.resultsGrid)}>
-          <div className={clsx(styles.resultGroup)}>
-            <h4 className={clsx(styles.resultTitle)}>Calculated Rewards</h4>
-            <div className={clsx(styles.resultValues)}>
-              <p className={clsx(styles.resultItem)}>
-                <span className={clsx(styles.resultLabel)}>
+      <div className={styles.resultsSection}>
+        <div className={styles.resultsGrid}>
+          <div className={styles.resultGroup}>
+            <h4 className={styles.resultTitle}>Calculated Rewards</h4>
+            <div className={styles.resultValues}>
+              <p className={styles.resultItem}>
+                <span className={styles.resultLabel}>
                   Publisher Reward (
                   <MathExpression>
                     R<Sup>p</Sup>
@@ -183,12 +178,10 @@ const RewardSimulator: React.FC = () => {
                   </MathExpression>
                   ):
                 </span>{" "}
-                <span className={clsx(styles.resultValue)}>
-                  {publisherReward}
-                </span>
+                <span className={styles.resultValue}>{publisherReward}</span>
               </p>
-              <p className={clsx(styles.resultItem)}>
-                <span className={clsx(styles.resultLabel)}>
+              <p className={styles.resultItem}>
+                <span className={styles.resultLabel}>
                   Delegator Reward (
                   <MathExpression>
                     R<Sup>d</Sup>
@@ -196,20 +189,18 @@ const RewardSimulator: React.FC = () => {
                   </MathExpression>
                   ):
                 </span>{" "}
-                <span className={clsx(styles.resultValue)}>
-                  {delegatorReward}
-                </span>
+                <span className={styles.resultValue}>{delegatorReward}</span>
               </p>
             </div>
           </div>
 
-          <div className={clsx(styles.resultGroup)}>
-            <h4 className={clsx(styles.resultTitle)}>
+          <div className={styles.resultGroup}>
+            <h4 className={styles.resultTitle}>
               Calculated Reward Rates (Yearly)
             </h4>
-            <div className={clsx(styles.resultValues)}>
-              <p className={clsx(styles.resultItem)}>
-                <span className={clsx(styles.resultLabel)}>
+            <div className={styles.resultValues}>
+              <p className={styles.resultItem}>
+                <span className={styles.resultLabel}>
                   Publisher Rate (
                   <MathExpression>
                     r<Sup>p</Sup>
@@ -217,12 +208,12 @@ const RewardSimulator: React.FC = () => {
                   </MathExpression>
                   ):
                 </span>{" "}
-                <span className={clsx(styles.resultValue)}>
+                <span className={styles.resultValue}>
                   {publisherRewardRate}%
                 </span>
               </p>
-              <p className={clsx(styles.resultItem)}>
-                <span className={clsx(styles.resultLabel)}>
+              <p className={styles.resultItem}>
+                <span className={styles.resultLabel}>
                   Delegator Rate (
                   <MathExpression>
                     r<Sup>d</Sup>
@@ -230,7 +221,7 @@ const RewardSimulator: React.FC = () => {
                   </MathExpression>
                   ):
                 </span>{" "}
-                <span className={clsx(styles.resultValue)}>
+                <span className={styles.resultValue}>
                   {delegatorRewardRate}%
                 </span>
               </p>

From 32a29c24bb28a793b3f9f2297cde34d17e342924 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Thu, 18 Sep 2025 13:01:26 +0530
Subject: [PATCH 5/8] define font family, remove useeffects

---
 .../RewardSimulator/index.module.scss         |  29 +-
 .../src/components/RewardSimulator/index.tsx  | 327 +++++++++---------
 packages/component-library/src/theme.scss     |  15 +
 3 files changed, 191 insertions(+), 180 deletions(-)

diff --git a/apps/developer-hub/src/components/RewardSimulator/index.module.scss b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
index da5a2ea497..458d458171 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.module.scss
+++ b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
@@ -23,21 +23,21 @@
 
 .input {
   padding: theme.spacing(2) theme.spacing(3);
-  border: 1px solid var(--color-fd-border);
+  border: 1px solid theme.color("border");
   border-radius: theme.border-radius("lg");
-  background-color: var(--color-fd-background);
-  color: var(--color-fd-foreground);
+  background-color: theme.color("background", "primary");
+  color: theme.color("foreground");
   transition: all 0.15s ease-in-out;
 
   &:focus {
-    outline: 2px solid var(--color-fd-accent);
+    outline: 2px solid theme.color("focus");
     outline-offset: -2px;
     border-color: transparent;
   }
 }
 
 .resultsSection {
-  border-top: 1px solid var(--color-fd-border);
+  border-top: 1px solid theme.color("border");
   margin-top: theme.spacing(6);
   padding: theme.spacing(6) theme.spacing(4) 0;
 }
@@ -61,25 +61,26 @@
 .resultTitle {
   font-size: theme.font-size("lg");
   font-weight: theme.font-weight("semibold");
-  color: var(--color-fd-foreground);
+  color: theme.color("foreground");
 }
 
-.resultValues {
+.resultList {
   display: flex;
   flex-direction: column;
   gap: theme.spacing(1);
+  margin: 0;
 }
 
-.resultItem {
+.resultTerm {
   font-size: theme.font-size("sm");
-  color: var(--color-fd-muted-foreground);
-}
-
-.resultLabel {
+  color: theme.color("muted");
   font-weight: theme.font-weight("medium");
+  margin: 0;
 }
 
 .resultValue {
-  font-family:
-    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: theme.font-family("monospace");
+  font-size: theme.font-size("sm");
+  margin: 0;
+  margin-bottom: theme.spacing(2);
 }
diff --git a/apps/developer-hub/src/components/RewardSimulator/index.tsx b/apps/developer-hub/src/components/RewardSimulator/index.tsx
index 468b413bcb..168c55489d 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.tsx
+++ b/apps/developer-hub/src/components/RewardSimulator/index.tsx
@@ -3,7 +3,7 @@
 import { Card } from "@pythnetwork/component-library/Card";
 import { Label } from "@pythnetwork/component-library/unstyled/Label";
 import { Input } from "@pythnetwork/component-library/unstyled/TextField";
-import { useState, useEffect } from "react";
+import { useState, useCallback } from "react";
 
 import styles from "./index.module.scss";
 
@@ -22,40 +22,55 @@ const Sup = ({ children }: { children: React.ReactNode }) => (
 );
 
 const RewardSimulator: React.FC = () => {
-  const [publisherStake, setPublisherStake] = useState(200);
-  const [delegatorStake, setDelegatorStake] = useState(300);
-  const [maxCap, setMaxCap] = useState(500);
-  const [delegatorFee, setDelegatorFee] = useState(20);
-  const [rewardRate, setRewardRate] = useState(10);
-
-  const [publisherReward, setPublisherReward] = useState(0);
-  const [delegatorReward, setDelegatorReward] = useState(0);
-  const [publisherRewardRate, setPublisherRewardRate] = useState(0);
-  const [delegatorRewardRate, setDelegatorRewardRate] = useState(0);
-
-  useEffect(() => {
-    const totalStake = publisherStake + delegatorStake;
-    const eligibleAmount = Math.min(totalStake, maxCap);
-    const totalReward = (rewardRate / 100) * eligibleAmount;
-
-    const publisherRewardBase =
-      (rewardRate / 100) * Math.min(publisherStake, maxCap);
-    const delegatorRewardBase = totalReward - publisherRewardBase;
-
-    const delegatorFeeAmount = (delegatorFee / 100) * delegatorRewardBase;
-
-    const finalDelegatorReward = delegatorRewardBase - delegatorFeeAmount;
-    const finalPublisherReward = publisherRewardBase + delegatorFeeAmount;
-
-    setPublisherReward(Number(finalPublisherReward.toFixed(2)));
-    setDelegatorReward(Number(finalDelegatorReward.toFixed(2)));
-    setPublisherRewardRate(
-      Number(((finalPublisherReward * 100) / publisherStake).toFixed(2)),
-    );
-    setDelegatorRewardRate(
-      Number(((finalDelegatorReward * 100) / delegatorStake).toFixed(2)),
-    );
-  }, [publisherStake, delegatorStake, maxCap, delegatorFee, rewardRate]);
+  const [rewards, setRewards] = useState({
+    // These are the initial values for the reward simulator based on default values
+    publisher: 26, 
+    delegator: 24,
+    publisherRate: 13,
+    delegatorRate: 8,
+  });
+
+  const doSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
+    e.currentTarget.requestSubmit();
+  }, []);
+
+  const recalculateRewards = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+
+      const publisherStake = Number(formData.get("publisherStake")) || 0;
+      const delegatorStake = Number(formData.get("delegatorStake")) || 0;
+      const maxCap = Number(formData.get("maxCap")) || 0;
+      const delegatorFee = Number(formData.get("delegatorFee")) || 0;
+      const rewardRate = Number(formData.get("rewardRate")) || 0;
+
+      const totalStake = publisherStake + delegatorStake;
+      const eligibleAmount = Math.min(totalStake, maxCap);
+      const totalReward = (rewardRate / 100) * eligibleAmount;
+
+      const publisherRewardBase =
+        (rewardRate / 100) * Math.min(publisherStake, maxCap);
+      const delegatorRewardBase = totalReward - publisherRewardBase;
+
+      const delegatorFeeAmount = (delegatorFee / 100) * delegatorRewardBase;
+
+      const finalDelegatorReward = delegatorRewardBase - delegatorFeeAmount;
+      const finalPublisherReward = publisherRewardBase + delegatorFeeAmount;
+
+      setRewards({
+        publisher: Number(finalPublisherReward.toFixed(2)),
+        delegator: Number(finalDelegatorReward.toFixed(2)),
+        publisherRate: Number(
+          ((finalPublisherReward * 100) / publisherStake).toFixed(2),
+        ),
+        delegatorRate: Number(
+          ((finalDelegatorReward * 100) / delegatorStake).toFixed(2),
+        ),
+      });
+    },
+    [],
+  );
 
   return (
     <Card
@@ -64,171 +79,151 @@ const RewardSimulator: React.FC = () => {
       nonInteractive
       className={styles.card}
     >
-      <div className={styles.inputGrid}>
-        <div className={styles.inputGroup}>
-          <Label htmlFor="publisher-stake">
-            Publisher Stake (
-            <MathExpression>
-              S<Sub>p</Sub>
-              <Sup>p</Sup>
-            </MathExpression>
-            ):
-          </Label>
-          <Input
-            id="publisher-stake"
-            type="number"
-            value={publisherStake}
-            onChange={(e) => {
-              setPublisherStake(Number(e.target.value));
-            }}
-            className={styles.input ?? ""}
-            min="0"
-          />
-        </div>
+      <form onSubmit={recalculateRewards} onChange={doSubmit}>
+        <div className={styles.inputGrid}>
+          <div className={styles.inputGroup}>
+            <Label htmlFor="publisher-stake">
+              Publisher Stake (
+              <MathExpression>
+                S<Sub>p</Sub>
+                <Sup>p</Sup>
+              </MathExpression>
+              ):
+            </Label>
+            <Input
+              id="publisher-stake"
+              name="publisherStake"
+              type="number"
+              defaultValue={200}
+              className={styles.input ?? ""}
+              min="0"
+            />
+          </div>
 
-        <div className={styles.inputGroup}>
-          <Label htmlFor="delegator-stake">
-            Delegator Stake (
-            <MathExpression>
-              S<Sub>p</Sub>
-              <Sup>d</Sup>
-            </MathExpression>
-            ):
-          </Label>
-          <Input
-            id="delegator-stake"
-            type="number"
-            value={delegatorStake}
-            onChange={(e) => {
-              setDelegatorStake(Number(e.target.value));
-            }}
-            className={styles.input ?? ""}
-            min="0"
-          />
-        </div>
+          <div className={styles.inputGroup}>
+            <Label htmlFor="delegator-stake">
+              Delegator Stake (
+              <MathExpression>
+                S<Sub>p</Sub>
+                <Sup>d</Sup>
+              </MathExpression>
+              ):
+            </Label>
+            <Input
+              id="delegator-stake"
+              name="delegatorStake"
+              type="number"
+              defaultValue={300}
+              className={styles.input ?? ""}
+              min="0"
+            />
+          </div>
 
-        <div className={styles.inputGroup}>
-          <Label htmlFor="max-cap">
-            Maximum Cap (
-            <MathExpression>
-              C<Sub>p</Sub>
-            </MathExpression>
-            ):
-          </Label>
-          <Input
-            id="max-cap"
-            type="number"
-            value={maxCap}
-            onChange={(e) => {
-              setMaxCap(Number(e.target.value));
-            }}
-            className={styles.input ?? ""}
-            min="0"
-          />
-        </div>
+          <div className={styles.inputGroup}>
+            <Label htmlFor="max-cap">
+              Maximum Cap (
+              <MathExpression>
+                C<Sub>p</Sub>
+              </MathExpression>
+              ):
+            </Label>
+            <Input
+              id="max-cap"
+              name="maxCap"
+              type="number"
+              defaultValue={500}
+              className={styles.input ?? ""}
+              min="0"
+            />
+          </div>
 
-        <div className={styles.inputGroup}>
-          <Label htmlFor="delegator-fee">
-            Delegator Fee (<MathExpression>f</MathExpression>) (%):
-          </Label>
-          <Input
-            id="delegator-fee"
-            type="number"
-            value={delegatorFee}
-            onChange={(e) => {
-              setDelegatorFee(Number(e.target.value));
-            }}
-            className={styles.input ?? ""}
-            min="0"
-            max="100"
-            step="0.1"
-          />
-        </div>
+          <div className={styles.inputGroup}>
+            <Label htmlFor="delegator-fee">
+              Delegator Fee (<MathExpression>f</MathExpression>) (%):
+            </Label>
+            <Input
+              id="delegator-fee"
+              name="delegatorFee"
+              type="number"
+              defaultValue={20}
+              className={styles.input ?? ""}
+              min="0"
+              max="100"
+              step="0.1"
+            />
+          </div>
 
-        <div className={styles.inputGroup}>
-          <Label htmlFor="reward-rate">
-            Reward Rate (<MathExpression>r</MathExpression>) (%):
-          </Label>
-          <Input
-            id="reward-rate"
-            type="number"
-            value={rewardRate}
-            onChange={(e) => {
-              setRewardRate(Number(e.target.value));
-            }}
-            className={styles.input ?? ""}
-            min="0"
-            max="100"
-            step="0.1"
-          />
+          <div className={styles.inputGroup}>
+            <Label htmlFor="reward-rate">
+              Reward Rate (<MathExpression>r</MathExpression>) (%):
+            </Label>
+            <Input
+              id="reward-rate"
+              name="rewardRate"
+              type="number"
+              defaultValue={10}
+              className={styles.input ?? ""}
+              min="0"
+              max="100"
+              step="0.1"
+            />
+          </div>
         </div>
-      </div>
-
-      <div className={styles.resultsSection}>
-        <div className={styles.resultsGrid}>
-          <div className={styles.resultGroup}>
-            <h4 className={styles.resultTitle}>Calculated Rewards</h4>
-            <div className={styles.resultValues}>
-              <p className={styles.resultItem}>
-                <span className={styles.resultLabel}>
+
+        <div className={styles.resultsSection}>
+          <div className={styles.resultsGrid}>
+            <div className={styles.resultGroup}>
+              <h4 className={styles.resultTitle}>Calculated Rewards</h4>
+              <dl className={styles.resultList}>
+                <dt className={styles.resultTerm}>
                   Publisher Reward (
                   <MathExpression>
                     R<Sup>p</Sup>
                     <Sub>p</Sub>
                   </MathExpression>
                   ):
-                </span>{" "}
-                <span className={styles.resultValue}>{publisherReward}</span>
-              </p>
-              <p className={styles.resultItem}>
-                <span className={styles.resultLabel}>
+                </dt>
+                <dd className={styles.resultValue}>{rewards.publisher}</dd>
+                <dt className={styles.resultTerm}>
                   Delegator Reward (
                   <MathExpression>
                     R<Sup>d</Sup>
                     <Sub>p</Sub>
                   </MathExpression>
                   ):
-                </span>{" "}
-                <span className={styles.resultValue}>{delegatorReward}</span>
-              </p>
+                </dt>
+                <dd className={styles.resultValue}>{rewards.delegator}</dd>
+              </dl>
             </div>
-          </div>
 
-          <div className={styles.resultGroup}>
-            <h4 className={styles.resultTitle}>
-              Calculated Reward Rates (Yearly)
-            </h4>
-            <div className={styles.resultValues}>
-              <p className={styles.resultItem}>
-                <span className={styles.resultLabel}>
+            <div className={styles.resultGroup}>
+              <h4 className={styles.resultTitle}>
+                Calculated Reward Rates (Yearly)
+              </h4>
+              <dl className={styles.resultList}>
+                <dt className={styles.resultTerm}>
                   Publisher Rate (
                   <MathExpression>
                     r<Sup>p</Sup>
                     <Sub>p</Sub>
                   </MathExpression>
                   ):
-                </span>{" "}
-                <span className={styles.resultValue}>
-                  {publisherRewardRate}%
-                </span>
-              </p>
-              <p className={styles.resultItem}>
-                <span className={styles.resultLabel}>
+                </dt>
+                <dd className={styles.resultValue}>{rewards.publisherRate}%</dd>
+                <dt className={styles.resultTerm}>
                   Delegator Rate (
                   <MathExpression>
                     r<Sup>d</Sup>
                     <Sub>p</Sub>
                   </MathExpression>
                   ):
-                </span>{" "}
-                <span className={styles.resultValue}>
-                  {delegatorRewardRate}%
-                </span>
-              </p>
+                </dt>
+                <dd className={styles.resultValue}>{rewards.delegatorRate}%</dd>
+              </dl>
             </div>
           </div>
         </div>
-      </div>
+      </form>
     </Card>
   );
 };
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index ba1e93b1d5..0587c74df4 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -30,6 +30,21 @@ $font-weight: (
   @return map-get-strict($font-weight, $weight);
 }
 
+$font-family: (
+  "monospace": (
+    "ui-monospace",
+    "sfmono-regular",
+    "consolas",
+    "Liberation Mono",
+    "menlo",
+    "monospace",
+  ),
+);
+
+@function font-family($family) {
+  @return map-get-strict($font-family, $family);
+}
+
 $font-size: (
   "xxs": 0.6875rem,
   "xs": 0.75rem,

From 16903fd082eeb71c982c2678d0104eec4f5671bf Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Thu, 18 Sep 2025 13:22:30 +0530
Subject: [PATCH 6/8] formating

---
 apps/developer-hub/src/components/RewardSimulator/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/developer-hub/src/components/RewardSimulator/index.tsx b/apps/developer-hub/src/components/RewardSimulator/index.tsx
index 168c55489d..c647533c72 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.tsx
+++ b/apps/developer-hub/src/components/RewardSimulator/index.tsx
@@ -24,7 +24,7 @@ const Sup = ({ children }: { children: React.ReactNode }) => (
 const RewardSimulator: React.FC = () => {
   const [rewards, setRewards] = useState({
     // These are the initial values for the reward simulator based on default values
-    publisher: 26, 
+    publisher: 26,
     delegator: 24,
     publisherRate: 13,
     delegatorRate: 8,

From 84350cc7a584e00742e384adc6af593f7eee1bbd Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Thu, 18 Sep 2025 19:20:06 +0530
Subject: [PATCH 7/8] use tailwind font

---
 .../components/RewardSimulator/index.module.scss  |  2 +-
 packages/component-library/src/theme.scss         | 15 ---------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/apps/developer-hub/src/components/RewardSimulator/index.module.scss b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
index 458d458171..aeeab5b372 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.module.scss
+++ b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
@@ -79,7 +79,7 @@
 }
 
 .resultValue {
-  font-family: theme.font-family("monospace");
+  font-family: var(--font-mono);
   font-size: theme.font-size("sm");
   margin: 0;
   margin-bottom: theme.spacing(2);
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index 0587c74df4..ba1e93b1d5 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -30,21 +30,6 @@ $font-weight: (
   @return map-get-strict($font-weight, $weight);
 }
 
-$font-family: (
-  "monospace": (
-    "ui-monospace",
-    "sfmono-regular",
-    "consolas",
-    "Liberation Mono",
-    "menlo",
-    "monospace",
-  ),
-);
-
-@function font-family($family) {
-  @return map-get-strict($font-family, $family);
-}
-
 $font-size: (
   "xxs": 0.6875rem,
   "xs": 0.75rem,

From 742bdf80acf1afd353fdbb3f5070821ac836e400 Mon Sep 17 00:00:00 2001
From: nidhi-singh02 <nidhi2894@gmail.com>
Date: Thu, 18 Sep 2025 20:01:18 +0530
Subject: [PATCH 8/8] Revert "use tailwind font"

This reverts commit 84350cc7a584e00742e384adc6af593f7eee1bbd.
---
 .../components/RewardSimulator/index.module.scss  |  2 +-
 packages/component-library/src/theme.scss         | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/developer-hub/src/components/RewardSimulator/index.module.scss b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
index aeeab5b372..458d458171 100644
--- a/apps/developer-hub/src/components/RewardSimulator/index.module.scss
+++ b/apps/developer-hub/src/components/RewardSimulator/index.module.scss
@@ -79,7 +79,7 @@
 }
 
 .resultValue {
-  font-family: var(--font-mono);
+  font-family: theme.font-family("monospace");
   font-size: theme.font-size("sm");
   margin: 0;
   margin-bottom: theme.spacing(2);
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index ba1e93b1d5..0587c74df4 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -30,6 +30,21 @@ $font-weight: (
   @return map-get-strict($font-weight, $weight);
 }
 
+$font-family: (
+  "monospace": (
+    "ui-monospace",
+    "sfmono-regular",
+    "consolas",
+    "Liberation Mono",
+    "menlo",
+    "monospace",
+  ),
+);
+
+@function font-family($family) {
+  @return map-get-strict($font-family, $family);
+}
+
 $font-size: (
   "xxs": 0.6875rem,
   "xs": 0.75rem,