WIP

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4",
-    "@babylonlabs-io/bbn-core-ui": "^0.2.0",
+    "@babylonlabs-io/bbn-core-ui": "^0.3.1",
     "@babylonlabs-io/bbn-wallet-connect": "^0.1.6",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",

src/app/components/Staking/FinalityProviders/v2/FinalityProviderFilter.tsx

@@ -0,0 +1,3 @@
+export const FinalityProviderFilter = () => {
+  return <div>FinalityProviderFilter</div>;
+};

src/app/components/Staking/FinalityProviders/v2/FinalityProviderSearch.tsx

@@ -0,0 +1,3 @@
+export const FinalityProviderSearch = () => {
+  return <div>FinalityProviderSearch</div>;
+};

src/app/components/Staking/FinalityProviders/v2/FinalityProviderSubtitle.tsx

@@ -0,0 +1,5 @@
+import { Heading } from "@babylonlabs-io/bbn-core-ui";
+
+export const FinalityProviderSubtitle = () => {
+  return <Heading variant="h3">Select a Finality Provider</Heading>;
+};

src/app/components/Staking/FinalityProviders/v2/FinalityProviderTable.tsx

@@ -0,0 +1,93 @@
+import { Table } from "@babylonlabs-io/bbn-core-ui";
+import { useMemo } from "react";
+
+import { Hash } from "@/app/components/Hash/Hash";
+import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
+import {
+  FinalityProvider,
+  FinalityProviderState,
+} from "@/app/types/finalityProviders";
+import { getNetworkConfig } from "@/config/network.config";
+import { satoshiToBtc } from "@/utils/btc";
+import { maxDecimals } from "@/utils/maxDecimals";
+
+import { FPInfo } from "./components/FPInfo";
+
+export const FinalityProviderTable = () => {
+  const { isLoading, finalityProviders, hasNextPage, fetchNextPage } =
+    useFinalityProviderService();
+
+  const { coinName } = getNetworkConfig();
+
+  const columns = useMemo(
+    () => [
+      {
+        key: "moniker",
+        header: "Finality Provider",
+        render: (_: unknown, row: FinalityProvider) => (
+          <FPInfo
+            moniker={row.description?.moniker}
+            website={row.description?.website}
+          />
+        ),
+        sorter: (a: FinalityProvider, b: FinalityProvider) =>
+          (a.description?.moniker || "").localeCompare(
+            b.description?.moniker || "",
+          ),
+      },
+      {
+        key: "btcPk",
+        header: "BTC PK",
+        render: (_: unknown, row: FinalityProvider) => (
+          <Hash value={row.btcPk} address small noFade />
+        ),
+      },
+      {
+        key: "activeTVLSat",
+        header: "Total Delegation",
+        render: (value: unknown) =>
+          `${maxDecimals(satoshiToBtc(value as number), 8)} ${coinName}`,
+        sorter: (a: FinalityProvider, b: FinalityProvider) =>
+          a.activeTVLSat - b.activeTVLSat,
+      },
+      {
+        key: "commission",
+        header: "Commission",
+        render: (value: unknown) => `${maxDecimals(Number(value) * 100, 2)}%`,
+        sorter: (a: FinalityProvider, b: FinalityProvider) =>
+          Number(a.commission) - Number(b.commission),
+      },
+      {
+        key: "state",
+        header: "Status",
+        render: (value: unknown) =>
+          (value as FinalityProviderState).replace(
+            "FINALITY_PROVIDER_STATUS_",
+            "",
+          ),
+      },
+    ],
+    [coinName],
+  );
+
+  const tableData = useMemo(
+    () =>
+      finalityProviders?.map((fp) => ({
+        ...fp,
+        id: fp.btcPk,
+      })) || [],
+    [finalityProviders],
+  );
+
+  return (
+    <Table
+      data={tableData}
+      columns={columns}
+      loading={isLoading}
+      hasMore={hasNextPage}
+      onLoadMore={fetchNextPage}
+      onRowSelect={() => {}}
+      className="max-h-[21rem] overflow-y-auto"
+    />
+  );
+};

src/app/components/Staking/FinalityProviders/v2/FinalityProviderTitle.tsx

@@ -0,0 +1,5 @@
+import { Heading } from "@babylonlabs-io/bbn-core-ui";
+
+export const FinalityProviderTitle = () => {
+  return <Heading variant="h2">Step 1</Heading>;
+};

src/app/components/Staking/FinalityProviders/v2/FinalityProviders.tsx

@@ -0,0 +1,17 @@
+import { FinalityProviderFilter } from "./FinalityProviderFilter";
+import { FinalityProviderSearch } from "./FinalityProviderSearch";
+import { FinalityProviderSubtitle } from "./FinalityProviderSubtitle";
+import { FinalityProviderTable } from "./FinalityProviderTable";
+import { FinalityProviderTitle } from "./FinalityProviderTitle";
+
+export const FinalityProviders = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <FinalityProviderTitle />
+      <FinalityProviderSubtitle />
+      <FinalityProviderSearch />
+      <FinalityProviderFilter />
+      <FinalityProviderTable />
+    </div>
+  );
+};

src/app/components/Staking/FinalityProviders/v2/components/FPInfo.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import { FiExternalLink } from "react-icons/fi";
+
+import blue from "@/app/assets/blue-check.svg";
+
+interface FPInfoProps {
+  moniker?: string;
+  website?: string;
+}
+
+export const FPInfo = ({ moniker, website }: FPInfoProps) => {
+  if (!moniker) {
+    return <span>No data provided</span>;
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <Image src={blue} alt="verified" />
+      <span>
+        {moniker}
+        {website && (
+          <a
+            href={website}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary inline-flex ml-1 relative top-[1px]"
+          >
+            <FiExternalLink />
+          </a>
+        )}
+      </span>
+    </div>
+  );
+};

src/app/components/Staking/Staking.tsx

@@ -30,7 +30,7 @@ import { FeedbackModal } from "../Modals/FeedbackModal";
 import { PendingVerificationModal } from "../Modals/PendingVerificationModal";
 import { PreviewModal } from "../Modals/PreviewModal";
 
-import { FinalityProviders } from "./FinalityProviders/FinalityProviders";
+import { FinalityProviders } from "./FinalityProviders/v1/FinalityProviders";
 import { StakingAmount } from "./Form/StakingAmount";
 import { StakingFee } from "./Form/StakingFee";
 import { StakingTime } from "./Form/StakingTime";