Merge pull request #1244 from nymtech/feature/inclusion-probability-ui-update

update inclusion prob UI update
2022-05-03 16:57:22 +01:00
parent 4cce235e13 5730c914e8
commit f2e95d2fd5
3 changed files with 46 additions and 22 deletions
@@ -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
  </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}>
@@ -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 = ({
          <DataField
            title="Estimated reward"
            info="Estimated reward per epoch for this profit margin if your node is selected in the active set."
-            Indicator={
-              <Typography sx={{ color: (theme) => theme.palette.nym.fee, fontWeight: '600' }}>
-                {rewardEstimation} {currency?.major}
-              </Typography>
-            }
+            Indicator={<Chip label="Coming soon" />}
          />

          <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
@@ -1,4 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
+import { useSnackbar } from 'notistack';
 import { ClientContext } from '../../context/main';
 import { getMixnodeStakeSaturation, getMixnodeStatus, getInclusionProbability } from '../../requests';
 import { MixnodeStatus, InclusionProbabilityResponse } from '../../types';
@@ -8,12 +9,14 @@ 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);

+  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();
@@ -1,4 +1,6 @@
+import { SelectionChance } from './selectionchance';
+
 export interface InclusionProbabilityResponse {
-  in_active: number;
-  in_reserve: number;
+  in_active: SelectionChance;
+  in_reserve: SelectionChance;
 }