diff --git a/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx b/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx index 56e3228a14..bd54ddfa2e 100644 --- a/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx +++ b/explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx @@ -8,7 +8,7 @@ import type { ExplorerData, NS_NODE } from "../../app/api/types"; import { countryName } from "../../utils/countryName"; import NodeTable from "./NodeTable"; import NodeFilterButtonGroup from "../toggleButton/NodeFilterButtonGroup"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import AdvancedFilters from "./AdvancedFilters"; // Utility function to calculate node saturation point @@ -72,12 +72,6 @@ const NodeTableWithAction = () => { "all" | "mixnodes" | "gateways" >("all"); - // Advanced filter states - const [uptime, setUptime] = useState<[number, number]>([0, 100]); - const [saturation, setSaturation] = useState<[number, number]>([0, 100]); - const [profitMargin, setProfitMargin] = useState<[number, number]>([0, 100]); - const [advancedOpen, setAdvancedOpen] = useState(false); - // Use React Query to fetch epoch rewards const { data: epochRewardsData, @@ -145,6 +139,20 @@ const NodeTableWithAction = () => { ...nsApiNodesData.map((n) => n.stakeSaturation || 0) ); + // Advanced filter states + const [uptime, setUptime] = useState<[number, number]>([0, 100]); + const [saturation, setSaturation] = useState<[number, number]>([ + 0, + maxSaturation, + ]); + const [profitMargin, setProfitMargin] = useState<[number, number]>([0, 100]); + const [advancedOpen, setAdvancedOpen] = useState(false); + + // Ensure saturation filter always covers the full range when maxSaturation changes + useEffect(() => { + setSaturation([0, maxSaturation]); + }, [maxSaturation]); + // Step 1: Filter nodes by type const typeFilteredNodes = nsApiNodesData.filter((node) => { switch (activeFilter) {