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;
}