Improve input validation from ManaCalculator

src/components/ManaCalculator/components/DelegatorSettings.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Details } from '@docusaurus/theme-common/Details';
 import { useManaState } from '../hooks';
-import { fromMicro, toMicro } from '../utils';
+import { fromMicro } from '../utils';
 import Select from 'react-select';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function DelegatorSettings() {
   const { state, handleOwnStakeChange, handleValidatorChange } = useManaState();
@@ -30,11 +31,13 @@ export function DelegatorSettings() {
       <label className='inlined-label'>
         Delegated amount ({state.network})
       </label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact inlined'
         value={fromMicro(state.stakedOrDelegatedTokens)}
-        onChange={(e) => handleOwnStakeChange(toMicro(Number(e.target.value)))}
-      ></input>
+        min={0}
+        max={fromMicro(state.heldTokens)}
+        onChange={handleOwnStakeChange}
+      />
     </Details>
   );
 }

src/components/ManaCalculator/components/OtherParametersSection.tsx

@@ -4,6 +4,7 @@ import Select from 'react-select';
 import { UserType } from '../enums';
 import { CongestionType } from '../enums';
 import { AdvancedSettingsValidator } from './AdvancedSettingsValidator';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function OtherParametersSection() {
   const {
@@ -34,18 +35,22 @@ export function OtherParametersSection() {
       />
       <br />
       <label className='inlined-label'>Initial epoch</label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact inlined'
+        min={1}
+        max={state.finalEpoch}
         value={state.initialEpoch}
-        onChange={(e) => handleInitialEpochChange(Number(e.target.value))}
-      ></input>
+        onChange={handleInitialEpochChange}
+      />
       <br />
       <label className='inlined-label'>Final epoch</label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact inlined'
+        min={state.initialEpoch}
+        max={Number.MAX_SAFE_INTEGER}
         value={state.finalEpoch}
-        onChange={(e) => handleFinalEpochChange(Number(e.target.value))}
-      ></input>
+        onChange={handleFinalEpochChange}
+      />
       {state.userType === UserType.HOLDER ? (
         <></>
       ) : (

src/components/ManaCalculator/components/RoleSection.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import { useManaState } from '../hooks';
 import Select from 'react-select';
 import { UserType } from '../enums';
-import { fromMicro, toMicro } from '../utils';
+import { fromMicro } from '../utils';
 import { ValidatorSettings } from './ValidatorSettings';
 import { DelegatorSettings } from './DelegatorSettings';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function RoleSection() {
-  const { state, handleUserChange, handleOwnHoldChange } = useManaState();
+  const { state, handleUserChange, handleOwnHoldChange, maxAvailableSupply } =
+    useManaState();
+
   return (
     <div className='mana_calculator__card'>
       <h4>Role configuration</h4>
@@ -27,11 +30,13 @@ export function RoleSection() {
       />
       <br />
       <label className='inlined-label'>Owned amount ({state.network})</label>
-      <input
+      <ValidatedInput
+        min={0}
+        max={fromMicro(maxAvailableSupply + state.heldTokens)}
         className='mana_calculator__compact inlined'
         value={fromMicro(state.heldTokens)}
-        onChange={(e) => handleOwnHoldChange(toMicro(Number(e.target.value)))}
-      ></input>
+        onChange={handleOwnHoldChange}
+      />
       <br />
       {state.userType === UserType.VALIDATOR ? (
         <ValidatorSettings />

src/components/ManaCalculator/components/ValidatorCard.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useManaState } from '../hooks';
 import { ValidatorProps } from '../types';
-import { fromMicro, toMicro } from '../utils';
+import { fromMicro } from '../utils';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function ValidatorCard({
   validator,
@@ -16,36 +17,54 @@ export function ValidatorCard({
     handleDelegatedStakeChange,
     handlePFChange,
     handleFCChange,
+    maxAvailableSupply,
   } = useManaState();
+
+  const maxValidatorLockedStake =
+    fromMicro(maxAvailableSupply) + fromMicro(validator.lockedStake);
+
+  const maxValidatorDelegatedStake =
+    fromMicro(maxAvailableSupply) + fromMicro(validator.delegatedStake);
+
   return (
     <>
       <div className='col col--2'>Validator {id + 1}</div>
-      <input
-        className='col col--2 align-right horizontal-spaced'
-        value={fromMicro(validator.lockedStake)}
-        onChange={(e) => handleStakeChange(toMicro(Number(e.target.value)), id)}
-      ></input>
-      <input
-        className='col col--2 align-right horizontal-spaced'
-        value={fromMicro(validator.delegatedStake)}
-        onChange={(e) =>
-          handleDelegatedStakeChange(toMicro(Number(e.target.value)), id)
-        }
-      ></input>
-      <input
-        className='col col--2 align-right horizontal-spaced'
-        type='number'
-        step='0.01'
-        value={validator.performanceFactor}
-        onChange={(e) => handlePFChange(Number(e.target.value), id)}
-      ></input>
-      <input
-        className='col col--2 align-right horizontal-spaced'
-        type='number'
-        step='0.01'
-        value={validator.fixedCost}
-        onChange={(e) => handleFCChange(Number(e.target.value), id)}
-      ></input>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ValidatedInput
+          className='w-full'
+          min={0}
+          max={maxValidatorLockedStake}
+          value={fromMicro(validator.lockedStake)}
+          onChange={(value: string) => handleStakeChange(value, id)}
+        />
+      </div>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ValidatedInput
+          className='w-full'
+          min={0}
+          max={maxValidatorDelegatedStake}
+          value={fromMicro(validator.delegatedStake)}
+          onChange={(value: string) => handleDelegatedStakeChange(value, id)}
+        />
+      </div>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ValidatedInput
+          className='w-full'
+          min={0}
+          max={1}
+          value={validator.performanceFactor}
+          onChange={(value: string) => handlePFChange(value, id)}
+        />
+      </div>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ValidatedInput
+          className='w-full'
+          min={0}
+          max={Number.MAX_SAFE_INTEGER}
+          value={validator.fixedCost}
+          onChange={(value: string) => handleFCChange(value, id)}
+        />
+      </div>
       <button
         className=' button button--remove mana-calculator__button mana-calculator__transparent-button'
         onClick={() => handleDelete(id)}

src/components/ManaCalculator/components/ValidatorSettings.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Details } from '@docusaurus/theme-common/Details';
 import { useManaState } from '../hooks';
-import { fromMicro, toMicro, roundMax } from '../utils';
+import { fromMicro, roundMax } from '../utils';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function ValidatorSettings() {
   const {
@@ -10,7 +11,14 @@ export function ValidatorSettings() {
     handleOwnFCChange,
     handleOwnStakeChange,
     handleAttractedNewDelegatedStakeChange,
+    maxAvailableSupply,
   } = useManaState();
+
+  const maxAttractedNewDelegatedStake = roundMax(
+    fromMicro(maxAvailableSupply + state.validator.attractedNewDelegatedStake),
+    0,
+  );
+
   return (
     <Details
       summary='Validator Settings'
@@ -19,42 +27,44 @@ export function ValidatorSettings() {
       <label className='inlined-long-label'>
         Staked amount ({state.network})
       </label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact inlined'
+        min={0}
+        max={fromMicro(state.heldTokens)}
         value={fromMicro(state.stakedOrDelegatedTokens)}
-        onChange={(e) => handleOwnStakeChange(toMicro(Number(e.target.value)))}
-      ></input>
+        onChange={handleOwnStakeChange}
+      />
       <br />
       <label className='inlined-long-label'>Performance factor</label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact input--vertical-spaced'
-        type='number'
-        step='0.01'
+        min={0}
+        max={1}
         value={state.validator.performanceFactor}
-        onChange={(e) => handleOwnPFChange(Number(e.target.value))}
-      ></input>
+        onChange={handleOwnPFChange}
+      />
       <br />
       <label className='inlined-long-label'>Fixed costs</label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact input--vertical-spaced'
-        type='number'
-        step='0.01'
+        min={0}
+        max={Number.MAX_SAFE_INTEGER}
         value={state.validator.fixedCost}
-        onChange={(e) => handleOwnFCChange(Number(e.target.value))}
-      ></input>
+        onChange={handleOwnFCChange}
+      />
       <label className='inlined-long-label'>
         Attracted new delegated stake ({state.network})
       </label>
-      <input
+      <ValidatedInput
         className='mana_calculator__compact input--vertical-spaced'
+        min={0}
+        max={maxAttractedNewDelegatedStake}
         value={roundMax(
           fromMicro(state.validator.attractedNewDelegatedStake),
           0,
         )}
-        onChange={(e) =>
-          handleAttractedNewDelegatedStakeChange(Number(e.target.value))
-        }
-      ></input>
+        onChange={handleAttractedNewDelegatedStakeChange}
+      ></ValidatedInput>
     </Details>
   );
 }