feat: expansion - verified UI (#180)

gbarkhatov · jeremy-babylonlabs · web-flow · commit 55caba84533a · 2025-09-11T14:12:49.000+03:00
* feat(packages): expansion verified ui * chore(packages): format simple-staking * fix(packages): fp not showing in phase 2 delegation (#178) --------- Co-authored-by: Jeremy <168515712+jeremy-babylonlabs@users.noreply.github.com>
diff --git a/services/simple-staking/project.json b/services/simple-staking/project.json
@@ -15,4 +15,4 @@
       }
     }
   }
-}
+}
diff --git a/services/simple-staking/src/ui/common/components/ActivityCard/ActivityCard.tsx b/services/simple-staking/src/ui/common/components/ActivityCard/ActivityCard.tsx
@@ -26,6 +26,7 @@ export interface ActivityCardActionButton {
   size?: "small" | "medium" | "large";
   className?: string;
   fullWidth?: boolean;
+  disabled?: boolean;
 }
 
 export interface ActivityCardData {
diff --git a/services/simple-staking/src/ui/common/components/ActivityCard/components/ActivityCardActionSection.tsx b/services/simple-staking/src/ui/common/components/ActivityCard/components/ActivityCardActionSection.tsx
@@ -18,6 +18,7 @@ export function ActivityCardActionSection({
           size={action.size || "small"}
           className={`sm:bbn-btn-medium ${action.fullWidth ? "w-full" : ""} ${action.className || ""}`}
           onClick={action.onClick}
+          disabled={action.disabled}
         >
           {action.label}
         </Button>
diff --git a/services/simple-staking/src/ui/common/components/ActivityCard/components/ActivityCardAmountSection.tsx b/services/simple-staking/src/ui/common/components/ActivityCard/components/ActivityCardAmountSection.tsx
@@ -39,6 +39,7 @@ export function ActivityCardAmountSection({
           size={primaryAction.size || "small"}
           className={`sm:bbn-btn-medium ${primaryAction.className || ""}`}
           onClick={primaryAction.onClick}
+          disabled={primaryAction.disabled}
         >
           {primaryAction.label}
         </Button>
diff --git a/services/simple-staking/src/ui/common/components/ActivityCard/utils/activityCardTransformers.tsx b/services/simple-staking/src/ui/common/components/ActivityCard/utils/activityCardTransformers.tsx
@@ -1,6 +1,7 @@
 import { Status } from "@/ui/common/components/Delegations/DelegationList/components/Status";
 import { Hash } from "@/ui/common/components/Hash/Hash";
 import { getNetworkConfigBTC } from "@/ui/common/config/network/btc";
+import { EXPANSION_OPERATIONS } from "@/ui/common/constants";
 import {
   DelegationV2,
   DelegationV2StakingState,
@@ -9,6 +10,7 @@ import {
 import { FinalityProvider } from "@/ui/common/types/finalityProviders";
 import { satoshiToBtc } from "@/ui/common/utils/btc";
 import { maxDecimals } from "@/ui/common/utils/maxDecimals";
+import { getExpansionType } from "@/ui/common/utils/stakingExpansionUtils";
 import { durationTillNow } from "@/ui/common/utils/time";
 
 import { createBsnFpGroupedDetails } from "../../../utils/bsnFpGroupingUtils";
@@ -128,3 +130,69 @@ export function transformDelegationToActivityCard(
     hideExpansionCompletely: options.hideExpansionCompletely,
   };
 }
+
+/**
+ * Transforms a delegation into ActivityCard data specifically for verified expansions
+ * Shows "Verified" status and includes expansion type information
+ */
+export function transformDelegationToVerifiedExpansionCard(
+  delegation: DelegationV2,
+  originalDelegation: DelegationV2,
+  finalityProviderMap: Map<string, FinalityProvider>,
+): ActivityCardData {
+  // Determine expansion type
+  const operationType = getExpansionType(delegation, originalDelegation);
+
+  const details: ActivityCardDetailItem[] = [
+    {
+      label: "Status",
+      value: "Verified",
+    },
+    {
+      label: "Inception",
+      value: delegation.bbnInceptionTime
+        ? durationTillNow(delegation.bbnInceptionTime, Date.now(), false)
+        : "N/A",
+    },
+    {
+      label: "Tx Hash",
+      value: (
+        <Hash
+          value={delegation.stakingTxHashHex}
+          address
+          small
+          noFade
+          size="caption"
+        />
+      ),
+    },
+    {
+      label: "Expansion Type",
+      value:
+        operationType === EXPANSION_OPERATIONS.RENEW_TIMELOCK
+          ? "Timelock Renewal"
+          : "Added BSN/FP",
+    },
+  ];
+
+  // Create grouped details for BSN/FP pairs with expansion support
+  const groupedDetails = createBsnFpGroupedDetails(
+    delegation.finalityProviderBtcPksHex,
+    finalityProviderMap,
+    {
+      originalFinalityProviderBtcPksHex:
+        originalDelegation.finalityProviderBtcPksHex,
+    },
+  );
+
+  const formattedAmount = `${maxDecimals(satoshiToBtc(delegation.stakingAmount), 8)} ${coinName}`;
+
+  return {
+    formattedAmount,
+    icon: icon,
+    iconAlt: "bitcoin",
+    details,
+    groupedDetails: groupedDetails.length > 0 ? groupedDetails : undefined,
+    hideExpansionCompletely: true, // Hide expansion section in verified modal
+  };
+}
diff --git a/services/simple-staking/src/ui/common/components/ExpansionHistory/ExpansionHistoryModal.tsx b/services/simple-staking/src/ui/common/components/ExpansionHistory/ExpansionHistoryModal.tsx
@@ -43,7 +43,7 @@ export function ExpansionHistoryModal({
         onClose={onClose}
         className="text-accent-primary"
       />
-      <DialogBody className="flex max-h-[70vh] flex-col gap-4 overflow-y-auto pb-4 pt-4 text-accent-primary">
+      <DialogBody className="no-scrollbar flex max-h-[70vh] flex-col gap-4 overflow-y-auto pb-4 pt-4 text-accent-primary">
         <div className="flex flex-col gap-2">
           {!hasExpansionHistory ? (
             <div className="py-8 text-center">
diff --git a/services/simple-staking/src/ui/common/components/StakingExpansion/VerifiedStakeExpansionModal.tsx b/services/simple-staking/src/ui/common/components/StakingExpansion/VerifiedStakeExpansionModal.tsx
@@ -6,49 +6,14 @@ import {
   Text,
 } from "@babylonlabs-io/core-ui";
 import { useMemo, useState } from "react";
-import { BiSolidBadgeCheck } from "react-icons/bi";
 
+import { ActivityCard } from "@/ui/common/components/ActivityCard/ActivityCard";
+import { transformDelegationToVerifiedExpansionCard } from "@/ui/common/components/ActivityCard/utils/activityCardTransformers";
 import { ResponsiveDialog } from "@/ui/common/components/Modals/ResponsiveDialog";
-import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
-import { getNetworkConfigBTC } from "@/ui/common/config/network/btc";
-import { EXPANSION_OPERATIONS } from "@/ui/common/constants";
 import { useVerifiedStakingExpansionService } from "@/ui/common/hooks/services/useVerifiedStakingExpansionService";
 import { useDelegationV2State } from "@/ui/common/state/DelegationV2State";
-import { useFinalityProviderBsnState } from "@/ui/common/state/FinalityProviderBsnState";
 import { useFinalityProviderState } from "@/ui/common/state/FinalityProviderState";
 import { DelegationV2 } from "@/ui/common/types/delegationsV2";
-import { satoshiToBtc } from "@/ui/common/utils/btc";
-import { maxDecimals } from "@/ui/common/utils/maxDecimals";
-import { trim } from "@/ui/common/utils/trim";
-
-const { chainId: BBN_CHAIN_ID } = getNetworkConfigBBN();
-const { coinSymbol } = getNetworkConfigBTC();
-
-// Helper function to determine expansion operation type
-const getExpansionType = (
-  expansion: DelegationV2,
-  original: DelegationV2 | undefined,
-) => {
-  if (!original) {
-    // If we can't find original, assume it's adding BSN/FP based on having previous tx
-    return EXPANSION_OPERATIONS.ADD_BSN_FP;
-  }
-
-  const newFPs = expansion.finalityProviderBtcPksHex.filter(
-    (fp) => !original.finalityProviderBtcPksHex.includes(fp),
-  );
-  const fpsChanged = newFPs.length > 0;
-
-  if (fpsChanged) {
-    return EXPANSION_OPERATIONS.ADD_BSN_FP; // Adding BSN/FP (always includes timelock renewal)
-  } else {
-    return EXPANSION_OPERATIONS.RENEW_TIMELOCK; // Pure timelock renewal only
-  }
-
-  // TODO: Future expansion types to consider:
-  // - INCREASE_AMOUNT (when staking amount > original amount)
-  // - Mixed operations may be possible in future versions
-};
 
 interface VerifiedStakeExpansionModalProps {
   open: boolean;
@@ -68,173 +33,52 @@ function VerifiedExpansionItem({
   processing,
 }: VerifiedExpansionItemProps) {
   const { findDelegationByTxHash } = useDelegationV2State();
-  const { getRegisteredFinalityProvider } = useFinalityProviderState();
-  const { bsnList } = useFinalityProviderBsnState();
-
-  // Parse BSN and FP information with proper expansion type detection
-  const { bsnFpPairs, newCount, operationType, originalDelegation } =
-    useMemo(() => {
-      const pairs: Array<{ bsnName: string; fpName: string; isNew: boolean }> =
-        [];
-
-      // Find the original delegation if this is an expansion
-      const original = delegation.previousStakingTxHashHex
-        ? findDelegationByTxHash(delegation.previousStakingTxHashHex)
-        : undefined;
-
-      // Determine the operation type
-      const opType = getExpansionType(delegation, original);
-
-      // Create BSN/FP pairs with correct "new" detection
-      delegation.finalityProviderBtcPksHex.forEach((fpPkHex) => {
-        const provider = getRegisteredFinalityProvider(fpPkHex);
-        const bsnId = provider?.bsnId || BBN_CHAIN_ID;
-        const bsn = bsnList.find((b) => b.id === bsnId);
-
-        // Determine if this FP is new by checking if it exists in original delegation
-        const isNewFP = original
-          ? !original.finalityProviderBtcPksHex.includes(fpPkHex)
-          : false; // If no original delegation found, don't mark as new
-
-        pairs.push({
-          bsnName: bsn?.name || "Babylon Genesis",
-          fpName: provider?.description?.moniker || trim(fpPkHex, 8),
-          isNew: isNewFP,
-        });
-      });
+  const { finalityProviderMap } = useFinalityProviderState();
+
+  // Transform delegation to activity card data
+  const activityCardData = useMemo(() => {
+    // Find the original delegation - this should always exist for verified expansions
+    const originalDelegation = delegation.previousStakingTxHashHex
+      ? findDelegationByTxHash(delegation.previousStakingTxHashHex)
+      : undefined;
+
+    if (!originalDelegation) {
+      console.error(
+        "Original delegation not found for verified expansion:",
+        delegation.stakingTxHashHex,
+        "previousTxHash:",
+        delegation.previousStakingTxHashHex,
+      );
+      // This should not happen for verified expansions, but return a fallback
+      throw new Error(
+        `Invalid verified expansion: original delegation not found for ${delegation.stakingTxHashHex}`,
+      );
+    }
 
-      const newPairsCount = pairs.filter((p) => p.isNew).length;
-      return {
-        bsnFpPairs: pairs,
-        newCount: newPairsCount,
-        operationType: opType,
-        originalDelegation: original,
-      };
-    }, [
+    return transformDelegationToVerifiedExpansionCard(
       delegation,
-      findDelegationByTxHash,
-      getRegisteredFinalityProvider,
-      bsnList,
-    ]);
-
-  const stakingAmount = maxDecimals(satoshiToBtc(delegation.stakingAmount), 8);
+      originalDelegation,
+      finalityProviderMap,
+    );
+  }, [delegation, findDelegationByTxHash, finalityProviderMap]);
+
+  // Create the activity card data with primary action
+  const activityCardDataWithAction = {
+    ...activityCardData,
+    primaryAction: {
+      label: "Expand",
+      onClick: onExpand,
+      variant: "contained" as const,
+      size: "small" as const,
+      disabled: processing,
+    },
+  };
 
   return (
-    <div className="space-y-3 rounded-lg border border-secondary-strokeLight p-4">
-      <div className="flex items-start justify-between">
-        <div className="flex-1 space-y-2">
-          <div className="flex items-center gap-2">
-            <BiSolidBadgeCheck className="text-xl text-primary-light" />
-            <Text variant="body1" className="font-medium text-accent-primary">
-              {operationType === EXPANSION_OPERATIONS.RENEW_TIMELOCK
-                ? "Timelock Renewal"
-                : operationType === EXPANSION_OPERATIONS.ADD_BSN_FP
-                  ? "BSN/FP Expansion"
-                  : "Verified Expansion"}
-            </Text>
-          </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2">
-              <Text variant="body2" className="text-accent-secondary">
-                Amount:
-              </Text>
-              <Text variant="body2" className="text-accent-primary">
-                {stakingAmount} {coinSymbol}
-              </Text>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <Text variant="body2" className="text-accent-secondary">
-                Transaction:
-              </Text>
-              <Text variant="body2" className="font-mono text-accent-primary">
-                {trim(delegation.stakingTxHashHex, 10)}
-              </Text>
-            </div>
-
-            {/* Show different information based on operation type */}
-            {operationType === EXPANSION_OPERATIONS.RENEW_TIMELOCK &&
-              originalDelegation && (
-                <div className="flex items-center gap-2">
-                  <Text variant="body2" className="text-accent-secondary">
-                    Timelock:
-                  </Text>
-                  <Text variant="body2" className="text-accent-primary">
-                    {originalDelegation.stakingTimelock.toLocaleString()} blocks
-                    → {delegation.stakingTimelock.toLocaleString()} blocks
-                  </Text>
-                </div>
-              )}
-
-            {operationType === EXPANSION_OPERATIONS.ADD_BSN_FP && (
-              <>
-                {newCount > 0 && (
-                  <div className="flex items-center gap-2">
-                    <Text variant="body2" className="text-accent-secondary">
-                      New BSN/FP pairs:
-                    </Text>
-                    <Text variant="body2" className="text-accent-primary">
-                      {newCount}
-                    </Text>
-                  </div>
-                )}
-                {originalDelegation &&
-                  originalDelegation.stakingTimelock !==
-                    delegation.stakingTimelock && (
-                    <div className="flex items-center gap-2">
-                      <Text variant="body2" className="text-accent-secondary">
-                        Timelock renewed to:
-                      </Text>
-                      <Text variant="body2" className="text-accent-primary">
-                        {delegation.stakingTimelock.toLocaleString()} blocks
-                      </Text>
-                    </div>
-                  )}
-              </>
-            )}
-          </div>
-
-          {/* Show BSN/FP pairs - different display for different operation types */}
-          <div className="mt-3 space-y-1">
-            <Text variant="body2" className="mb-1 text-accent-secondary">
-              BSN / Finality Provider pairs:
-            </Text>
-            <div className="space-y-1">
-              {bsnFpPairs.map((pair, index) => (
-                <div key={index} className="flex items-center gap-2 text-sm">
-                  <Text
-                    variant="body2"
-                    className={
-                      pair.isNew ? "text-primary-light" : "text-accent-primary"
-                    }
-                  >
-                    {pair.bsnName} / {pair.fpName}
-                  </Text>
-                  {/* Only show NEW labels for ADD_BSN_FP operations and actually new pairs */}
-                  {operationType === EXPANSION_OPERATIONS.ADD_BSN_FP &&
-                    pair.isNew && (
-                      <span className="rounded bg-primary-light/10 px-2 py-0.5 text-xs text-primary-light">
-                        NEW
-                      </span>
-                    )}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <Button
-          variant="contained"
-          size="small"
-          onClick={onExpand}
-          disabled={processing}
-          className="ml-4"
-        >
-          Expand
-        </Button>
-      </div>
-    </div>
+    <ActivityCard
+      data={activityCardDataWithAction}
+      className="border border-secondary-strokeLight"
+    />
   );
 }
 
diff --git a/services/simple-staking/src/ui/common/utils/bsnFpGroupingUtils.tsx b/services/simple-staking/src/ui/common/utils/bsnFpGroupingUtils.tsx
diff --git a/services/simple-staking/src/ui/common/utils/stakingExpansionUtils.ts b/services/simple-staking/src/ui/common/utils/stakingExpansionUtils.ts
diff --git a/services/simple-staking/tailwind.config.ts b/services/simple-staking/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -15,4 +15,4 @@`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`	`}`
`18`		`-}`
	`18`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ export interface ActivityCardActionButton {`
`26`	`26`	`size?: "small" \| "medium" \| "large";`
`27`	`27`	`className?: string;`
`28`	`28`	`fullWidth?: boolean;`
	`29`	`+ disabled?: boolean;`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`export interface ActivityCardData {`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ export function ActivityCardActionSection({`
`18`	`18`	`size={action.size \|\| "small"}`
`19`	`19`	className={`sm:bbn-btn-medium ${action.fullWidth ? "w-full" : ""} ${action.className \|\| ""}`}
`20`	`20`	`onClick={action.onClick}`
	`21`	`+ disabled={action.disabled}`
`21`	`22`	`>`
`22`	`23`	`{action.label}`
`23`	`24`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@ export function ActivityCardAmountSection({`
`39`	`39`	`size={primaryAction.size \|\| "small"}`
`40`	`40`	className={`sm:bbn-btn-medium ${primaryAction.className \|\| ""}`}
`41`	`41`	`onClick={primaryAction.onClick}`
	`42`	`+ disabled={primaryAction.disabled}`
`42`	`43`	`>`
`43`	`44`	`{primaryAction.label}`
`44`	`45`	`</Button>`