From e9b449a3c611babf6e670ab4be73f4b6cf9b2dbb Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Thu, 16 Nov 2023 15:47:30 +0100
Subject: [PATCH 01/13] fix: improve input validation

---
 .../components/OtherParametersSection.tsx            |  4 ++++
 .../ManaCalculator/components/RoleSection.tsx        |  6 ++++++
 .../ManaCalculator/components/ValidatorCard.tsx      |  6 ++++++
 .../ManaCalculator/components/ValidatorSettings.tsx  | 12 ++++++++++++
 src/components/ManaCalculator/hooks/useManaState.ts  |  5 +++++
 5 files changed, 33 insertions(+)

diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
index 5d60e49610d..47168441cc1 100644
--- a/src/components/ManaCalculator/components/OtherParametersSection.tsx
+++ b/src/components/ManaCalculator/components/OtherParametersSection.tsx
@@ -35,6 +35,8 @@ 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>
@@ -42,6 +44,8 @@ export function OtherParametersSection() {
       <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
index 48c4bc26f21..b01b96f3d9a 100644
--- 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
index 517a5293a46..d35772cd7b3 100644
--- 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
index 95be4df6508..f8c6e951ded 100644
--- 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
index 92f5c47b90c..167475f72ce 100644
--- 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,6 +150,7 @@ export function useGivenManaState(
   }
 
   function handleInitialEpochChange(value: number) {
+    if (value > state.finalEpoch) return;
     setState({
       ...state,
       initialEpoch: value,
@@ -154,6 +158,7 @@ export function useGivenManaState(
   }
 
   function handleFinalEpochChange(value: number) {
+    if (state.initialEpoch > value) return;
     setState({
       ...state,
       finalEpoch: value,

From 8ab5c579aecae10a03cdb9b50ca9d45d7a875288 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 22 Nov 2023 17:49:17 +0100
Subject: [PATCH 02/13] fix: add minimum amount to missing inputs

---
 src/components/ManaCalculator/components/DelegatorSettings.tsx | 2 ++
 src/components/ManaCalculator/components/ValidatorSettings.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/components/ManaCalculator/components/DelegatorSettings.tsx b/src/components/ManaCalculator/components/DelegatorSettings.tsx
index 37c8f0f3f10..5f4596d6d25 100644
--- a/src/components/ManaCalculator/components/DelegatorSettings.tsx
+++ b/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>
diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
index 8f980daa3fa..73c24a8eb14 100644
--- a/src/components/ManaCalculator/components/ValidatorSettings.tsx
+++ b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -21,6 +21,8 @@ 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>

From 626746cefa03ac39440c1fd32ae98ee1a3161055 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Tue, 28 Nov 2023 14:04:15 +0100
Subject: [PATCH 03/13] feat: improve input validation in ManaCalculator

---
 .../components/DelegatorSettings.tsx          | 13 +--
 .../components/ManaCalculatorInput.tsx        | 78 +++++++++++++++
 .../components/OtherParametersSection.tsx     | 20 ++--
 .../ManaCalculator/components/RoleSection.tsx | 16 ++--
 .../components/ValidatorCard.tsx              | 73 +++++++-------
 .../components/ValidatorSettings.tsx          | 49 +++++-----
 .../ManaCalculator/components/index.ts        |  1 +
 .../ManaCalculator/hooks/useManaState.ts      | 94 +++++++++++++------
 src/components/ManaCalculator/styles.css      | 36 +++++++
 9 files changed, 271 insertions(+), 109 deletions(-)
 create mode 100644 src/components/ManaCalculator/components/ManaCalculatorInput.tsx

diff --git a/src/components/ManaCalculator/components/DelegatorSettings.tsx b/src/components/ManaCalculator/components/DelegatorSettings.tsx
index 5f4596d6d25..cb6f803c2dc 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 { ManaCalculatorInput } from '.';
 
 export function DelegatorSettings() {
   const { state, handleOwnStakeChange, handleValidatorChange } = useManaState();
@@ -30,13 +31,13 @@ export function DelegatorSettings() {
       <label className='inlined-label'>
         Delegated amount ({state.network})
       </label>
-      <input
+      <ManaCalculatorInput
         className='mana_calculator__compact inlined'
-        type='number'
-        min='0'
         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/ManaCalculatorInput.tsx b/src/components/ManaCalculator/components/ManaCalculatorInput.tsx
new file mode 100644
index 00000000000..d7dcc97d9a9
--- /dev/null
+++ b/src/components/ManaCalculator/components/ManaCalculatorInput.tsx
@@ -0,0 +1,78 @@
+import React, { JSX, useEffect, useState } from 'react';
+
+interface IManaCalculatorCustomInput {
+  value: string | number;
+  onChange: (value: string) => void;
+  className?: string;
+  min?: number;
+  max?: number;
+}
+
+export function ManaCalculatorInput({
+  value,
+  onChange,
+  className,
+  min,
+  max,
+}: IManaCalculatorCustomInput): JSX.Element {
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string | number>(value);
+
+  useEffect(() => {
+    try {
+      verifyMinAndMax(value);
+    } catch (error) {
+      setErrorMessage(error.message);
+    }
+  }, [min, max]);
+
+  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={`mana_calculator__custom_wrapper ${
+        errorMessage ? 'errored' : ''
+      }`}
+    >
+      <input
+        className={className}
+        min={min}
+        max={max}
+        value={inputValue}
+        onChange={handleInputChange}
+      />
+      {errorMessage && <p className='mana_calculator__error'>{errorMessage}</p>}
+    </div>
+  );
+}
diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
index 67626b4e20c..1211d6848f2 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 { ManaCalculatorInput } from '.';
 
 export function OtherParametersSection() {
   const {
@@ -34,22 +35,21 @@ export function OtherParametersSection() {
       />
       <br />
       <label className='inlined-label'>Initial epoch</label>
-      <input
+      <ManaCalculatorInput
         className='mana_calculator__compact inlined'
-        type='number'
-        min='0'
+        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
+      <ManaCalculatorInput
         className='mana_calculator__compact inlined'
-        type='number'
-        min={state.initialEpoch + 1}
+        min={state.initialEpoch}
         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 8367a8a7677..45e554e6eca 100644
--- a/src/components/ManaCalculator/components/RoleSection.tsx
+++ b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -2,12 +2,14 @@ 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 { ManaCalculatorInput } from '.';
 
 export function RoleSection() {
-  const { state, handleUserChange, handleOwnHoldChange } = useManaState();
+  const { state, handleUserChange, handleOwnHoldChange, maxTotalSupply } =
+    useManaState();
   return (
     <div className='mana_calculator__card'>
       <h4>Role configuration</h4>
@@ -27,13 +29,13 @@ export function RoleSection() {
       />
       <br />
       <label className='inlined-label'>Owned amount ({state.network})</label>
-      <input
+      <ManaCalculatorInput
+        min={0}
+        max={maxTotalSupply}
         className='mana_calculator__compact inlined'
-        type='number'
-        min='0'
         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 d35772cd7b3..23b95d2cd77 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 { ManaCalculatorInput } from '.';
 
 export function ValidatorCard({
   validator,
@@ -16,42 +17,48 @@ export function ValidatorCard({
     handleDelegatedStakeChange,
     handlePFChange,
     handleFCChange,
+    maxTotalSupply,
   } = useManaState();
+
   return (
     <>
       <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)
-        }
-      ></input>
-      <input
-        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)}
-      ></input>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ManaCalculatorInput
+          className='w-full'
+          min={0}
+          max={maxTotalSupply}
+          value={fromMicro(validator.lockedStake)}
+          onChange={(value: string) => handleStakeChange(value, id)}
+        />
+      </div>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ManaCalculatorInput
+          className='w-full'
+          min={0}
+          max={maxTotalSupply}
+          value={fromMicro(validator.delegatedStake)}
+          onChange={(value: string) => handleDelegatedStakeChange(value, id)}
+        />
+      </div>
+      <div className='validator_card col col--2 align-right horizontal-spaced'>
+        <ManaCalculatorInput
+          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'>
+        <ManaCalculatorInput
+          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 73c24a8eb14..5efe5b2979d 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 { ManaCalculatorInput } from '.';
 
 export function ValidatorSettings() {
   const {
@@ -10,6 +11,7 @@ export function ValidatorSettings() {
     handleOwnFCChange,
     handleOwnStakeChange,
     handleAttractedNewDelegatedStakeChange,
+    maxTotalSupply,
   } = useManaState();
   return (
     <Details
@@ -19,49 +21,44 @@ export function ValidatorSettings() {
       <label className='inlined-long-label'>
         Staked amount ({state.network})
       </label>
-      <input
+      <ManaCalculatorInput
         className='mana_calculator__compact inlined'
-        type='number'
-        min='0'
+        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
+      <ManaCalculatorInput
         className='mana_calculator__compact input--vertical-spaced'
-        min='0'
-        max='1'
-        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
+      <ManaCalculatorInput
         className='mana_calculator__compact input--vertical-spaced'
-        min='0'
-        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
+      <ManaCalculatorInput
         className='mana_calculator__compact input--vertical-spaced'
-        type='number'
-        min='0'
+        min={0}
+        max={maxTotalSupply}
         value={roundMax(
           fromMicro(state.validator.attractedNewDelegatedStake),
           0,
         )}
-        onChange={(e) =>
-          handleAttractedNewDelegatedStakeChange(Number(e.target.value))
-        }
-      ></input>
+        onChange={handleAttractedNewDelegatedStakeChange}
+      ></ManaCalculatorInput>
     </Details>
   );
 }
diff --git a/src/components/ManaCalculator/components/index.ts b/src/components/ManaCalculator/components/index.ts
index 92fa8d84681..8d56b4a3e11 100644
--- a/src/components/ManaCalculator/components/index.ts
+++ b/src/components/ManaCalculator/components/index.ts
@@ -8,3 +8,4 @@ export * from './RoleSection';
 export * from './OutputForm';
 export * from './NetworkSection';
 export * from './ManaAcculation';
+export * from './ManaCalculatorInput';
diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index e9ca265e71e..3a512b7f8f4 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -39,60 +39,64 @@ export function useGivenManaState(
     setState({ ...state, validators });
   }
 
-  function handleStakeChange(value: number, id: number) {
+  function handleStakeChange(value: string, id: number) {
+    const stakedTokens = getValidInputValue(value, toMicro);
     setState({
       ...state,
       validators: state.validators.map((validator, i) => {
         return {
           ...validator,
-          lockedStake: i === id ? value : validator.lockedStake,
+          lockedStake: i === id ? stakedTokens : validator.lockedStake,
         };
       }),
     });
   }
 
-  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) {
-    if (value < 0 || value > 1) return;
+  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(value: number) {
-    if (value > state.heldTokens) return;
+  function handleOwnStakeChange(value: string) {
+    const stakedTokens = getValidInputValue(value, toMicro);
     setState({
       ...state,
-      [getStakedOrDelegated(state.userType)]: value,
+      [getStakedOrDelegated(state.userType)]: stakedTokens,
     });
   }
 
@@ -110,41 +114,43 @@ export function useGivenManaState(
     });
   }
 
-  function handleOwnPFChange(value: number) {
-    if (value < 0 || value > 1) return;
+  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);
     setState({
       ...state,
-      validator: { ...state.validator, attractedNewDelegatedStake: value },
+      validator: { ...state.validator, attractedNewDelegatedStake },
     });
   }
 
-  function handleInitialEpochChange(value: number) {
-    if (value > state.finalEpoch) return;
+  function handleInitialEpochChange(value: string) {
+    const initialEpoch = getValidInputValue(value);
     setState({
       ...state,
-      initialEpoch: value,
+      initialEpoch,
     });
   }
 
-  function handleFinalEpochChange(value: number) {
-    if (state.initialEpoch > value) return;
+  function handleFinalEpochChange(value: string) {
+    const finalEpoch = getValidInputValue(value);
     setState({
       ...state,
-      finalEpoch: value,
+      finalEpoch,
     });
   }
 
@@ -166,8 +172,12 @@ export function useGivenManaState(
     setState({ ...state });
   }
 
-  function handleOwnHoldChange(value: number) {
-    setState({ ...state, heldTokens: value });
+  function handleOwnHoldChange(value: string) {
+    const heldTokens = getValidInputValue(value, toMicro);
+    setState({
+      ...state,
+      heldTokens,
+    });
   }
 
   const congestionAmount = getNetworkCongestion(
@@ -177,6 +187,12 @@ export function useGivenManaState(
   const generationPerSlot = getNetworkGenerationPerSlot(state.network);
   const stakedOrDelegatedTokens = state[getStakedOrDelegated(state.userType)];
 
+  const userOwned = state.heldTokens + stakedOrDelegatedTokens;
+  const maxTotalSupply =
+    userOwned +
+    state.validators.reduce((a, b) => a + b.lockedStake, 0) +
+    state.validators.reduce((a, b) => a + b.delegatedStake, 0);
+
   return {
     state: {
       ...state,
@@ -184,6 +200,7 @@ export function useGivenManaState(
       generationPerSlot,
       stakedOrDelegatedTokens,
     } as ManaState,
+    maxTotalSupply,
     handleDelete,
     handleStakeChange,
     handleAddValidator,
@@ -204,6 +221,29 @@ export function useGivenManaState(
   };
 }
 
+function getValidInputValue(
+  num: string,
+  transformNumber?: (number) => number,
+): number {
+  let value = inputValuetoNumber(num);
+
+  if (transformNumber) {
+    value = transformNumber(value);
+  }
+
+  const isInvalid = isNaN(value);
+
+  if (isInvalid) {
+    throw new Error('Invalid number');
+  }
+
+  return value;
+}
+
+function inputValuetoNumber(value: string) {
+  return Number(Number(value).toString());
+}
+
 export function getDefaultParameters(
   network: NetworkType,
 ): ManaCalculatorProps {
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
index ed27fcb926b..d8119874de3 100644
--- a/src/components/ManaCalculator/styles.css
+++ b/src/components/ManaCalculator/styles.css
@@ -120,3 +120,39 @@
   width: 200px;
   margin-bottom: 1rem !important;
 }
+
+.mana_calculator__custom_wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.validator_card {
+  padding: 4px 0;
+}
+
+.validator_card .errored {
+  position: relative;
+  padding: 1.25rem 0;
+}
+
+.validator_card .errored p {
+  position: absolute;
+  bottom: -2px;
+}
+
+.mana_calculator__custom_wrapper p {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+  font-size: 12px;
+  color: red;
+}
+
+.mana_calculator__compact + p {
+  margin-top: -0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.mana_calculator__custom_wrapper input.w-full {
+  width: 100%;
+}

From d77fc1c7d9d70eadc8b2a96fe58e2c476232a86b Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Tue, 28 Nov 2023 14:14:01 +0100
Subject: [PATCH 04/13] Add max value for finalEpoch input

---
 .../components/OtherParametersSection.tsx             |  1 +
 src/components/ManaCalculator/styles.css              | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
index 1211d6848f2..cd26863b642 100644
--- a/src/components/ManaCalculator/components/OtherParametersSection.tsx
+++ b/src/components/ManaCalculator/components/OtherParametersSection.tsx
@@ -47,6 +47,7 @@ export function OtherParametersSection() {
       <ManaCalculatorInput
         className='mana_calculator__compact inlined'
         min={state.initialEpoch}
+        max={Number.MAX_SAFE_INTEGER}
         value={state.finalEpoch}
         onChange={handleFinalEpochChange}
       />
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
index d8119874de3..00e38dde75e 100644
--- a/src/components/ManaCalculator/styles.css
+++ b/src/components/ManaCalculator/styles.css
@@ -127,6 +127,11 @@
   align-items: flex-start;
 }
 
+.mana_calculator__error {
+  text-align: left;
+  white-space: nowrap;
+}
+
 .validator_card {
   padding: 4px 0;
 }
@@ -136,19 +141,19 @@
   padding: 1.25rem 0;
 }
 
-.validator_card .errored p {
+.validator_card .errored .mana_calculator__error {
   position: absolute;
   bottom: -2px;
 }
 
-.mana_calculator__custom_wrapper p {
+.mana_calculator__custom_wrapper .mana_calculator__error {
   margin-top: 0.25rem;
   margin-bottom: 0;
   font-size: 12px;
   color: red;
 }
 
-.mana_calculator__compact + p {
+.mana_calculator__compact + .mana_calculator__error {
   margin-top: -0.75rem;
   margin-bottom: 0.25rem;
 }

From f1a56cfb35cefa70750e8175c1a0fffd7ce6ba07 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Tue, 28 Nov 2023 15:51:45 +0100
Subject: [PATCH 05/13] remove error after validation

---
 src/components/ManaCalculator/components/ManaCalculatorInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ManaCalculator/components/ManaCalculatorInput.tsx b/src/components/ManaCalculator/components/ManaCalculatorInput.tsx
index d7dcc97d9a9..21ea8feddc6 100644
--- a/src/components/ManaCalculator/components/ManaCalculatorInput.tsx
+++ b/src/components/ManaCalculator/components/ManaCalculatorInput.tsx
@@ -21,6 +21,7 @@ export function ManaCalculatorInput({
   useEffect(() => {
     try {
       verifyMinAndMax(value);
+      setErrorMessage('');
     } catch (error) {
       setErrorMessage(error.message);
     }

From 9a58882cac08d302b77f0124a21608905d3dad79 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 29 Nov 2023 13:48:58 +0100
Subject: [PATCH 06/13] cleanup code and use correct formulas

---
 .../ManaCalculator/components/RoleSection.tsx | 10 ++--
 .../components/ValidatorCard.tsx              | 12 +++--
 .../components/ValidatorSettings.tsx          |  9 +++-
 .../ManaCalculator/hooks/useManaState.ts      | 54 +++++++++----------
 src/components/ManaCalculator/utils.ts        | 21 ++++++++
 5 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
index 45e554e6eca..9ace248c180 100644
--- a/src/components/ManaCalculator/components/RoleSection.tsx
+++ b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -8,8 +8,12 @@ import { DelegatorSettings } from './DelegatorSettings';
 import { ManaCalculatorInput } from '.';
 
 export function RoleSection() {
-  const { state, handleUserChange, handleOwnHoldChange, maxTotalSupply } =
-    useManaState();
+  const {
+    state,
+    handleUserChange,
+    handleOwnHoldChange,
+    maxAvailableOwnedAmount,
+  } = useManaState();
   return (
     <div className='mana_calculator__card'>
       <h4>Role configuration</h4>
@@ -31,7 +35,7 @@ export function RoleSection() {
       <label className='inlined-label'>Owned amount ({state.network})</label>
       <ManaCalculatorInput
         min={0}
-        max={maxTotalSupply}
+        max={fromMicro(maxAvailableOwnedAmount)}
         className='mana_calculator__compact inlined'
         value={fromMicro(state.heldTokens)}
         onChange={handleOwnHoldChange}
diff --git a/src/components/ManaCalculator/components/ValidatorCard.tsx b/src/components/ManaCalculator/components/ValidatorCard.tsx
index 23b95d2cd77..2856f4cf0ef 100644
--- a/src/components/ManaCalculator/components/ValidatorCard.tsx
+++ b/src/components/ManaCalculator/components/ValidatorCard.tsx
@@ -17,9 +17,15 @@ export function ValidatorCard({
     handleDelegatedStakeChange,
     handlePFChange,
     handleFCChange,
-    maxTotalSupply,
+    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>
@@ -27,7 +33,7 @@ export function ValidatorCard({
         <ManaCalculatorInput
           className='w-full'
           min={0}
-          max={maxTotalSupply}
+          max={maxValidatorLockedStake}
           value={fromMicro(validator.lockedStake)}
           onChange={(value: string) => handleStakeChange(value, id)}
         />
@@ -36,7 +42,7 @@ export function ValidatorCard({
         <ManaCalculatorInput
           className='w-full'
           min={0}
-          max={maxTotalSupply}
+          max={maxValidatorDelegatedStake}
           value={fromMicro(validator.delegatedStake)}
           onChange={(value: string) => handleDelegatedStakeChange(value, id)}
         />
diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
index 5efe5b2979d..f39a62f4ac6 100644
--- a/src/components/ManaCalculator/components/ValidatorSettings.tsx
+++ b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -11,8 +11,13 @@ export function ValidatorSettings() {
     handleOwnFCChange,
     handleOwnStakeChange,
     handleAttractedNewDelegatedStakeChange,
-    maxTotalSupply,
+    maxAvailableSupply,
   } = useManaState();
+
+  const maxAttractedNewDelegatedStake =
+    fromMicro(maxAvailableSupply) +
+    fromMicro(state.validator.attractedNewDelegatedStake);
+
   return (
     <Details
       summary='Validator Settings'
@@ -52,7 +57,7 @@ export function ValidatorSettings() {
       <ManaCalculatorInput
         className='mana_calculator__compact input--vertical-spaced'
         min={0}
-        max={maxTotalSupply}
+        max={maxAttractedNewDelegatedStake}
         value={roundMax(
           fromMicro(state.validator.attractedNewDelegatedStake),
           0,
diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index 3a512b7f8f4..7236cd09974 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -12,10 +12,12 @@ import {
 import { CongestionType, NetworkType, UserType } from '../enums';
 import { ManaCalculatorProps, ManaState, ValidatorProps } from '../types';
 import {
+  fromMicro,
   getNetworkCongestion,
   getNetworkGenerationPerSlot,
   getNetworkSupply,
   getStakedOrDelegated,
+  getValidInputValue,
   toMicro,
 } from '../utils';
 
@@ -187,11 +189,27 @@ export function useGivenManaState(
   const generationPerSlot = getNetworkGenerationPerSlot(state.network);
   const stakedOrDelegatedTokens = state[getStakedOrDelegated(state.userType)];
 
-  const userOwned = state.heldTokens + stakedOrDelegatedTokens;
-  const maxTotalSupply =
-    userOwned +
-    state.validators.reduce((a, b) => a + b.lockedStake, 0) +
-    state.validators.reduce((a, b) => a + b.delegatedStake, 0);
+  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 totalValidatorsStake =
+    totalValidatorsLockedStake + totalValidatorsDelegatedStake;
+
+  const totalStake = userOwnedTokens + totalValidatorsStake;
+
+  const maxAvailableOwnedAmount = networkSupply - totalValidatorsStake;
+
+  const maxAvailableSupply = Math.max(networkSupply - totalStake, 0);
 
   return {
     state: {
@@ -200,7 +218,8 @@ export function useGivenManaState(
       generationPerSlot,
       stakedOrDelegatedTokens,
     } as ManaState,
-    maxTotalSupply,
+    maxAvailableOwnedAmount,
+    maxAvailableSupply,
     handleDelete,
     handleStakeChange,
     handleAddValidator,
@@ -221,29 +240,6 @@ export function useGivenManaState(
   };
 }
 
-function getValidInputValue(
-  num: string,
-  transformNumber?: (number) => number,
-): number {
-  let value = inputValuetoNumber(num);
-
-  if (transformNumber) {
-    value = transformNumber(value);
-  }
-
-  const isInvalid = isNaN(value);
-
-  if (isInvalid) {
-    throw new Error('Invalid number');
-  }
-
-  return value;
-}
-
-function inputValuetoNumber(value: string) {
-  return Number(Number(value).toString());
-}
-
 export function getDefaultParameters(
   network: NetworkType,
 ): ManaCalculatorProps {
diff --git a/src/components/ManaCalculator/utils.ts b/src/components/ManaCalculator/utils.ts
index 5d1f2f870f8..326ac8f9560 100644
--- a/src/components/ManaCalculator/utils.ts
+++ b/src/components/ManaCalculator/utils.ts
@@ -89,3 +89,24 @@ 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;
+}
+

From 442d3592c7547f4b454657b8bca044288ac70cd9 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 29 Nov 2023 13:50:42 +0100
Subject: [PATCH 07/13] remove unused import

---
 src/components/ManaCalculator/hooks/useManaState.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index 7236cd09974..e63370b9838 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -12,7 +12,6 @@ import {
 import { CongestionType, NetworkType, UserType } from '../enums';
 import { ManaCalculatorProps, ManaState, ValidatorProps } from '../types';
 import {
-  fromMicro,
   getNetworkCongestion,
   getNetworkGenerationPerSlot,
   getNetworkSupply,

From 45a7b6fbdab363be2785281fbff9c73db93f11f6 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 29 Nov 2023 13:51:08 +0100
Subject: [PATCH 08/13] format

---
 src/components/ManaCalculator/utils.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ManaCalculator/utils.ts b/src/components/ManaCalculator/utils.ts
index 326ac8f9560..1dc45d11194 100644
--- a/src/components/ManaCalculator/utils.ts
+++ b/src/components/ManaCalculator/utils.ts
@@ -90,7 +90,6 @@ 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,
@@ -109,4 +108,3 @@ export function getValidInputValue(
 
   return value;
 }
-

From 2a4b601a0578167173a6d0d6303f91aa4e43be7f Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 29 Nov 2023 14:24:07 +0100
Subject: [PATCH 09/13] simplify code

---
 .../ManaCalculator/components/ValidatorSettings.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
index f39a62f4ac6..c0d9ad2759b 100644
--- a/src/components/ManaCalculator/components/ValidatorSettings.tsx
+++ b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -14,9 +14,13 @@ export function ValidatorSettings() {
     maxAvailableSupply,
   } = useManaState();
 
+  const attractedNewDelegatedStake = roundMax(
+    fromMicro(state.validator.attractedNewDelegatedStake),
+    0,
+  );
+
   const maxAttractedNewDelegatedStake =
-    fromMicro(maxAvailableSupply) +
-    fromMicro(state.validator.attractedNewDelegatedStake);
+    fromMicro(maxAvailableSupply) + attractedNewDelegatedStake;
 
   return (
     <Details
@@ -58,10 +62,7 @@ export function ValidatorSettings() {
         className='mana_calculator__compact input--vertical-spaced'
         min={0}
         max={maxAttractedNewDelegatedStake}
-        value={roundMax(
-          fromMicro(state.validator.attractedNewDelegatedStake),
-          0,
-        )}
+        value={attractedNewDelegatedStake}
         onChange={handleAttractedNewDelegatedStakeChange}
       ></ManaCalculatorInput>
     </Details>

From 65cacafb2110d0754fa53db7fbf1272becbbdfaa Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Thu, 7 Dec 2023 17:13:58 +0100
Subject: [PATCH 10/13] chore: rename input and move to components

---
 .../ManaCalculator/components/DelegatorSettings.tsx  |  4 ++--
 .../components/OtherParametersSection.tsx            |  6 +++---
 .../ManaCalculator/components/RoleSection.tsx        |  4 ++--
 .../ManaCalculator/components/ValidatorCard.tsx      | 10 +++++-----
 .../ManaCalculator/components/ValidatorSettings.tsx  | 12 ++++++------
 src/components/ManaCalculator/components/index.ts    |  1 -
 src/components/ManaCalculator/styles.css             | 12 ++++++------
 .../ValidatedInput.tsx}                              | 12 +++++-------
 8 files changed, 29 insertions(+), 32 deletions(-)
 rename src/components/{ManaCalculator/components/ManaCalculatorInput.tsx => ValidatedInput/ValidatedInput.tsx} (84%)

diff --git a/src/components/ManaCalculator/components/DelegatorSettings.tsx b/src/components/ManaCalculator/components/DelegatorSettings.tsx
index cb6f803c2dc..d4e9284f516 100644
--- a/src/components/ManaCalculator/components/DelegatorSettings.tsx
+++ b/src/components/ManaCalculator/components/DelegatorSettings.tsx
@@ -3,7 +3,7 @@ import { Details } from '@docusaurus/theme-common/Details';
 import { useManaState } from '../hooks';
 import { fromMicro } from '../utils';
 import Select from 'react-select';
-import { ManaCalculatorInput } from '.';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function DelegatorSettings() {
   const { state, handleOwnStakeChange, handleValidatorChange } = useManaState();
@@ -31,7 +31,7 @@ export function DelegatorSettings() {
       <label className='inlined-label'>
         Delegated amount ({state.network})
       </label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact inlined'
         value={fromMicro(state.stakedOrDelegatedTokens)}
         min={0}
diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
index cd26863b642..aff21606c24 100644
--- a/src/components/ManaCalculator/components/OtherParametersSection.tsx
+++ b/src/components/ManaCalculator/components/OtherParametersSection.tsx
@@ -4,7 +4,7 @@ import Select from 'react-select';
 import { UserType } from '../enums';
 import { CongestionType } from '../enums';
 import { AdvancedSettingsValidator } from './AdvancedSettingsValidator';
-import { ManaCalculatorInput } from '.';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function OtherParametersSection() {
   const {
@@ -35,7 +35,7 @@ export function OtherParametersSection() {
       />
       <br />
       <label className='inlined-label'>Initial epoch</label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact inlined'
         min={1}
         max={state.finalEpoch}
@@ -44,7 +44,7 @@ export function OtherParametersSection() {
       />
       <br />
       <label className='inlined-label'>Final epoch</label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact inlined'
         min={state.initialEpoch}
         max={Number.MAX_SAFE_INTEGER}
diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
index 9ace248c180..34ec695d502 100644
--- a/src/components/ManaCalculator/components/RoleSection.tsx
+++ b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -5,7 +5,7 @@ import { UserType } from '../enums';
 import { fromMicro } from '../utils';
 import { ValidatorSettings } from './ValidatorSettings';
 import { DelegatorSettings } from './DelegatorSettings';
-import { ManaCalculatorInput } from '.';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function RoleSection() {
   const {
@@ -33,7 +33,7 @@ export function RoleSection() {
       />
       <br />
       <label className='inlined-label'>Owned amount ({state.network})</label>
-      <ManaCalculatorInput
+      <ValidatedInput
         min={0}
         max={fromMicro(maxAvailableOwnedAmount)}
         className='mana_calculator__compact inlined'
diff --git a/src/components/ManaCalculator/components/ValidatorCard.tsx b/src/components/ManaCalculator/components/ValidatorCard.tsx
index 2856f4cf0ef..139ee1b5695 100644
--- a/src/components/ManaCalculator/components/ValidatorCard.tsx
+++ b/src/components/ManaCalculator/components/ValidatorCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useManaState } from '../hooks';
 import { ValidatorProps } from '../types';
 import { fromMicro } from '../utils';
-import { ManaCalculatorInput } from '.';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function ValidatorCard({
   validator,
@@ -30,7 +30,7 @@ export function ValidatorCard({
     <>
       <div className='col col--2'>Validator {id + 1}</div>
       <div className='validator_card col col--2 align-right horizontal-spaced'>
-        <ManaCalculatorInput
+        <ValidatedInput
           className='w-full'
           min={0}
           max={maxValidatorLockedStake}
@@ -39,7 +39,7 @@ export function ValidatorCard({
         />
       </div>
       <div className='validator_card col col--2 align-right horizontal-spaced'>
-        <ManaCalculatorInput
+        <ValidatedInput
           className='w-full'
           min={0}
           max={maxValidatorDelegatedStake}
@@ -48,7 +48,7 @@ export function ValidatorCard({
         />
       </div>
       <div className='validator_card col col--2 align-right horizontal-spaced'>
-        <ManaCalculatorInput
+        <ValidatedInput
           className='w-full'
           min={0}
           max={1}
@@ -57,7 +57,7 @@ export function ValidatorCard({
         />
       </div>
       <div className='validator_card col col--2 align-right horizontal-spaced'>
-        <ManaCalculatorInput
+        <ValidatedInput
           className='w-full'
           min={0}
           max={Number.MAX_SAFE_INTEGER}
diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
index c0d9ad2759b..bf016be9e6d 100644
--- a/src/components/ManaCalculator/components/ValidatorSettings.tsx
+++ b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Details } from '@docusaurus/theme-common/Details';
 import { useManaState } from '../hooks';
 import { fromMicro, roundMax } from '../utils';
-import { ManaCalculatorInput } from '.';
+import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function ValidatorSettings() {
   const {
@@ -30,7 +30,7 @@ export function ValidatorSettings() {
       <label className='inlined-long-label'>
         Staked amount ({state.network})
       </label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact inlined'
         min={0}
         max={fromMicro(state.heldTokens)}
@@ -39,7 +39,7 @@ export function ValidatorSettings() {
       />
       <br />
       <label className='inlined-long-label'>Performance factor</label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact input--vertical-spaced'
         min={0}
         max={1}
@@ -48,7 +48,7 @@ export function ValidatorSettings() {
       />
       <br />
       <label className='inlined-long-label'>Fixed costs</label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact input--vertical-spaced'
         min={0}
         max={Number.MAX_SAFE_INTEGER}
@@ -58,13 +58,13 @@ export function ValidatorSettings() {
       <label className='inlined-long-label'>
         Attracted new delegated stake ({state.network})
       </label>
-      <ManaCalculatorInput
+      <ValidatedInput
         className='mana_calculator__compact input--vertical-spaced'
         min={0}
         max={maxAttractedNewDelegatedStake}
         value={attractedNewDelegatedStake}
         onChange={handleAttractedNewDelegatedStakeChange}
-      ></ManaCalculatorInput>
+      ></ValidatedInput>
     </Details>
   );
 }
diff --git a/src/components/ManaCalculator/components/index.ts b/src/components/ManaCalculator/components/index.ts
index 8d56b4a3e11..92fa8d84681 100644
--- a/src/components/ManaCalculator/components/index.ts
+++ b/src/components/ManaCalculator/components/index.ts
@@ -8,4 +8,3 @@ export * from './RoleSection';
 export * from './OutputForm';
 export * from './NetworkSection';
 export * from './ManaAcculation';
-export * from './ManaCalculatorInput';
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
index 00e38dde75e..3a9c8feecc3 100644
--- a/src/components/ManaCalculator/styles.css
+++ b/src/components/ManaCalculator/styles.css
@@ -121,13 +121,13 @@
   margin-bottom: 1rem !important;
 }
 
-.mana_calculator__custom_wrapper {
+.validated_input__wrapper {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.mana_calculator__error {
+.validated_input__error {
   text-align: left;
   white-space: nowrap;
 }
@@ -141,23 +141,23 @@
   padding: 1.25rem 0;
 }
 
-.validator_card .errored .mana_calculator__error {
+.validator_card .errored .validated_input__error {
   position: absolute;
   bottom: -2px;
 }
 
-.mana_calculator__custom_wrapper .mana_calculator__error {
+.validated_input__wrapper .validated_input__error {
   margin-top: 0.25rem;
   margin-bottom: 0;
   font-size: 12px;
   color: red;
 }
 
-.mana_calculator__compact + .mana_calculator__error {
+.mana_calculator__compact + .validated_input__error {
   margin-top: -0.75rem;
   margin-bottom: 0.25rem;
 }
 
-.mana_calculator__custom_wrapper input.w-full {
+.validated_input__wrapper input.w-full {
   width: 100%;
 }
diff --git a/src/components/ManaCalculator/components/ManaCalculatorInput.tsx b/src/components/ValidatedInput/ValidatedInput.tsx
similarity index 84%
rename from src/components/ManaCalculator/components/ManaCalculatorInput.tsx
rename to src/components/ValidatedInput/ValidatedInput.tsx
index 21ea8feddc6..0054d0820c3 100644
--- a/src/components/ManaCalculator/components/ManaCalculatorInput.tsx
+++ b/src/components/ValidatedInput/ValidatedInput.tsx
@@ -1,6 +1,6 @@
 import React, { JSX, useEffect, useState } from 'react';
 
-interface IManaCalculatorCustomInput {
+interface IValidatedInput {
   value: string | number;
   onChange: (value: string) => void;
   className?: string;
@@ -8,13 +8,13 @@ interface IManaCalculatorCustomInput {
   max?: number;
 }
 
-export function ManaCalculatorInput({
+export function ValidatedInput({
   value,
   onChange,
   className,
   min,
   max,
-}: IManaCalculatorCustomInput): JSX.Element {
+}: IValidatedInput): JSX.Element {
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [inputValue, setInputValue] = useState<string | number>(value);
 
@@ -62,9 +62,7 @@ export function ManaCalculatorInput({
 
   return (
     <div
-      className={`mana_calculator__custom_wrapper ${
-        errorMessage ? 'errored' : ''
-      }`}
+      className={`validated_input__wrapper ${errorMessage ? 'errored' : ''}`}
     >
       <input
         className={className}
@@ -73,7 +71,7 @@ export function ManaCalculatorInput({
         value={inputValue}
         onChange={handleInputChange}
       />
-      {errorMessage && <p className='mana_calculator__error'>{errorMessage}</p>}
+      {errorMessage && <p className='validated_input__error'>{errorMessage}</p>}
     </div>
   );
 }

From 1e475c4c5604be9b9ef885230133c78d4681328e Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Thu, 7 Dec 2023 17:22:28 +0100
Subject: [PATCH 11/13] refactor: improve code

---
 .../ManaCalculator/components/RoleSection.tsx | 11 ++-
 .../components/ValidatorSettings.tsx          | 12 ++--
 .../ManaCalculator/hooks/useManaState.ts      | 70 +++++++++----------
 3 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
index 34ec695d502..7e0b2d27b65 100644
--- a/src/components/ManaCalculator/components/RoleSection.tsx
+++ b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -8,12 +8,9 @@ import { DelegatorSettings } from './DelegatorSettings';
 import { ValidatedInput } from '../../ValidatedInput/ValidatedInput';
 
 export function RoleSection() {
-  const {
-    state,
-    handleUserChange,
-    handleOwnHoldChange,
-    maxAvailableOwnedAmount,
-  } = useManaState();
+  const { state, handleUserChange, handleOwnHoldChange, maxAvailableSupply } =
+    useManaState();
+
   return (
     <div className='mana_calculator__card'>
       <h4>Role configuration</h4>
@@ -35,7 +32,7 @@ export function RoleSection() {
       <label className='inlined-label'>Owned amount ({state.network})</label>
       <ValidatedInput
         min={0}
-        max={fromMicro(maxAvailableOwnedAmount)}
+        max={fromMicro(maxAvailableSupply + state.heldTokens)}
         className='mana_calculator__compact inlined'
         value={fromMicro(state.heldTokens)}
         onChange={handleOwnHoldChange}
diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
index bf016be9e6d..fb4d8861424 100644
--- a/src/components/ManaCalculator/components/ValidatorSettings.tsx
+++ b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -14,14 +14,11 @@ export function ValidatorSettings() {
     maxAvailableSupply,
   } = useManaState();
 
-  const attractedNewDelegatedStake = roundMax(
-    fromMicro(state.validator.attractedNewDelegatedStake),
+  const maxAttractedNewDelegatedStake = roundMax(
+    fromMicro(maxAvailableSupply + state.validator.attractedNewDelegatedStake),
     0,
   );
 
-  const maxAttractedNewDelegatedStake =
-    fromMicro(maxAvailableSupply) + attractedNewDelegatedStake;
-
   return (
     <Details
       summary='Validator Settings'
@@ -62,7 +59,10 @@ export function ValidatorSettings() {
         className='mana_calculator__compact input--vertical-spaced'
         min={0}
         max={maxAttractedNewDelegatedStake}
-        value={attractedNewDelegatedStake}
+        value={roundMax(
+          fromMicro(state.validator.attractedNewDelegatedStake),
+          0,
+        )}
         onChange={handleAttractedNewDelegatedStakeChange}
       ></ValidatedInput>
     </Details>
diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index e63370b9838..27b9c13fe44 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -201,42 +201,40 @@ export function useGivenManaState(
     0,
   );
 
-  const totalValidatorsStake =
-    totalValidatorsLockedStake + totalValidatorsDelegatedStake;
-
-  const totalStake = userOwnedTokens + totalValidatorsStake;
-
-  const maxAvailableOwnedAmount = networkSupply - totalValidatorsStake;
-
-  const maxAvailableSupply = Math.max(networkSupply - totalStake, 0);
-
-  return {
-    state: {
-      ...state,
-      congestionAmount,
-      generationPerSlot,
-      stakedOrDelegatedTokens,
-    } as ManaState,
-    maxAvailableOwnedAmount,
-    maxAvailableSupply,
-    handleDelete,
-    handleStakeChange,
-    handleAddValidator,
-    handleAttractedNewDelegatedStakeChange,
-    handleCongestionChange,
-    handleDelegatedStakeChange,
-    handleFCChange,
-    handleInitialEpochChange,
-    handleNetworkChange,
-    handleFinalEpochChange,
-    handleOwnFCChange,
-    handleOwnPFChange,
-    handleUserChange,
-    handleOwnStakeChange,
-    handlePFChange,
-    handleValidatorChange,
-    handleOwnHoldChange,
-  };
+const maxAvailableSupply = Math.max(
+  networkSupply -
+    totalValidatorsLockedStake -
+    totalValidatorsDelegatedStake -
+    userOwnedTokens,
+  0,
+);
+
+return {
+  state: {
+    ...state,
+    congestionAmount,
+    generationPerSlot,
+    stakedOrDelegatedTokens,
+  } as ManaState,
+  maxAvailableSupply,
+  handleDelete,
+  handleStakeChange,
+  handleAddValidator,
+  handleAttractedNewDelegatedStakeChange,
+  handleCongestionChange,
+  handleDelegatedStakeChange,
+  handleFCChange,
+  handleInitialEpochChange,
+  handleNetworkChange,
+  handleFinalEpochChange,
+  handleOwnFCChange,
+  handleOwnPFChange,
+  handleUserChange,
+  handleOwnStakeChange,
+  handlePFChange,
+  handleValidatorChange,
+  handleOwnHoldChange,
+};
 }
 
 export function getDefaultParameters(

From d4fa7b7824e54f2fbeafadf62d8dd3b8b501ee91 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Thu, 7 Dec 2023 17:22:47 +0100
Subject: [PATCH 12/13] chore: format

---
 .../ManaCalculator/hooks/useManaState.ts      | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index 27b9c13fe44..9e66e82eaa4 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -201,40 +201,40 @@ export function useGivenManaState(
     0,
   );
 
-const maxAvailableSupply = Math.max(
-  networkSupply -
-    totalValidatorsLockedStake -
-    totalValidatorsDelegatedStake -
-    userOwnedTokens,
-  0,
-);
-
-return {
-  state: {
-    ...state,
-    congestionAmount,
-    generationPerSlot,
-    stakedOrDelegatedTokens,
-  } as ManaState,
-  maxAvailableSupply,
-  handleDelete,
-  handleStakeChange,
-  handleAddValidator,
-  handleAttractedNewDelegatedStakeChange,
-  handleCongestionChange,
-  handleDelegatedStakeChange,
-  handleFCChange,
-  handleInitialEpochChange,
-  handleNetworkChange,
-  handleFinalEpochChange,
-  handleOwnFCChange,
-  handleOwnPFChange,
-  handleUserChange,
-  handleOwnStakeChange,
-  handlePFChange,
-  handleValidatorChange,
-  handleOwnHoldChange,
-};
+  const maxAvailableSupply = Math.max(
+    networkSupply -
+      totalValidatorsLockedStake -
+      totalValidatorsDelegatedStake -
+      userOwnedTokens,
+    0,
+  );
+
+  return {
+    state: {
+      ...state,
+      congestionAmount,
+      generationPerSlot,
+      stakedOrDelegatedTokens,
+    } as ManaState,
+    maxAvailableSupply,
+    handleDelete,
+    handleStakeChange,
+    handleAddValidator,
+    handleAttractedNewDelegatedStakeChange,
+    handleCongestionChange,
+    handleDelegatedStakeChange,
+    handleFCChange,
+    handleInitialEpochChange,
+    handleNetworkChange,
+    handleFinalEpochChange,
+    handleOwnFCChange,
+    handleOwnPFChange,
+    handleUserChange,
+    handleOwnStakeChange,
+    handlePFChange,
+    handleValidatorChange,
+    handleOwnHoldChange,
+  };
 }
 
 export function getDefaultParameters(

From 49f7248142e8a2963fc4be135ae5e3d5d17bea53 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Fri, 8 Dec 2023 12:54:50 +0100
Subject: [PATCH 13/13] chore: format

---
 src/components/ManaCalculator/hooks/useManaState.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
index 507254a6650..dfd81b86901 100644
--- a/src/components/ManaCalculator/hooks/useManaState.ts
+++ b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -105,7 +105,7 @@ export function useGivenManaState(
     const newState: ManaCalculatorProps = {
       ...state,
       [getStakedOrDelegated(state.userType)]: stakedTokens,
-    }
+    };
 
     setState({
       ...newState,
@@ -199,7 +199,7 @@ export function useGivenManaState(
     newState = {
       ...newState,
       ...getDerivedRoleValues(newState, heldTokens),
-    }
+    };
 
     setState(newState);
   }