feat: bsn fp allowlist

Author: jeremy-babylonlabs

src/ui/common/api/getBsn.ts

@@ -1,13 +1,91 @@
+import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+
 import { Bsn } from "../types/bsn";
 import { getBsnLogoUrl } from "../utils/bsnLogo";
 
 import { apiWrapper } from "./apiWrapper";
 
+export type BsnType = "COSMOS" | "ROLLUP";
+
+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 {
+  isBabylonGenesis: boolean;
+  displayName: string;
+  modalTitle: string;
+  filterLabels: {
+    primary: string;
+    secondary: string;
+  };
+  showAllowlistFilter: boolean;
+  fpFilterBehavior: "active-inactive" | "allowlist-based";
+}
+
+export const BSN_CONFIGS: Record<string, BsnConfig> = {
+  // Babylon Genesis
+  [BBN_CHAIN_ID]: {
+    isBabylonGenesis: true,
+    displayName: "Babylon Genesis",
+    modalTitle: "Select Babylon Genesis Finality Provider",
+    filterLabels: {
+      primary: "Active",
+      secondary: "Inactive",
+    },
+    showAllowlistFilter: false,
+    fpFilterBehavior: "active-inactive",
+  },
+  // Cosmos BSN config
+  COSMOS: {
+    isBabylonGenesis: false,
+    displayName: "Cosmos",
+    modalTitle: "Select Cosmos Finality Provider",
+    filterLabels: {
+      primary: "Active",
+      secondary: "Inactive",
+    },
+    showAllowlistFilter: false,
+    fpFilterBehavior: "active-inactive",
+  },
+  // Roll-up BSN config
+  ROLLUP: {
+    isBabylonGenesis: false,
+    displayName: "Roll Up",
+    modalTitle: "Select Roll Up Finality Provider",
+    filterLabels: {
+      primary: "Allow listed",
+      secondary: "Non-Allow listed",
+    },
+    showAllowlistFilter: false, // Main filter handles this
+    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 +98,26 @@ 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 a Roll-up BSN based on type field
+ */
+export const isRollupBsn = (bsn: Bsn): boolean => bsn.type === BSN_TYPE_ROLLUP;
+
+/**
+ * Determines if a BSN is a Cosmos BSN based on type field
+ */
+export const isCosmosBsn = (bsn: Bsn): boolean => bsn.type === BSN_TYPE_COSMOS;
+
+/**
+ * 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",

src/ui/common/api/getFinalityProvidersV2.ts

@@ -31,7 +31,6 @@ interface FinalityProviderAPI {
   logo_url?: string;
   bsn_id?: string;
   type: string;
-  is_allowlisted?: boolean;
 }
 
 interface DescriptionAPI {
@@ -102,7 +101,6 @@ export const getFinalityProvidersV2 = async ({
       bsnId: fp.bsn_id,
       bsnLogoUrl: getBsnLogoUrl(fp.bsn_id),
       chain: fp.type,
-      isAllowlisted: fp.is_allowlisted,
     }),
   );
 

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"
       />

src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderAllowlistFilter.tsx

@@ -1,5 +1,7 @@
 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 = [
@@ -9,10 +11,12 @@ const options = [
 ];
 
 export const FinalityProviderAllowlistFilter = () => {
-  const { filter, handleFilter, selectedBsnId } = useFinalityProviderBsnState();
+  const { filter, handleFilter, selectedBsn } = useFinalityProviderBsnState();
 
-  // Only show allowlist filter for non-Babylon BSNs
-  if (!selectedBsnId || selectedBsnId === "babylon") {
+  const bsnConfig = useMemo(() => getBsnConfig(selectedBsn), [selectedBsn]);
+
+  // Only show allowlist filter when config allows it
+  if (!selectedBsn || !bsnConfig.showAllowlistFilter) {
     return null;
   }
 

src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx

@@ -1,14 +1,21 @@
 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

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,6 +15,9 @@ 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";
@@ -32,6 +36,7 @@ const defaultBabylonBsn: Bsn = {
   name: "Babylon Genesis",
   description: "Babylon Genesis",
   logoUrl: getBsnLogoUrl(BBN_CHAIN_ID),
+  type: BSN_TYPE_COSMOS,
 };
 
 interface FinalityProviderBsnState {
@@ -46,6 +51,7 @@ interface FinalityProviderBsnState {
   bsnLoading: boolean;
   bsnError: boolean;
   selectedBsnId: string | undefined;
+  selectedBsn: Bsn | undefined;
   setSelectedBsnId: (id: string | undefined) => void;
   // Modal
   stakingModalPage: StakingModalPage;
@@ -119,6 +125,7 @@ const defaultState: FinalityProviderBsnState = {
   bsnLoading: false,
   bsnError: false,
   selectedBsnId: undefined,
+  selectedBsn: undefined,
   setSelectedBsnId: () => {},
   isRowSelectable: () => false,
   handleSort: () => {},
@@ -226,11 +233,63 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
     [selectedBsnId],
   );
 
+  const selectedBsn = useMemo(
+    () => bsnList.find((bsn) => bsn.id === selectedBsnId),
+    [bsnList, selectedBsnId],
+  );
+
   const filteredFinalityProviders = useMemo(() => {
-    return finalityProviders.filter((fp: FinalityProvider) =>
-      Object.values(FILTERS).every((filterFn) => filterFn(fp, filter)),
+    // First apply search filter
+    let 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;
+    }
+
+    // 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 membership (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);
+        }
+      }
+    }
+
+    // Apply allowlist filter
+    if (filter.allowlistStatus) {
+      const allowlistFilter =
+        ALLOWLIST_FILTERS[
+          filter.allowlistStatus as keyof typeof ALLOWLIST_FILTERS
+        ];
+      if (allowlistFilter) {
+        filtered = filtered.filter(allowlistFilter);
+      }
+    }
+
+    return filtered;
+  }, [finalityProviders, filter, selectedBsn]);
 
   const state = useMemo(
     () => ({
@@ -242,6 +301,7 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       hasNextPage,
       fetchNextPage,
       selectedBsnId,
+      selectedBsn,
       setSelectedBsnId,
       selectedProviderIds,
       setSelectedProviderIds,
@@ -262,6 +322,7 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       hasNextPage,
       fetchNextPage,
       selectedBsnId,
+      selectedBsn,
       setSelectedBsnId,
       selectedProviderIds,
       setSelectedProviderIds,

src/ui/common/types/bsn.ts

@@ -4,4 +4,6 @@ export interface Bsn {
   description: string;
   logoUrl: string;
   activeTvl?: number;
+  type: string; // "COSMOS" | "ROLLUP"
+  allowlist?: string[]; // BTC FP pubkeys (hex)
 }