feat: expansion activity card (#1545)

Author: gbarkhatov

src/ui/baby/widgets/StakingModal/index.tsx

@@ -3,6 +3,7 @@ import { PreviewModal, useFormContext } from "@babylonlabs-io/core-ui";
 import babylon from "@/infrastructure/babylon";
 import { ValidatorAvatar } from "@/ui/baby/components/ValidatorAvatar";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
+import { DEFAULT_CONFIRMATION_DEPTH } from "@/ui/common/constants";
 import { useNetworkInfo } from "@/ui/common/hooks/client/api/useNetworkInfo";
 import { maxDecimals } from "@/ui/common/utils/maxDecimals";
 
@@ -17,7 +18,7 @@ export function StakingModal() {
   const { data: networkInfo } = useNetworkInfo();
   const confirmationDepth =
     networkInfo?.params.btcEpochCheckParams?.latestParam
-      ?.btcConfirmationDepth || 30;
+      ?.btcConfirmationDepth || DEFAULT_CONFIRMATION_DEPTH;
   const processingHours = Math.ceil(confirmationDepth / 6);
   const processingHourLabel = processingHours === 1 ? "hour" : "hours";
   const warnings = [

src/ui/common/components/Activity/components/ExpansionPendingBanner.tsx

@@ -0,0 +1,33 @@
+import { Text } from "@babylonlabs-io/core-ui";
+
+import { DEFAULT_CONFIRMATION_DEPTH } from "@/ui/common/constants";
+import { useNetworkInfo } from "@/ui/common/hooks/client/api/useNetworkInfo";
+
+interface ExpansionPendingBannerProps {
+  className?: string;
+}
+
+export function ExpansionPendingBanner({
+  className = "",
+}: ExpansionPendingBannerProps) {
+  const { data: networkInfo } = useNetworkInfo();
+  const confirmationDepth =
+    networkInfo?.params.btcEpochCheckParams?.latestParam
+      ?.btcConfirmationDepth || DEFAULT_CONFIRMATION_DEPTH;
+
+  return (
+    <div
+      className={`mb-4 p-4 bg-warning-surface border border-warning-strokeLight rounded ${className}`}
+    >
+      <Text variant="body1" className="text-accent-primary font-medium mb-2">
+        Stake Expansion Pending
+      </Text>
+      <Text variant="body2" className="text-accent-secondary">
+        Your stake expansion transaction has been forwarded to Bitcoin. It will
+        be activated once it receives {confirmationDepth} Bitcoin block
+        confirmations. Your original stake is still Active and you can find it
+        in the "Expansion History" tab.
+      </Text>
+    </div>
+  );
+}

src/ui/common/components/Activity/components/StakeExpansionSection.tsx

@@ -22,10 +22,12 @@ import { ExpansionButton } from "./ExpansionButton";
 
 interface StakeExpansionSectionProps {
   delegation: DelegationWithFP;
+  isPendingExpansion?: boolean;
 }
 
 export function StakeExpansionSection({
   delegation,
+  isPendingExpansion = false,
 }: StakeExpansionSectionProps) {
   const {
     goToStep,
@@ -158,13 +160,18 @@ export function StakeExpansionSection({
               text="Add BSNs and Finality Providers"
               counter={`${currentBsnCount}/${maxFinalityProviders}`}
               onClick={handleAddBsnFp}
-              disabled={!canExpandDelegation || processing || isUTXOsLoading}
+              disabled={
+                !canExpandDelegation ||
+                processing ||
+                isUTXOsLoading ||
+                isPendingExpansion
+              }
             />
             <ExpansionButton
               Icon={iconRenew}
               text="Renew Staking Term"
               onClick={handleRenewStakingTerm}
-              disabled={processing || isUTXOsLoading}
+              disabled={processing || isUTXOsLoading || isPendingExpansion}
             />
             <ExpansionButton
               Icon={iconHistory}

src/ui/common/components/ActivityCard/ActivityCard.tsx

@@ -1,3 +1,4 @@
+import { ExpansionPendingBanner } from "@/ui/common/components/Activity/components/ExpansionPendingBanner";
 import { StakeExpansionSection } from "@/ui/common/components/Activity/components/StakeExpansionSection";
 import { DelegationWithFP } from "@/ui/common/types/delegationsV2";
 import FeatureFlagService from "@/ui/common/utils/FeatureFlagService";
@@ -44,6 +45,8 @@ export interface ActivityCardData {
   primaryAction?: ActivityCardActionButton;
   secondaryActions?: ActivityCardActionButton[];
   expansionSection?: DelegationWithFP;
+  isPendingExpansion?: boolean;
+  showExpansionPendingBanner?: boolean;
   hideExpansionCompletely?: boolean;
 }
 
@@ -66,18 +69,19 @@ export function ActivityCard({ data, className }: ActivityCardProps) {
         iconAlt={data.iconAlt}
         primaryAction={data.primaryAction}
       />
-
       <ActivityCardDetailsSection
         details={data.details}
         optionalDetails={data.optionalDetails}
         listItems={data.listItems}
         groupedDetails={data.groupedDetails}
       />
-
+      {data.showExpansionPendingBanner && <ExpansionPendingBanner />}
       {shouldShowExpansion && data.expansionSection && (
-        <StakeExpansionSection delegation={data.expansionSection} />
+        <StakeExpansionSection
+          delegation={data.expansionSection}
+          isPendingExpansion={data.isPendingExpansion}
+        />
       )}
-
       {data.secondaryActions && data.secondaryActions.length > 0 && (
         <ActivityCardActionSection actions={data.secondaryActions} />
       )}

src/ui/common/components/ActivityCard/utils/actionButtonUtils.ts

@@ -12,6 +12,7 @@ export const getActionButton = (
   delegation: DelegationWithFP,
   onAction: (action: ActionType, delegation: DelegationWithFP) => void,
   isStakingManagerReady: boolean,
+  isBroadcastedExpansion?: boolean,
 ): ActivityCardActionButton | undefined => {
   const { state, fp } = delegation;
 
@@ -125,6 +126,16 @@ export const getActionButton = (
   const actionConfig = actionMap[fp?.state]?.[state];
   if (!actionConfig) return undefined;
 
+  // Don't show "Stake" button for broadcasted VERIFIED expansions
+  // since they're already broadcasted to Bitcoin
+  if (
+    isBroadcastedExpansion &&
+    actionConfig.action === ACTIONS.STAKE &&
+    state === DelegationV2StakingState.VERIFIED
+  ) {
+    return undefined;
+  }
+
   const isUnbondDisabled =
     state === DelegationV2StakingState.ACTIVE && !isStakingManagerReady;
 

src/ui/common/components/ActivityCard/utils/activityCardTransformers.tsx

@@ -19,6 +19,7 @@ const { coinName, icon } = getNetworkConfigBTC();
 export interface ActivityCardTransformOptions {
   showExpansionSection?: boolean;
   hideExpansionCompletely?: boolean;
+  isBroadcastedExpansion?: boolean;
 }
 
 /**
@@ -32,7 +33,7 @@ export function transformDelegationToActivityCard(
   indexLabel?: string,
 ): ActivityCardData {
   // Create a delegation with FP for the Status component if not already present
-  const delegationWithFP =
+  let delegationWithFP =
     "fp" in delegation
       ? delegation
       : ({
@@ -47,6 +48,14 @@ export function transformDelegationToActivityCard(
               : undefined,
         } as DelegationWithFP);
 
+  // Transform the state for broadcasted expansions to show correct status
+  if (options.isBroadcastedExpansion) {
+    delegationWithFP = {
+      ...delegationWithFP,
+      state: DelegationV2StakingState.INTERMEDIATE_PENDING_BTC_CONFIRMATION,
+    };
+  }
+
   const details: ActivityCardDetailItem[] = [
     {
       label: "Status",
@@ -80,29 +89,42 @@ export function transformDelegationToActivityCard(
 
   // Handle expansion section if options specify it
   let expansionSection: DelegationWithFP | undefined;
+  let isPendingExpansion = false;
+
   if (options.showExpansionSection) {
     // Check if expansion section should be shown
-    // 1. Delegation is active
-    // 2. Delegation can expand from the api
-    const showExpansionSection =
+    // 1. Delegation is active and can expand from the api
+    // 2. OR delegation is a broadcasted VERIFIED expansion (waiting for confirmations)
+    const isActiveExpandable =
       delegation.state === DelegationV2StakingState.ACTIVE &&
       delegation.canExpand;
 
-    expansionSection = showExpansionSection ? delegationWithFP : undefined;
+    const showExpansionSection =
+      isActiveExpandable || options.isBroadcastedExpansion;
+
+    if (showExpansionSection) {
+      expansionSection = delegationWithFP;
+      isPendingExpansion = !!options.isBroadcastedExpansion;
+    }
   }
 
   const baseAmount = `${maxDecimals(satoshiToBtc(delegation.stakingAmount), 8)} ${coinName}`;
   const formattedAmount = indexLabel
     ? `${indexLabel} - ${baseAmount}`
     : baseAmount;
 
+  // Determine if we should show the expansion pending banner
+  const showExpansionPendingBanner = !!options.isBroadcastedExpansion;
+
   return {
     formattedAmount,
     icon: icon,
     iconAlt: "bitcoin",
     details,
     groupedDetails: groupedDetails.length > 0 ? groupedDetails : undefined,
     expansionSection,
+    isPendingExpansion,
+    showExpansionPendingBanner,
     hideExpansionCompletely: options.hideExpansionCompletely,
   };
 }

src/ui/common/components/Delegations/DelegationList/components/Status.tsx

@@ -31,6 +31,29 @@ type StatusAdapter = (props: StatusParams) => {
 
 const { coinName } = getNetworkConfigBTC();
 
+/**
+ * Helper function to get the status info for INTERMEDIATE_PENDING_BTC_CONFIRMATION state
+ * Handles both regular staking and expansion scenarios
+ */
+const getIntermediatePendingBtcStatus = ({
+  delegation,
+  networkInfo,
+}: StatusParams) => {
+  const confirmationDepth =
+    networkInfo?.params?.btcEpochCheckParams.latestParam.btcConfirmationDepth ??
+    0;
+  const isExpansion = !!delegation.previousStakingTxHashHex;
+
+  return {
+    label: isExpansion
+      ? `Expansion Pending ${coinName} Confirmation`
+      : `Pending ${coinName} Confirmation`,
+    tooltip: isExpansion
+      ? `Stake expansion is pending ${confirmationDepth} ${coinName} confirmations`
+      : `Stake is pending ${confirmationDepth} ${coinName} confirmations`,
+  };
+};
+
 const STATUSES: Record<string, StatusAdapter> = {
   [State.PENDING]: () => ({
     label: "Pending",
@@ -113,10 +136,8 @@ const STATUSES: Record<string, StatusAdapter> = {
     label: "Pending",
     tooltip: "Stake is pending verification",
   }),
-  [State.INTERMEDIATE_PENDING_BTC_CONFIRMATION]: ({ networkInfo }) => ({
-    label: `Pending ${coinName} Confirmation`,
-    tooltip: `Stake is pending ${networkInfo?.params?.btcEpochCheckParams.latestParam.btcConfirmationDepth ?? 0} ${coinName} confirmations`,
-  }),
+  [State.INTERMEDIATE_PENDING_BTC_CONFIRMATION]:
+    getIntermediatePendingBtcStatus,
   [State.INTERMEDIATE_UNBONDING_SUBMITTED]: () => ({
     label: "Unbonding",
     tooltip: "Stake unbonding is in progress.",

src/ui/common/components/Modals/PreviewModal.tsx

@@ -12,6 +12,7 @@ import { Fragment } from "react";
 
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 import { getNetworkConfigBTC } from "@/ui/common/config/network/btc";
+import { DEFAULT_CONFIRMATION_DEPTH } from "@/ui/common/constants";
 import { useNetworkInfo } from "@/ui/common/hooks/client/api/useNetworkInfo";
 import { usePrice } from "@/ui/common/hooks/client/api/usePrices";
 import { useIsMobileView } from "@/ui/common/hooks/useBreakpoint";
@@ -57,7 +58,7 @@ export const PreviewModal = ({
   const { data: networkInfo } = useNetworkInfo();
   const confirmationDepth =
     networkInfo?.params.btcEpochCheckParams?.latestParam
-      ?.btcConfirmationDepth || 30;
+      ?.btcConfirmationDepth || DEFAULT_CONFIRMATION_DEPTH;
   const unbondingTime =
     blocksToDisplayTime(
       networkInfo?.params.bbnStakingParams?.latestParam?.unbondingTime,

src/ui/common/components/Multistaking/MultistakingModal/MultistakingModal.tsx

@@ -14,6 +14,7 @@ import { VerificationModal } from "@/ui/common/components/Modals/VerificationMod
 import { FinalityProviderLogo } from "@/ui/common/components/Staking/FinalityProviders/FinalityProviderLogo";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 import { getNetworkConfigBTC } from "@/ui/common/config/network/btc";
+import { DEFAULT_CONFIRMATION_DEPTH } from "@/ui/common/constants";
 import { useNetworkInfo } from "@/ui/common/hooks/client/api/useNetworkInfo";
 import { usePrice } from "@/ui/common/hooks/client/api/usePrices";
 import { useStakingService } from "@/ui/common/hooks/services/useStakingService";
@@ -68,7 +69,7 @@ export function MultistakingModal() {
   const btcInUsd = usePrice(coinSymbol);
   const confirmationDepth =
     networkInfo?.params.btcEpochCheckParams?.latestParam
-      ?.btcConfirmationDepth || 30;
+      ?.btcConfirmationDepth || DEFAULT_CONFIRMATION_DEPTH;
 
   const currentFinalityProviders = useWatch<
     { finalityProviders: Record<string, string> | string[] | undefined },

src/ui/common/components/StakingExpansion/StakingExpansionModalSystem.tsx

@@ -9,7 +9,11 @@ import { VerificationModal } from "@/ui/common/components/Modals/VerificationMod
 import { FinalityProviderLogo } from "@/ui/common/components/Staking/FinalityProviders/FinalityProviderLogo";
 import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 import { getNetworkConfigBTC } from "@/ui/common/config/network/btc";
-import { BaseStakingStep, EOIStep } from "@/ui/common/constants";
+import {
+  BaseStakingStep,
+  DEFAULT_CONFIRMATION_DEPTH,
+  EOIStep,
+} from "@/ui/common/constants";
 import { useNetworkInfo } from "@/ui/common/hooks/client/api/useNetworkInfo";
 import { usePrice } from "@/ui/common/hooks/client/api/usePrices";
 import { useStakingExpansionService } from "@/ui/common/hooks/services/useStakingExpansionService";
@@ -263,7 +267,7 @@ function StakingExpansionModalSystemInner() {
               }}
               warnings={[
                 `1. No third party possesses your staked ${coinSymbol}. You are the only one who can unbond and withdraw your stake.`,
-                `2. Your stake will first be sent to Babylon Genesis for verification (~20 seconds), then you will be prompted to submit it to the Bitcoin ledger. It will be marked as 'Pending' until it receives ${networkInfoData?.params?.btcEpochCheckParams?.latestParam?.btcConfirmationDepth ?? 30} Bitcoin confirmations.`,
+                `2. Your stake will first be sent to Babylon Genesis for verification (~20 seconds), then you will be prompted to submit it to the Bitcoin ledger. It will be marked as 'Pending' until it receives ${networkInfoData?.params?.btcEpochCheckParams?.latestParam?.btcConfirmationDepth ?? DEFAULT_CONFIRMATION_DEPTH} Bitcoin confirmations.`,
                 "3. Please note: submitting this transaction will reset your stake's timelock.",
               ]}
             />