From e73ce4447364d044964d5fff2120ea1023830bb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Esp=C3=ADn?= Date: Wed, 8 Nov 2023 16:32:45 +0100 Subject: [PATCH] feat: UI polish (#1321) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Flexible network selector in the mana calculator * feat: Improved user flow for the Mana calculator * typo * chore: Refactor the Mana Calculator * :sparkles: * 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 * Update src/components/ManaCalculator/hooks/useManaState.ts Co-authored-by: Dr-Electron * 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 * fixes * clean up --------- Co-authored-by: Begoña Alvarez Co-authored-by: Dr-Electron --- .../components/AdvancedSettingsValidator.tsx | 39 ++++-- .../components/BlocksAllowance.tsx | 11 +- .../ManaCalculator/components/CharTooltip.tsx | 21 +++ .../components/ManaAcculation.tsx | 12 +- .../components/ManaCalculator.tsx | 3 +- .../components/NetworkSection.tsx | 6 +- .../components/OtherParametersSection.tsx | 12 +- .../ManaCalculator/components/OutputForm.tsx | 61 ++++----- .../ManaCalculator/components/RoleSection.tsx | 14 +- .../components/ValidatorCard.tsx | 88 +++++------- .../components/ValidatorSettings.tsx | 126 +++++++++--------- src/components/ManaCalculator/styles.css | 78 +++++++++++ src/components/TutorialFilters/index.tsx | 1 + src/components/TutorialFilters/styles.css | 5 +- src/css/custom.css | 31 +---- 15 files changed, 293 insertions(+), 215 deletions(-) create mode 100644 src/components/ManaCalculator/components/CharTooltip.tsx diff --git a/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx b/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx index 05a2945f6fb..abff422a465 100644 --- a/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx +++ b/src/components/ManaCalculator/components/AdvancedSettingsValidator.tsx @@ -19,20 +19,37 @@ export function AdvancedSettingsValidator() { } return ( -
-
+
+
+
+
ID
+
Stake
+
+ Delegated +
+
+ Performance factor +
+
+ Fixed costs +
+
+
{validators.map((validator, i) => ( - +
+ +
))}
-
- -
+
); } diff --git a/src/components/ManaCalculator/components/BlocksAllowance.tsx b/src/components/ManaCalculator/components/BlocksAllowance.tsx index 724d3be3dc5..8c6c7fab2cf 100644 --- 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 ( -
-
+ <>

Blocks Allowance

- + @@ -31,12 +31,13 @@ export function BlocksAllowance({ results }: { results: EpochReward[] }) { - + -
+ ); } diff --git a/src/components/ManaCalculator/components/CharTooltip.tsx b/src/components/ManaCalculator/components/CharTooltip.tsx new file mode 100644 index 00000000000..6e1f003490d --- /dev/null +++ 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 ( +
+

{`${xLabel}: ${label}`}

+

{`${yLabel}: ${value}`}

+
+ ); + } + + return null; + }; +} diff --git a/src/components/ManaCalculator/components/ManaAcculation.tsx b/src/components/ManaCalculator/components/ManaAcculation.tsx index f7e9e1a7f03..36584a6de2d 100644 --- 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 ( -
-
+ <>

Mana Accumulation

@@ -37,7 +37,11 @@ export function ManaAccumulation({ results }: { results: EpochReward[] }) { strokeDasharray='3 3' stroke='rgb(255, 255, 255, 0.15)' /> - + + (v * 1_000_000).toString(), + )} + /> -
+ ); } diff --git a/src/components/ManaCalculator/components/ManaCalculator.tsx b/src/components/ManaCalculator/components/ManaCalculator.tsx index 320527574f9..7086a883ebe 100644 --- a/src/components/ManaCalculator/components/ManaCalculator.tsx +++ b/src/components/ManaCalculator/components/ManaCalculator.tsx @@ -22,11 +22,12 @@ export function ManaCalculator() { return ( +

Configuration

-
+

Results

diff --git a/src/components/ManaCalculator/components/NetworkSection.tsx b/src/components/ManaCalculator/components/NetworkSection.tsx index cd2b6c05798..5bd4e0784ec 100644 --- 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 ( -
-

Network configuration

+
+

Network configuration

{ handleCongestionChange(e.value); @@ -33,17 +34,18 @@ export function OtherParametersSection() {
handleInitialEpochChange(Number(e.target.value))} >
handleFinalEpochChange(Number(e.target.value))} > +
); } diff --git a/src/components/ManaCalculator/components/OutputForm.tsx b/src/components/ManaCalculator/components/OutputForm.tsx index a20e90c000c..2f0d47b78e5 100644 --- 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 ( -
-
-
Mana generation (by holding)
-
- {fromMicro(passiveRewards)} -
+
+
+ Mana generation (by holding):{' '} + {passiveRewards}
-
-
Mana rewards
-
- {fromMicro(generatedRewards)} -
+
+ Mana rewards: {manaGenerated}
-
-
Total TPS granted with
-
{totalTPS}
+
+ Total TPS granted: {totalTPS}
-
-
- Time it takes to accumulate enough mana for a standard transaction... -
+
+ Time it takes to accumulate enough mana for a standard transaction...
-
-
...as a delegator/validator
-
- {humanizeDuration(msToTransaction)} -
+
+ ...as a delegator/validator:{' '} + {msToTransaction}
-
-
...as a holder
-
- {humanizeDuration(passiveMsToTransaction)} -
+
+ ...as a holder:{' '} + {passiveMsToTransaction}
); diff --git a/src/components/ManaCalculator/components/RoleSection.tsx b/src/components/ManaCalculator/components/RoleSection.tsx index c4097ab4281..bbca80bebc6 100644 --- a/src/components/ManaCalculator/components/RoleSection.tsx +++ b/src/components/ManaCalculator/components/RoleSection.tsx @@ -18,11 +18,11 @@ export function RoleSection() { }); return ( -
-

Role configuration

+
+

Role configuration

handleOwnHoldChange(toMicro(Number(e.target.value)))} > @@ -45,7 +45,7 @@ export function RoleSection() { <> handleOwnStakeChange(toMicro(Number(e.target.value))) @@ -58,7 +58,7 @@ export function RoleSection() { <> handleOwnStakeChange(toMicro(Number(e.target.value))) diff --git a/src/components/ManaCalculator/components/ValidatorCard.tsx b/src/components/ManaCalculator/components/ValidatorCard.tsx index e52ad669d49..f2826461bea 100644 --- a/src/components/ManaCalculator/components/ValidatorCard.tsx +++ b/src/components/ManaCalculator/components/ValidatorCard.tsx @@ -18,58 +18,40 @@ export function ValidatorCard({ handleFCChange, } = useManaState(); return ( -
-
-
-
Validator {id + 1}
- -
-
-
Stake:
- - handleStakeChange(toMicro(Number(e.target.value)), id) - } - > -
-
-
Delegated:
- - handleDelegatedStakeChange(toMicro(Number(e.target.value)), id) - } - > -
-
-
PF:
- handlePFChange(Number(e.target.value), id)} - > -
-
-
FC:
- handleFCChange(Number(e.target.value), id)} - > -
-
-
+ <> +
Validator {id + 1}
+ handleStakeChange(toMicro(Number(e.target.value)), id)} + > + + handleDelegatedStakeChange(toMicro(Number(e.target.value)), id) + } + > + handlePFChange(Number(e.target.value), id)} + > + handleFCChange(Number(e.target.value), id)} + > + + ); } diff --git a/src/components/ManaCalculator/components/ValidatorSettings.tsx b/src/components/ManaCalculator/components/ValidatorSettings.tsx index aed802c432b..95be4df6508 100644 --- a/src/components/ManaCalculator/components/ValidatorSettings.tsx +++ b/src/components/ManaCalculator/components/ValidatorSettings.tsx @@ -5,11 +5,13 @@ import { useManaState } from '../hooks'; export function ValidatorSettings() { const { state: { - performanceFactor, - fixedCost, - shareOfYourStakeLocked, - attractedNewDelegatedStake, - attractedDelegatedStakeFromOtherPools, + validator: { + performanceFactor, + fixedCost, + shareOfYourStakeLocked, + attractedNewDelegatedStake, + attractedDelegatedStakeFromOtherPools, + }, }, handleOwnPFChange, handleOwnFCChange, @@ -18,64 +20,60 @@ export function ValidatorSettings() { handleAttractedDelegatedStakeFromOtherPoolsChange, } = useManaState(); return ( -
-
-
-
Performance factor:
- handleOwnPFChange(Number(e.target.value))} - > -
- -
-
Fixed costs:
- handleOwnFCChange(Number(e.target.value))} - > -
-
-
Share of your stake locked:
- - handleShareOfYourStakeLockedChange(Number(e.target.value)) - } - > -
-
-
Attracted new delegated stake:
- - handleAttractedNewDelegatedStakeChange(Number(e.target.value)) - } - > -
-
-
- Attracted delegated stake from other pools: -
- - handleAttractedDelegatedStakeFromOtherPoolsChange( - Number(e.target.value), - ) - } - > -
-
-
+
+ + handleOwnPFChange(Number(e.target.value))} + > +
+ + handleOwnFCChange(Number(e.target.value))} + > +
+ + + handleShareOfYourStakeLockedChange(Number(e.target.value)) + } + > +
+ + + handleAttractedNewDelegatedStakeChange(Number(e.target.value)) + } + > +
+ + + handleAttractedDelegatedStakeFromOtherPoolsChange( + Number(e.target.value), + ) + } + > +
); } diff --git a/src/components/ManaCalculator/styles.css b/src/components/ManaCalculator/styles.css index e3631c31ab6..2069f8041ff 100644 --- a/src/components/ManaCalculator/styles.css +++ b/src/components/ManaCalculator/styles.css @@ -29,3 +29,81 @@ .table .row:nth-child(even) { background: var(--ifm-table-cell-color); } + +.mana_calculator__card { + background-color: var(--ifm-color-emphasis-100); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: var(--ifm-global-radius); + color: inherit; + transition: border-color 200ms ease-in-out; + padding: 15px; + margin: 10px 0px; +} + +.mana_calculator_inner__card { + background-color: var(--ifm-color-emphasis-0); + box-shadow: none; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: var(--ifm-global-radius); + color: inherit; + transition: border-color 200ms ease-in-out; + padding: 15px; + margin: 10px 0px; +} + +.mana_calculator__card input:not([role$='combobox']) { + background-color: var(--ifm-color-emphasis-200) !important; + padding: 10px; + border-radius: 4px; + border: none; +} + +.input--vertical-spaced { + margin-bottom: 1rem; +} + +.horizontal-spaced { + margin-right: 5px; +} + +.button--remove { + padding: 10px; +} + +.row--centered { + display: flex; + align-items: center; +} + +.mana-calculator__tooltip { + background-color: var(--ifm-color-emphasis-100); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: var(--ifm-global-radius); + color: inherit; + padding: 10px; +} + +.mana-calculator__button { + background-color: var(--ifm-color-emphasis-100); + margin: 0px; + margin-top: 1rem; +} + +.mana-calculator__tooltip > p { + margin: 0; +} + +.inlined-label { + display: inline-block; + width: 150px; +} + +.inlined-long-label { + display: inline-block; + width: 350px; +} + +.mana_calculator__compact { + width: 200px; + margin-bottom: 1rem !important; +} diff --git a/src/components/TutorialFilters/index.tsx b/src/components/TutorialFilters/index.tsx index 11bf5ed4e2b..e4055bc0865 100644 --- a/src/components/TutorialFilters/index.tsx +++ b/src/components/TutorialFilters/index.tsx @@ -218,6 +218,7 @@ function TutorialFilters() { options={tags} {...selectProps} value={value} + className='react-select-spaced__control' />
); diff --git a/src/components/TutorialFilters/styles.css b/src/components/TutorialFilters/styles.css index 79141940fad..6bf6a194b53 100644 --- a/src/components/TutorialFilters/styles.css +++ b/src/components/TutorialFilters/styles.css @@ -57,10 +57,13 @@ cursor: pointer !important; background-color: var(--ifm-color-emphasis-200) !important; border: 0 !important; - margin-bottom: 1rem !important; border-radius: 6px !important; } +.react-select-spaced__control { + margin-bottom: 1rem !important; +} + .react-select__indicator { cursor: pointer; color: var(--ifm-font-color-base) !important; diff --git a/src/css/custom.css b/src/css/custom.css index 1b0bfa8f19d..a41d4ad16b2 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -477,39 +477,14 @@ ul ul .table-of-contents__link { text-align: center; } -.grouped-form { - border: 1px solid gray; - border-radius: 8px; - padding: 8px 12px; - margin: 5px 0px; -} - -.grouped-form input:not([role$='combobox']) { - background-color: var(--ifm-color-emphasis-200) !important; - padding: 10px; - border-radius: 4px; - border: none; - width: 150px; - margin-bottom: 1rem; -} - .inlined { display: inline-block; } -.inlined-label { - display: inline-block; - width: 150px; -} - -.compact { - width: 200px; -} - .react-select__control { background-color: var(--ifm-color-emphasis-200) !important; border: 0 !important; - margin-bottom: 1rem !important; + margin: 0 !important; } .react-select__placeholder { @@ -541,3 +516,7 @@ ul ul .table-of-contents__link { .react-select__multi-value__label { color: var(--ifm-font-color-base) !important; } + +.recharts-text { + fill: var(--ifm-menu-color) !important; +}