From 7845e32742ce7070ee6fe5a4a4e5b84b899492a2 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Tue, 3 May 2022 15:14:16 +0100 Subject: [PATCH 1/2] update inclusion prob UI --- .../src/pages/settings/system-variables.tsx | 27 ++++++++++++++++--- .../src/pages/settings/useSettingsState.ts | 12 ++++----- .../rust/inclusionprobabilityresponse.ts | 6 +++-- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/nym-wallet/src/pages/settings/system-variables.tsx b/nym-wallet/src/pages/settings/system-variables.tsx index a0276b4733..9f34b35484 100644 --- a/nym-wallet/src/pages/settings/system-variables.tsx +++ b/nym-wallet/src/pages/settings/system-variables.tsx @@ -1,9 +1,10 @@ /* eslint-disable no-nested-ternary */ import React, { useContext, useState } from 'react'; +import { useForm } from 'react-hook-form'; import { Box, Button, CircularProgress, Grid, LinearProgress, Stack, TextField, Typography } from '@mui/material'; import { PercentOutlined } from '@mui/icons-material'; import { yupResolver } from '@hookform/resolvers/yup'; -import { useForm } from 'react-hook-form'; +import { SelectionChance } from 'src/types/rust/selectionchance'; import { validationSchema } from './validationSchema'; import { Fee, InfoTooltip } from '../../components'; import { InclusionProbabilityResponse } from '../../types'; @@ -29,6 +30,26 @@ const DataField = ({ title, info, Indicator }: { title: string; info: string; In ); +const colorMap: { [key in SelectionChance]: string } = { + VeryLow: 'error.main', + Low: 'error.main', + Moderate: 'warning.main', + High: 'success.main', + VeryHigh: 'success.main', +}; + +const textMap: { [key in SelectionChance]: string } = { + VeryLow: 'Very low', + Low: 'Low', + Moderate: 'Moderate', + High: 'High', + VeryHigh: 'Very high', +}; + +const InclusionProbability = ({ probability }: { probability: SelectionChance }) => ( + {textMap[probability]} +); + const PercentIndicator = ({ value, warning }: { value: number; warning?: boolean }) => ( @@ -115,12 +136,12 @@ export const SystemVariables = ({ } + Indicator={} /> } + Indicator={} /> { const [saturation, setSaturation] = useState(0); const [rewardEstimation, setRewardEstimation] = useState(0); const [inclusionProbability, setInclusionProbability] = useState({ - in_active: 0, - in_reserve: 0, + in_active: 'Low', + in_reserve: 'Low', }); const { mixnodeDetails } = useContext(ClientContext); @@ -31,10 +31,8 @@ export const useSettingsState = (shouldUpdate: boolean) => { const probability = await getInclusionProbability(mixnodeKey); if (probability) { // eslint-disable-next-line @typescript-eslint/naming-convention - const in_active = Math.round(probability.in_active * 100); - // eslint-disable-next-line @typescript-eslint/naming-convention - const in_reserve = Math.round(probability.in_reserve * 100); - setInclusionProbability({ in_active, in_reserve }); + + setInclusionProbability({ in_active: probability.in_active, in_reserve: probability.in_reserve }); } }; @@ -42,7 +40,7 @@ export const useSettingsState = (shouldUpdate: boolean) => { setStatus('not_found'); setSaturation(0); setRewardEstimation(0); - setInclusionProbability({ in_active: 0, in_reserve: 0 }); + setInclusionProbability({ in_active: 'Low', in_reserve: 'Low' }); }; useEffect(() => { diff --git a/nym-wallet/src/types/rust/inclusionprobabilityresponse.ts b/nym-wallet/src/types/rust/inclusionprobabilityresponse.ts index ec83a70b04..31055c01cb 100644 --- a/nym-wallet/src/types/rust/inclusionprobabilityresponse.ts +++ b/nym-wallet/src/types/rust/inclusionprobabilityresponse.ts @@ -1,4 +1,6 @@ +import { SelectionChance } from './selectionchance'; + export interface InclusionProbabilityResponse { - in_active: number; - in_reserve: number; + in_active: SelectionChance; + in_reserve: SelectionChance; } From 5730c914e8340961038aa97d3b2cbbbc9735b6f1 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Tue, 3 May 2022 16:38:15 +0100 Subject: [PATCH 2/2] use coming soon chip --- nym-wallet/src/pages/settings/system-variables.tsx | 10 +++------- nym-wallet/src/pages/settings/useSettingsState.ts | 13 ++++++++++--- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/nym-wallet/src/pages/settings/system-variables.tsx b/nym-wallet/src/pages/settings/system-variables.tsx index 9f34b35484..539325499f 100644 --- a/nym-wallet/src/pages/settings/system-variables.tsx +++ b/nym-wallet/src/pages/settings/system-variables.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-nested-ternary */ import React, { useContext, useState } from 'react'; import { useForm } from 'react-hook-form'; -import { Box, Button, CircularProgress, Grid, LinearProgress, Stack, TextField, Typography } from '@mui/material'; +import { Box, Button, Chip, CircularProgress, Grid, LinearProgress, Stack, TextField, Typography } from '@mui/material'; import { PercentOutlined } from '@mui/icons-material'; import { yupResolver } from '@hookform/resolvers/yup'; import { SelectionChance } from 'src/types/rust/selectionchance'; @@ -78,7 +78,7 @@ export const SystemVariables = ({ inclusionProbability: InclusionProbabilityResponse; }) => { const [nodeUpdateResponse, setNodeUpdateResponse] = useState<'success' | 'failed'>(); - const { currency, mixnodeDetails } = useContext(ClientContext); + const { mixnodeDetails } = useContext(ClientContext); const { ownership } = useCheckOwnership(); const { @@ -126,11 +126,7 @@ export const SystemVariables = ({ theme.palette.nym.fee, fontWeight: '600' }}> - {rewardEstimation} {currency?.major} - - } + Indicator={} /> { const { mixnodeDetails } = useContext(ClientContext); + const { enqueueSnackbar } = useSnackbar(); + const getStatus = async (mixnodeKey: string) => { const newStatus = await getMixnodeStatus(mixnodeKey); setStatus(newStatus.status); @@ -46,9 +49,13 @@ export const useSettingsState = (shouldUpdate: boolean) => { useEffect(() => { if (shouldUpdate && mixnodeDetails?.mix_node.identity_key) { (async () => { - await getStatus(mixnodeDetails?.mix_node.identity_key); - await getStakeSaturation(mixnodeDetails?.mix_node.identity_key); - await getMixnodeInclusionProbability(mixnodeDetails?.mix_node.identity_key); + try { + await getStatus(mixnodeDetails?.mix_node.identity_key); + await getStakeSaturation(mixnodeDetails?.mix_node.identity_key); + await getMixnodeInclusionProbability(mixnodeDetails?.mix_node.identity_key); + } catch (e) { + enqueueSnackbar(e as string, { variant: 'error', preventDuplicate: true }); + } })(); } else { reset();