adding info text in filters and renaming

explorer/src/components/Filters/Filters.tsx

@@ -25,6 +25,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 const FilterItem = ({
   label,
   id,
+  tooltipInfo,
   value,
   marks,
   scale,
@@ -36,6 +37,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[])}

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,9 +45,10 @@ 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)',
+    label: 'Routing Score (%)',
     id: EnumFilterKey.stake,
     value: [20, 90],
     min: 20,
@@ -92,6 +95,7 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
         label: '1B',
       },
     ],
+    tooltipInfo: 'The higher the routing score the better the performance of the node and so its rewards',
   },
 });
 

explorer/src/typeDefs/filters.ts

@@ -15,6 +15,7 @@ export type TFilterItem = {
   min?: number;
   max?: number;
   scale?: (value: number) => number;
+  tooltipInfo?: string;
 };
 
 export type TFilters = { [key in EnumFilterKey]: TFilterItem };