Improve input validation from ManaCalculator

src/components/ManaCalculator/components/DelegatorSettings.tsx

@@ -32,6 +32,8 @@ export function DelegatorSettings() {
       </label>
       <input
         className='mana_calculator__compact inlined'
+        type='number'
+        min='0'
         value={fromMicro(state.stakedOrDelegatedTokens)}
         onChange={(e) => handleOwnStakeChange(toMicro(Number(e.target.value)))}
       ></input>

src/components/ManaCalculator/components/OtherParametersSection.tsx

@@ -36,13 +36,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>

src/components/ManaCalculator/components/RoleSection.tsx

@@ -29,6 +29,8 @@ export function RoleSection() {
       <label className='inlined-label'>Owned 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>

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

src/components/ManaCalculator/components/ValidatorSettings.tsx

@@ -21,13 +21,17 @@ export function ValidatorSettings() {
       </label>
       <input
         className='mana_calculator__compact inlined'
+        type='number'
+        min='0'
         value={fromMicro(state.stakedOrDelegatedTokens)}
         onChange={(e) => handleOwnStakeChange(toMicro(Number(e.target.value)))}
       ></input>
       <br />
       <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={state.validator.performanceFactor}
@@ -37,6 +41,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={state.validator.fixedCost}
@@ -47,6 +52,8 @@ export function ValidatorSettings() {
       </label>
       <input
         className='mana_calculator__compact input--vertical-spaced'
+        type='number'
+        min='0'
         value={roundMax(
           fromMicro(state.validator.attractedNewDelegatedStake),
           0,

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 },
@@ -130,13 +133,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,