(first example)

Author: aditya520

components/StakingCapBar.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+const StakingCapBar = () => {
+  const [maxRewardRate, setMaxRewardRate] = useState(10);
+
+  const barWidth = 300;
+  const barHeight = 30;
+
+  return (
+    <div className="flex flex-col items-start p-4 max-w-md">
+      <h2 className="text-xl font-bold mb-2">Example:</h2>
+      <div className="mb-4 w-full">
+        <label htmlFor="rewardRateSlider" className="block text-sm font-medium text-gray-700 mb-1">
+          Max Reward Rate: {maxRewardRate}%
+        </label>
+        <input
+          type="range"
+          id="rewardRateSlider"
+          min="0"
+          max="100"
+          value={maxRewardRate}
+          onChange={(e) => setMaxRewardRate(Number(e.target.value))}
+          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+        />
+      </div>
+      <div className="relative w-full h-8 bg-gray-200 rounded">
+        <div 
+          className="absolute top-0 left-0 h-full bg-blue-500 rounded"
+          style={{ width: `${maxRewardRate}%` }}
+        ></div>
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-between px-2">
+          <span className="text-sm font-semibold">0%</span>
+          <span className="text-sm font-semibold">100%</span>
+        </div>
+      </div>
+      <p className="mt-2 text-sm text-gray-600">Max Reward Rate = {maxRewardRate}%</p>
+    </div>
+  );
+};
+
+export default StakingCapBar;

pages/home/pyth-token.mdx

@@ -20,19 +20,19 @@ Governance uses a 1:1 coin-voting system, where each staked token confers one vo
 Any PYTH Token holder can submit proposals to the Pyth DAO as long as they have **0.25% **of the total PYTH tokens staked.
 At the end of the **7 day** voting period, a proposal is passes if it meets the following conditions:
 
-- More yesses have been cast than nos.
+- **More yesses** have been cast than nos.
 - The "**Approval Quorum**" has been met. \
   **Approval Quorum** is a percentage of staked PYTH tokens that must have voted yes for the proposal to pass. "Community Vote Threshold Percentage" is expressed as percentage of staked tokens at the start of the voting period for the proposal. This percentage threshold can vary depending on the type of proposal. The current threshold can be found in the "Governances" sections of the [parameters of the DAO](https://app.realms.today/dao/PYTH/params).
 
 Please note that the scope of community governance proposals may be expanded if the PYTH token holders (or the Pyth DAO) decide so.
 
 ### Staking PYTH for Oracle Integrity
 
-The Pyth Network is built to give decentralized applications reliable and trustworthy data. The quality of the data it provides is paramount for the functioning of these applications and the overall success of the network.
+The Pyth Network is built to provide decentralized applications with reliable and trustworthy data. The quality of the data it provides is paramount for these application's functions and the network's overall success.
 
-Pyth's [Oracle Integrity Staking] (OIS) concentrates the production of quality data in the hands of a limited set of semi-trusted entities to achieve more coverage and lower latency than the competition. The responsibility of Publishers over data quality is not just ethical but also incentivized through economics:
+Pyth's [Oracle Integrity Staking] (OIS) concentrates on producing quality data in the hands of a limited set of semi-trusted entities to achieve more coverage and lower latency than the competition. The responsibility of Publishers over data quality is not just ethical but also incentivized through economics:
 
 - **Staking and Slashing:** Publishers can self-stake PYTH tokens as collateral. It also allows other stakers to choose publishers to delegate their PYTH tokens. In the event of data inaccuracies or inconsistencies, a portion of this stake can be slashed as a penalty. This mechanism ensures that publishers have a vested interest in providing accurate data
-- **Reputation:** The reputation of data publishers is directly linked to the quality of data they provide. Publishers with a track record of providing accurate data are more likely to be trusted and attract more interest
+- **Reputation:** The reputation of data publishers is directly linked to the quality of data they provide. Publishers with a track record of providing accurate data are more likely to be trusted and attract more interest.
 
 </Steps>

pages/home/pyth-token/ois/examples.mdx

@@ -0,0 +1,45 @@
+import StakingCapBar from '@/components/StakingCapBar'
+
+# Examples(WIP)
+
+
+### Example 1:Only Publisher State
+
+$$
+\text{Publisher's Stake} \quad{S^p_p} = 100
+$$
+
+$$
+\text{Delegator Stake} \quad{S^d_p} = 0
+$$
+
+$$
+\text{Total Stake} \quad{S_p} = {S^p_p} + {S^d_p} = 100
+$$
+
+$$
+\text{Pool Cap} \quad{C}_p = 500
+$$
+
+$$
+\text{Total Amount eligible for Reward} \quad{R_a} = min({S}_p, {C}_p) = min(500, 100) = 100
+$$
+
+
+
+
+$$
+\text{Reward Rate} \quad{r} = 10\%
+$$
+
+$$
+\text{Total Reward} \quad{R_p} = {r} \times {R_a} = 10\% \times 100 = 10
+$$
+
+$$
+\text{Publisher Reward} \quad{R^p_p} = {r} \times min({S^p_p}, {C}_p) = 10\% \times 100 = 10
+$$
+
+$$
+\text{Delegator Reward} \quad{R^d_p} = {r} \times min({S^d_p}, {C}_p) = 10\% \times 0 = 0
+$$

tsconfig.json

@@ -13,7 +13,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]