feat: bsn fp allowlist

src/ui/common/api/getBsn.ts

@@ -1,34 +1,29 @@
-import { Bsn } from "../types/bsn";
-import { getBsnLogoUrl } from "../utils/bsnLogo";
+import { BsnType } from "../types/bsn";
 
 import { apiWrapper } from "./apiWrapper";
 
-interface BsnAPI {
+export const BSN_TYPE_COSMOS: BsnType = "COSMOS";
+export const BSN_TYPE_ROLLUP: BsnType = "ROLLUP";
+
+export interface BsnAPI {
   id: string;
   name: string;
   description: string;
   active_tvl: number;
+  type: BsnType;
+  allowlist?: string[]; // BTC FP pubkeys (hex)
 }
 
 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),
-});
-
-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;
 };

src/ui/common/components/Multistaking/FinalityProviderField/FinalityProviderModal.tsx

@@ -8,6 +8,7 @@ import { useState } from "react";
 
 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 +28,7 @@ export const FinalityProviderModal = ({
   onBack,
 }: Props) => {
   const [selectedFP, setSelectedFp] = useState(defaultFinalityProvider);
+  const { modalTitle } = useFinalityProviderBsnState();
 
   const handleClose = () => {
     onClose();
@@ -36,7 +38,7 @@ export const FinalityProviderModal = ({
   return (
     <ResponsiveDialog open={open} onClose={handleClose} className="w-[52rem]">
       <DialogHeader
-        title="Select Finality Provider"
+        title={modalTitle}
         onClose={handleClose}
         className="text-accent-primary"
       />

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

@@ -2,21 +2,16 @@ import { Select } from "@babylonlabs-io/core-ui";
 
 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, filterOptions } = useFinalityProviderBsnState();
 
   return (
     <Select
-      options={options}
-      onSelect={(value) => handleFilter("status", value.toString())}
+      options={filterOptions}
+      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"
     />

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

src/ui/common/hooks/client/api/useBsn.ts

@@ -1,10 +1,16 @@
-import { getBSNs } from "@/ui/common/api/getBsn";
+import { getBsnAPI } from "@/ui/common/api/getBsn";
 import { ONE_MINUTE } from "@/ui/common/constants";
 import { useClientQuery } from "@/ui/common/hooks/client/useClient";
+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],

src/ui/common/services/bsnService.ts

@@ -0,0 +1,91 @@
+import logger from "@/infrastructure/logger";
+import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+
+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[];
+}
+
+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" },
+    ],
+  },
+  COSMOS: {
+    modalTitle: "Select Cosmos Finality Provider",
+    filterOptions: [
+      { value: "registered", label: "Registered" },
+      { value: "slashed", label: "Slashed" },
+    ],
+  },
+  // Roll-up BSN config
+  ROLLUP: {
+    modalTitle: "Select Roll Up Finality Provider",
+    filterOptions: [
+      { value: "allowlisted", label: "Allow Listed" },
+      { value: "non-allowlisted", label: "Non-Allow Listed" },
+      { value: "slashed", label: "Slashed" },
+      { value: "jailed", label: "Jailed" },
+    ],
+  },
+};
+
+/**
+ * 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
+  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;
+};
+
+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,
+});