Derive values on input changes in Mana Calculator (#1354)

iotaledger · Dec 7, 2023 · aae6af2 · aae6af2
1 parent b074433
commit aae6af2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx
@@ -52,7 +52,9 @@ export function ValidatorSettings() {
           0,
         )}
         onChange={(e) =>
-          handleAttractedNewDelegatedStakeChange(Number(e.target.value))
+          handleAttractedNewDelegatedStakeChange(
+            toMicro(Number(e.target.value)),
+          )
         }
       ></input>
     </Details>

diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts
@@ -40,14 +40,18 @@ export function useGivenManaState(
   }
 
   function handleStakeChange(value: number, id: number) {
-    setState({
+    const newStateWithValidators = {
       ...state,
       validators: state.validators.map((validator, i) => {
         return {
           ...validator,
           lockedStake: i === id ? value : validator.lockedStake,
         };
       }),
+    };
+    setState({
+      ...newStateWithValidators,
+      ...getDerivedRoleValues(newStateWithValidators, state.stakedTokens),
     });
   }
 
@@ -87,10 +91,11 @@ export function useGivenManaState(
     });
   }
 
-  function handleOwnStakeChange(value: number) {
+  function handleOwnStakeChange(stakedTokens: number) {
     setState({
       ...state,
-      [getStakedOrDelegated(state.userType)]: value,
+      [getStakedOrDelegated(state.userType)]: stakedTokens,
+      ...getDerivedRoleValues(state, stakedTokens),
     });
   }
 
@@ -149,10 +154,12 @@ export function useGivenManaState(
     });
   }
 
-  function handleUserChange(value: UserType) {
+  function handleUserChange(newUserType: UserType) {
     setState({
       ...state,
-      userType: value,
+      userType: newUserType,
+      [getStakedOrDelegated(newUserType)]: state.heldTokens,
+      ...getDerivedRoleValues(state, state.heldTokens, newUserType),
     });
   }
 
@@ -162,7 +169,13 @@ export function useGivenManaState(
   }
 
   function handleOwnHoldChange(value: number) {
-    setState({ ...state, heldTokens: value });
+    const newState = {
+      ...state,
+      heldTokens: value,
+      [getStakedOrDelegated(state.userType)]: value,
+    };
+
+    setState({ ...newState, ...getDerivedRoleValues(newState, value) });
   }
 
   const congestionAmount = getNetworkCongestion(
@@ -242,6 +255,24 @@ export function getDefaultParameters(
   } as ManaCalculatorProps;
 }
 
+function getDerivedRoleValues(
+  state: ManaCalculatorProps,
+  stakedTokens: number,
+  userType: UserType = state.userType,
+) {
+  return userType === UserType.VALIDATOR
+    ? {
+        validator: {
+          ...state.validator,
+          attractedNewDelegatedStake:
+            (stakedTokens *
+              state.validators.reduce((a, b) => a + b.delegatedStake, 0)) /
+            state.validators.reduce((a, b) => a + b.lockedStake, 0),
+        },
+      }
+    : {};
+}
+
 export function getValidators(network: NetworkType): ValidatorProps[] {
   const supply = getNetworkSupply(network);