fix: improve input validation

iotaledger · Nov 16, 2023 · e9b449a · e9b449a
1 parent 9a39697
commit e9b449a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
@@ -35,13 +35,17 @@ export function OtherParametersSection() {
       <label className='inlined-label'>Initial epoch</label>
       <input
         className='mana_calculator__compact inlined'
+        type='number'
+        min='0'
         value={state.initialEpoch}
         onChange={(e) => handleInitialEpochChange(Number(e.target.value))}
       ></input>
       <br />
       <label className='inlined-label'>Final epoch</label>
       <input
         className='mana_calculator__compact inlined'
+        type='number'
+        min={state.initialEpoch + 1}
         value={state.finalEpoch}
         onChange={(e) => handleFinalEpochChange(Number(e.target.value))}
       ></input>

diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -37,6 +37,8 @@ export function RoleSection() {
       <label className='inlined-label'>Held amount ({state.network})</label>
       <input
         className='mana_calculator__compact inlined'
+        type='number'
+        min='0'
         value={fromMicro(state.heldTokens)}
         onChange={(e) => handleOwnHoldChange(toMicro(Number(e.target.value)))}
       ></input>
@@ -46,6 +48,8 @@ export function RoleSection() {
           <label className='inlined-label'>Stake ({state.network})</label>
           <input
             className='mana_calculator__compact inlined'
+            type='number'
+            min='0'
             value={fromMicro(state.stakedOrDelegatedTokens)}
             onChange={(e) =>
               handleOwnStakeChange(toMicro(Number(e.target.value)))
@@ -72,6 +76,8 @@ export function RoleSection() {
           </label>
           <input
             className='mana_calculator__compact inlined'
+            type='number'
+            min='0'
             value={fromMicro(state.stakedOrDelegatedTokens)}
             onChange={(e) =>
               handleOwnStakeChange(toMicro(Number(e.target.value)))

diff --git a/src/components/ManaCalculator/components/ValidatorCard.tsx b/src/components/ManaCalculator/components/ValidatorCard.tsx
@@ -22,11 +22,14 @@ export function ValidatorCard({
       <div className='col col--2'>Validator {id + 1}</div>
       <input
         className='col col--2 align-right horizontal-spaced'
+        type='number'
+        min='0'
         value={fromMicro(validator.lockedStake)}
         onChange={(e) => handleStakeChange(toMicro(Number(e.target.value)), id)}
       ></input>
       <input
         className='col col--2 align-right horizontal-spaced'
+        type='number'
         value={fromMicro(validator.delegatedStake)}
         onChange={(e) =>
           handleDelegatedStakeChange(toMicro(Number(e.target.value)), id)
@@ -36,12 +39,15 @@ export function ValidatorCard({
         className='col col--2 align-right horizontal-spaced'
         type='number'
         step='0.01'
+        min='0'
+        max='1'
         value={validator.performanceFactor}
         onChange={(e) => handlePFChange(Number(e.target.value), id)}
       ></input>
       <input
         className='col col--2 align-right horizontal-spaced'
         type='number'
+        min='0'
         step='0.01'
         value={validator.fixedCost}
         onChange={(e) => handleFCChange(Number(e.target.value), id)}

diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -27,6 +27,8 @@ export function ValidatorSettings() {
       <label className='inlined-long-label'>Performance factor</label>
       <input
         className='mana_calculator__compact input--vertical-spaced'
+        min='0'
+        max='1'
         type='number'
         step='0.01'
         value={performanceFactor}
@@ -36,6 +38,7 @@ export function ValidatorSettings() {
       <label className='inlined-long-label'>Fixed costs</label>
       <input
         className='mana_calculator__compact input--vertical-spaced'
+        min='0'
         type='number'
         step='0.01'
         value={fixedCost}
@@ -46,6 +49,9 @@ export function ValidatorSettings() {
       <input
         className='mana_calculator__compact input--vertical-spaced'
         value={shareOfYourStakeLocked}
+        type='number'
+        min='0'
+        max='100'
         onChange={(e) =>
           handleShareOfYourStakeLockedChange(Number(e.target.value))
         }
@@ -56,6 +62,8 @@ export function ValidatorSettings() {
       </label>
       <input
         className='mana_calculator__compact input--vertical-spaced'
+        type='number'
+        min='0'
         value={attractedNewDelegatedStake}
         onChange={(e) =>
           handleAttractedNewDelegatedStakeChange(Number(e.target.value))
@@ -67,6 +75,10 @@ export function ValidatorSettings() {
       </label>
       <input
         className='mana_calculator__compact input--vertical-spaced '
+        min='0'
+        max='1'
+        step='0.01'
+        type='number'
         value={attractedDelegatedStakeFromOtherPools}
         onChange={(e) =>
           handleAttractedDelegatedStakeFromOtherPoolsChange(

diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -64,6 +64,7 @@ export function useGivenManaState(
   }
 
   function handlePFChange(value: number, id: number) {
+    if (value < 0 || value > 1) return;
     setState({
       ...state,
       validators: state.validators.map((validator, i) => {
@@ -88,6 +89,7 @@ export function useGivenManaState(
   }
 
   function handleOwnStakeChange(value: number) {
+    if (value > state.heldTokens) return;
     setState({
       ...state,
       [getStakedOrDelegated(state.userType)]: value,
@@ -109,6 +111,7 @@ export function useGivenManaState(
   }
 
   function handleOwnPFChange(value: number) {
+    if (value < 0 || value > 1) return;
     setState({
       ...state,
       validator: { ...state.validator, performanceFactor: value },
@@ -147,13 +150,15 @@ export function useGivenManaState(
   }
 
   function handleInitialEpochChange(value: number) {
+    if (value > state.finalEpoch) return;
     setState({
       ...state,
       initialEpoch: value,
     });
   }
 
   function handleFinalEpochChange(value: number) {
+    if (state.initialEpoch > value) return;
     setState({
       ...state,
       finalEpoch: value,