feat(packages): support timelock renew for delegation (#254)

Author: jrwbabylonlab

.cursor/mcp.json

@@ -1,11 +1,3 @@
 {
-  "mcpServers": {
-    "nx-mcp": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "nx-mcp@latest"
-      ]
-    }
-  }
+  "mcpServers": {}
 }

.github/workflows/service-release.yml

@@ -72,6 +72,7 @@ jobs:
           NEXT_PUBLIC_FF_ENABLE_LEDGER: ${{ vars.NEXT_PUBLIC_FF_ENABLE_LEDGER }}
           NEXT_PUBLIC_FF_PHASE_3: ${{ vars.NEXT_PUBLIC_FF_PHASE_3 }}
           NEXT_PUBLIC_FF_CO_STAKING: ${{ vars.NEXT_PUBLIC_FF_CO_STAKING }}
+          NEXT_PUBLIC_FF_TIMELOCK_RENEWAL: ${{ vars.NEXT_PUBLIC_FF_TIMELOCK_RENEWAL }}
 
       - name: Generate sha256sum checksum
         run: |

.gitignore

@@ -47,4 +47,4 @@ Thumbs.db
 .vscode
 
 packages/*/.cursor
-.claude
+.claude

services/simple-staking/src/ui/common/components/Activity/components/StakeExpansionSection.tsx

@@ -18,6 +18,7 @@ import { useDelegationV2State } from "@/ui/common/state/DelegationV2State";
 import { useStakingExpansionState } from "@/ui/common/state/StakingExpansionState";
 import { StakingExpansionStep } from "@/ui/common/state/StakingExpansionTypes";
 import { DelegationWithFP } from "@/ui/common/types/delegationsV2";
+import FeatureFlagService from "@/ui/common/utils/FeatureFlagService";
 
 import { ExpansionButton } from "./ExpansionButton";
 
@@ -179,18 +180,20 @@ export function StakeExpansionSection({
         </AccordionSummary>
         <AccordionDetails className="space-y-3 px-4 pb-4">
           <div className="flex w-full flex-col gap-4">
-            <ExpansionButton
-              Icon={iconBSNFp}
-              text="Add BSNs and Finality Providers"
-              counter={`${currentBsnCount}/${maxFinalityProviders}`}
-              onClick={handleAddBsnFp}
-              disabled={
-                !canExpandDelegation ||
-                processing ||
-                isUTXOsLoading ||
-                isPendingExpansion
-              }
-            />
+            {FeatureFlagService.IsPhase3Enabled && (
+              <ExpansionButton
+                Icon={iconBSNFp}
+                text="Add BSNs and Finality Providers"
+                counter={`${currentBsnCount}/${maxFinalityProviders}`}
+                onClick={handleAddBsnFp}
+                disabled={
+                  !canExpandDelegation ||
+                  processing ||
+                  isUTXOsLoading ||
+                  isPendingExpansion
+                }
+              />
+            )}
             {hasVerifiedRenewal ? (
               <Hint
                 tooltip="A timelock renewal is already verified. Please check 'Verified Stake Expansion' to complete it."

services/simple-staking/src/ui/common/components/ActivityCard/ActivityCard.tsx

@@ -58,7 +58,8 @@ interface ActivityCardProps {
 
 export function ActivityCard({ data, className }: ActivityCardProps) {
   const shouldShowExpansion =
-    FeatureFlagService.IsPhase3Enabled && !data.hideExpansionCompletely;
+    FeatureFlagService.IsTimelockRenewalEnabled &&
+    !data.hideExpansionCompletely;
 
   return (
     <div

services/simple-staking/src/ui/common/components/ActivityCard/utils/activityCardTransformers.tsx

@@ -12,6 +12,7 @@ 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 FeatureFlagService from "@/ui/common/utils/FeatureFlagService";
 
 import { createBsnFpGroupedDetails } from "../../../utils/bsnFpGroupingUtils";
 import { ActivityCardData, ActivityCardDetailItem } from "../ActivityCard";
@@ -97,9 +98,12 @@ export function transformDelegationToActivityCard(
     // Check if expansion section should be shown
     // 1. Delegation is active and can expand from the api
     // 2. OR delegation is a broadcasted VERIFIED expansion (waiting for confirmations)
+    // Note: canExpand will be removed soon and not taking effect for non-phase-3
+    const canExpand = FeatureFlagService.IsTimelockRenewalEnabled
+      ? true
+      : delegation.canExpand;
     const isActiveExpandable =
-      delegation.state === DelegationV2StakingState.ACTIVE &&
-      delegation.canExpand;
+      delegation.state === DelegationV2StakingState.ACTIVE && canExpand;
 
     const showExpansionSection =
       isActiveExpandable || options.isBroadcastedExpansion;

services/simple-staking/src/ui/common/utils/FeatureFlagService.ts

@@ -56,4 +56,15 @@ export default {
   get IsCoStakingEnabled() {
     return process.env.NEXT_PUBLIC_FF_CO_STAKING === "true";
   },
+
+  /**
+   * Timelock Renewal feature flag
+   *
+   * Purpose: Enables timelock renewal functionality in the UI
+   * Why needed: To gradually roll out timelock renewal feature
+   * ETA for removal: TBD - Will be removed once timelock renewal is fully stable
+   */
+  get IsTimelockRenewalEnabled() {
+    return process.env.NEXT_PUBLIC_FF_TIMELOCK_RENEWAL === "true";
+  },
 };

services/simple-staking/tests/utils/featureFlag/FeatureFlagService.test.ts

@@ -61,6 +61,22 @@ describe("FeatureFlagService", () => {
     });
   });
 
+  describe("IsTimelockRenewalEnabled", () => {
+    it("should return false when NEXT_PUBLIC_FF_TIMELOCK_RENEWAL is not set", () => {
+      expect(FeatureFlagService.IsTimelockRenewalEnabled).toBe(false);
+    });
+    
+    it('should return false when NEXT_PUBLIC_FF_TIMELOCK_RENEWAL is set to "false"', () => {
+      process.env.NEXT_PUBLIC_FF_TIMELOCK_RENEWAL = "false";
+      expect(FeatureFlagService.IsTimelockRenewalEnabled).toBe(false);
+    });
+
+    it('should return true when NEXT_PUBLIC_FF_TIMELOCK_RENEWAL is set to "true"', () => {
+      process.env.NEXT_PUBLIC_FF_TIMELOCK_RENEWAL = "true";
+      expect(FeatureFlagService.IsTimelockRenewalEnabled).toBe(true);
+    });
+  });
+
   describe("Feature flag behavior", () => {
     it("should handle multiple feature flags independently", () => {
       process.env.NEXT_PUBLIC_FF_ENABLE_LEDGER = "false";