From c5ddd17364103c8c6ad94301130c6e1fb6818e42 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Fri, 8 Dec 2023 14:25:49 +0100
Subject: [PATCH] Improve input validation from ManaCalculator (#1337)

---
 .../components/DelegatorSettings.tsx          |  11 +-
 .../components/OtherParametersSection.tsx     |  17 +--
 .../ManaCalculator/components/RoleSection.tsx |  15 ++-
 .../components/ValidatorCard.tsx              |  73 ++++++++-----
 .../components/ValidatorSettings.tsx          |  50 +++++----
 .../ManaCalculator/hooks/useManaState.ts      | 102 +++++++++++++-----
 src/components/ManaCalculator/styles.css      |  41 +++++++
 src/components/ManaCalculator/utils.ts        |  19 ++++
 .../ValidatedInput/ValidatedInput.tsx         |  81 ++++++++++++++
 9 files changed, 319 insertions(+), 90 deletions(-)
 create mode 100644 src/components/ValidatedInput/ValidatedInput.tsx

diff --git a/src/components/ManaCalculator/components/DelegatorSettings.tsx b/src/components/ManaCalculator/components/DelegatorSettings.tsx
index 37c8f0f3f10..d4e9284f516 100644
--- a/src/components/ManaCalculator/components/DelegatorSettings.tsx
+++ b/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>
   );
 }
diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
index 197e68d5ddd..aff21606c24 100644
--- a/src/components/ManaCalculator/components/OtherParametersSection.tsx
+++ b/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 ? (
         <></>
       ) : (
diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
index 6897fdcb869..7e0b2d27b65 100644
--- a/src/components/ManaCalculator/components/RoleSection.tsx
+++ b/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 />
diff --git a/src/components/ManaCalculator/components/ValidatorCard.tsx b/src/components/ManaCalculator/components/ValidatorCard.tsx
index 517a5293a46..139ee1b5695 100644
--- a/src/components/ManaCalculator/components/ValidatorCard.tsx
+++ b/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)}
diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
index 58ee59ab43d..fb4d8861424 100644
--- a/src/components/ManaCalculator/components/ValidatorSettings.tsx
+++ b/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,44 +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(
-            toMicro(Number(e.target.value)),
-          )
-        }
-      ></input>
+        onChange={handleAttractedNewDelegatedStakeChange}
+      ></ValidatedInput>
     </Details>
   );
 }
diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index 829c1995ed1..4406e7e1c06 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -16,6 +16,7 @@ import {
   getNetworkGenerationPerSlot,
   getNetworkSupply,
   getStakedOrDelegated,
+  getValidInputValue,
   toMicro,
 } from '../utils';
 
@@ -39,63 +40,76 @@ export function useGivenManaState(
     setState({ ...state, validators });
   }
 
-  function handleStakeChange(value: number, id: number) {
+  function handleStakeChange(value: string, id: number) {
+    const stakedTokens = getValidInputValue(value, toMicro);
+
     const newStateWithValidators = {
       ...state,
       validators: state.validators.map((validator, i) => {
         return {
           ...validator,
-          lockedStake: i === id ? value : validator.lockedStake,
+          lockedStake: i === id ? stakedTokens : validator.lockedStake,
         };
       }),
     };
+
     setState({
       ...newStateWithValidators,
-      ...getDerivedRoleValues(newStateWithValidators, state.stakedTokens),
+      ...getDerivedRoleValues(newStateWithValidators, stakedTokens),
     });
   }
 
-  function handleDelegatedStakeChange(value: number, id: number) {
+  function handleDelegatedStakeChange(value: string, id: number) {
+    const delegatedStake = getValidInputValue(value, toMicro);
     setState({
       ...state,
       validators: state.validators.map((validator, i) => {
         return {
           ...validator,
-          delegatedStake: i === id ? value : validator.delegatedStake,
+          delegatedStake: i === id ? delegatedStake : validator.delegatedStake,
         };
       }),
     });
   }
 
-  function handlePFChange(value: number, id: number) {
+  function handlePFChange(value: string, id: number) {
+    const performanceFactor = getValidInputValue(value);
     setState({
       ...state,
       validators: state.validators.map((validator, i) => {
         return {
           ...validator,
-          performanceFactor: i === id ? value : validator.performanceFactor,
+          performanceFactor:
+            i === id ? performanceFactor : validator.performanceFactor,
         };
       }),
     });
   }
 
-  function handleFCChange(value: number, id: number) {
+  function handleFCChange(value: string, id: number) {
+    const fixedCost = getValidInputValue(value);
     setState({
       ...state,
       validators: state.validators.map((validator, i) => {
         return {
           ...validator,
-          fixedCost: i === id ? value : validator.fixedCost,
+          fixedCost: i === id ? fixedCost : validator.fixedCost,
         };
       }),
     });
   }
 
-  function handleOwnStakeChange(stakedTokens: number) {
-    setState({
+  function handleOwnStakeChange(value: string) {
+    const stakedTokens = getValidInputValue(value, toMicro);
+
+    const newState: ManaCalculatorProps = {
       ...state,
       [getStakedOrDelegated(state.userType)]: stakedTokens,
-      ...getDerivedRoleValues(state, stakedTokens),
+    };
+
+    setState({
+      ...newState,
+      ...getDerivedRoleValues(newState, stakedTokens),
     });
   }
 
@@ -113,38 +127,43 @@ export function useGivenManaState(
     });
   }
 
-  function handleOwnPFChange(value: number) {
+  function handleOwnPFChange(value: string) {
+    const performanceFactor = getValidInputValue(value);
     setState({
       ...state,
-      validator: { ...state.validator, performanceFactor: value },
+      validator: { ...state.validator, performanceFactor },
     });
   }
 
-  function handleOwnFCChange(value: number) {
+  function handleOwnFCChange(value: string) {
+    const fixedCost = getValidInputValue(value);
     setState({
       ...state,
-      validator: { ...state.validator, fixedCost: value },
+      validator: { ...state.validator, fixedCost },
     });
   }
 
-  function handleAttractedNewDelegatedStakeChange(value: number) {
+  function handleAttractedNewDelegatedStakeChange(value: string) {
+    const attractedNewDelegatedStake = getValidInputValue(value, toMicro);
     setState({
       ...state,
-      validator: { ...state.validator, attractedNewDelegatedStake: value },
+      validator: { ...state.validator, attractedNewDelegatedStake },
     });
   }
 
-  function handleInitialEpochChange(value: number) {
+  function handleInitialEpochChange(value: string) {
+    const initialEpoch = getValidInputValue(value);
     setState({
       ...state,
-      initialEpoch: value,
+      initialEpoch,
     });
   }
 
-  function handleFinalEpochChange(value: number) {
+  function handleFinalEpochChange(value: string) {
+    const finalEpoch = getValidInputValue(value);
     setState({
       ...state,
-      finalEpoch: value,
+      finalEpoch,
     });
   }
 
@@ -181,14 +200,21 @@ export function useGivenManaState(
     setState({ ...state });
   }
 
-  function handleOwnHoldChange(value: number) {
-    const newState = {
+  function handleOwnHoldChange(value: string) {
+    const heldTokens = getValidInputValue(value, toMicro);
+
+    let newState = {
       ...state,
-      heldTokens: value,
-      [getStakedOrDelegated(state.userType)]: value,
+      heldTokens,
+      [getStakedOrDelegated(state.userType)]: heldTokens,
     };
 
-    setState({ ...newState, ...getDerivedRoleValues(newState, value) });
+    newState = {
+      ...newState,
+      ...getDerivedRoleValues(newState, heldTokens),
+    };
+
+    setState(newState);
   }
 
   const congestionAmount = getNetworkCongestion(
@@ -198,6 +224,27 @@ export function useGivenManaState(
   const generationPerSlot = getNetworkGenerationPerSlot(state.network);
   const stakedOrDelegatedTokens = state[getStakedOrDelegated(state.userType)];
 
+  const networkSupply = getNetworkSupply(state.network);
+
+  const userOwnedTokens = state.heldTokens;
+
+  const totalValidatorsLockedStake = state.validators.reduce(
+    (a, b) => a + b.lockedStake,
+    0,
+  );
+  const totalValidatorsDelegatedStake = state.validators.reduce(
+    (a, b) => a + b.delegatedStake,
+    0,
+  );
+
+  const maxAvailableSupply = Math.max(
+    networkSupply -
+      totalValidatorsLockedStake -
+      totalValidatorsDelegatedStake -
+      userOwnedTokens,
+    0,
+  );
+
   return {
     state: {
       ...state,
@@ -205,6 +252,7 @@ export function useGivenManaState(
       generationPerSlot,
       stakedOrDelegatedTokens,
     } as ManaState,
+    maxAvailableSupply,
     handleDelete,
     handleStakeChange,
     handleAddValidator,
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
index ed27fcb926b..3a9c8feecc3 100644
--- a/src/components/ManaCalculator/styles.css
+++ b/src/components/ManaCalculator/styles.css
@@ -120,3 +120,44 @@
   width: 200px;
   margin-bottom: 1rem !important;
 }
+
+.validated_input__wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.validated_input__error {
+  text-align: left;
+  white-space: nowrap;
+}
+
+.validator_card {
+  padding: 4px 0;
+}
+
+.validator_card .errored {
+  position: relative;
+  padding: 1.25rem 0;
+}
+
+.validator_card .errored .validated_input__error {
+  position: absolute;
+  bottom: -2px;
+}
+
+.validated_input__wrapper .validated_input__error {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+  font-size: 12px;
+  color: red;
+}
+
+.mana_calculator__compact + .validated_input__error {
+  margin-top: -0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.validated_input__wrapper input.w-full {
+  width: 100%;
+}
diff --git a/src/components/ManaCalculator/utils.ts b/src/components/ManaCalculator/utils.ts
index 5d1f2f870f8..1dc45d11194 100644
--- a/src/components/ManaCalculator/utils.ts
+++ b/src/components/ManaCalculator/utils.ts
@@ -89,3 +89,22 @@ export function getStakedOrDelegated(userType: UserType) {
 export const roundMax = function (num: number, places: number) {
   return +(Math.round(Number(num + 'e+' + places)) + 'e-' + places);
 };
+
+export function getValidInputValue(
+  num: string,
+  transformNumber?: (number: number) => number,
+): number {
+  let value = Number(Number(num).toString());
+
+  if (transformNumber) {
+    value = transformNumber(value);
+  }
+
+  const isInvalid = isNaN(value);
+
+  if (isInvalid) {
+    throw new Error('Invalid number');
+  }
+
+  return value;
+}
diff --git a/src/components/ValidatedInput/ValidatedInput.tsx b/src/components/ValidatedInput/ValidatedInput.tsx
new file mode 100644
index 00000000000..d5ed241e242
--- /dev/null
+++ b/src/components/ValidatedInput/ValidatedInput.tsx
@@ -0,0 +1,81 @@
+import React, { JSX, useEffect, useState } from 'react';
+
+interface IValidatedInput {
+  value: string | number;
+  onChange: (value: string) => void;
+  className?: string;
+  min?: number;
+  max?: number;
+}
+
+export function ValidatedInput({
+  value,
+  onChange,
+  className,
+  min,
+  max,
+}: IValidatedInput): JSX.Element {
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string | number>(value);
+
+  useEffect(() => {
+    try {
+      verifyMinAndMax(value);
+      setErrorMessage('');
+    } catch (error) {
+      setErrorMessage(error.message);
+    }
+  }, [min, max]);
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  function verifyMinAndMax(value: string | number) {
+    let message = '';
+
+    if (!isNaN(min) && Number(value) < min) {
+      message = 'Minimum value is ' + min;
+    }
+    if (!isNaN(min) && Number(value) > max) {
+      message = 'Maximum value is ' + max;
+    }
+
+    if (
+      !isNaN(min) &&
+      !isNaN(max) &&
+      (Number(value) < min || Number(value) > max)
+    ) {
+      message = 'Min: ' + min + ', Max: ' + max;
+    }
+    if (message) {
+      throw new Error(message);
+    }
+  }
+
+  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    try {
+      setInputValue(e.target.value);
+      verifyMinAndMax(e.target.value);
+      setErrorMessage('');
+      onChange(e.target.value);
+    } catch (error) {
+      setErrorMessage(error.message);
+    }
+  }
+
+  return (
+    <div
+      className={`validated_input__wrapper ${errorMessage ? 'errored' : ''}`}
+    >
+      <input
+        className={className}
+        min={min}
+        max={max}
+        value={inputValue}
+        onChange={handleInputChange}
+      />
+      {errorMessage && <p className='validated_input__error'>{errorMessage}</p>}
+    </div>
+  );
+}