diff --git a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx index c519d7571..15a9a6f65 100644 --- a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx +++ b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx @@ -12,7 +12,7 @@ export const FinalityProviderFilter = () => { placeholder="Select Status" value={filter.searchTerm ? "" : filter.providerStatus} disabled={Boolean(filter.searchTerm)} - renderSelectedOption={(option) => `Showing ${option.label}`} + renderSelectedOption={(option) => `${option.label}`} className="h-10" /> ); diff --git a/src/ui/common/components/Staking/FinalityProviders/FinalityProviderFilter.tsx b/src/ui/common/components/Staking/FinalityProviders/FinalityProviderFilter.tsx index ffa7ae0c6..d2e9e7b01 100644 --- a/src/ui/common/components/Staking/FinalityProviders/FinalityProviderFilter.tsx +++ b/src/ui/common/components/Staking/FinalityProviders/FinalityProviderFilter.tsx @@ -17,7 +17,7 @@ export const FinalityProviderFilter = () => { placeholder="Select Status" value={filter.search ? "" : filter.status} disabled={Boolean(filter.search)} - renderSelectedOption={(option) => `Showing ${option.label}`} + renderSelectedOption={(option) => `${option.label}`} /> ); }; diff --git a/src/ui/common/state/FinalityProviderBsnState.tsx b/src/ui/common/state/FinalityProviderBsnState.tsx index 750ca8dd5..d7aea96f8 100644 --- a/src/ui/common/state/FinalityProviderBsnState.tsx +++ b/src/ui/common/state/FinalityProviderBsnState.tsx @@ -1,5 +1,11 @@ import { useDebounce } from "@uidotdev/usehooks"; -import { useCallback, useMemo, useState, type PropsWithChildren } from "react"; +import { + useCallback, + useEffect, + useMemo, + useState, + type PropsWithChildren, +} from "react"; import { useSearchParams } from "react-router"; import { BSN_TYPE_COSMOS } from "@/ui/common/api/getBsn"; @@ -89,6 +95,20 @@ const SORT_DIRECTIONS = { // Component-specific constants remain in the state file +/** + * Get default provider status based on BSN type + */ +export const getDefaultProviderStatus = ( + bsn?: Bsn, +): FinalityProviderFilterState["providerStatus"] => { + if (!bsn || bsn.id === BBN_CHAIN_ID) return "active"; + return bsn.type === "COSMOS" + ? "registered" + : bsn.type === "ROLLUP" + ? "allowlisted" + : "active"; +}; + const FILTERS = { searchTerm: (fp: FinalityProvider, filter: FilterState) => { const searchTerm = filter.searchTerm.toLowerCase(); @@ -102,7 +122,7 @@ const FILTERS = { const defaultState: FinalityProviderBsnState = { filter: { searchTerm: "", - providerStatus: "active", + providerStatus: getDefaultProviderStatus(), allowlistStatus: "", }, finalityProviders: [], @@ -144,7 +164,7 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) { const [filter, setFilter] = useState({ searchTerm: fpParam || "", - providerStatus: "active", + providerStatus: getDefaultProviderStatus(), allowlistStatus: "", }); const [sortState, setSortState] = useState({}); @@ -178,6 +198,16 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) { [bsnList, selectedBsnId], ); + useEffect(() => { + const newProviderStatus = getDefaultProviderStatus(selectedBsn); + if (newProviderStatus !== filter.providerStatus) { + setFilter((prevFilter) => ({ + ...prevFilter, + providerStatus: newProviderStatus, + })); + } + }, [selectedBsn, filter.providerStatus]); + // BSN configuration derived from selected BSN (moved from components) const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);