Refactored the Services section, added a comprehensive rewards page w…

…ith detailed logic and latex, began but hid an incomplete react component for estimating restaking rewards

components/RestakingRewardsCalculator.module.css

@@ -0,0 +1,121 @@
+/* RestakingRewardsCalculator.module.css */
+.addButton {
+    background-color: #667eea; /* bg-indigo-600 */
+    color: white;
+    padding: 8px 16px;
+    margin-top: 8px;
+    border: none;
+    cursor: pointer;
+    border-radius: 0.375rem; /* rounded-md */
+    display: inline-block;
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+  }
+
+  .addButton:hover {
+    background-color: #5a67d8; /* hover:bg-indigo-700 */
+  }
+
+  .removeButton {
+    background-color: #ea6666; /* bg-indigo-600 */
+    color: white;
+    padding: 8px 16px;
+    margin-top: 8px;
+    border: none;
+    cursor: pointer;
+    border-radius: 0.375rem; /* rounded-md */
+    display: inline-block;
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* font-medium */
+  }
+
+  .removeButton:hover {
+    background-color: #d85a5a; /* hover:bg-indigo-700 */
+  }
+
+
+  .calcContainer {
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap; /* Allows items to wrap to the next line */
+    gap: 20px; /* Adjust the gap between items as needed */
+    padding: 20px;
+    background-color: #4000e4;
+  }
+
+  .calcContainer > * {
+    flex: 1 1 calc(50% - 20px); /* Each child takes up half the container width minus the gap */
+  }
+
+.generalDetailsContainer {
+    max-width:30%;
+    background-color: #000e8e;
+    padding: 13px;
+}
+
+.roleInputContainer {
+    background-color: #280569;
+    padding-left: 13px;
+    padding-right: 13px;
+}
+
+  .space-y-4 > * + * {
+    margin-top: 1rem;
+  }
+
+  .selectInput,
+  .numberInput,
+  .addButton {
+    width: 100%;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 0.375rem; /* rounded-md */
+    font-size: 1rem;
+  }
+
+  .selectInput:focus,
+  .numberInput:focus {
+    outline: none;
+    border-color: #4F46E5; /* Indigo-500 */
+    box-shadow: 0 0 0 1px #4F46E5;
+  }
+
+
+  .label {
+    display: block;
+    font-size: 0.875rem; /* text-sm */
+    font-weight: medium;
+    color: #ffffff; /* Gray-700 */
+  }
+
+  .title {
+    font-size: 1.2rem; /* text-xs */
+    color: #ffffff; /* Gray-500 */
+  }
+
+  .note {
+    font-size: 0.75rem; /* text-xs */
+    color: #ffffff; /* Gray-500 */
+  }
+
+  .result {
+    padding: 1rem;
+    margin-top: 1rem;
+    background-color: #f0f4f8; /* A very light shade of blue to distinguish the result area */
+    border-radius: 0.375rem; /* rounded-md */
+    border: 1px solid #e2e8f0; /* A light gray border for subtle definition */
+  }
+
+  .resultTitle {
+    font-size: 1.125rem; /* text-lg */
+    font-weight: 600; /* Semi-bold for the title */
+    color: #374151; /* Gray-700 for contrast and readability */
+    margin-bottom: 0.5rem; /* Space between title and value */
+  }
+
+  .resultValue {
+    font-size: 1.875rem; /* text-3xl */
+    font-weight: 700; /* Bold for the value to stand out */
+    color: #1F2937; /* Gray-800 for maximum contrast and emphasis */
+  }

components/RestakingRewardsCalculator.tsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from "react";
+import RoleInput from "./RoleInput";
+import styles from "./RestakingRewardsCalculator.module.css";
+
+interface Role {
+  name: string;
+  restakeAmount: number;
+  jobDistribution: number;
+  weight: number;
+}
+
+const RestakingRewardsCalculator: React.FC = () => {
+  const [restakingProfile, setRestakingProfile] = useState("independent");
+  const [totalRestake, setTotalRestake] = useState(1000);
+  const [roles, setRoles] = useState<Role[]>([
+    { name: "", restakeAmount: 0, jobDistribution: 0, weight: 0 },
+  ]);
+  const [stakingRate, setStakingRate] = useState(0.25);
+  const [result, setResult] = useState<number | null>(null);
+
+  const calculateReward = () => {
+    const totalSupply = 100000000;
+    const idealStakingRate = 0.25;
+    const minInflation = 0.001;
+    const idealInflation = 0.02;
+    const decayRate = 0.05;
+
+    const inflationRate =
+      stakingRate <= idealStakingRate
+        ? minInflation +
+          (idealInflation - minInflation) * (stakingRate / idealStakingRate)
+        : minInflation +
+          (idealInflation - minInflation) *
+            Math.pow(2, (idealStakingRate - stakingRate) / decayRate);
+
+    const payout = inflationRate * totalSupply;
+
+    const rewardSum = roles.reduce(
+      (sum, role) => sum + role.weight * role.jobDistribution,
+      0
+    );
+    const restakeFraction =
+      restakingProfile === "independent"
+        ? roles.reduce((sum, role) => sum + role.restakeAmount, 0) /
+          totalRestake
+        : 1;
+
+    const reward =
+      payout *
+      (rewardSum +
+        (1 - roles.reduce((sum, role) => sum + role.weight, 0)) *
+          restakeFraction);
+
+    setResult(reward);
+  };
+
+  // Recalculate reward whenever relevant states change
+  useEffect(() => {
+    calculateReward();
+  }, [restakingProfile, totalRestake, roles, stakingRate]);
+
+  const addRole = () =>
+    setRoles([
+      ...roles,
+      { name: "", restakeAmount: 0, jobDistribution: 0, weight: 0 },
+    ]);
+
+  const removeRole = (index: number) =>
+    setRoles(roles.filter((_, i) => i !== index));
+
+  const updateRole = (index: number, field: keyof Role, value: string) => {
+    const updatedRoles = roles.map((role, i) =>
+      i === index
+        ? { ...role, [field]: field === "name" ? value : Number(value) }
+        : role
+    );
+    setRoles(updatedRoles);
+  };
+
+  return (
+    <div className={styles.calcContainer}>
+      {/* Restaking Profile */}
+      <div className={styles.generalDetailsContainer}>
+        <div>
+          <label htmlFor="restakingProfile" className={styles.title}>
+            Restaking Profile
+            <span className={styles.label}>
+              (Select between Independent and Shared profiles)
+            </span>
+          </label>
+          <select
+            id="restakingProfile"
+            value={restakingProfile}
+            onChange={(e) => setRestakingProfile(e.target.value)}
+            className={styles.selectInput}
+          >
+            <option value="independent">Independent</option>
+            <option value="shared">Shared</option>
+          </select>
+        </div>
+
+        {/* Total Restake Amount */}
+        <div>
+          <label htmlFor="totalRestake" className={styles.label}>
+            Total Restake Amount (TNT)
+          </label>
+          <input
+            type="number"
+            id="totalRestake"
+            value={totalRestake}
+            onChange={(e) => setTotalRestake(Number(e.target.value))}
+            className={styles.numberInput}
+            placeholder="Enter total restake amount"
+            min="0"
+          />
+        </div>
+
+        {/* Current Staking Rate */}
+        <div>
+          <label htmlFor="stakingRate" className={styles.label}>
+            Current Staking Rate (e.g., 0.25 for 25%)
+          </label>
+          <input
+            type="number"
+            id="stakingRate"
+            value={stakingRate}
+            onChange={(e) => setStakingRate(Number(e.target.value))}
+            className={styles.numberInput}
+            placeholder="Enter current staking rate"
+            step="0.01"
+            min="0"
+            max="1"
+          />
+        </div>
+      </div>
+      <div className={styles.roleInputContainer}>
+        {/* Dynamic Roles Inputs  */}
+        {roles.map((role, index) => (
+          <RoleInput
+            key={index}
+            role={role}
+            index={index}
+            updateRole={updateRole}
+            removeRole={removeRole}
+          />
+        ))}
+        <button type="button" onClick={addRole} className={styles.addButton}>
+          Add Role
+        </button>
+      </div>
+      {/* Display the calculation result */}
+      {result !== null && (
+        <div className={styles.result}>
+          <h3 className={styles.resultTitle}>Restaking Reward:</h3>
+          <p className={styles.resultValue}>{result.toFixed(2)} TNT</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RestakingRewardsCalculator;

components/RoleInput.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styles from "./RestakingRewardsCalculator.module.css";
+
+interface Role {
+  name: string;
+  restakeAmount: number;
+  jobDistribution: number;
+  weight: number;
+}
+
+interface RoleInputProps {
+  role: Role;
+  index: number;
+  updateRole: (index: number, field: keyof Role, value: string) => void;
+  removeRole: (index: number) => void;
+}
+
+const RoleInput: React.FC<RoleInputProps> = ({
+  role,
+  index,
+  updateRole,
+  removeRole,
+}) => {
+  return (
+    <div className="mt-1 flex items-center space-x-2">
+      <input
+        type="text"
+        value={role.name}
+        onChange={(e) => updateRole(index, "name", e.target.value)}
+        className={styles.input}
+        placeholder="Role name"
+      />
+      {/* Repeat for restakeAmount, jobDistribution, and weight with appropriate changes */}
+      <button
+        type="button"
+        onClick={() => removeRole(index)}
+        className={styles.removeButton}
+      >
+        Remove
+      </button>
+    </div>
+  );
+};
+
+export default RoleInput;

package.json

@@ -37,6 +37,7 @@
     "nextra-theme-docs": "2.12.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.1",
     "react-hot-toast": "2.4.0",
     "react-icons": "^4.12.0",
     "react-use": "^17.4.0",

pages/docs/_meta.json

@@ -23,9 +23,6 @@
     "title": "Services",
     "type": "doc"
   },
-  "----": {
-    "type": "separator"
-  },
   "network-information-configuration": {
     "title": "Network Configuration",
     "type": "doc"
@@ -46,9 +43,6 @@
     "title": "Govern",
     "type": "doc"
   },
-  "---": {
-    "type": "separator"
-  },
   "community": {
     "title": "Community",
     "type": "doc"

pages/docs/services/_meta.json

@@ -1,4 +1,8 @@
 {
-  "services": "MPC and ZK Services",
-  "service-provider": "Restaking and Jobs"
+  "services": "Intro to MPC and ZK Services",
+  "service-provider": "Restaking Jobs",
+  "restaking-rewards": "Restaking Rewards",
+  "restaking-reward-calc": {
+    "display": "hidden"
+  }
 }

pages/docs/services/restaking-reward-calc.mdx

@@ -0,0 +1,5 @@
+import RestakingRewardsCalculator from 'components/RestakingRewardsCalculator.tsx';
+
+# Restaking Rewards Estimator
+
+<RestakingRewardsCalculator />