feat: Block issuance rate graph in Mana Calculator (#1318)

* 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 --------- Co-authored-by: Begoña Alvarez <[email protected]> Co-authored-by: Dr-Electron <[email protected]>
iotaledger · Nov 6, 2023 · b0f1dc7 · b0f1dc7
1 parent 67c2d3b
commit b0f1dc7
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 17 deletions.
diff --git a/src/components/ManaCalculator/components/BlocksAllowance.tsx b/src/components/ManaCalculator/components/BlocksAllowance.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { EpochReward } from '../types';
+
+export function BlocksAllowance({ results }: { results: EpochReward[] }) {
+  return (
+    <div className='table'>
+      <br />
+      <h3>Blocks Allowance</h3>
+      <ResponsiveContainer width='100%' height={250}>
+        <AreaChart data={results}>
+          <defs>
+            <linearGradient id='totalTps' x1='0' y1='0' x2='0' y2='1'>
+              <stop offset='5%' stopColor='#7caae6' stopOpacity={0.8} />
+              <stop offset='95%' stopColor='#7caae6' stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <XAxis
+            dataKey='epoch'
+            height={50}
+            label={{ value: 'Epochs', position: 'insideBottom' }}
+          />
+          <YAxis
+            width={100}
+            label={{ value: 'Blocks', angle: -90, position: 'insideLeft' }}
+          />
+          <CartesianGrid
+            strokeDasharray='3 3'
+            stroke='rgb(255, 255, 255, 0.15)'
+          />
+          <Tooltip />
+          <Area
+            type='monotone'
+            dataKey='totalTps'
+            stroke='#7caae6'
+            fillOpacity={1}
+            fill='url(#totalTps)'
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
diff --git a/src/components/ManaCalculator/components/ManaAcculation.tsx b/src/components/ManaCalculator/components/ManaAcculation.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useManaState, useResultsPerEpoch } from '../hooks';
 import {
   Area,
   AreaChart,
@@ -9,26 +8,20 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { EpochReward } from '../types';
 
-export function ManaAccumulation() {
-  const { state } = useManaState();
-  const results = useResultsPerEpoch(state);
-
+export function ManaAccumulation({ results }: { results: EpochReward[] }) {
   return (
     <div className='table'>
       <br />
       <h3>Mana Accumulation</h3>
       <ResponsiveContainer width='100%' height={250}>
         <AreaChart data={results} margin={{ top: 10 }}>
           <defs>
-            <linearGradient id='colorUv' x1='0' y1='0' x2='0' y2='1'>
+            <linearGradient id='manaColor' x1='0' y1='0' x2='0' y2='1'>
               <stop offset='5%' stopColor='#8884d8' stopOpacity={0.8} />
               <stop offset='95%' stopColor='#8884d8' stopOpacity={0} />
             </linearGradient>
-            <linearGradient id='colorPv' x1='0' y1='0' x2='0' y2='1'>
-              <stop offset='5%' stopColor='#82ca9d' stopOpacity={0.8} />
-              <stop offset='95%' stopColor='#82ca9d' stopOpacity={0} />
-            </linearGradient>
           </defs>
           <XAxis
             dataKey='epoch'
@@ -40,14 +33,17 @@ export function ManaAccumulation() {
             label={{ value: 'Mana', angle: -90, position: 'insideLeft' }}
             unit='M'
           />
-          <CartesianGrid strokeDasharray='3 3' />
+          <CartesianGrid
+            strokeDasharray='3 3'
+            stroke='rgb(255, 255, 255, 0.15)'
+          />
           <Tooltip />
           <Area
             type='monotone'
             dataKey='mana'
             stroke='#8884d8'
             fillOpacity={1}
-            fill='url(#colorUv)'
+            fill='url(#manaColor)'
           />
         </AreaChart>
       </ResponsiveContainer>

diff --git a/src/components/ManaCalculator/components/ManaCalculator.tsx b/src/components/ManaCalculator/components/ManaCalculator.tsx
@@ -1,18 +1,24 @@
 import React, { useState } from 'react';
 import '../styles.css';
 import { NetworkType } from '../enums';
-import { getDefaultParameters, ManaStateContext } from '../hooks';
+import {
+  getDefaultParameters,
+  ManaStateContext,
+  useResultsPerEpoch,
+} from '../hooks';
 import {
   OutputForm,
   NetworkSection,
   AdvancedSettingsValidator,
   RoleSection,
   OtherParametersSection,
   ManaAccumulation,
+  BlocksAllowance,
 } from './';
 
 export function ManaCalculator() {
   const [state, setState] = useState(getDefaultParameters(NetworkType.IOTA));
+  const results = useResultsPerEpoch(state);
 
   return (
     <ManaStateContext.Provider value={{ state, setState }}>
@@ -22,7 +28,8 @@ export function ManaCalculator() {
       <AdvancedSettingsValidator />
       <br />
       <OutputForm />
-      <ManaAccumulation />
+      <ManaAccumulation results={results} />
+      <BlocksAllowance results={results} />
     </ManaStateContext.Provider>
   );
 }
diff --git a/src/components/ManaCalculator/components/index.ts b/src/components/ManaCalculator/components/index.ts
@@ -7,3 +7,4 @@ export * from './RoleSection';
 export * from './OutputForm';
 export * from './NetworkSection';
 export * from './ManaAcculation';
+export * from './BlocksAllowance';
diff --git a/src/components/ManaCalculator/hooks/useResultsPerEpoch.ts b/src/components/ManaCalculator/hooks/useResultsPerEpoch.ts
@@ -1,4 +1,8 @@
-import { calculateManaRewards, calculatePassiveRewards } from '../actions';
+import {
+  calculateManaRewards,
+  calculatePassiveRewards,
+  calculateTPS,
+} from '../actions';
 import { UserType } from '../enums';
 import {
   EpochReward,
@@ -23,7 +27,7 @@ export function useResultsPerEpoch(state: ManaCalculatorProps): EpochReward[] {
   const results = [];
 
   for (let i = state.initialEpoch; i <= state.finalEpoch; i++) {
-    const generatedMana = calculateManaRewards(
+    const manaGenerated = calculateManaRewards(
       state.stakedOrDelegatedTokens,
       state.delegator.validator,
       validatorParameters,
@@ -40,11 +44,19 @@ export function useResultsPerEpoch(state: ManaCalculatorProps): EpochReward[] {
       i,
     );
 
-    const mana = generatedMana + passiveRewards;
+    const mana = manaGenerated + passiveRewards;
+
+    const tpsFromPassiveRewards = calculateTPS(
+      passiveRewards,
+      state.congestion,
+    );
+    const tpsFromGeneratedMana = calculateTPS(manaGenerated, state.congestion);
+    const totalTps = tpsFromPassiveRewards + tpsFromGeneratedMana;
 
     results.push({
       epoch: i,
       mana: fromMicro(mana) / 1_000_000,
+      totalTps,
     });
   }