feat: UI polish (#1321)

* 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 * Add humanizer config * clean up styles * Update src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx Co-authored-by: Dr-Electron <[email protected]> * fixes * clean up --------- Co-authored-by: Begoña Alvarez <[email protected]> Co-authored-by: Dr-Electron <[email protected]>
iotaledger · Nov 8, 2023 · e73ce44 · e73ce44
1 parent daed1df
commit e73ce44
Show file tree

Hide file tree

Showing 15 changed files with 293 additions and 215 deletions.
diff --git a/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx b/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx
@@ -19,20 +19,37 @@ export function AdvancedSettingsValidator() {
   }
 
   return (
-    <Details summary='Advanced Settings - Validators'>
-      <div className='row'>
+    <Details
+      summary='Advanced Settings - Validators'
+      className='mana_calculator__card mana_calculator_inner__card table'
+    >
+      <div className='table'>
+        <div className='row'>
+          <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-space  text--center'>
+            Delegated
+          </div>
+          <div className='col col--2 horizontal-spaced text--center'>
+            Performance factor
+          </div>
+          <div className='col col--2 horizontal-spaced text--center'>
+            Fixed costs
+          </div>
+          <div className='col col--1'></div>
+        </div>
         {validators.map((validator, i) => (
-          <ValidatorCard validator={validator} id={i} key={i} />
+          <div className='row row--centered' key={i}>
+            <ValidatorCard validator={validator} id={i} />
+          </div>
         ))}
       </div>
-      <div className='row'>
-        <button
-          className='button button--danger col--4 add-button'
-          onClick={onAddValidator}
-        >
-          +
-        </button>
-      </div>
+      <button
+        className='button button--block mana-calculator__button '
+        onClick={onAddValidator}
+      >
+        New Validator
+      </button>
     </Details>
   );
 }
diff --git a/src/components/ManaCalculator/components/BlocksAllowance.tsx b/src/components/ManaCalculator/components/BlocksAllowance.tsx
@@ -9,14 +9,14 @@ import {
   YAxis,
 } from 'recharts';
 import { EpochReward } from '../types';
+import { chartTooltip } from './CharTooltip';
 
 export function BlocksAllowance({ results }: { results: EpochReward[] }) {
   return (
-    <div className='table'>
-      <br />
+    <>
       <h3>Blocks Allowance</h3>
       <ResponsiveContainer width='100%' height={250}>
-        <AreaChart data={results}>
+        <AreaChart data={results} margin={{ top: 10 }}>
           <defs>
             <linearGradient id='totalTps' x1='0' y1='0' x2='0' y2='1'>
               <stop offset='5%' stopColor='#7caae6' stopOpacity={0.8} />
@@ -31,12 +31,13 @@ export function BlocksAllowance({ results }: { results: EpochReward[] }) {
           <YAxis
             width={100}
             label={{ value: 'Blocks', angle: -90, position: 'insideLeft' }}
+            color='rgb(169, 184, 214)'
           />
           <CartesianGrid
             strokeDasharray='3 3'
             stroke='rgb(255, 255, 255, 0.15)'
           />
-          <Tooltip />
+          <Tooltip content={chartTooltip('Epoch', 'Blocks')} />
           <Area
             type='monotone'
             dataKey='totalTps'
@@ -46,6 +47,6 @@ export function BlocksAllowance({ results }: { results: EpochReward[] }) {
           />
         </AreaChart>
       </ResponsiveContainer>
-    </div>
+    </>
   );
 }
diff --git a/src/components/ManaCalculator/components/CharTooltip.tsx b/src/components/ManaCalculator/components/CharTooltip.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export function chartTooltip(
+  xLabel: string,
+  yLabel: string,
+  formatter: (value: number) => string = (v) => v.toString(),
+) {
+  return ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      const value = formatter(payload[0].value);
+      return (
+        <div className='mana-calculator__tooltip'>
+          <p>{`${xLabel}: ${label}`}</p>
+          <p>{`${yLabel}: ${value}`}</p>
+        </div>
+      );
+    }
+
+    return null;
+  };
+}
diff --git a/src/components/ManaCalculator/components/ManaAcculation.tsx b/src/components/ManaCalculator/components/ManaAcculation.tsx
@@ -9,11 +9,11 @@ import {
   YAxis,
 } from 'recharts';
 import { EpochReward } from '../types';
+import { chartTooltip } from './CharTooltip';
 
 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 }}>
@@ -37,7 +37,11 @@ export function ManaAccumulation({ results }: { results: EpochReward[] }) {
             strokeDasharray='3 3'
             stroke='rgb(255, 255, 255, 0.15)'
           />
-          <Tooltip />
+          <Tooltip
+            content={chartTooltip('Epoch', 'Mana', (v) =>
+              (v * 1_000_000).toString(),
+            )}
+          />
           <Area
             type='monotone'
             dataKey='mana'
@@ -47,6 +51,6 @@ export function ManaAccumulation({ results }: { results: EpochReward[] }) {
           />
         </AreaChart>
       </ResponsiveContainer>
-    </div>
+    </>
   );
 }
diff --git a/src/components/ManaCalculator/components/ManaCalculator.tsx b/src/components/ManaCalculator/components/ManaCalculator.tsx
@@ -22,11 +22,12 @@ export function ManaCalculator() {
 
   return (
     <ManaStateContext.Provider value={{ state, setState }}>
+      <h3>Configuration</h3>
       <NetworkSection />
       <RoleSection />
       <OtherParametersSection />
-      <AdvancedSettingsValidator />
       <br />
+      <h3>Results</h3>
       <OutputForm />
       <ManaAccumulation results={results} />
       <BlocksAllowance results={results} />

diff --git a/src/components/ManaCalculator/components/NetworkSection.tsx b/src/components/ManaCalculator/components/NetworkSection.tsx
@@ -6,11 +6,11 @@ import Select from 'react-select';
 export function NetworkSection() {
   const { handleNetworkChange } = useManaState();
   return (
-    <div className='grouped-form'>
-      <p className='align-center'>Network configuration</p>
+    <div className='mana_calculator__card'>
+      <h4>Network configuration</h4>
       <label className='inlined-label'>Your Network</label>
       <Select
-        className='compact inlined'
+        className='mana_calculator__compact inlined'
         defaultValue={{ value: NetworkType.IOTA, label: `IOTA` }}
         onChange={(e) => {
           handleNetworkChange(e.value);

diff --git a/src/components/ManaCalculator/components/OtherParametersSection.tsx b/src/components/ManaCalculator/components/OtherParametersSection.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useManaState } from '../hooks/useManaState';
 import Select from 'react-select';
 import { CongestionType } from '../enums';
+import { AdvancedSettingsValidator } from './AdvancedSettingsValidator';
 
 export function OtherParametersSection() {
   const {
@@ -11,11 +12,11 @@ export function OtherParametersSection() {
     handleFinalEpochChange,
   } = useManaState();
   return (
-    <div className='grouped-form'>
-      <p className='align-center'>Other parameters</p>
+    <div className='mana_calculator__card'>
+      <h4>Other parameters</h4>
       <label className='inlined-label'>Congestion</label>
       <Select
-        className='compact inlined'
+        className='mana_calculator__compact inlined'
         classNamePrefix='react-select'
         onChange={(e) => {
           handleCongestionChange(e.value);
@@ -33,17 +34,18 @@ export function OtherParametersSection() {
       <br />
       <label className='inlined-label'>Initial epoch</label>
       <input
-        className='compact inlined'
+        className='mana_calculator__compact inlined'
         value={state.initialEpoch}
         onChange={(e) => handleInitialEpochChange(Number(e.target.value))}
       ></input>
       <br />
       <label className='inlined-label'>Final epoch</label>
       <input
-        className='compact inlined'
+        className='mana_calculator__compact inlined'
         value={state.finalEpoch}
         onChange={(e) => handleFinalEpochChange(Number(e.target.value))}
       ></input>
+      <AdvancedSettingsValidator />
     </div>
   );
 }
diff --git a/src/components/ManaCalculator/components/OutputForm.tsx b/src/components/ManaCalculator/components/OutputForm.tsx
@@ -5,48 +5,39 @@ import humanizeDuration from 'humanize-duration';
 
 export function OutputForm() {
   const { state } = useManaState();
-  const {
-    generatedRewards,
-    passiveRewards,
-    totalTPS,
-    msToTransaction,
-    passiveMsToTransaction,
-  } = useResults(state);
+  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 humanizer = humanizeDuration.humanizer({
+    units: ['y', 'mo', 'w', 'd', 'h', 'm', 's', 'ms'],
+    maxDecimalPoints: 3,
+  });
+  const msToTransaction = humanizer(results.msToTransaction);
+  const passiveMsToTransaction = humanizer(results.passiveMsToTransaction);
 
   return (
-    <div className='table'>
-      <div className='row '>
-        <div className='col col--6'>Mana generation (by holding)</div>
-        <div className='col col--6 align-right'>
-          {fromMicro(passiveRewards)}
-        </div>
+    <div>
+      <div className='col'>
+        Mana generation (by holding):{' '}
+        <b className='output-result'>{passiveRewards}</b>
       </div>
-      <div className='row '>
-        <div className='col col--6'>Mana rewards</div>
-        <div className='col col--6 align-right'>
-          {fromMicro(generatedRewards)}
-        </div>
+      <div className='col'>
+        Mana rewards: <b className='output-result'>{manaGenerated}</b>
       </div>
-      <div className='row '>
-        <div className='col col--6'>Total TPS granted with</div>
-        <div className='col col--6 align-right'>{totalTPS}</div>
+      <div className='col'>
+        Total TPS granted: <b className='output-result'>{totalTPS}</b>
       </div>
-      <div className='row '>
-        <div className='col col--6'>
-          Time it takes to accumulate enough mana for a standard transaction...
-        </div>
+      <div className='col'>
+        Time it takes to accumulate enough mana for a standard transaction...
       </div>
-      <div className='row '>
-        <div className='col col--6'>...as a delegator/validator</div>
-        <div className='col col--6 align-right'>
-          {humanizeDuration(msToTransaction)}
-        </div>
+      <div className='col'>
+        ...as a delegator/validator:{' '}
+        <b className='output-result'>{msToTransaction}</b>
       </div>
-      <div className='row '>
-        <div className='col col--6'>...as a holder</div>
-        <div className='col col--6 align-right'>
-          {humanizeDuration(passiveMsToTransaction)}
-        </div>
+      <div className='col'>
+        ...as a holder:{' '}
+        <b className='output-result'>{passiveMsToTransaction}</b>
       </div>
     </div>
   );

diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx
@@ -18,11 +18,11 @@ export function RoleSection() {
   });
 
   return (
-    <div className='grouped-form'>
-      <p className='align-center'>Role configuration</p>
+    <div className='mana_calculator__card'>
+      <h4>Role configuration</h4>
       <label className='inlined-label'>Your Role</label>
       <Select
-        className='compact inlined'
+        className='mana_calculator__compact inlined'
         defaultValue={{ value: UserType.DELEGATOR, label: `Delegator` }}
         onChange={(e) => {
           handleUserChange(e.value);
@@ -36,7 +36,7 @@ export function RoleSection() {
       <br />
       <label className='inlined-label'>Held amount</label>
       <input
-        className='col col--4'
+        className='mana_calculator__compact inlined'
         value={fromMicro(state.heldTokens)}
         onChange={(e) => handleOwnHoldChange(toMicro(Number(e.target.value)))}
       ></input>
@@ -45,7 +45,7 @@ export function RoleSection() {
         <>
           <label className='inlined-label'>Stake</label>
           <input
-            className='compact inlined'
+            className='mana_calculator__compact inlined'
             value={fromMicro(state.stakedOrDelegatedTokens)}
             onChange={(e) =>
               handleOwnStakeChange(toMicro(Number(e.target.value)))
@@ -58,7 +58,7 @@ export function RoleSection() {
         <>
           <label className='inlined-label'>Delegating to</label>
           <Select
-            className='compact inlined'
+            className='mana_calculator__compact inlined'
             defaultValue={{ value: 0, label: `Validator 1` }}
             onChange={(e) => {
               handleValidatorChange(e.value);
@@ -69,7 +69,7 @@ export function RoleSection() {
           <br />
           <label className='inlined-label'>Delegated amount</label>
           <input
-            className='col col--4'
+            className='mana_calculator__compact inlined'
             value={fromMicro(state.stakedOrDelegatedTokens)}
             onChange={(e) =>
               handleOwnStakeChange(toMicro(Number(e.target.value)))