fix: Wrap up Mana Calculator (#1345)

docs/learn/protocols/iota2.0/core-concepts/mana-calculator.md

@@ -6,35 +6,42 @@ Mana is a reward resource generated by holding IOTA tokens. It is utilized for b
 
 Here, we introduce the Mana calculator: a tool to help you make decisions about the type of participation that will suit you best, to help you predict the Mana generation you’ll be granted, and to decide the number of IOTA tokens you should hold to guarantee your desired level of access in the future.
 
-## How to use the Calculator: Step-by-step instructions
+## How to use the Calculator: Simplified Step-by-step instructions
 
-- **Choose your network:** This calculator works for both Shimmer and the future IOTA 2.0 network. Both networks will have their own type of Mana (IOTA Mana and Shimmer Mana), with their own parameters and, consequently, their own behavior. Be sure you select the correct scenario you want to simulate! 
+- **Network Configuration:** This calculator works for Shimmer and the future IOTA 2.0 network. Both networks will have their own type of Mana (IOTA Mana and Shimmer Mana), with their own parameters and, consequently, their own behavior. Be sure you select the correct scenario you want to simulate! 
 
-- **Choose your role:** Will you delegate to a validator, become a validator yourself, or just hold tokens? To be a validator, you must run a node and lock your tokens while performing validation services, which will give you higher rewards. If you want to delegate to a validator, your tokens will not be locked and you won’t need to run a node, but this will give you fewer rewards than validating. Finally, just holding tokens grants you a certain amount of Mana, which will be less than by validating or delegating.
+- **Role Configuration:** Will you delegate to a validator, become a validator yourself, or just hold tokens? To be a validator, you must run a node and lock your tokens while performing validation services, giving you higher rewards. If you want to delegate to a validator, your tokens will not be locked and you won’t need to run a node, but this will give you fewer rewards than validating. Finally, just holding tokens grants you a certain amount of Mana, which will be less than by validating or delegating. Additionally, no matter which network and role you choose, your Mana generation will depend on how many available tokens you have. Pay attention to the units! The input should be done in IOTA or Shimmer (not microIota or Glow).
 
-- **Input the number of tokens you own:** No matter which network and role you choose, your Mana generation will depend on how many available tokens you have. Pay attention to the units! The input should be done in IOTA or Shimmer (not microIota or Glow).
+With above inputs, you can already estimate how much Mana you’ll be granted per epoch. But what does it mean in BPS? How many blocks per second does your Mana grant you? The answer depends on the size of your block and the network congestion levels. However, we can use a default block size, which will be enough for most applications, and assume particular congestion levels. This takes us to the last essential configuration step in this calculator:
 
-With the inputs above, you can already estimate how much Mana you’ll be granted per epoch. But what does it mean in BPS? How many blocks per second does your Mana grant you? The answer depends on the size of your block and the network congestion levels. However, we can use a default block size, which will be enough for most applications, and assume certain levels of congestion. This takes us to the last step in this calculator:
+- **Choose a congestion level:** Given a particular Mana generation per epoch, this can be translated into a number of blocks issued per second that depend on the congestion level. Choose one of the given congestion levels (low, stable, or extreme) to estimate the time until block issuance, which tells you in which periodicity you’ll be able to issue a block.
+
+By default, this calculator shows you the acquired Mana and Block Allowance you have granted by participating between epochs 1 and 10. 
+But you can also play with these values!
+Inputting different values for `Initial Epoch` and  `Final Epoch` allows you to visualize results for any period desired.
+Additionally, you can edit several other default parameters used in this tool in the advanced settings tabs.
+In case you want more details, see the description of these parameters [here](/learn/protocols/iota2.0/core-concepts/mana-calculator/#advanced-settings)
 
-- **Choose a congestion level:** Given a certain Mana generation per epoch, this can be translated into a number of blocks issued per second that depends on the congestion level. Choose one of the given congestion levels (low, stable, or extreme) to estimate how many blocks per second your tokens and participation grant you! This metric is also shown in another way: time until block issuance, which tells you in which periodicity you’ll be able to issue a block.
 
 <ManaCalculator/>
 
 
 ## Advanced settings
 
-The steps outlined above can give you a rough estimate of your Mana generation and granted BPS. However, playing with the advanced settings will give you more precise results. 
+The steps outlined above can give you a rough estimate of your Mana generation and granted blocks allowance. However, playing with the advanced settings will give you more precise results. 
 
-- **Change the state of the system:** The calculator's default settings assume a certain level of participation in the consensus (i.e., locked stake, delegated stake, and performance factor of validators). Those settings can be changed under the “Advanced Settings - State of the System” tab. You can also add or delete validators and change their fixed costs. 
+- **Change the system’s state:** The calculator’s default settings assume a certain level of participation in the consensus (i.e., locked stake, delegated stake, and the performance factor of validators). Those settings can be changed under the “Advanced Settings - Validators” tab. You can also add or delete validators and change their fixed costs. 
 
-- If you choose to delegate:
-   - **Change the validator you delegate to:** Under the default settings, you'll delegate to Validator 1 (which is  pool that, technically speaking, is under the "equilibrium state", see the WP for more details). However, you can change this setting and know your rewards if you participate in other pools, with different share of delegated to locked stake, and different performance factors.
+- If you choose to delegate, you can change two default values under the "Delegator Settings" tab in "Role Configuration":
+   - **Change the validator you delegate to:** Under the default settings, you'll delegate to Validator 1 (which is a pool that, technically speaking, is under the "equilibrium state"; see the Whitepaper for more details). However, you can change this setting and know your rewards if you participate in other pools, with different shares of delegated to locked stakes and different performance factors.
+  - **Change the number of delegated tokens:** By default, you will delegate all your tokens to the pool selected above.
+   However, you can also simulate a scenario where you only delegate part of your tokens, with the rest remaining undelegated.
+   As usual, pay attention to the units! The input should be done in IOTA or Shimmer (not microIota or Glow).
 
 - If you choose to validate:
-   - **Change the amount of stake delegated to you:** The calculator's default settings automatically assign you a certain share of the delegated stake when you start validating. However, you can change this setting to know your rewards should you manage to attract more (or less) delegated stake than the default setting.
-   - **Change your performance factor:** Your performance factor under the calculator's default settings is 0.95. However, you can change this to simulate larger or smaller shares of online time. 
-   - **Change your fixed costs:** By the default settings of the calculator, your fixed costs are zero. This setting can be changed so you spare part of the pool rowards just for yourself. However, notice that the fixed cost is a public parameter, that you define during registration. This means that the delegator knows how you set this value and might consider it when choosing a validator to delegate. Furthermore, if you set this value too high, you'll be punished and won't get any rewards.
-
-- **Simulate your Mana accumulation**: the default setting of the calculator assumes a stationary regime and calculates the block creation rate you guarantee depending on your stake and level of participation. However, especially in the early stages of the network, you might want to save your Mana to sell later. This tab simulates how much Mana you'll accumulate in a certain time period. For that (besides the other already defined inputs), you just need to choose an initial and final epoch, and the tool will plot a graph of your accumulation during that period. In the same graph, you can also have an idea of how many blocks can be issued with this accumulated amount of Mana, for the different congestion levels (already defined in the non-advanced settings).
-
-
+    - **Change the number of staked tokens:** As in the case of delegators, by default, you will stake all your tokens.
+   However, you can also simulate a scenario where you only stake part of your tokens, with the rest remaining unstaked.
+   As usual, pay attention to the units! The input should be done in IOTA or Shimmer (not microIota or Glow).
+   - **Change your performance factor:** Under the calculator's default settings, your performance factor is 1.0. However, you can change this to simulate smaller shares of online time. 
+   - **Change your fixed costs:** By the calculator's default settings, your fixed costs are zero. This setting can be changed so you can spare part of the pool rewards for yourself. However, notice that the fixed cost is a public parameter you define during registration. This means that the delegator knows how you set this value and might consider it when choosing a validator to delegate. Furthermore, if you select this value too high, you'll be punished and won't get any rewards.
+   - **Change the amount of stake delegated to you:** The calculator's default settings automatically assign you a particular share of the delegated stake when you start validating, based on a specific "equilibrium state" (see the [Whitepaper](https://files.iota.org/papers/IOTA_2.0_Incentives_And_Tokenomics_Whitepaper.pdf) for more details). However, you can change this setting to know your rewards should you attract more (or less) delegated stakes than in the default setting.

src/components/ManaCalculator/actions/calculateBPS.ts

@@ -1,5 +1,3 @@
-import { EPOCH_DURATION } from '../constants';
-
 export function calculateBPS(mana: number, congestion: number): number {
-  return mana / congestion / EPOCH_DURATION;
+  return mana / congestion;
 }

src/components/ManaCalculator/components/DelegatorSettings.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Details } from '@docusaurus/theme-common/Details';
+import { useManaState } from '../hooks';
+import { fromMicro, toMicro } from '../utils';
+import Select from 'react-select';
+
+export function DelegatorSettings() {
+  const { state, handleOwnStakeChange, handleValidatorChange } = useManaState();
+
+  const validatorOptions = state.validators.map((_, i) => {
+    return { value: i, label: `Validator ${i + 1}` };
+  });
+
+  return (
+    <Details
+      summary='Delegator Settings'
+      className='mana_calculator__card mana_calculator_inner__card'
+    >
+      <label className='inlined-label'>Delegating to</label>
+      <Select
+        className='mana_calculator__compact inlined'
+        defaultValue={{ value: 0, label: `Validator 1` }}
+        onChange={(e) => {
+          handleValidatorChange(e.value);
+        }}
+        classNamePrefix='react-select'
+        options={validatorOptions}
+      />
+      <br />
+      <label className='inlined-label'>
+        Delegated amount ({state.network})
+      </label>
+      <input
+        className='mana_calculator__compact inlined'
+        value={fromMicro(state.stakedOrDelegatedTokens)}
+        onChange={(e) => handleOwnStakeChange(toMicro(Number(e.target.value)))}
+      ></input>
+    </Details>
+  );
+}

src/components/ManaCalculator/components/ManaCalculator.tsx

@@ -14,14 +14,13 @@ import {
   RoleSection,
   OtherParametersSection,
   ManaAccumulation,
-  BlocksAllowance,
 } from './';
 
 export function ManaCalculator() {
   const [state, setState] = useState(getDefaultParameters(NetworkType.IOTA));
   const manaState = useGivenManaState(state, setState);
   const results = useResultsPerEpoch(manaState.state);
-  const { data, manaUnit, blocksUnit } = useResultsWithUnit(results);
+  const { data, manaUnit } = useResultsWithUnit(results);
   return (
     <ManaStateContext.Provider value={{ state, setState }}>
       <h3>Configuration</h3>
@@ -32,7 +31,6 @@ export function ManaCalculator() {
       <h3>Results</h3>
       <OutputForm />
       <ManaAccumulation results={data} unit={manaUnit} />
-      <BlocksAllowance results={data} unit={blocksUnit} />
     </ManaStateContext.Provider>
   );
 }

src/components/ManaCalculator/components/OtherParametersSection.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useManaState } from '../hooks/useManaState';
 import Select from 'react-select';
+import { UserType } from '../enums';
 import { CongestionType } from '../enums';
 import { AdvancedSettingsValidator } from './AdvancedSettingsValidator';
 
@@ -45,7 +46,13 @@ export function OtherParametersSection() {
         value={state.finalEpoch}
         onChange={(e) => handleFinalEpochChange(Number(e.target.value))}
       ></input>
-      <AdvancedSettingsValidator />
+      {state.userType === UserType.HOLDER ? (
+        <></>
+      ) : (
+        <>
+          <AdvancedSettingsValidator />
+        </>
+      )}
     </div>
   );
 }