diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx index bf69089a2da..58ee59ab43d 100644 --- 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)), + ) } > diff --git a/src/components/ManaCalculator/hooks/useManaState.ts b/src/components/ManaCalculator/hooks/useManaState.ts index 75cd3d844d0..4faa197278f 100644 --- a/src/components/ManaCalculator/hooks/useManaState.ts +++ b/src/components/ManaCalculator/hooks/useManaState.ts @@ -40,7 +40,7 @@ export function useGivenManaState( } function handleStakeChange(value: number, id: number) { - setState({ + const newStateWithValidators = { ...state, validators: state.validators.map((validator, i) => { return { @@ -48,6 +48,10 @@ export function useGivenManaState( 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);