feat: Mana calculator units (#1324)

* feat: Flexible network selector in the mana calculator * feat: Improved user flow for the Mana calculator * typo * chore: Refactor the Mana Calculator * ✨ * clean up * clean up * feat: Add user total holding input * feat: Mana accumulation graph * feat: Block issuance rate graph * clean up * network params * clean up * clean up * fmt * prettify * typo * fix * fix * fix * improve graph * tweak * enhancement * Update src/components/ManaCalculator/hooks/useManaState.ts Co-authored-by: Dr-Electron <[email protected]> * Update src/components/ManaCalculator/hooks/useManaState.ts Co-authored-by: Dr-Electron <[email protected]> * fmt * clean up * fmt * feat: UI Polish * ui polish * feat: Display units in Mana Calculator * Add humanizer config * clean up styles * Update src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx Co-authored-by: Dr-Electron <[email protected]> * fixes * clean up * more units * more decimals * smarter rounding --------- Co-authored-by: Begoña Alvarez <[email protected]> Co-authored-by: Dr-Electron <[email protected]>
iotaledger · Nov 8, 2023 · b7d163f · b7d163f
1 parent e73ce44
commit b7d163f
Show file tree

Hide file tree

Showing 14 changed files with 136 additions and 37 deletions.
diff --git a/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx b/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx
@@ -4,10 +4,7 @@ import { useManaState } from '../hooks';
 import { ValidatorCard } from './ValidatorCard';
 
 export function AdvancedSettingsValidator() {
-  const {
-    handleAddValidator,
-    state: { validators },
-  } = useManaState();
+  const { handleAddValidator, state } = useManaState();
 
   function onAddValidator() {
     handleAddValidator({
@@ -24,11 +21,13 @@ export function AdvancedSettingsValidator() {
       className='mana_calculator__card mana_calculator_inner__card table'
     >
       <div className='table'>
-        <div className='row'>
+        <div className='row small-row-head'>
           <div className='col col--2 text--center'>ID</div>
-          <div className='col col--2 horizontal-spaced text--center'>Stake</div>
+          <div className='col col--2 horizontal-spaced text--center'>
+            Stake ({state.network})
+          </div>
           <div className='col col--2 horizontal-space  text--center'>
-            Delegated
+            Delegated ({state.network})
           </div>
           <div className='col col--2 horizontal-spaced text--center'>
             Performance factor
@@ -38,7 +37,7 @@ export function AdvancedSettingsValidator() {
           </div>
           <div className='col col--1'></div>
         </div>
-        {validators.map((validator, i) => (
+        {state.validators.map((validator, i) => (
           <div className='row row--centered' key={i}>
             <ValidatorCard validator={validator} id={i} />
           </div>

diff --git a/src/components/ManaCalculator/components/BlocksAllowance.tsx b/src/components/ManaCalculator/components/BlocksAllowance.tsx
@@ -8,10 +8,17 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { Unit } from '../hooks';
 import { EpochReward } from '../types';
 import { chartTooltip } from './CharTooltip';
 
-export function BlocksAllowance({ results }: { results: EpochReward[] }) {
+export function BlocksAllowance({
+  results,
+  unit,
+}: {
+  results: EpochReward[];
+  unit: Unit;
+}) {
   return (
     <>
       <h3>Blocks Allowance</h3>
@@ -32,12 +39,13 @@ export function BlocksAllowance({ results }: { results: EpochReward[] }) {
             width={100}
             label={{ value: 'Blocks', angle: -90, position: 'insideLeft' }}
             color='rgb(169, 184, 214)'
+            unit={unit}
           />
           <CartesianGrid
             strokeDasharray='3 3'
             stroke='rgb(255, 255, 255, 0.15)'
           />
-          <Tooltip content={chartTooltip('Epoch', 'Blocks')} />
+          <Tooltip content={chartTooltip('Epoch', 'Blocks', unit)} />
           <Area
             type='monotone'
             dataKey='totalTps'

diff --git a/src/components/ManaCalculator/components/CharTooltip.tsx b/src/components/ManaCalculator/components/CharTooltip.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
+import { getSizeOfUnit, Unit } from '../hooks';
 
-export function chartTooltip(
-  xLabel: string,
-  yLabel: string,
-  formatter: (value: number) => string = (v) => v.toString(),
-) {
+export function chartTooltip(xLabel: string, yLabel: string, unit: Unit) {
+  const unitSize = getSizeOfUnit(unit);
   return ({ active, payload, label }) => {
     if (active && payload && payload.length) {
-      const value = formatter(payload[0].value);
+      const value = payload[0].value * unitSize;
       return (
         <div className='mana-calculator__tooltip'>
           <p>{`${xLabel}: ${label}`}</p>

diff --git a/src/components/ManaCalculator/components/ManaAcculation.tsx b/src/components/ManaCalculator/components/ManaAcculation.tsx
@@ -8,10 +8,17 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { Unit } from '../hooks';
 import { EpochReward } from '../types';
 import { chartTooltip } from './CharTooltip';
 
-export function ManaAccumulation({ results }: { results: EpochReward[] }) {
+export function ManaAccumulation({
+  results,
+  unit,
+}: {
+  results: EpochReward[];
+  unit: Unit;
+}) {
   return (
     <>
       <h3>Mana Accumulation</h3>
@@ -31,17 +38,13 @@ export function ManaAccumulation({ results }: { results: EpochReward[] }) {
           <YAxis
             width={100}
             label={{ value: 'Mana', angle: -90, position: 'insideLeft' }}
-            unit='M'
+            unit={unit}
           />
           <CartesianGrid
             strokeDasharray='3 3'
             stroke='rgb(255, 255, 255, 0.15)'
           />
-          <Tooltip
-            content={chartTooltip('Epoch', 'Mana', (v) =>
-              (v * 1_000_000).toString(),
-            )}
-          />
+          <Tooltip content={chartTooltip('Epoch', 'Mana', unit)} />
           <Area
             type='monotone'
             dataKey='mana'

diff --git a/src/components/ManaCalculator/components/ManaCalculator.tsx b/src/components/ManaCalculator/components/ManaCalculator.tsx
@@ -5,6 +5,7 @@ import {
   getDefaultParameters,
   ManaStateContext,
   useResultsPerEpoch,
+  useResultsWithUnit,
 } from '../hooks';
 import {
   OutputForm,
@@ -19,7 +20,7 @@ import {
 export function ManaCalculator() {
   const [state, setState] = useState(getDefaultParameters(NetworkType.IOTA));
   const results = useResultsPerEpoch(state);
-
+  const { data, manaUnit, blocksUnit } = useResultsWithUnit(results);
   return (
     <ManaStateContext.Provider value={{ state, setState }}>
       <h3>Configuration</h3>
@@ -29,8 +30,8 @@ export function ManaCalculator() {
       <br />
       <h3>Results</h3>
       <OutputForm />
-      <ManaAccumulation results={results} />
-      <BlocksAllowance results={results} />
+      <ManaAccumulation results={data} unit={manaUnit} />
+      <BlocksAllowance results={data} unit={blocksUnit} />
     </ManaStateContext.Provider>
   );
 }
diff --git a/src/components/ManaCalculator/components/OutputForm.tsx b/src/components/ManaCalculator/components/OutputForm.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { useManaState, useResults } from '../hooks';
-import { fromMicro } from '../utils';
+import { fromMicro, roundMax } from '../utils';
 import humanizeDuration from 'humanize-duration';
 
 export function OutputForm() {
   const { state } = useManaState();
   const results = useResults(state);
-  const passiveRewards = fromMicro(results.passiveRewards).toFixed(2);
-  const manaGenerated = fromMicro(results.generatedRewards).toFixed(2);
-  const totalTPS = results.totalTPS.toFixed(2);
+  const passiveRewards = roundMax(fromMicro(results.passiveRewards), 6);
+  const manaGenerated = roundMax(fromMicro(results.generatedRewards), 6);
+  const totalTPS = roundMax(results.totalTPS, 2);
   const humanizer = humanizeDuration.humanizer({
     units: ['y', 'mo', 'w', 'd', 'h', 'm', 's', 'ms'],
     maxDecimalPoints: 3,

diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -34,7 +34,7 @@ export function RoleSection() {
         ]}
       />
       <br />
-      <label className='inlined-label'>Held amount</label>
+      <label className='inlined-label'>Held amount ({state.network})</label>
       <input
         className='mana_calculator__compact inlined'
         value={fromMicro(state.heldTokens)}
@@ -43,7 +43,7 @@ export function RoleSection() {
       <br />
       {state.userType === UserType.VALIDATOR ? (
         <>
-          <label className='inlined-label'>Stake</label>
+          <label className='inlined-label'>Stake ({state.network})</label>
           <input
             className='mana_calculator__compact inlined'
             value={fromMicro(state.stakedOrDelegatedTokens)}
@@ -67,7 +67,9 @@ export function RoleSection() {
             options={validatorOptions}
           />
           <br />
-          <label className='inlined-label'>Delegated amount</label>
+          <label className='inlined-label'>
+            Delegated amount ({state.network})
+          </label>
           <input
             className='mana_calculator__compact inlined'
             value={fromMicro(state.stakedOrDelegatedTokens)}

diff --git a/src/components/ManaCalculator/enums/parameters.enum.ts b/src/components/ManaCalculator/enums/parameters.enum.ts
@@ -10,8 +10,8 @@ export enum UserType {
 }
 
 export enum NetworkType {
-  IOTA,
-  SHIMMER,
+  IOTA = 'IOTA',
+  SHIMMER = 'SMR',
 }
 
 export enum CongestionType {

diff --git a/src/components/ManaCalculator/hooks/index.ts b/src/components/ManaCalculator/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useManaState';
 export * from './useResults';
 export * from './useResultsPerEpoch';
+export * from './useResultsWithUnit';
diff --git a/src/components/ManaCalculator/hooks/useResultsPerEpoch.ts b/src/components/ManaCalculator/hooks/useResultsPerEpoch.ts
@@ -58,7 +58,7 @@ export function useResultsPerEpoch(state: ManaCalculatorProps): EpochReward[] {
 
     results.push({
       epoch: i,
-      mana: fromMicro(mana) / 1_000_000,
+      mana: fromMicro(mana),
       totalTps,
     });
   }

diff --git a/src/components/ManaCalculator/hooks/useResultsWithUnit.ts b/src/components/ManaCalculator/hooks/useResultsWithUnit.ts
@@ -0,0 +1,78 @@
+import { EpochReward } from '../types/epoch-reward.type';
+
+export enum Unit {
+  default = 'default',
+  K = 'K',
+  M = 'M',
+  G = 'G',
+  T = 'T',
+  P = 'P',
+}
+
+const UNIT_MAP: { [unit in Unit]: { val: number; dp: number } } = {
+  default: { val: 1, dp: 0 },
+  K: { val: 1000, dp: 3 },
+  M: { val: 1000000, dp: 6 },
+  G: { val: 1000000000, dp: 9 },
+  T: { val: 1000000000000, dp: 12 },
+  P: { val: 1000000000000000, dp: 15 },
+};
+
+const getUnit = (value: number): Unit => {
+  let bestUnits: Unit = Unit.default;
+  if (!value || value === 0) {
+    return Unit.M;
+  }
+  const checkLength = Math.abs(value).toString().length;
+
+  if (checkLength > UNIT_MAP.M.dp) {
+    bestUnits = Unit.M;
+  } else if (checkLength > UNIT_MAP.K.dp) {
+    bestUnits = Unit.K;
+  } else if (checkLength > UNIT_MAP.G.dp) {
+    bestUnits = Unit.G;
+  } else if (checkLength > UNIT_MAP.M.dp) {
+    bestUnits = Unit.M;
+  } else if (checkLength > UNIT_MAP.K.dp) {
+    bestUnits = Unit.K;
+  }
+
+  return bestUnits;
+};
+
+interface UseResultsWithUnit {
+  data: EpochReward[];
+  manaUnit: Unit;
+  blocksUnit: Unit;
+}
+
+export function getSizeOfUnit(unit: Unit): number {
+  return UNIT_MAP[unit].val;
+}
+
+export function useResultsWithUnit(results: EpochReward[]): UseResultsWithUnit {
+  const averageMana =
+    results.reduce((acc, reward) => acc + reward.mana, 0) / results.length;
+  const averageBlocks =
+    results.reduce((acc, reward) => acc + reward.totalTps, 0) / results.length;
+
+  const manaUnit = getUnit(averageMana);
+  const blocksUnit = getUnit(averageBlocks);
+
+  const manaSize = getSizeOfUnit(manaUnit);
+  const blocksSize = getSizeOfUnit(blocksUnit);
+
+  const data = results.map<EpochReward>((reward) => {
+    return {
+      ...reward,
+      mana: reward.mana / manaSize,
+      totalTps: reward.totalTps / blocksSize,
+    };
+  });
+
+  return {
+    data,
+    manaUnit,
+    blocksUnit,
+  };
+}
diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css
@@ -95,14 +95,18 @@
 
 .inlined-label {
   display: inline-block;
-  width: 150px;
+  width: 200px;
 }
 
 .inlined-long-label {
   display: inline-block;
   width: 350px;
 }
 
+.small-row-head {
+  font-size: 15px;
+}
+
 .mana_calculator__compact {
   width: 200px;
   margin-bottom: 1rem !important;

diff --git a/src/components/ManaCalculator/types/epoch-reward.type.ts b/src/components/ManaCalculator/types/epoch-reward.type.ts
@@ -1,4 +1,5 @@
 export interface EpochReward {
   epoch: number;
   mana: number;
+  totalTps: number;
 }
diff --git a/src/components/ManaCalculator/utils.ts b/src/components/ManaCalculator/utils.ts
@@ -31,3 +31,7 @@ export function getNetworkSupply(network: NetworkType): number {
     return SHIMMER_SUPPLY;
   }
 }
+
+export const roundMax = function (num: number, places: number) {
+  return +(Math.round(Number(num + 'e+' + places)) + 'e-' + places);
+};