From 71e82da39cc4fb77bacb006337cde8bd9ab1bafc Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 4 Sep 2025 07:00:35 +0700
Subject: [PATCH 1/6] feat: bsn fp allowlist

---
 src/ui/common/api/getBsn.ts                   |  74 +++++++++-
 .../FinalityProviderModal.tsx                 |   9 +-
 .../FinalityProviderFilter.tsx                |  25 ++--
 .../FinalityProviderSearch.tsx                |   8 +-
 .../common/state/FinalityProviderBsnState.tsx | 136 +++++++++++++++---
 src/ui/common/types/bsn.ts                    |   4 +
 6 files changed, 220 insertions(+), 36 deletions(-)

diff --git a/src/ui/common/api/getBsn.ts b/src/ui/common/api/getBsn.ts
index 156d8eeba..fc88468b7 100644
--- a/src/ui/common/api/getBsn.ts
+++ b/src/ui/common/api/getBsn.ts
@@ -1,13 +1,77 @@
-import { Bsn } from "../types/bsn";
+import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+
+import { Bsn, BsnType } from "../types/bsn";
 import { getBsnLogoUrl } from "../utils/bsnLogo";
 
 import { apiWrapper } from "./apiWrapper";
 
+export const BSN_TYPE_COSMOS: BsnType = "COSMOS";
+export const BSN_TYPE_ROLLUP: BsnType = "ROLLUP";
+
+const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
+
+// BSN Configuration for different types and behaviors
+export interface BsnConfig {
+  modalTitle: string;
+  filterLabels: {
+    primary: string;
+    secondary: string;
+  };
+  fpFilterBehavior: "active-inactive" | "allowlist-based";
+}
+
+export const BSN_CONFIGS: Record<string, BsnConfig> = {
+  // Babylon Genesis
+  [BBN_CHAIN_ID]: {
+    modalTitle: "Select Babylon Genesis Finality Provider",
+    filterLabels: {
+      primary: "Active",
+      secondary: "Inactive",
+    },
+    fpFilterBehavior: "active-inactive",
+  },
+  // Cosmos BSN config
+  COSMOS: {
+    modalTitle: "Select Cosmos Finality Provider",
+    filterLabels: {
+      primary: "Active",
+      secondary: "Inactive",
+    },
+    fpFilterBehavior: "active-inactive",
+  },
+  // Roll-up BSN config
+  ROLLUP: {
+    modalTitle: "Select Roll Up Finality Provider",
+    filterLabels: {
+      primary: "Allow listed",
+      secondary: "Non-Allow listed",
+    },
+    fpFilterBehavior: "allowlist-based",
+  },
+};
+
+/**
+ * Get BSN configuration based on BSN object
+ */
+export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
+  if (!bsn) return BSN_CONFIGS.COSMOS;
+
+  // Check if it's Babylon Genesis first
+  if (bsn.id === BBN_CHAIN_ID) {
+    return BSN_CONFIGS[BBN_CHAIN_ID];
+  }
+
+  // Use type-based config
+  return BSN_CONFIGS[bsn.type] || BSN_CONFIGS.COSMOS;
+};
+
 interface BsnAPI {
   id: string;
   name: string;
   description: string;
   active_tvl: number;
+  type: BsnType;
+  allowlist?: string[]; // BTC FP pubkeys (hex)
 }
 
 interface BsnDataResponse {
@@ -20,8 +84,16 @@ const createBSN = (bsn: BsnAPI): Bsn => ({
   description: bsn.description,
   activeTvl: bsn.active_tvl,
   logoUrl: getBsnLogoUrl(bsn.id),
+  type: bsn.type,
+  allowlist: bsn.allowlist,
 });
 
+/**
+ * Determines if a BSN is Babylon Genesis
+ */
+export const isBabylonGenesisBsn = (bsn: Bsn): boolean =>
+  bsn.id === BBN_CHAIN_ID;
+
 export const getBSNs = async (): Promise<Bsn[]> => {
   const response = await apiWrapper<BsnDataResponse>(
     "GET",
diff --git a/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx b/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx
index 6e7af5dfc..d60568a25 100644
--- a/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx
+++ b/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx
@@ -4,10 +4,12 @@ import {
   DialogFooter,
   DialogHeader,
 } from "@babylonlabs-io/core-ui";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
+import { getBsnConfig } from "@/ui/common/api/getBsn";
 import { ResponsiveDialog } from "@/ui/common/components/Modals/ResponsiveDialog";
 import { FinalityProviders } from "@/ui/common/components/Multistaking/FinalityProviderField/FinalityProviders";
+import { useFinalityProviderBsnState } from "@/ui/common/state/FinalityProviderBsnState";
 
 interface Props {
   open: boolean;
@@ -27,6 +29,9 @@ export const FinalityProviderModal = ({
   onBack,
 }: Props) => {
   const [selectedFP, setSelectedFp] = useState(defaultFinalityProvider);
+  const { selectedBsn } = useFinalityProviderBsnState();
+
+  const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
 
   const handleClose = () => {
     onClose();
@@ -36,7 +41,7 @@ export const FinalityProviderModal = ({
   return (
     <ResponsiveDialog open={open} onClose={handleClose} className="w-[52rem]">
       <DialogHeader
-        title="Select Finality Provider"
+        title={bsnConfig.modalTitle}
         onClose={handleClose}
         className="text-accent-primary"
       />
diff --git a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
index 7dc97bf11..9a0b95b7a 100644
--- a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
@@ -1,22 +1,29 @@
 import { Select } from "@babylonlabs-io/core-ui";
+import { useMemo } from "react";
 
+import { getBsnConfig } from "@/ui/common/api/getBsn";
 import { useFinalityProviderBsnState } from "@/ui/common/state/FinalityProviderBsnState";
 
-const options = [
-  { value: "active", label: "Active" },
-  { value: "inactive", label: "Inactive" },
-];
-
 export const FinalityProviderFilter = () => {
-  const { filter, handleFilter } = useFinalityProviderBsnState();
+  const { filter, handleFilter, selectedBsn } = useFinalityProviderBsnState();
+
+  const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
+
+  const options = useMemo(
+    () => [
+      { value: "active", label: bsnConfig.filterLabels.primary },
+      { value: "inactive", label: bsnConfig.filterLabels.secondary },
+    ],
+    [bsnConfig.filterLabels],
+  );
 
   return (
     <Select
       options={options}
-      onSelect={(value) => handleFilter("status", value.toString())}
+      onSelect={(value) => handleFilter("providerStatus", value.toString())}
       placeholder="Select Status"
-      value={filter.search ? "" : filter.status}
-      disabled={Boolean(filter.search)}
+      value={filter.searchTerm ? "" : filter.providerStatus}
+      disabled={Boolean(filter.searchTerm)}
       renderSelectedOption={(option) => `Showing ${option.label}`}
       className="h-10"
     />
diff --git a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx
index b59204b41..ad0894e3b 100644
--- a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx
@@ -10,16 +10,16 @@ export const FinalityProviderSearch = () => {
 
   const onSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      handleFilter("search", e.target.value);
+      handleFilter("searchTerm", e.target.value);
     },
     [handleFilter],
   );
 
   const onClearSearch = useCallback(() => {
-    handleFilter("search", "");
+    handleFilter("searchTerm", "");
   }, [handleFilter]);
 
-  const searchSuffix = filter.search ? (
+  const searchSuffix = filter.searchTerm ? (
     <button
       onClick={onClearSearch}
       className="opacity-60 hover:opacity-100 transition-opacity"
@@ -36,7 +36,7 @@ export const FinalityProviderSearch = () => {
     <Input
       placeholder="Search by Name or Public Key"
       suffix={searchSuffix}
-      value={filter.search}
+      value={filter.searchTerm}
       onChange={onSearchChange}
       className="h-[22px]"
     />
diff --git a/src/ui/common/state/FinalityProviderBsnState.tsx b/src/ui/common/state/FinalityProviderBsnState.tsx
index fddcbfc41..112396629 100644
--- a/src/ui/common/state/FinalityProviderBsnState.tsx
+++ b/src/ui/common/state/FinalityProviderBsnState.tsx
@@ -2,6 +2,7 @@ import { useDebounce } from "@uidotdev/usehooks";
 import { useCallback, useMemo, useState, type PropsWithChildren } from "react";
 import { useSearchParams } from "react-router";
 
+import { BSN_TYPE_COSMOS, getBsnConfig } from "@/ui/common/api/getBsn";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 import { useBsn } from "@/ui/common/hooks/client/api/useBsn";
 import { useFinalityProvidersV2 } from "@/ui/common/hooks/client/api/useFinalityProvidersV2";
@@ -14,14 +15,18 @@ import { createStateUtils } from "@/ui/common/utils/createStateUtils";
 
 import { getBsnLogoUrl } from "../utils/bsnLogo";
 
+const normalizeHex = (hex?: string): string =>
+  (hex ?? "").trim().toLowerCase().replace(/^0x/, "");
+
 interface SortState {
   field?: string;
   direction?: "asc" | "desc";
 }
 
 interface FilterState {
-  search: string;
-  status: "active" | "inactive" | "";
+  searchTerm: string;
+  providerStatus: "active" | "inactive" | "";
+  allowlistStatus: "allowlisted" | "not-allowlisted" | "";
 }
 
 const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
@@ -31,6 +36,7 @@ const defaultBabylonBsn: Bsn = {
   name: "Babylon Genesis",
   description: "Babylon Genesis",
   logoUrl: getBsnLogoUrl(BBN_CHAIN_ID),
+  type: BSN_TYPE_COSMOS,
 };
 
 interface FinalityProviderBsnState {
@@ -45,6 +51,7 @@ interface FinalityProviderBsnState {
   bsnLoading: boolean;
   bsnError: boolean;
   selectedBsnId: string | undefined;
+  selectedBsn: Bsn | undefined;
   setSelectedBsnId: (id: string | undefined) => void;
   // Modal
   stakingModalPage: StakingModalPage;
@@ -80,22 +87,82 @@ const STATUS_FILTERS = {
     fp.state !== FinalityProviderStateEnum.ACTIVE,
 };
 
+const createAllowlistFilters = (selectedBsn: Bsn | undefined) => {
+  const allowSet = new Set((selectedBsn?.allowlist || []).map(normalizeHex));
+
+  return {
+    allowlisted: (fp: FinalityProvider) => allowSet.has(normalizeHex(fp.btcPk)),
+    "not-allowlisted": (fp: FinalityProvider) =>
+      !allowSet.has(normalizeHex(fp.btcPk)),
+  };
+};
+
+const filterFinalityProvidersByBsn = (
+  providers: FinalityProvider[],
+  filter: FilterState,
+  selectedBsn: Bsn | undefined,
+): FinalityProvider[] => {
+  let filtered = providers;
+
+  // Apply BSN-aware filtering based on provider status
+  if (filter.providerStatus) {
+    const bsnConfig = getBsnConfig(selectedBsn);
+    if (bsnConfig.fpFilterBehavior === "allowlist-based") {
+      // For rollup BSNs: filter all FPs by allowlist (regardless of active/inactive state)
+      const allowSet = new Set(
+        (selectedBsn?.allowlist || []).map(normalizeHex),
+      );
+
+      filtered = filtered.filter((fp) => {
+        const isAllowlisted = allowSet.has(normalizeHex(fp.btcPk));
+
+        if (filter.providerStatus === "active") {
+          return isAllowlisted;
+        } else {
+          return !isAllowlisted;
+        }
+      });
+    } else {
+      // For cosmos/babylon BSNs: filter by active/inactive status
+      const statusFilter =
+        STATUS_FILTERS[filter.providerStatus as keyof typeof STATUS_FILTERS];
+      if (statusFilter) {
+        filtered = filtered.filter(statusFilter);
+      }
+    }
+  }
+
+  if (filter.allowlistStatus) {
+    const allowlistFilters = createAllowlistFilters(selectedBsn);
+    const allowlistFilter =
+      allowlistFilters[filter.allowlistStatus as keyof typeof allowlistFilters];
+    if (allowlistFilter) {
+      filtered = filtered.filter(allowlistFilter);
+    }
+  }
+
+  return filtered;
+};
+
 const FILTERS = {
-  search: (fp: FinalityProvider, filter: FilterState) => {
-    const searchTerm = filter.search.toLowerCase();
+  searchTerm: (fp: FinalityProvider, filter: FilterState) => {
+    const searchTerm = filter.searchTerm.toLowerCase();
     return (
       (fp.description?.moniker?.toLowerCase().includes(searchTerm) ?? false) ||
       fp.btcPk.toLowerCase().includes(searchTerm)
     );
   },
-  status: (fp: FinalityProvider, filter: FilterState) =>
-    filter.status && !filter.search ? STATUS_FILTERS[filter.status](fp) : true,
+  providerStatus: (fp: FinalityProvider, filter: FilterState) =>
+    filter.providerStatus && !filter.searchTerm
+      ? STATUS_FILTERS[filter.providerStatus](fp)
+      : true,
 };
 
 const defaultState: FinalityProviderBsnState = {
   filter: {
-    search: "",
-    status: "active",
+    searchTerm: "",
+    providerStatus: "active",
+    allowlistStatus: "",
   },
   finalityProviders: [],
   isFetching: false,
@@ -106,6 +173,7 @@ const defaultState: FinalityProviderBsnState = {
   bsnLoading: false,
   bsnError: false,
   selectedBsnId: undefined,
+  selectedBsn: undefined,
   setSelectedBsnId: () => {},
   isRowSelectable: () => false,
   handleSort: () => {},
@@ -126,11 +194,12 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
   );
 
   const [filter, setFilter] = useState<FilterState>({
-    search: fpParam || "",
-    status: "active",
+    searchTerm: fpParam || "",
+    providerStatus: "active",
+    allowlistStatus: "",
   });
   const [sortState, setSortState] = useState<SortState>({});
-  const debouncedSearch = useDebounce(filter.search, 300);
+  const debouncedSearch = useDebounce(filter.searchTerm, 300);
 
   const [selectedBsnId, setSelectedBsnId] = useState<string | undefined>(
     BBN_CHAIN_ID,
@@ -155,6 +224,11 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
     enabled: stakingModalPage === StakingModalPage.BSN,
   });
 
+  const selectedBsn = useMemo(
+    () => bsnList.find((bsn) => bsn.id === selectedBsnId),
+    [bsnList, selectedBsnId],
+  );
+
   const finalityProviders = useMemo(() => {
     if (!data?.finalityProviders) {
       return [];
@@ -195,18 +269,38 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
     );
   }, []);
 
-  const isRowSelectable = useCallback((row: FinalityProvider) => {
-    return (
-      row.state === FinalityProviderStateEnum.ACTIVE ||
-      row.state === FinalityProviderStateEnum.INACTIVE
-    );
-  }, []);
+  const isRowSelectable = useCallback(
+    (row: FinalityProvider) => {
+      const statusAllowed =
+        row.state === FinalityProviderStateEnum.ACTIVE ||
+        row.state === FinalityProviderStateEnum.INACTIVE;
+
+      // For selection (not filtering), only restrict based on allowlist for non-Babylon BSNs
+      const allowlistAllowed =
+        !selectedBsnId ||
+        selectedBsnId === BBN_CHAIN_ID ||
+        (selectedBsn?.allowlist || []).some(
+          (allowedPk) => normalizeHex(allowedPk) === normalizeHex(row.btcPk),
+        );
+
+      return statusAllowed && allowlistAllowed;
+    },
+    [selectedBsnId, selectedBsn],
+  );
 
   const filteredFinalityProviders = useMemo(() => {
-    return finalityProviders.filter((fp: FinalityProvider) =>
-      Object.values(FILTERS).every((filterFn) => filterFn(fp, filter)),
+    // First apply search filter
+    const filtered = finalityProviders.filter((fp: FinalityProvider) =>
+      FILTERS.searchTerm(fp, filter),
     );
-  }, [finalityProviders, filter]);
+
+    // If search is active, return all matching results without status filtering
+    if (filter.searchTerm) {
+      return filtered;
+    }
+
+    return filterFinalityProvidersByBsn(filtered, filter, selectedBsn);
+  }, [finalityProviders, filter, selectedBsn]);
 
   const state = useMemo(
     () => ({
@@ -218,6 +312,7 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       hasNextPage,
       fetchNextPage,
       selectedBsnId,
+      selectedBsn,
       setSelectedBsnId,
       selectedProviderIds,
       setSelectedProviderIds,
@@ -238,6 +333,7 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       hasNextPage,
       fetchNextPage,
       selectedBsnId,
+      selectedBsn,
       setSelectedBsnId,
       selectedProviderIds,
       setSelectedProviderIds,
diff --git a/src/ui/common/types/bsn.ts b/src/ui/common/types/bsn.ts
index 0a93f6d4e..a69f1afdb 100644
--- a/src/ui/common/types/bsn.ts
+++ b/src/ui/common/types/bsn.ts
@@ -1,7 +1,11 @@
+export type BsnType = "COSMOS" | "ROLLUP";
+
 export interface Bsn {
   id: string;
   name: string;
   description: string;
   logoUrl: string;
   activeTvl?: number;
+  type: BsnType;
+  allowlist?: string[]; // BTC FP pubkeys (hex)
 }

From b854b89e215eada1c7451596ba85eb069a1e7b9a Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 4 Sep 2025 17:54:39 +0700
Subject: [PATCH 2/6] fix: resolve comments

---
 src/ui/common/api/getBsn.ts                   | 47 ++++++++++---------
 .../FinalityProviderFilter.tsx                |  7 +--
 .../common/state/FinalityProviderBsnState.tsx | 10 ++--
 3 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/ui/common/api/getBsn.ts b/src/ui/common/api/getBsn.ts
index fc88468b7..08b96a2b5 100644
--- a/src/ui/common/api/getBsn.ts
+++ b/src/ui/common/api/getBsn.ts
@@ -11,41 +11,44 @@ export const BSN_TYPE_ROLLUP: BsnType = "ROLLUP";
 const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
 
 // BSN Configuration for different types and behaviors
+export interface BsnFilterOption {
+  value: string;
+  label: string;
+}
+
 export interface BsnConfig {
   modalTitle: string;
-  filterLabels: {
-    primary: string;
-    secondary: string;
-  };
-  fpFilterBehavior: "active-inactive" | "allowlist-based";
+  filterOptions: BsnFilterOption[];
+  fpFilterBehavior: "status-based" | "allowlist-based";
 }
 
 export const BSN_CONFIGS: Record<string, BsnConfig> = {
   // Babylon Genesis
   [BBN_CHAIN_ID]: {
     modalTitle: "Select Babylon Genesis Finality Provider",
-    filterLabels: {
-      primary: "Active",
-      secondary: "Inactive",
-    },
-    fpFilterBehavior: "active-inactive",
+    filterOptions: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+      { value: "jailed", label: "Jailed" },
+      { value: "slashed", label: "Slashed" },
+    ],
+    fpFilterBehavior: "status-based",
   },
-  // Cosmos BSN config
   COSMOS: {
     modalTitle: "Select Cosmos Finality Provider",
-    filterLabels: {
-      primary: "Active",
-      secondary: "Inactive",
-    },
-    fpFilterBehavior: "active-inactive",
+    filterOptions: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+    ],
+    fpFilterBehavior: "status-based",
   },
   // Roll-up BSN config
   ROLLUP: {
     modalTitle: "Select Roll Up Finality Provider",
-    filterLabels: {
-      primary: "Allow listed",
-      secondary: "Non-Allow listed",
-    },
+    filterOptions: [
+      { value: "active", label: "Allowlisted" },
+      { value: "inactive", label: "Not Allowlisted" },
+    ],
     fpFilterBehavior: "allowlist-based",
   },
 };
@@ -54,7 +57,7 @@ export const BSN_CONFIGS: Record<string, BsnConfig> = {
  * Get BSN configuration based on BSN object
  */
 export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
-  if (!bsn) return BSN_CONFIGS.COSMOS;
+  if (!bsn) return BSN_CONFIGS[BBN_CHAIN_ID];
 
   // Check if it's Babylon Genesis first
   if (bsn.id === BBN_CHAIN_ID) {
@@ -62,7 +65,7 @@ export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
   }
 
   // Use type-based config
-  return BSN_CONFIGS[bsn.type] || BSN_CONFIGS.COSMOS;
+  return BSN_CONFIGS[bsn.type] || BSN_CONFIGS[BBN_CHAIN_ID];
 };
 
 interface BsnAPI {
diff --git a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
index 9a0b95b7a..b5963f509 100644
--- a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
@@ -10,11 +10,8 @@ export const FinalityProviderFilter = () => {
   const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
 
   const options = useMemo(
-    () => [
-      { value: "active", label: bsnConfig.filterLabels.primary },
-      { value: "inactive", label: bsnConfig.filterLabels.secondary },
-    ],
-    [bsnConfig.filterLabels],
+    () => bsnConfig.filterOptions,
+    [bsnConfig.filterOptions],
   );
 
   return (
diff --git a/src/ui/common/state/FinalityProviderBsnState.tsx b/src/ui/common/state/FinalityProviderBsnState.tsx
index 112396629..cf7b20b9b 100644
--- a/src/ui/common/state/FinalityProviderBsnState.tsx
+++ b/src/ui/common/state/FinalityProviderBsnState.tsx
@@ -84,7 +84,11 @@ const STATUS_FILTERS = {
   active: (fp: FinalityProvider) =>
     fp.state === FinalityProviderStateEnum.ACTIVE,
   inactive: (fp: FinalityProvider) =>
-    fp.state !== FinalityProviderStateEnum.ACTIVE,
+    fp.state === FinalityProviderStateEnum.INACTIVE,
+  jailed: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.JAILED,
+  slashed: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.SLASHED,
 };
 
 const createAllowlistFilters = (selectedBsn: Bsn | undefined) => {
@@ -122,8 +126,8 @@ const filterFinalityProvidersByBsn = (
           return !isAllowlisted;
         }
       });
-    } else {
-      // For cosmos/babylon BSNs: filter by active/inactive status
+    } else if (bsnConfig.fpFilterBehavior === "status-based") {
+      // For status-based BSNs: filter by finality provider state (active/inactive/jailed/slashed)
       const statusFilter =
         STATUS_FILTERS[filter.providerStatus as keyof typeof STATUS_FILTERS];
       if (statusFilter) {

From 27e38105c3adfa6e7349671c9ba5c39b62f1e2c9 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 4 Sep 2025 18:56:05 +0700
Subject: [PATCH 3/6] fix: resolve comments

---
 src/ui/common/api/getBsn.ts                   |  88 +--------------
 .../FinalityProviderModal.tsx                 |   9 +-
 .../FinalityProviderFilter.tsx                |  13 +--
 src/ui/common/hooks/client/api/useBsn.ts      |   2 +-
 src/ui/common/services/bsnService.ts          |  94 ++++++++++++++++
 .../common/state/FinalityProviderBsnState.tsx | 105 +++++++++++++++---
 6 files changed, 195 insertions(+), 116 deletions(-)
 create mode 100644 src/ui/common/services/bsnService.ts

diff --git a/src/ui/common/api/getBsn.ts b/src/ui/common/api/getBsn.ts
index 08b96a2b5..84377fb4e 100644
--- a/src/ui/common/api/getBsn.ts
+++ b/src/ui/common/api/getBsn.ts
@@ -1,74 +1,11 @@
-import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
-
-import { Bsn, BsnType } from "../types/bsn";
-import { getBsnLogoUrl } from "../utils/bsnLogo";
+import { BsnType } from "../types/bsn";
 
 import { apiWrapper } from "./apiWrapper";
 
 export const BSN_TYPE_COSMOS: BsnType = "COSMOS";
 export const BSN_TYPE_ROLLUP: BsnType = "ROLLUP";
 
-const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
-
-// BSN Configuration for different types and behaviors
-export interface BsnFilterOption {
-  value: string;
-  label: string;
-}
-
-export interface BsnConfig {
-  modalTitle: string;
-  filterOptions: BsnFilterOption[];
-  fpFilterBehavior: "status-based" | "allowlist-based";
-}
-
-export const BSN_CONFIGS: Record<string, BsnConfig> = {
-  // Babylon Genesis
-  [BBN_CHAIN_ID]: {
-    modalTitle: "Select Babylon Genesis Finality Provider",
-    filterOptions: [
-      { value: "active", label: "Active" },
-      { value: "inactive", label: "Inactive" },
-      { value: "jailed", label: "Jailed" },
-      { value: "slashed", label: "Slashed" },
-    ],
-    fpFilterBehavior: "status-based",
-  },
-  COSMOS: {
-    modalTitle: "Select Cosmos Finality Provider",
-    filterOptions: [
-      { value: "active", label: "Active" },
-      { value: "inactive", label: "Inactive" },
-    ],
-    fpFilterBehavior: "status-based",
-  },
-  // Roll-up BSN config
-  ROLLUP: {
-    modalTitle: "Select Roll Up Finality Provider",
-    filterOptions: [
-      { value: "active", label: "Allowlisted" },
-      { value: "inactive", label: "Not Allowlisted" },
-    ],
-    fpFilterBehavior: "allowlist-based",
-  },
-};
-
-/**
- * Get BSN configuration based on BSN object
- */
-export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
-  if (!bsn) return BSN_CONFIGS[BBN_CHAIN_ID];
-
-  // Check if it's Babylon Genesis first
-  if (bsn.id === BBN_CHAIN_ID) {
-    return BSN_CONFIGS[BBN_CHAIN_ID];
-  }
-
-  // Use type-based config
-  return BSN_CONFIGS[bsn.type] || BSN_CONFIGS[BBN_CHAIN_ID];
-};
-
-interface BsnAPI {
+export interface BsnAPI {
   id: string;
   name: string;
   description: string;
@@ -81,29 +18,12 @@ interface BsnDataResponse {
   data: BsnAPI[];
 }
 
-const createBSN = (bsn: BsnAPI): Bsn => ({
-  id: bsn.id,
-  name: bsn.name,
-  description: bsn.description,
-  activeTvl: bsn.active_tvl,
-  logoUrl: getBsnLogoUrl(bsn.id),
-  type: bsn.type,
-  allowlist: bsn.allowlist,
-});
-
-/**
- * Determines if a BSN is Babylon Genesis
- */
-export const isBabylonGenesisBsn = (bsn: Bsn): boolean =>
-  bsn.id === BBN_CHAIN_ID;
-
-export const getBSNs = async (): Promise<Bsn[]> => {
+export const getBsnAPI = async (): Promise<BsnAPI[]> => {
   const response = await apiWrapper<BsnDataResponse>(
     "GET",
     "/v2/bsn",
     "Error getting BSN list",
   );
 
-  const { data } = response.data;
-  return data.map(createBSN);
+  return response.data.data;
 };
diff --git a/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx b/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx
index d60568a25..dbbcd73fa 100644
--- a/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx
+++ b/src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx
@@ -4,9 +4,8 @@ import {
   DialogFooter,
   DialogHeader,
 } from "@babylonlabs-io/core-ui";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 
-import { getBsnConfig } from "@/ui/common/api/getBsn";
 import { ResponsiveDialog } from "@/ui/common/components/Modals/ResponsiveDialog";
 import { FinalityProviders } from "@/ui/common/components/Multistaking/FinalityProviderField/FinalityProviders";
 import { useFinalityProviderBsnState } from "@/ui/common/state/FinalityProviderBsnState";
@@ -29,9 +28,7 @@ export const FinalityProviderModal = ({
   onBack,
 }: Props) => {
   const [selectedFP, setSelectedFp] = useState(defaultFinalityProvider);
-  const { selectedBsn } = useFinalityProviderBsnState();
-
-  const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
+  const { modalTitle } = useFinalityProviderBsnState();
 
   const handleClose = () => {
     onClose();
@@ -41,7 +38,7 @@ export const FinalityProviderModal = ({
   return (
     <ResponsiveDialog open={open} onClose={handleClose} className="w-[52rem]">
       <DialogHeader
-        title={bsnConfig.modalTitle}
+        title={modalTitle}
         onClose={handleClose}
         className="text-accent-primary"
       />
diff --git a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
index b5963f509..c519d7571 100644
--- a/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
@@ -1,22 +1,13 @@
 import { Select } from "@babylonlabs-io/core-ui";
-import { useMemo } from "react";
 
-import { getBsnConfig } from "@/ui/common/api/getBsn";
 import { useFinalityProviderBsnState } from "@/ui/common/state/FinalityProviderBsnState";
 
 export const FinalityProviderFilter = () => {
-  const { filter, handleFilter, selectedBsn } = useFinalityProviderBsnState();
-
-  const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
-
-  const options = useMemo(
-    () => bsnConfig.filterOptions,
-    [bsnConfig.filterOptions],
-  );
+  const { filter, handleFilter, filterOptions } = useFinalityProviderBsnState();
 
   return (
     <Select
-      options={options}
+      options={filterOptions}
       onSelect={(value) => handleFilter("providerStatus", value.toString())}
       placeholder="Select Status"
       value={filter.searchTerm ? "" : filter.providerStatus}
diff --git a/src/ui/common/hooks/client/api/useBsn.ts b/src/ui/common/hooks/client/api/useBsn.ts
index 78f0a8384..0c50b4963 100644
--- a/src/ui/common/hooks/client/api/useBsn.ts
+++ b/src/ui/common/hooks/client/api/useBsn.ts
@@ -1,6 +1,6 @@
-import { getBSNs } from "@/ui/common/api/getBsn";
 import { ONE_MINUTE } from "@/ui/common/constants";
 import { useClientQuery } from "@/ui/common/hooks/client/useClient";
+import { getBSNs } from "@/ui/common/services/bsnService";
 import { Bsn } from "@/ui/common/types/bsn";
 
 export const BSN_KEY = "BSN";
diff --git a/src/ui/common/services/bsnService.ts b/src/ui/common/services/bsnService.ts
new file mode 100644
index 000000000..7d16363ce
--- /dev/null
+++ b/src/ui/common/services/bsnService.ts
@@ -0,0 +1,94 @@
+import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+
+import { getBsnAPI } from "../api/getBsn";
+import { Bsn, BsnType } from "../types/bsn";
+import { getBsnLogoUrl } from "../utils/bsnLogo";
+
+const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
+
+export interface BsnFilterOption {
+  value: string;
+  label: string;
+}
+
+export interface BsnConfig {
+  modalTitle: string;
+  filterOptions: BsnFilterOption[];
+  fpFilterBehavior: "status-based" | "allowlist-based";
+}
+
+export const BSN_CONFIGS: Record<string, BsnConfig> = {
+  // Babylon Genesis
+  [BBN_CHAIN_ID]: {
+    modalTitle: "Select Babylon Genesis Finality Provider",
+    filterOptions: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+      { value: "jailed", label: "Jailed" },
+      { value: "slashed", label: "Slashed" },
+    ],
+    fpFilterBehavior: "status-based",
+  },
+  COSMOS: {
+    modalTitle: "Select Cosmos Finality Provider",
+    filterOptions: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+    ],
+    fpFilterBehavior: "status-based",
+  },
+  // Roll-up BSN config
+  ROLLUP: {
+    modalTitle: "Select Roll Up Finality Provider",
+    filterOptions: [
+      { value: "active", label: "Allowlisted" },
+      { value: "inactive", label: "Not Allowlisted" },
+    ],
+    fpFilterBehavior: "allowlist-based",
+  },
+};
+
+/**
+ * Get BSN configuration based on BSN type
+ */
+export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
+  if (!bsn) return BSN_CONFIGS[BBN_CHAIN_ID];
+
+  // Check if it's Babylon Genesis first
+  if (bsn.id === BBN_CHAIN_ID) {
+    return BSN_CONFIGS[BBN_CHAIN_ID];
+  }
+
+  // Use type-based config
+  return BSN_CONFIGS[bsn.type] || BSN_CONFIGS[BBN_CHAIN_ID];
+};
+
+/**
+ * Determines if a BSN is Babylon Genesis
+ */
+export const isBabylonGenesisBsn = (bsn: Bsn): boolean =>
+  bsn.id === BBN_CHAIN_ID;
+
+export const createBSN = (bsn: {
+  id: string;
+  name: string;
+  description: string;
+  active_tvl: number;
+  type: BsnType;
+  allowlist?: string[];
+}): Bsn => ({
+  id: bsn.id,
+  name: bsn.name,
+  description: bsn.description,
+  activeTvl: bsn.active_tvl,
+  logoUrl: getBsnLogoUrl(bsn.id),
+  type: bsn.type,
+  allowlist: bsn.allowlist,
+});
+
+/**
+ */
+export const getBSNs = async (): Promise<Bsn[]> => {
+  const data = await getBsnAPI();
+  return data.map(createBSN);
+};
diff --git a/src/ui/common/state/FinalityProviderBsnState.tsx b/src/ui/common/state/FinalityProviderBsnState.tsx
index cf7b20b9b..587ef6009 100644
--- a/src/ui/common/state/FinalityProviderBsnState.tsx
+++ b/src/ui/common/state/FinalityProviderBsnState.tsx
@@ -2,10 +2,14 @@ import { useDebounce } from "@uidotdev/usehooks";
 import { useCallback, useMemo, useState, type PropsWithChildren } from "react";
 import { useSearchParams } from "react-router";
 
-import { BSN_TYPE_COSMOS, getBsnConfig } from "@/ui/common/api/getBsn";
+import { BSN_TYPE_COSMOS } from "@/ui/common/api/getBsn";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 import { useBsn } from "@/ui/common/hooks/client/api/useBsn";
 import { useFinalityProvidersV2 } from "@/ui/common/hooks/client/api/useFinalityProvidersV2";
+import {
+  getBsnConfig,
+  type BsnFilterOption,
+} from "@/ui/common/services/bsnService";
 import { Bsn } from "@/ui/common/types/bsn";
 import {
   FinalityProviderState as FinalityProviderStateEnum,
@@ -51,8 +55,14 @@ interface FinalityProviderBsnState {
   bsnLoading: boolean;
   bsnError: boolean;
   selectedBsnId: string | undefined;
+  // selectedBsn contains allowlist and type data needed for filtering logic
+  // Cannot be derived from selectedBsnId alone as it requires the full BSN object
   selectedBsn: Bsn | undefined;
   setSelectedBsnId: (id: string | undefined) => void;
+  // BSN Configuration (moved from components to state)
+  modalTitle: string;
+  filterOptions: BsnFilterOption[];
+  fpFilterBehavior: "status-based" | "allowlist-based";
   // Modal
   stakingModalPage: StakingModalPage;
   setStakingModalPage: (page: StakingModalPage) => void;
@@ -80,7 +90,8 @@ const SORT_DIRECTIONS = {
   asc: undefined,
 } as const;
 
-const STATUS_FILTERS = {
+// BSN-specific status filters to handle different BSN behaviors
+const BABYLON_STATUS_FILTERS = {
   active: (fp: FinalityProvider) =>
     fp.state === FinalityProviderStateEnum.ACTIVE,
   inactive: (fp: FinalityProvider) =>
@@ -91,6 +102,28 @@ const STATUS_FILTERS = {
     fp.state === FinalityProviderStateEnum.SLASHED,
 };
 
+const COSMOS_STATUS_FILTERS = {
+  active: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.ACTIVE,
+  inactive: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.INACTIVE,
+};
+
+const ROLLUP_STATUS_FILTERS = {
+  active: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.ACTIVE,
+  inactive: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.INACTIVE,
+  slashed: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.SLASHED,
+};
+
+const BSN_STATUS_FILTERS = {
+  [BBN_CHAIN_ID]: BABYLON_STATUS_FILTERS,
+  COSMOS: COSMOS_STATUS_FILTERS,
+  ROLLUP: ROLLUP_STATUS_FILTERS,
+};
+
 const createAllowlistFilters = (selectedBsn: Bsn | undefined) => {
   const allowSet = new Set((selectedBsn?.allowlist || []).map(normalizeHex));
 
@@ -105,13 +138,13 @@ const filterFinalityProvidersByBsn = (
   providers: FinalityProvider[],
   filter: FilterState,
   selectedBsn: Bsn | undefined,
+  fpFilterBehavior: "status-based" | "allowlist-based",
 ): FinalityProvider[] => {
   let filtered = providers;
 
   // Apply BSN-aware filtering based on provider status
   if (filter.providerStatus) {
-    const bsnConfig = getBsnConfig(selectedBsn);
-    if (bsnConfig.fpFilterBehavior === "allowlist-based") {
+    if (fpFilterBehavior === "allowlist-based") {
       // For rollup BSNs: filter all FPs by allowlist (regardless of active/inactive state)
       const allowSet = new Set(
         (selectedBsn?.allowlist || []).map(normalizeHex),
@@ -122,14 +155,25 @@ const filterFinalityProvidersByBsn = (
 
         if (filter.providerStatus === "active") {
           return isAllowlisted;
-        } else {
+        } else if (filter.providerStatus === "inactive") {
           return !isAllowlisted;
+        } else {
+          // Handle slashed state for rollups
+          return fp.state === FinalityProviderStateEnum.SLASHED;
         }
       });
-    } else if (bsnConfig.fpFilterBehavior === "status-based") {
-      // For status-based BSNs: filter by finality provider state (active/inactive/jailed/slashed)
+    } else if (fpFilterBehavior === "status-based") {
+      // For status-based BSNs: filter by finality provider state using BSN-specific filters
+      const bsnKey =
+        selectedBsn?.id === BBN_CHAIN_ID
+          ? BBN_CHAIN_ID
+          : selectedBsn?.type || BBN_CHAIN_ID;
+      const bsnStatusFilters =
+        BSN_STATUS_FILTERS[bsnKey] || BSN_STATUS_FILTERS[BBN_CHAIN_ID];
       const statusFilter =
-        STATUS_FILTERS[filter.providerStatus as keyof typeof STATUS_FILTERS];
+        bsnStatusFilters[
+          filter.providerStatus as keyof typeof bsnStatusFilters
+        ];
       if (statusFilter) {
         filtered = filtered.filter(statusFilter);
       }
@@ -156,10 +200,6 @@ const FILTERS = {
       fp.btcPk.toLowerCase().includes(searchTerm)
     );
   },
-  providerStatus: (fp: FinalityProvider, filter: FilterState) =>
-    filter.providerStatus && !filter.searchTerm
-      ? STATUS_FILTERS[filter.providerStatus](fp)
-      : true,
 };
 
 const defaultState: FinalityProviderBsnState = {
@@ -179,6 +219,15 @@ const defaultState: FinalityProviderBsnState = {
   selectedBsnId: undefined,
   selectedBsn: undefined,
   setSelectedBsnId: () => {},
+  // Default BSN configuration (Babylon Genesis)
+  modalTitle: "Select Babylon Genesis Finality Provider",
+  filterOptions: [
+    { value: "active", label: "Active" },
+    { value: "inactive", label: "Inactive" },
+    { value: "jailed", label: "Jailed" },
+    { value: "slashed", label: "Slashed" },
+  ],
+  fpFilterBehavior: "status-based",
   isRowSelectable: () => false,
   handleSort: () => {},
   handleFilter: () => {},
@@ -233,6 +282,22 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
     [bsnList, selectedBsnId],
   );
 
+  // BSN configuration derived from selected BSN (moved from components)
+  const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
+
+  const modalTitle = useMemo(
+    () => bsnConfig.modalTitle,
+    [bsnConfig.modalTitle],
+  );
+  const filterOptions = useMemo(
+    () => bsnConfig.filterOptions,
+    [bsnConfig.filterOptions],
+  );
+  const fpFilterBehavior = useMemo(
+    () => bsnConfig.fpFilterBehavior,
+    [bsnConfig.fpFilterBehavior],
+  );
+
   const finalityProviders = useMemo(() => {
     if (!data?.finalityProviders) {
       return [];
@@ -303,8 +368,13 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       return filtered;
     }
 
-    return filterFinalityProvidersByBsn(filtered, filter, selectedBsn);
-  }, [finalityProviders, filter, selectedBsn]);
+    return filterFinalityProvidersByBsn(
+      filtered,
+      filter,
+      selectedBsn,
+      fpFilterBehavior,
+    );
+  }, [finalityProviders, filter, selectedBsn, fpFilterBehavior]);
 
   const state = useMemo(
     () => ({
@@ -322,6 +392,10 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       setSelectedProviderIds,
       isFetching,
       hasError: isError,
+      // BSN Configuration (moved from components to state)
+      modalTitle,
+      filterOptions,
+      fpFilterBehavior,
       handleSort,
       handleFilter,
       isRowSelectable,
@@ -343,6 +417,9 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       setSelectedProviderIds,
       isFetching,
       isError,
+      modalTitle,
+      filterOptions,
+      fpFilterBehavior,
       handleSort,
       handleFilter,
       isRowSelectable,

From 0d67286ea9e7bc7a87178df60a62b841bfbf50fa Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 4 Sep 2025 20:24:53 +0700
Subject: [PATCH 4/6] fix: resolve comments

---
 src/ui/common/services/bsnService.ts          |  10 +-
 .../services/finalityProviderService.ts       | 164 ++++++++++++++++++
 .../common/state/FinalityProviderBsnState.tsx | 133 +-------------
 3 files changed, 179 insertions(+), 128 deletions(-)
 create mode 100644 src/ui/common/services/finalityProviderService.ts

diff --git a/src/ui/common/services/bsnService.ts b/src/ui/common/services/bsnService.ts
index 7d16363ce..2acb5b9bb 100644
--- a/src/ui/common/services/bsnService.ts
+++ b/src/ui/common/services/bsnService.ts
@@ -32,8 +32,8 @@ export const BSN_CONFIGS: Record<string, BsnConfig> = {
   COSMOS: {
     modalTitle: "Select Cosmos Finality Provider",
     filterOptions: [
-      { value: "active", label: "Active" },
-      { value: "inactive", label: "Inactive" },
+      { value: "registered", label: "Registered" },
+      { value: "slashed", label: "Slashed" },
     ],
     fpFilterBehavior: "status-based",
   },
@@ -41,8 +41,10 @@ export const BSN_CONFIGS: Record<string, BsnConfig> = {
   ROLLUP: {
     modalTitle: "Select Roll Up Finality Provider",
     filterOptions: [
-      { value: "active", label: "Allowlisted" },
-      { value: "inactive", label: "Not Allowlisted" },
+      { value: "allowlisted", label: "Allow Listed" },
+      { value: "non-allowlisted", label: "Non-Allow Listed" },
+      { value: "slashed", label: "Slashed" },
+      { value: "jailed", label: "Jailed" },
     ],
     fpFilterBehavior: "allowlist-based",
   },
diff --git a/src/ui/common/services/finalityProviderService.ts b/src/ui/common/services/finalityProviderService.ts
new file mode 100644
index 000000000..64c44009c
--- /dev/null
+++ b/src/ui/common/services/finalityProviderService.ts
@@ -0,0 +1,164 @@
+import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+import { Bsn } from "@/ui/common/types/bsn";
+import {
+  FinalityProviderState as FinalityProviderStateEnum,
+  type FinalityProvider,
+} from "@/ui/common/types/finalityProviders";
+
+const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
+
+/**
+ * Normalizes hex string by removing 0x prefix and converting to lowercase
+ */
+export const normalizeHex = (hex?: string): string =>
+  (hex ?? "").trim().toLowerCase().replace(/^0x/, "");
+
+// BSN-specific status filters to handle different BSN behaviors
+const BABYLON_STATUS_FILTERS = {
+  active: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.ACTIVE,
+  inactive: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.INACTIVE,
+  jailed: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.JAILED,
+  slashed: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.SLASHED,
+};
+
+const COSMOS_STATUS_FILTERS = {
+  registered: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.INACTIVE,
+  slashed: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.SLASHED,
+};
+
+const BSN_STATUS_FILTERS = {
+  [BBN_CHAIN_ID]: BABYLON_STATUS_FILTERS,
+  COSMOS: COSMOS_STATUS_FILTERS,
+};
+
+/**
+ * Creates allowlist filters for BSN-based filtering
+ */
+export const createAllowlistFilters = (selectedBsn: Bsn | undefined) => {
+  const allowSet = new Set((selectedBsn?.allowlist || []).map(normalizeHex));
+
+  return {
+    allowlisted: (fp: FinalityProvider) => allowSet.has(normalizeHex(fp.btcPk)),
+    "non-allowlisted": (fp: FinalityProvider) =>
+      !allowSet.has(normalizeHex(fp.btcPk)),
+  };
+};
+
+/**
+ * Applies standard status filtering for BABYLON and COSMOS BSNs
+ */
+export const applyStandardStatusFilter = (
+  providers: FinalityProvider[],
+  filterValue: string,
+  bsnKey: string,
+): FinalityProvider[] => {
+  const bsnStatusFilters =
+    BSN_STATUS_FILTERS[bsnKey] || BSN_STATUS_FILTERS[BBN_CHAIN_ID];
+  const statusFilter =
+    bsnStatusFilters[filterValue as keyof typeof bsnStatusFilters];
+  return statusFilter ? providers.filter(statusFilter) : providers;
+};
+
+export interface FinalityProviderFilterState {
+  searchTerm: string;
+  providerStatus:
+    | "active"
+    | "inactive"
+    | "registered"
+    | "allowlisted"
+    | "non-allowlisted"
+    | "slashed"
+    | "jailed"
+    | "";
+  allowlistStatus: "allowlisted" | "non-allowlisted" | "";
+}
+
+/**
+ * Main filtering function that applies BSN-aware filtering logic
+ * Handles both allowlist-based and status-based filtering behaviors
+ */
+export const filterFinalityProvidersByBsn = (
+  providers: FinalityProvider[],
+  filter: FinalityProviderFilterState,
+  selectedBsn: Bsn | undefined,
+  fpFilterBehavior: "status-based" | "allowlist-based",
+): FinalityProvider[] => {
+  let filtered = providers;
+
+  // Apply BSN-aware filtering based on provider status
+  if (filter.providerStatus) {
+    if (fpFilterBehavior === "allowlist-based") {
+      // For rollup BSNs: filter FPs by allowlist status or specific states
+      const allowSet = new Set(
+        (selectedBsn?.allowlist || []).map(normalizeHex),
+      );
+
+      filtered = filtered.filter((fp) => {
+        const isAllowlisted = allowSet.has(normalizeHex(fp.btcPk));
+
+        if (filter.providerStatus === "allowlisted") {
+          return isAllowlisted;
+        } else if (filter.providerStatus === "non-allowlisted") {
+          return !isAllowlisted;
+        } else if (filter.providerStatus === "slashed") {
+          return fp.state === FinalityProviderStateEnum.SLASHED;
+        } else if (filter.providerStatus === "jailed") {
+          return fp.state === FinalityProviderStateEnum.JAILED;
+        }
+        return true;
+      });
+    } else if (fpFilterBehavior === "status-based") {
+      // For status-based BSNs: filter by finality provider state using BSN-specific filters
+      const bsnKey =
+        selectedBsn?.id === BBN_CHAIN_ID
+          ? BBN_CHAIN_ID
+          : selectedBsn?.type || BBN_CHAIN_ID;
+
+      filtered = applyStandardStatusFilter(
+        filtered,
+        filter.providerStatus,
+        bsnKey,
+      );
+    }
+  }
+
+  if (filter.allowlistStatus) {
+    const allowlistFilters = createAllowlistFilters(selectedBsn);
+    const allowlistFilter =
+      allowlistFilters[filter.allowlistStatus as keyof typeof allowlistFilters];
+    if (allowlistFilter) {
+      filtered = filtered.filter(allowlistFilter);
+    }
+  }
+
+  return filtered;
+};
+
+/**
+ * Determines if a finality provider row should be selectable based on BSN rules
+ */
+export const isFinalityProviderRowSelectable = (
+  row: FinalityProvider,
+  selectedBsnId: string | undefined,
+  selectedBsn: Bsn | undefined,
+): boolean => {
+  const statusAllowed =
+    row.state === FinalityProviderStateEnum.ACTIVE ||
+    row.state === FinalityProviderStateEnum.INACTIVE;
+
+  // For selection (not filtering), only restrict based on allowlist for non-Babylon BSNs
+  const allowlistAllowed =
+    !selectedBsnId ||
+    selectedBsnId === BBN_CHAIN_ID ||
+    (selectedBsn?.allowlist || []).some(
+      (allowedPk) => normalizeHex(allowedPk) === normalizeHex(row.btcPk),
+    );
+
+  return statusAllowed && allowlistAllowed;
+};
diff --git a/src/ui/common/state/FinalityProviderBsnState.tsx b/src/ui/common/state/FinalityProviderBsnState.tsx
index 587ef6009..8a6b00072 100644
--- a/src/ui/common/state/FinalityProviderBsnState.tsx
+++ b/src/ui/common/state/FinalityProviderBsnState.tsx
@@ -10,6 +10,11 @@ import {
   getBsnConfig,
   type BsnFilterOption,
 } from "@/ui/common/services/bsnService";
+import {
+  filterFinalityProvidersByBsn,
+  isFinalityProviderRowSelectable,
+  type FinalityProviderFilterState,
+} from "@/ui/common/services/finalityProviderService";
 import { Bsn } from "@/ui/common/types/bsn";
 import {
   FinalityProviderState as FinalityProviderStateEnum,
@@ -19,19 +24,12 @@ import { createStateUtils } from "@/ui/common/utils/createStateUtils";
 
 import { getBsnLogoUrl } from "../utils/bsnLogo";
 
-const normalizeHex = (hex?: string): string =>
-  (hex ?? "").trim().toLowerCase().replace(/^0x/, "");
-
 interface SortState {
   field?: string;
   direction?: "asc" | "desc";
 }
 
-interface FilterState {
-  searchTerm: string;
-  providerStatus: "active" | "inactive" | "";
-  allowlistStatus: "allowlisted" | "not-allowlisted" | "";
-}
+type FilterState = FinalityProviderFilterState;
 
 const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
 
@@ -90,107 +88,7 @@ const SORT_DIRECTIONS = {
   asc: undefined,
 } as const;
 
-// BSN-specific status filters to handle different BSN behaviors
-const BABYLON_STATUS_FILTERS = {
-  active: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.ACTIVE,
-  inactive: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.INACTIVE,
-  jailed: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.JAILED,
-  slashed: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.SLASHED,
-};
-
-const COSMOS_STATUS_FILTERS = {
-  active: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.ACTIVE,
-  inactive: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.INACTIVE,
-};
-
-const ROLLUP_STATUS_FILTERS = {
-  active: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.ACTIVE,
-  inactive: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.INACTIVE,
-  slashed: (fp: FinalityProvider) =>
-    fp.state === FinalityProviderStateEnum.SLASHED,
-};
-
-const BSN_STATUS_FILTERS = {
-  [BBN_CHAIN_ID]: BABYLON_STATUS_FILTERS,
-  COSMOS: COSMOS_STATUS_FILTERS,
-  ROLLUP: ROLLUP_STATUS_FILTERS,
-};
-
-const createAllowlistFilters = (selectedBsn: Bsn | undefined) => {
-  const allowSet = new Set((selectedBsn?.allowlist || []).map(normalizeHex));
-
-  return {
-    allowlisted: (fp: FinalityProvider) => allowSet.has(normalizeHex(fp.btcPk)),
-    "not-allowlisted": (fp: FinalityProvider) =>
-      !allowSet.has(normalizeHex(fp.btcPk)),
-  };
-};
-
-const filterFinalityProvidersByBsn = (
-  providers: FinalityProvider[],
-  filter: FilterState,
-  selectedBsn: Bsn | undefined,
-  fpFilterBehavior: "status-based" | "allowlist-based",
-): FinalityProvider[] => {
-  let filtered = providers;
-
-  // Apply BSN-aware filtering based on provider status
-  if (filter.providerStatus) {
-    if (fpFilterBehavior === "allowlist-based") {
-      // For rollup BSNs: filter all FPs by allowlist (regardless of active/inactive state)
-      const allowSet = new Set(
-        (selectedBsn?.allowlist || []).map(normalizeHex),
-      );
-
-      filtered = filtered.filter((fp) => {
-        const isAllowlisted = allowSet.has(normalizeHex(fp.btcPk));
-
-        if (filter.providerStatus === "active") {
-          return isAllowlisted;
-        } else if (filter.providerStatus === "inactive") {
-          return !isAllowlisted;
-        } else {
-          // Handle slashed state for rollups
-          return fp.state === FinalityProviderStateEnum.SLASHED;
-        }
-      });
-    } else if (fpFilterBehavior === "status-based") {
-      // For status-based BSNs: filter by finality provider state using BSN-specific filters
-      const bsnKey =
-        selectedBsn?.id === BBN_CHAIN_ID
-          ? BBN_CHAIN_ID
-          : selectedBsn?.type || BBN_CHAIN_ID;
-      const bsnStatusFilters =
-        BSN_STATUS_FILTERS[bsnKey] || BSN_STATUS_FILTERS[BBN_CHAIN_ID];
-      const statusFilter =
-        bsnStatusFilters[
-          filter.providerStatus as keyof typeof bsnStatusFilters
-        ];
-      if (statusFilter) {
-        filtered = filtered.filter(statusFilter);
-      }
-    }
-  }
-
-  if (filter.allowlistStatus) {
-    const allowlistFilters = createAllowlistFilters(selectedBsn);
-    const allowlistFilter =
-      allowlistFilters[filter.allowlistStatus as keyof typeof allowlistFilters];
-    if (allowlistFilter) {
-      filtered = filtered.filter(allowlistFilter);
-    }
-  }
-
-  return filtered;
-};
+// Component-specific constants remain in the state file
 
 const FILTERS = {
   searchTerm: (fp: FinalityProvider, filter: FilterState) => {
@@ -339,21 +237,8 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
   }, []);
 
   const isRowSelectable = useCallback(
-    (row: FinalityProvider) => {
-      const statusAllowed =
-        row.state === FinalityProviderStateEnum.ACTIVE ||
-        row.state === FinalityProviderStateEnum.INACTIVE;
-
-      // For selection (not filtering), only restrict based on allowlist for non-Babylon BSNs
-      const allowlistAllowed =
-        !selectedBsnId ||
-        selectedBsnId === BBN_CHAIN_ID ||
-        (selectedBsn?.allowlist || []).some(
-          (allowedPk) => normalizeHex(allowedPk) === normalizeHex(row.btcPk),
-        );
-
-      return statusAllowed && allowlistAllowed;
-    },
+    (row: FinalityProvider) =>
+      isFinalityProviderRowSelectable(row, selectedBsnId, selectedBsn),
     [selectedBsnId, selectedBsn],
   );
 

From 58e259984cc105277be3f20de3c43da285a2e24e Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 4 Sep 2025 20:28:46 +0700
Subject: [PATCH 5/6] fix: resolve comments

---
 src/ui/common/services/bsnService.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/ui/common/services/bsnService.ts b/src/ui/common/services/bsnService.ts
index 2acb5b9bb..77e95033f 100644
--- a/src/ui/common/services/bsnService.ts
+++ b/src/ui/common/services/bsnService.ts
@@ -1,3 +1,4 @@
+import logger from "@/infrastructure/logger";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 
 import { getBsnAPI } from "../api/getBsn";
@@ -62,7 +63,19 @@ export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
   }
 
   // Use type-based config
-  return BSN_CONFIGS[bsn.type] || BSN_CONFIGS[BBN_CHAIN_ID];
+  const config = BSN_CONFIGS[bsn.type];
+  if (!config) {
+    logger.error(new Error(`BSN config not found for type: ${bsn.type}`), {
+      tags: { service: "bsnService", function: "getBsnConfig" },
+      data: {
+        bsnType: bsn.type,
+        bsnId: bsn.id,
+        fallback: "Babylon Genesis config",
+      },
+    });
+    return BSN_CONFIGS[BBN_CHAIN_ID];
+  }
+  return config;
 };
 
 /**

From f894a7e7ac6bf2e4db76575fdd36f39459b9c4f7 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Fri, 5 Sep 2025 12:50:34 +0700
Subject: [PATCH 6/6] fix: resolve comments

---
 src/ui/common/hooks/client/api/useBsn.ts      |  8 +++++-
 src/ui/common/services/bsnService.ts          | 18 -------------
 ...ce.ts => finalityProviderFilterService.ts} | 27 +++++++++++--------
 .../common/state/FinalityProviderBsnState.tsx | 19 +++----------
 4 files changed, 26 insertions(+), 46 deletions(-)
 rename src/ui/common/services/{finalityProviderService.ts => finalityProviderFilterService.ts} (84%)

diff --git a/src/ui/common/hooks/client/api/useBsn.ts b/src/ui/common/hooks/client/api/useBsn.ts
index 0c50b4963..efc32fbc1 100644
--- a/src/ui/common/hooks/client/api/useBsn.ts
+++ b/src/ui/common/hooks/client/api/useBsn.ts
@@ -1,10 +1,16 @@
+import { getBsnAPI } from "@/ui/common/api/getBsn";
 import { ONE_MINUTE } from "@/ui/common/constants";
 import { useClientQuery } from "@/ui/common/hooks/client/useClient";
-import { getBSNs } from "@/ui/common/services/bsnService";
+import { createBSN } from "@/ui/common/services/bsnService";
 import { Bsn } from "@/ui/common/types/bsn";
 
 export const BSN_KEY = "BSN";
 
+const getBSNs = async (): Promise<Bsn[]> => {
+  const data = await getBsnAPI();
+  return data.map(createBSN);
+};
+
 export function useBsn({ enabled = true }: { enabled?: boolean } = {}) {
   return useClientQuery<Bsn[]>({
     queryKey: [BSN_KEY],
diff --git a/src/ui/common/services/bsnService.ts b/src/ui/common/services/bsnService.ts
index 77e95033f..1f9d49e6c 100644
--- a/src/ui/common/services/bsnService.ts
+++ b/src/ui/common/services/bsnService.ts
@@ -1,7 +1,6 @@
 import logger from "@/infrastructure/logger";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 
-import { getBsnAPI } from "../api/getBsn";
 import { Bsn, BsnType } from "../types/bsn";
 import { getBsnLogoUrl } from "../utils/bsnLogo";
 
@@ -15,7 +14,6 @@ export interface BsnFilterOption {
 export interface BsnConfig {
   modalTitle: string;
   filterOptions: BsnFilterOption[];
-  fpFilterBehavior: "status-based" | "allowlist-based";
 }
 
 export const BSN_CONFIGS: Record<string, BsnConfig> = {
@@ -28,7 +26,6 @@ export const BSN_CONFIGS: Record<string, BsnConfig> = {
       { value: "jailed", label: "Jailed" },
       { value: "slashed", label: "Slashed" },
     ],
-    fpFilterBehavior: "status-based",
   },
   COSMOS: {
     modalTitle: "Select Cosmos Finality Provider",
@@ -36,7 +33,6 @@ export const BSN_CONFIGS: Record<string, BsnConfig> = {
       { value: "registered", label: "Registered" },
       { value: "slashed", label: "Slashed" },
     ],
-    fpFilterBehavior: "status-based",
   },
   // Roll-up BSN config
   ROLLUP: {
@@ -47,7 +43,6 @@ export const BSN_CONFIGS: Record<string, BsnConfig> = {
       { value: "slashed", label: "Slashed" },
       { value: "jailed", label: "Jailed" },
     ],
-    fpFilterBehavior: "allowlist-based",
   },
 };
 
@@ -78,12 +73,6 @@ export const getBsnConfig = (bsn?: Bsn): BsnConfig => {
   return config;
 };
 
-/**
- * Determines if a BSN is Babylon Genesis
- */
-export const isBabylonGenesisBsn = (bsn: Bsn): boolean =>
-  bsn.id === BBN_CHAIN_ID;
-
 export const createBSN = (bsn: {
   id: string;
   name: string;
@@ -100,10 +89,3 @@ export const createBSN = (bsn: {
   type: bsn.type,
   allowlist: bsn.allowlist,
 });
-
-/**
- */
-export const getBSNs = async (): Promise<Bsn[]> => {
-  const data = await getBsnAPI();
-  return data.map(createBSN);
-};
diff --git a/src/ui/common/services/finalityProviderService.ts b/src/ui/common/services/finalityProviderFilterService.ts
similarity index 84%
rename from src/ui/common/services/finalityProviderService.ts
rename to src/ui/common/services/finalityProviderFilterService.ts
index 64c44009c..d280b5bb9 100644
--- a/src/ui/common/services/finalityProviderService.ts
+++ b/src/ui/common/services/finalityProviderFilterService.ts
@@ -38,7 +38,7 @@ const BSN_STATUS_FILTERS = {
 };
 
 /**
- * Creates allowlist filters for BSN-based filtering
+ * Creates allowlist filters for Rollup BSN-based filtering
  */
 export const createAllowlistFilters = (selectedBsn: Bsn | undefined) => {
   const allowSet = new Set((selectedBsn?.allowlist || []).map(normalizeHex));
@@ -81,31 +81,36 @@ export interface FinalityProviderFilterState {
 
 /**
  * Main filtering function that applies BSN-aware filtering logic
- * Handles both allowlist-based and status-based filtering behaviors
+ * Determines filtering behavior based on BSN type: ROLLUP BSNs use allowlist-based filtering,
+ * while BABYLON and COSMOS BSNs use status-based filtering
  */
 export const filterFinalityProvidersByBsn = (
   providers: FinalityProvider[],
   filter: FinalityProviderFilterState,
   selectedBsn: Bsn | undefined,
-  fpFilterBehavior: "status-based" | "allowlist-based",
 ): FinalityProvider[] => {
   let filtered = providers;
 
   // Apply BSN-aware filtering based on provider status
   if (filter.providerStatus) {
-    if (fpFilterBehavior === "allowlist-based") {
+    // Determine filtering behavior based on BSN type
+    const isRollupBsn = selectedBsn?.type === "ROLLUP";
+
+    if (isRollupBsn) {
       // For rollup BSNs: filter FPs by allowlist status or specific states
-      const allowSet = new Set(
-        (selectedBsn?.allowlist || []).map(normalizeHex),
-      );
+      const allowlist = selectedBsn?.allowlist || [];
+      const allowSet = new Set(allowlist.map(normalizeHex));
+      const hasAllowlist = allowlist.length > 0;
 
       filtered = filtered.filter((fp) => {
         const isAllowlisted = allowSet.has(normalizeHex(fp.btcPk));
 
         if (filter.providerStatus === "allowlisted") {
-          return isAllowlisted;
+          // If no allowlist is defined, show non-allowlisted FPs (all FPs)
+          return hasAllowlist ? isAllowlisted : true;
         } else if (filter.providerStatus === "non-allowlisted") {
-          return !isAllowlisted;
+          // If no allowlist is defined, show all FPs as non-allowlisted
+          return hasAllowlist ? !isAllowlisted : true;
         } else if (filter.providerStatus === "slashed") {
           return fp.state === FinalityProviderStateEnum.SLASHED;
         } else if (filter.providerStatus === "jailed") {
@@ -113,8 +118,8 @@ export const filterFinalityProvidersByBsn = (
         }
         return true;
       });
-    } else if (fpFilterBehavior === "status-based") {
-      // For status-based BSNs: filter by finality provider state using BSN-specific filters
+    } else {
+      // For Babylon and Cosmos BSNs: filter by finality provider state using BSN-specific filters
       const bsnKey =
         selectedBsn?.id === BBN_CHAIN_ID
           ? BBN_CHAIN_ID
diff --git a/src/ui/common/state/FinalityProviderBsnState.tsx b/src/ui/common/state/FinalityProviderBsnState.tsx
index 8a6b00072..750ca8dd5 100644
--- a/src/ui/common/state/FinalityProviderBsnState.tsx
+++ b/src/ui/common/state/FinalityProviderBsnState.tsx
@@ -14,7 +14,7 @@ import {
   filterFinalityProvidersByBsn,
   isFinalityProviderRowSelectable,
   type FinalityProviderFilterState,
-} from "@/ui/common/services/finalityProviderService";
+} from "@/ui/common/services/finalityProviderFilterService";
 import { Bsn } from "@/ui/common/types/bsn";
 import {
   FinalityProviderState as FinalityProviderStateEnum,
@@ -60,7 +60,6 @@ interface FinalityProviderBsnState {
   // BSN Configuration (moved from components to state)
   modalTitle: string;
   filterOptions: BsnFilterOption[];
-  fpFilterBehavior: "status-based" | "allowlist-based";
   // Modal
   stakingModalPage: StakingModalPage;
   setStakingModalPage: (page: StakingModalPage) => void;
@@ -125,7 +124,6 @@ const defaultState: FinalityProviderBsnState = {
     { value: "jailed", label: "Jailed" },
     { value: "slashed", label: "Slashed" },
   ],
-  fpFilterBehavior: "status-based",
   isRowSelectable: () => false,
   handleSort: () => {},
   handleFilter: () => {},
@@ -191,10 +189,6 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
     () => bsnConfig.filterOptions,
     [bsnConfig.filterOptions],
   );
-  const fpFilterBehavior = useMemo(
-    () => bsnConfig.fpFilterBehavior,
-    [bsnConfig.fpFilterBehavior],
-  );
 
   const finalityProviders = useMemo(() => {
     if (!data?.finalityProviders) {
@@ -253,13 +247,8 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       return filtered;
     }
 
-    return filterFinalityProvidersByBsn(
-      filtered,
-      filter,
-      selectedBsn,
-      fpFilterBehavior,
-    );
-  }, [finalityProviders, filter, selectedBsn, fpFilterBehavior]);
+    return filterFinalityProvidersByBsn(filtered, filter, selectedBsn);
+  }, [finalityProviders, filter, selectedBsn]);
 
   const state = useMemo(
     () => ({
@@ -280,7 +269,6 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       // BSN Configuration (moved from components to state)
       modalTitle,
       filterOptions,
-      fpFilterBehavior,
       handleSort,
       handleFilter,
       isRowSelectable,
@@ -304,7 +292,6 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       isError,
       modalTitle,
       filterOptions,
-      fpFilterBehavior,
       handleSort,
       handleFilter,
       isRowSelectable,