Merge pull request #1490 from nymtech/334-ne-changes

NE: Filter by use routing score instead of stake parameter and adding filters info

explorer/src/components/Filters/Filters.tsx

@@ -6,7 +6,6 @@ import {
   DialogContent,
   DialogActions,
   DialogTitle,
-  IconButton,
   Slider,
   Typography,
   Box,
@@ -25,6 +24,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 const FilterItem = ({
   label,
   id,
+  tooltipInfo,
   value,
   marks,
   scale,
@@ -36,6 +36,7 @@ const FilterItem = ({
 }) => (
   <Box sx={{ p: 2 }}>
     <Typography gutterBottom>{label}</Typography>
+    <Typography fontSize={12}>{tooltipInfo}</Typography>
     <Slider
       value={value}
       onChange={(e: Event, newValue: number | number[]) => onChange(id, newValue as number[])}
@@ -50,7 +51,7 @@ const FilterItem = ({
 );
 
 export const Filters = () => {
-  const { filterMixnodes, fetchMixnodes } = useMainContext();
+  const { filterMixnodes, fetchMixnodes, mixnodes } = useMainContext();
   const { status } = useParams<{ status: MixnodeStatusWithAll | undefined }>();
   const isMobile = useIsMobile();
 
@@ -129,17 +130,23 @@ export const Filters = () => {
           variant={isMobile ? 'standard' : 'outlined'}
           action={
             <Button size="small" onClick={onClearFilters}>
-              Clear
+              CLEAR FILTERS
             </Button>
           }
-          sx={{ width: 300 }}
         >
-          Filters applied
+          {mixnodes?.data?.length} mixnodes matched your criteria
         </Alert>
       </Snackbar>
-      <IconButton size="large" onClick={handleToggleShowFilters}>
-        <Tune />
-      </IconButton>
+      <Button
+        size="large"
+        variant="text"
+        color="inherit"
+        endIcon={<Tune />}
+        onClick={handleToggleShowFilters}
+        sx={{ textTransform: 'none' }}
+      >
+        Advanced filters
+      </Button>
       <Dialog open={showFilters} onClose={handleToggleShowFilters} maxWidth="md" fullWidth>
         <DialogTitle>Mixnode filters</DialogTitle>
         <DialogContent dividers>

explorer/src/components/Filters/filterSchema.ts

@@ -18,6 +18,8 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
       { label: '90', value: 90 },
       { label: '100', value: 100 },
     ],
+    tooltipInfo:
+      'As a delegator you want to chose nodes with lower profit margin, meaning more payout for their delegators',
   },
   stakeSaturation: {
     label: 'Stake saturation (%)',
@@ -43,65 +45,29 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
       },
     ],
     max: upperSaturationValue,
+    tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards",
   },
-  stake: {
-    label: 'Stake (NYM)',
-    id: EnumFilterKey.stake,
-    value: [20, 90],
-    min: 20,
-    max: 90,
+  routingScore: {
+    label: 'Routing score (%)',
+    id: EnumFilterKey.routingScore,
+    value: [0, 100],
     marks: [
-      {
-        value: 0,
-        label: '1',
-      },
-      {
-        value: 10,
-        label: '10',
-      },
-      {
-        value: 20,
-        label: '100',
-      },
-      {
-        value: 30,
-        label: '1k',
-      },
-      {
-        value: 40,
-        label: '10k',
-      },
-      {
-        value: 50,
-        label: '100k',
-      },
-      {
-        value: 60,
-        label: '1M',
-      },
-      {
-        value: 70,
-        label: '10M',
-      },
-      {
-        value: 80,
-        label: '100M',
-      },
-      {
-        value: 90,
-        label: '1B',
-      },
+      { label: '0', value: 0 },
+      { label: '10', value: 10 },
+      { label: '20', value: 20 },
+      { label: '30', value: 30 },
+      { label: '40', value: 40 },
+      { label: '50', value: 50 },
+      { label: '60', value: 60 },
+      { label: '70', value: 70 },
+      { label: '80', value: 80 },
+      { label: '90', value: 90 },
+      { label: '100', value: 100 },
     ],
+    tooltipInfo: 'The higher the routing score the better the performance of the node and so its rewards',
   },
 });
 
-const formatStakeValuesToMinorDenom = ([value_1, value_2]: number[]) => {
-  const lowerValue = 10 ** (value_1 / 10) * 1_000_000;
-  const upperValue = 10 ** (value_2 / 10) * 1_000_000;
-
-  return [lowerValue, upperValue];
-};
-
 const formatStakeSaturationValues = ([value_1, value_2]: number[]) => {
   const lowerValue = value_1 / 100;
   const upperValue = value_2 / 100;
@@ -110,7 +76,7 @@ const formatStakeSaturationValues = ([value_1, value_2]: number[]) => {
 };
 
 export const formatOnSave = (filters: TFilters) => ({
-  stake: formatStakeValuesToMinorDenom(filters.stake.value),
+  routingScore: filters.routingScore.value,
   profitMargin: filters.profitMargin.value,
   stakeSaturation: formatStakeSaturationValues(filters.stakeSaturation.value),
 });

explorer/src/context/main.tsx

@@ -102,8 +102,8 @@ export const MainContextProvider: React.FC = ({ children }) => {
         m.mix_node.profit_margin_percent <= filters.profitMargin[1] &&
         m.stake_saturation >= filters.stakeSaturation[0] &&
         m.stake_saturation <= filters.stakeSaturation[1] &&
-        +m.pledge_amount.amount + +m.total_delegation.amount >= filters.stake[0] &&
-        +m.pledge_amount.amount + +m.total_delegation.amount <= filters.stake[1],
+        m.avg_uptime >= filters.routingScore[0] &&
+        m.avg_uptime <= filters.routingScore[1],
     );
     setMixnodes({ data: filtered, isLoading: false });
   };

explorer/src/typeDefs/filters.ts

@@ -4,7 +4,7 @@ import { Mark } from '@mui/base';
 export enum EnumFilterKey {
   profitMargin = 'profitMargin',
   stakeSaturation = 'stakeSaturation',
-  stake = 'stake',
+  routingScore = 'routingScore',
 }
 
 export type TFilterItem = {
@@ -15,6 +15,7 @@ export type TFilterItem = {
   min?: number;
   max?: number;
   scale?: (value: number) => number;
+  tooltipInfo?: string;
 };
 
 export type TFilters = { [key in EnumFilterKey]: TFilterItem };