diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index c62b09a53f..1a04688428 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/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 = ({ }) => ( {label} + {tooltipInfo} 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={ } - sx={{ width: 300 }} > - Filters applied + {mixnodes?.data?.length} mixnodes matched your criteria - - - + Mixnode filters diff --git a/explorer/src/components/Filters/filterSchema.ts b/explorer/src/components/Filters/filterSchema.ts index 1d6b742f90..a994b698a4 100644 --- a/explorer/src/components/Filters/filterSchema.ts +++ b/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), }); diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx index 7fca785209..9255eb20e3 100644 --- a/explorer/src/context/main.tsx +++ b/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 }); }; diff --git a/explorer/src/typeDefs/filters.ts b/explorer/src/typeDefs/filters.ts index 8ec2a918c9..2152f3a35f 100644 --- a/explorer/src/typeDefs/filters.ts +++ b/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 };