diff --git a/explorer/src/components/Filters/Filters.tsx b/explorer/src/components/Filters/Filters.tsx index 4bf165d52e..a01d64361e 100644 --- a/explorer/src/components/Filters/Filters.tsx +++ b/explorer/src/components/Filters/Filters.tsx @@ -60,6 +60,7 @@ export const Filters = () => { const [showFilters, setShowFilters] = useState(false); const [isFiltered, setIsFiltered] = useState(false); const [filters, setFilters] = React.useState(); + const [upperSaturationValue, setUpperSaturationValue] = React.useState(100); const baseFilters = useRef(); const prevFilters = useRef(); @@ -67,11 +68,10 @@ export const Filters = () => { const handleToggleShowFilters = () => setShowFilters(!showFilters); const initialiseFilters = useCallback(async () => { - let upperSaturationValue; const allMixnodes = await Api.fetchMixnodes(); if (allMixnodes) { - upperSaturationValue = Math.round(Math.max(...allMixnodes.map((m) => m.stake_saturation)) * 100 + 1); - const initFilters = generateFilterSchema(upperSaturationValue); + setUpperSaturationValue(Math.round(Math.max(...allMixnodes.map((m) => m.stake_saturation)) * 100 + 1)); + const initFilters = generateFilterSchema(); baseFilters.current = initFilters; prevFilters.current = initFilters; setFilters(initFilters); @@ -79,8 +79,18 @@ export const Filters = () => { }, []); const handleOnChange = (id: EnumFilterKey, newValue: number[]) => { + if (id === 'stakeSaturation' && newValue[1] === 100) { + newValue.splice(1, 1, upperSaturationValue); + } setFilters((ftrs) => { - if (ftrs) return { ...ftrs, [id]: { ...ftrs[id], value: newValue } }; + if (ftrs) + return { + ...ftrs, + [id]: { + ...ftrs[id], + value: newValue, + }, + }; return undefined; }); }; diff --git a/explorer/src/components/Filters/filterSchema.ts b/explorer/src/components/Filters/filterSchema.ts index 7c097c9918..c5011114b1 100644 --- a/explorer/src/components/Filters/filterSchema.ts +++ b/explorer/src/components/Filters/filterSchema.ts @@ -1,6 +1,6 @@ import { EnumFilterKey, TFilters } from '../../typeDefs/filters'; -export const generateFilterSchema = (upperSaturationValue?: number) => ({ +export const generateFilterSchema = () => ({ profitMargin: { label: 'Profit margin (%)', id: EnumFilterKey.profitMargin, @@ -25,13 +25,12 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({ stakeSaturation: { label: 'Stake saturation (%)', id: EnumFilterKey.stakeSaturation, - value: [0, upperSaturationValue || 100], + value: [0, 100], isSmooth: true, - marks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, upperSaturationValue || 100].map((value) => ({ + marks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((value) => ({ value: value < 100 ? value : 100, label: value < 100 ? value : '>100', })), - max: 100, tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards", }, routingScore: {