Skip to content

Commit 8118f50

Browse files
aditya520aditya520
committed
pre-commit
1 parent 196eea1 commit 8118f50

File tree

5 files changed

+136
-145
lines changed

5 files changed

+136
-145
lines changed

‎components/RewardSimulator.tsx

Lines changed: 78 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useState, useEffect } from 'react';
2-
import 'katex/dist/katex.min.css';
3-
import Latex from 'react-latex-next';
1+
import React, { useState, useEffect } from "react";
2+
import "katex/dist/katex.min.css";
3+
import Latex from "react-latex-next";
44

55
const RewardSimulator: React.FC = () => {
66
const [publisherStake, setPublisherStake] = useState(200);
@@ -17,12 +17,13 @@ const RewardSimulator: React.FC = () => {
1717
const totalStake = publisherStake + delegatorStake;
1818
const eligibleAmount = Math.min(totalStake, maxCap);
1919
const totalReward = (rewardRate / 100) * eligibleAmount;
20-
21-
const publisherRewardBase = (rewardRate / 100) * Math.min(publisherStake, maxCap);
20+
21+
const publisherRewardBase =
22+
(rewardRate / 100) * Math.min(publisherStake, maxCap);
2223
const delegatorRewardBase = totalReward - publisherRewardBase;
23-
24+
2425
const delegatorFeeAmount = (delegatorFee / 100) * delegatorRewardBase;
25-
26+
2627
const finalDelegatorReward = delegatorRewardBase - delegatorFeeAmount;
2728
const finalPublisherReward = publisherRewardBase + delegatorFeeAmount;
2829

@@ -31,79 +32,79 @@ const RewardSimulator: React.FC = () => {
3132
};
3233

3334
calculateRewards();
34-
}, [publisherStake, delegatorStake, maxCap, delegatorFee, rewardRate]);
35+
}, [publisherStake, delegatorStake, maxCap, delegatorFee, rewardRate]);
3536

36-
return (
37-
<div className="border border-gray-300 dark:border-gray-700 p-6 rounded-lg">
38-
<h3 className="text-lg font-semibold mb-4">Reward Simulator</h3>
39-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
40-
<div>
41-
<label className="block mb-2">
42-
<Latex>{'Publisher Stake ($S_p^p$):'}</Latex>
43-
</label>
44-
<input
45-
type="number"
46-
value={publisherStake}
47-
onChange={(e) => setPublisherStake(Number(e.target.value))}
48-
className="w-full p-2 border rounded bg-transparent"
49-
/>
50-
</div>
51-
<div>
52-
<label className="block mb-2">
53-
<Latex>{'Delegator Stake ($S_p^d$):'}</Latex>
54-
</label>
55-
<input
56-
type="number"
57-
value={delegatorStake}
58-
onChange={(e) => setDelegatorStake(Number(e.target.value))}
59-
className="w-full p-2 border rounded bg-transparent"
60-
/>
37+
return (
38+
<div className="border border-gray-300 dark:border-gray-700 p-6 rounded-lg">
39+
<h3 className="text-lg font-semibold mb-4">Reward Simulator</h3>
40+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
41+
<div>
42+
<label className="block mb-2">
43+
<Latex>{"Publisher Stake ($S_p^p$):"}</Latex>
44+
</label>
45+
<input
46+
type="number"
47+
value={publisherStake}
48+
onChange={(e) => setPublisherStake(Number(e.target.value))}
49+
className="w-full p-2 border rounded bg-transparent"
50+
/>
51+
</div>
52+
<div>
53+
<label className="block mb-2">
54+
<Latex>{"Delegator Stake ($S_p^d$):"}</Latex>
55+
</label>
56+
<input
57+
type="number"
58+
value={delegatorStake}
59+
onChange={(e) => setDelegatorStake(Number(e.target.value))}
60+
className="w-full p-2 border rounded bg-transparent"
61+
/>
62+
</div>
63+
<div>
64+
<label className="block mb-2">
65+
<Latex>{"Maximum Cap ($C_p$):"}</Latex>
66+
</label>
67+
<input
68+
type="number"
69+
value={maxCap}
70+
onChange={(e) => setMaxCap(Number(e.target.value))}
71+
className="w-full p-2 border rounded bg-transparent"
72+
/>
73+
</div>
74+
<div>
75+
<label className="block mb-2">
76+
<Latex>{"Delegator Fee ($f$) (%):"}</Latex>
77+
</label>
78+
<input
79+
type="number"
80+
value={delegatorFee}
81+
onChange={(e) => setDelegatorFee(Number(e.target.value))}
82+
className="w-full p-2 border rounded bg-transparent"
83+
/>
84+
</div>
85+
<div>
86+
<label className="block mb-2">
87+
<Latex>{"Reward Rate ($r$) (%):"}</Latex>
88+
</label>
89+
<input
90+
type="number"
91+
value={rewardRate}
92+
onChange={(e) => setRewardRate(Number(e.target.value))}
93+
className="w-full p-2 border rounded bg-transparent"
94+
/>
95+
</div>
6196
</div>
62-
<div>
63-
<label className="block mb-2">
64-
<Latex>{'Maximum Cap ($C_p$):'}</Latex>
65-
</label>
66-
<input
67-
type="number"
68-
value={maxCap}
69-
onChange={(e) => setMaxCap(Number(e.target.value))}
70-
className="w-full p-2 border rounded bg-transparent"
71-
/>
97+
<div className="mt-6">
98+
<h4 className="font-semibold mb-2">Calculated Rewards:</h4>
99+
<p>
100+
<Latex>{`Publisher Reward ($R^p_p$): ${publisherReward}`}</Latex>
101+
</p>
102+
<p>
103+
<Latex>{`Delegator Reward ($R^d_p$): ${delegatorReward}`}</Latex>
104+
</p>
72105
</div>
73-
<div>
74-
<label className="block mb-2">
75-
<Latex>{'Delegator Fee ($f$) (%):'}</Latex>
76-
</label>
77-
<input
78-
type="number"
79-
value={delegatorFee}
80-
onChange={(e) => setDelegatorFee(Number(e.target.value))}
81-
className="w-full p-2 border rounded bg-transparent"
82-
/>
83-
</div>
84-
<div>
85-
<label className="block mb-2">
86-
<Latex>{'Reward Rate ($r$) (%):'}</Latex>
87-
</label>
88-
<input
89-
type="number"
90-
value={rewardRate}
91-
onChange={(e) => setRewardRate(Number(e.target.value))}
92-
className="w-full p-2 border rounded bg-transparent"
93-
/>
94-
</div>
95-
</div>
96-
<div className="mt-6">
97-
<h4 className="font-semibold mb-2">Calculated Rewards:</h4>
98-
<p>
99-
<Latex>{`Publisher Reward ($R^p_p$): ${publisherReward}`}</Latex>
100-
</p>
101-
<p>
102-
<Latex>{`Delegator Reward ($R^d_p$): ${delegatorReward}`}</Latex>
103-
</p>
104106
</div>
105-
</div>
106-
);
107+
);
107108
};
108109

109-
export default RewardSimulator;
110+
export default RewardSimulator;

‎components/StakingCapBar.tsx

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React from "react"
1+
import React from "react";
22

33
interface StakingCapBarProps {
4-
totalLength?: number
5-
height?: number
6-
fillPercentage: number
7-
secondFillPercentage: number
8-
firstFillLabel?: string
9-
secondFillLabel?: string
10-
totalLabel?: string
4+
totalLength?: number;
5+
height?: number;
6+
fillPercentage: number;
7+
secondFillPercentage: number;
8+
firstFillLabel?: string;
9+
secondFillLabel?: string;
10+
totalLabel?: string;
1111
}
1212

1313
export default function StakingCapBar({
@@ -17,24 +17,28 @@ export default function StakingCapBar({
1717
secondFillPercentage,
1818
firstFillLabel,
1919
secondFillLabel,
20-
totalLabel
20+
totalLabel,
2121
}: StakingCapBarProps) {
22-
const borderWidth = 4
23-
const gapWidth = 2
24-
const clampedFillPercentage = Math.min(100, Math.max(0, fillPercentage))
25-
const clampedSecondFillPercentage = Math.min(100 - clampedFillPercentage, Math.max(0, secondFillPercentage))
26-
const totalFillPercentage = clampedFillPercentage + clampedSecondFillPercentage
22+
const borderWidth = 4;
23+
const gapWidth = 2;
24+
const clampedFillPercentage = Math.min(100, Math.max(0, fillPercentage));
25+
const clampedSecondFillPercentage = Math.min(
26+
100 - clampedFillPercentage,
27+
Math.max(0, secondFillPercentage)
28+
);
29+
const totalFillPercentage =
30+
clampedFillPercentage + clampedSecondFillPercentage;
2731

2832
return (
2933
<div className="flex flex-col items-start">
30-
<div
34+
<div
3135
className="rounded-lg overflow-hidden relative"
32-
style={{
33-
width: `${totalLength}px`,
36+
style={{
37+
width: `${totalLength}px`,
3438
height: `${height}px`,
3539
border: `${borderWidth}px solid #7142CF`,
36-
backgroundColor: '#FFFFFF',
37-
padding: `${gapWidth}px`
40+
backgroundColor: "#FFFFFF",
41+
padding: `${gapWidth}px`,
3842
}}
3943
role="progressbar"
4044
aria-valuenow={totalFillPercentage}
@@ -44,16 +48,16 @@ export default function StakingCapBar({
4448
<div className="flex h-full">
4549
<div
4650
className="h-full transition-all duration-300 ease-in-out relative"
47-
style={{
51+
style={{
4852
width: `${clampedFillPercentage}%`,
49-
backgroundColor: '#5c48e4'
53+
backgroundColor: "#5c48e4",
5054
}}
5155
>
5256
{firstFillLabel && (
53-
<div
57+
<div
5458
className="absolute top-full left-full transform -translate-x-1/2 mt-2 text-xs font-medium text-gray-700 whitespace-nowrap"
5559
style={{
56-
transition: 'left 300ms ease-in-out'
60+
transition: "left 300ms ease-in-out",
5761
}}
5862
>
5963
{firstFillLabel}
@@ -62,16 +66,16 @@ export default function StakingCapBar({
6266
</div>
6367
<div
6468
className="h-full transition-all duration-300 ease-in-out relative"
65-
style={{
69+
style={{
6670
width: `${clampedSecondFillPercentage}%`,
67-
backgroundColor: '#f0b6bb'
71+
backgroundColor: "#f0b6bb",
6872
}}
6973
>
7074
{secondFillLabel && (
71-
<div
75+
<div
7276
className="absolute top-full left-full transform -translate-x-1/2 mt-2 text-xs font-medium text-gray-700 whitespace-nowrap"
7377
style={{
74-
transition: 'left 300ms ease-in-out'
78+
transition: "left 300ms ease-in-out",
7579
}}
7680
>
7781
{secondFillLabel}
@@ -81,12 +85,10 @@ export default function StakingCapBar({
8185
</div>
8286
</div>
8387
{totalLabel && (
84-
<div
85-
className="absolute top-full right-0 transform translate-x-1/2 mt-2 text-xs font-medium text-gray-700 whitespace-nowrap"
86-
>
88+
<div className="absolute top-full right-0 transform translate-x-1/2 mt-2 text-xs font-medium text-gray-700 whitespace-nowrap">
8789
{totalLabel}
8890
</div>
8991
)}
9092
</div>
91-
)
92-
}
93+
);
94+
}

‎pages/home/oracle-integrity-staking/examples.mdx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import StakingCapBar from "@/components/StakingCapBar";
2-
import RewardSimulator from '@/components/RewardSimulator';
2+
import RewardSimulator from "@/components/RewardSimulator";
33

44
# Examples
55

@@ -11,7 +11,6 @@ NOTE: All the symbols used in the examples are explained in the [Mathematical Re
1111

1212
This example take the case one pool where the pool has stake from only the publisher.
1313

14-
1514
$$
1615
\begin{aligned}
1716
{S^p_p} &= 100 \\
@@ -27,10 +26,6 @@ $$
2726
\end{aligned}
2827
$$
2928

30-
{/* <div className="flex justify-center">
31-
<StakingCapBar fillPercentage={20} labelText="100" secondFillPercentage={10} />
32-
</div> */}
33-
3429
## Example 2: Publisher and Delegator Stake
3530

3631
This example take the case where the pool has stake from both the publisher and the delegator.
@@ -114,11 +109,8 @@ $$
114109

115110
In this example, the stake is uniformly slashed by 5\%, affecting both the publisher and the delegator. Slashing impact the total stake into the pool, regardless of the Cap.
116111

117-
{/* <StakingCapBar fillPercentage={50} secondFillPercentage={20} labelText="100" /> */}
118-
119-
120112
## Reward Calculator
121113

122114
Use the calculator below to calculate publisher and delegator rewards based on your inputs.
123115

124-
<RewardSimulator />
116+
<RewardSimulator />

0 commit comments

Comments
 (0)