use theme breakpoint and other comments

Author: nidhi-singh02

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;
   }
 }

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,42 +34,38 @@ 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 (
     <Card
       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,76 +156,72 @@ 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"
           />
         </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>
                     <Sub>p</Sub>
                   </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>
                     <Sub>p</Sub>
                   </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>
                     <Sub>p</Sub>
                   </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>
                     <Sub>p</Sub>
                   </MathExpression>
                   ):
                 </span>{" "}
-                <span className={clsx(styles.resultValue)}>
+                <span className={styles.resultValue}>
                   {delegatorRewardRate}%
                 </span>
               </p>