feat(phase-2): delegation tabs

.github/workflows/publish.yaml

@@ -20,7 +20,8 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        environment: [devnet, phase-2-devnet, staging, testnet, mainnet-private, mainnet]
+        environment:
+          [devnet, phase-2-devnet, staging, testnet, mainnet-private, mainnet]
     environment: ${{ matrix.environment }}
     steps:
       - name: Checkout repository
@@ -51,7 +52,8 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        environment: [devnet, phase-2-devnet, staging, testnet, mainnet-private, mainnet]
+        environment:
+          [devnet, phase-2-devnet, staging, testnet, mainnet-private, mainnet]
     needs: ["docker_build"]
     steps:
       - name: Download Docker image from workspace
@@ -84,7 +86,8 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        environment: [devnet, phase-2-devnet, staging, testnet, mainnet-private, mainnet]
+        environment:
+          [devnet, phase-2-devnet, staging, testnet, mainnet-private, mainnet]
     needs: ["docker_build"]
     steps:
       - name: Download Docker image from workspace

package.json

@@ -49,6 +49,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-number-format": "^5.4.2",
     "react-responsive-modal": "^6.4.2",
+    "react-tabs": "^6.0.2",
     "react-tooltip": "^5.26.4",
     "sharp": "^0.33.4",
     "tailwind-merge": "^2.5.2",

src/app/components/Delegations/DelegationTabs.tsx

@@ -0,0 +1,41 @@
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+
+import { Delegations } from "@/app/components/Delegations/Delegations";
+import { AuthGuard } from "@/components/common/AuthGuard";
+import { DelegationList } from "@/components/delegations/DelegationList";
+
+export function DelegationTabs() {
+  return (
+    <AuthGuard>
+      <Tabs>
+        <div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm lg:flex-1">
+          <div className="flex gap-2 mb-4">
+            <h3 className="font-bold">Staking history</h3>
+
+            <TabList className="flex gap-2">
+              <Tab
+                className="text-primary cursor-pointer"
+                selectedClassName="border-b border-dashed border-primary"
+              >
+                Phase 1
+              </Tab>
+              <Tab
+                className="text-primary cursor-pointer"
+                selectedClassName="border-b border-dashed border-primary"
+              >
+                Phase 2
+              </Tab>
+            </TabList>
+          </div>
+
+          <TabPanel>
+            <Delegations />
+          </TabPanel>
+          <TabPanel>
+            <DelegationList />
+          </TabPanel>
+        </div>
+      </Tabs>
+    </AuthGuard>
+  );
+}

src/app/components/Delegations/Delegations.tsx

@@ -42,23 +42,21 @@ export const Delegations = () => {
   }
 
   return (
-    network && (
-      <DelegationsPointsProvider
-        publicKeyNoCoord={publicKeyNoCoord}
+    <DelegationsPointsProvider
+      publicKeyNoCoord={publicKeyNoCoord}
+      delegationsAPI={delegationsAPI.delegations}
+      isWalletConnected={connected}
+      address={address}
+    >
+      <DelegationsContent
         delegationsAPI={delegationsAPI.delegations}
-        isWalletConnected={connected}
+        globalParamsVersion={currentVersion}
         address={address}
-      >
-        <DelegationsContent
-          delegationsAPI={delegationsAPI.delegations}
-          globalParamsVersion={currentVersion}
-          address={address}
-          btcWalletNetwork={network}
-          publicKeyNoCoord={publicKeyNoCoord}
-          isWalletConnected={connected}
-        />
-      </DelegationsPointsProvider>
-    )
+        btcWalletNetwork={network}
+        publicKeyNoCoord={publicKeyNoCoord}
+        isWalletConnected={connected}
+      />
+    </DelegationsPointsProvider>
   );
 };
 
@@ -287,8 +285,7 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
       delegations;
 
   return (
-    <div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm lg:flex-1">
-      <h3 className="mb-4 font-bold">Staking history</h3>
+    <>
       {combinedDelegationsData.length === 0 ? (
         <div className="rounded-2xl border border-neutral-content p-4 text-center dark:border-neutral-content/20">
           <p>No history found</p>
@@ -366,6 +363,6 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           delegation={delegation}
         />
       )}
-    </div>
+    </>
   );
 };

src/app/components/Modals/UnbondWithdrawModal.tsx

@@ -24,6 +24,8 @@ interface PreviewModalProps {
   delegation: DelegationInterface;
 }
 
+const { coinName, networkName } = getNetworkConfig();
+
 export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
   open,
   onClose,
@@ -32,8 +34,6 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
   awaitingWalletResponse,
   delegation,
 }) => {
-  const { coinName, networkName } = getNetworkConfig();
-
   const { currentVersion: delegationGlobalParams } = useVersionByHeight(
     delegation.stakingTx.startHeight ?? 0,
   );

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

@@ -2,6 +2,7 @@ import Image from "next/image";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FiExternalLink } from "react-icons/fi";
 import { Tooltip } from "react-tooltip";
+import { twJoin } from "tailwind-merge";
 
 import blue from "@/app/assets/blue-check.svg";
 import { Hash } from "@/app/components/Hash/Hash";
@@ -43,11 +44,11 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
 
   return (
     <div
-      className={`
-        ${generalStyles}
-        ${selected ? "fp-selected" : ""}
-        ${finalityProviderHasData ? "" : "opacity-50 pointer-events-none"}
-        `}
+      className={twJoin(
+        generalStyles,
+        selected ? "fp-selected" : "",
+        finalityProviderHasData ? "" : "opacity-50 pointer-events-none",
+      )}
       onClick={handleClick}
     >
       <div className="grid grid-cols-stakingFinalityProvidersMobile grid-rows-2 items-center gap-2 lg:grid-cols-stakingFinalityProvidersDesktop lg:grid-rows-1">
@@ -72,7 +73,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           ) : (
             <div className="flex items-center gap-1 justify-start">
               <span
-                className="cursor-pointer text-xs text-error"
+                className="cursor-pointer text-xs text-error pointer-events-auto"
                 data-tooltip-id="tooltip-missing-fp"
                 data-tooltip-content="This finality provider did not provide any information."
                 data-tooltip-place="top"
@@ -84,9 +85,11 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
             </div>
           )}
         </div>
+
         <div className="flex justify-end lg:justify-start">
           <Hash value={pkHex} address small noFade />
         </div>
+
         <div className="flex items-center gap-1">
           <p className="hidden sm:flex lg:hidden">Delegation:</p>
           <p>
@@ -105,6 +108,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
             className="tooltip-wrap"
           />
         </div>
+
         <div className="flex items-center justify-end gap-1 lg:justify-start">
           <p className="hidden sm:flex lg:hidden">Commission:</p>
           {finalityProviderHasData

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

@@ -53,7 +53,7 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
       );
       return flattenedData;
     },
-    retry: (failureCount, error) => {
+    retry: (failureCount) => {
       return !isErrorOpen && failureCount <= 3;
     },
   });

src/app/hooks/services/useDelegationService.ts

@@ -0,0 +1,17 @@
+import { useDelegationState } from "@/app/state/DelegationState";
+
+export function useDelegationService() {
+  const {
+    delegations = [],
+    fetchMoreDelegations,
+    hasMoreDelegations,
+    isLoading,
+  } = useDelegationState();
+
+  return {
+    delegations,
+    fetchMoreDelegations,
+    hasMoreDelegations,
+    isLoading,
+  };
+}

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { initBTCCurve } from "@babylonlabs-io/btc-staking-ts";
 import { useEffect } from "react";
 
-import { Delegations } from "./components/Delegations/Delegations";
+import { DelegationTabs } from "./components/Delegations/DelegationTabs";
 import { FAQ } from "./components/FAQ/FAQ";
 import { Footer } from "./components/Footer/Footer";
 import { Header } from "./components/Header/Header";
@@ -26,7 +26,7 @@ const Home = () => {
           <Stats />
           <PersonalBalance />
           <Staking />
-          <Delegations />
+          <DelegationTabs />
         </div>
       </div>
       <FAQ />

src/components/common/AuthGuard/index.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren, ReactNode } from "react";
+
+import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider";
+
+interface AuthGuardProps {
+  fallback?: ReactNode;
+}
+
+export function AuthGuard({
+  children,
+  fallback,
+}: PropsWithChildren<AuthGuardProps>) {
+  const { isConnected } = useWalletConnection();
+
+  return isConnected ? children : fallback;
+}

src/components/common/GridTable/components/TCell.tsx

@@ -0,0 +1,26 @@
+import { MouseEventHandler, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface TCellProps {
+  className?: string;
+  align?: "left" | "right" | "center";
+  children?: ReactNode;
+  onClick?: MouseEventHandler<HTMLTableCellElement>;
+}
+
+const ALIGN = {
+  left: "justify-start",
+  right: "justify-end",
+  center: "justify-center",
+} as const;
+
+export function GridCell({ className, align, children, onClick }: TCellProps) {
+  return (
+    <div
+      className={twMerge("text-left", className, align && ALIGN[align])}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}

src/components/common/GridTable/components/THead.tsx

@@ -0,0 +1,48 @@
+import { useCallback, type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+import type { SortColumn } from "../types";
+
+interface THeadProps {
+  field: string;
+  title: ReactNode;
+  className?: string;
+  sortable?: boolean;
+  align?: "left" | "right" | "center";
+  sortColumn?: SortColumn;
+  onSortChange: (sortColumn: SortColumn) => void;
+}
+
+const SORT_DIRECTIONS = {
+  "": "ASC",
+  ASC: "DESC",
+  DESC: "",
+} as const;
+
+export function GridHead({
+  field,
+  title,
+  className,
+  align,
+  sortable = false,
+  sortColumn,
+  onSortChange,
+}: THeadProps) {
+  const direction = SORT_DIRECTIONS[sortColumn?.direction || ""];
+
+  const handleColumnClick = useCallback(() => {
+    if (sortable) {
+      onSortChange({ field, direction });
+    }
+  }, [field, direction, sortable, onSortChange]);
+
+  return (
+    <p
+      className={twMerge(className, sortable ? "cursor-pointer" : "")}
+      style={{ textAlign: align }}
+      onClick={handleColumnClick}
+    >
+      {title}
+    </p>
+  );
+}