From 7845e32742ce7070ee6fe5a4a4e5b84b899492a2 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 3 May 2022 15:14:16 +0100
Subject: [PATCH] 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
   </Grid>
 );
 
+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 }) => (
+  <Typography sx={{ color: colorMap[probability] }}>{textMap[probability]}</Typography>
+);
+
 const PercentIndicator = ({ value, warning }: { value: number; warning?: boolean }) => (
   <Grid container alignItems="center">
     <Grid item xs={2}>
@@ -115,12 +136,12 @@ export const SystemVariables = ({
           <DataField
             title="Estimated chance of being in the active set"
             info="Probability of getting selected in the reward set (active and standby nodes) in the next epoch. The more your stake, the higher the chances to be selected"
-            Indicator={<PercentIndicator value={inclusionProbability.in_active} />}
+            Indicator={<InclusionProbability probability={inclusionProbability.in_active} />}
           />
           <DataField
             title="Estimated chance of being in the standby set"
             info="Probability of getting selected in the reward set (active and standby nodes) in the next epoch. The more your stake, the higher the chances to be selected"
-            Indicator={<PercentIndicator value={inclusionProbability.in_reserve} />}
+            Indicator={<InclusionProbability probability={inclusionProbability.in_reserve} />}
           />
 
           <DataField
diff --git a/nym-wallet/src/pages/settings/useSettingsState.ts b/nym-wallet/src/pages/settings/useSettingsState.ts
index 239f3d4b08..20e3dac787 100644
--- a/nym-wallet/src/pages/settings/useSettingsState.ts
+++ b/nym-wallet/src/pages/settings/useSettingsState.ts
@@ -8,8 +8,8 @@ export const useSettingsState = (shouldUpdate: boolean) => {
   const [saturation, setSaturation] = useState<number>(0);
   const [rewardEstimation, setRewardEstimation] = useState<number>(0);
   const [inclusionProbability, setInclusionProbability] = useState<InclusionProbabilityResponse>({
-    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;
 }