diff --git a/nym-wallet/src/pages/settings/system-variables.tsx b/nym-wallet/src/pages/settings/system-variables.tsx index a0276b4733..539325499f 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 { Box, Button, CircularProgress, Grid, LinearProgress, Stack, TextField, Typography } from '@mui/material'; +import { useForm } from 'react-hook-form'; +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 { 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 }) => ( @@ -57,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 { @@ -105,22 +126,18 @@ export const SystemVariables = ({ theme.palette.nym.fee, fontWeight: '600' }}> - {rewardEstimation} {currency?.major} - - } + Indicator={} /> } + 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); + const { enqueueSnackbar } = useSnackbar(); + const getStatus = async (mixnodeKey: string) => { const newStatus = await getMixnodeStatus(mixnodeKey); setStatus(newStatus.status); @@ -31,10 +34,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,15 +43,19 @@ 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(() => { 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(); 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; }