feat: add eligibility for transition in delegations and update UI acc…

src/app/api/getDelegations.ts

@@ -25,6 +25,7 @@ interface DelegationAPI {
   unbonding_tx?: UnbondingTxAPI;
   is_overflow: boolean;
   transitioned: boolean;
+  is_eligible_for_transition: boolean;
 }
 
 interface StakingTxAPI {
@@ -53,9 +54,8 @@ export const getDelegations = async (
 
   const params = {
     pagination_key: encode(key),
-    // "pagination_reverse": reverse,
-    // "pagination_limit": limit,
     staker_btc_pk: encode(publicKeyNoCoord),
+    state: ["active", "unbonded"],
   };
 
   const response = await apiWrapper(
@@ -88,7 +88,7 @@ export const getDelegations = async (
             outputIndex: apiDelegation.unbonding_tx.output_index,
           }
         : undefined,
-      transitioned: apiDelegation.transitioned,
+      isEligibleForTransition: apiDelegation.is_eligible_for_transition,
     }),
   );
 

src/app/components/Delegations/Delegation.tsx

@@ -82,22 +82,34 @@ export const Delegation: React.FC<DelegationProps> = ({
   };
 
   const generateActionButton = () => {
-    // This function generates the transition or withdraw button
-    // based on the state of the delegation
-    // It also disables the button if the delegation
-    // is in an intermediate state (local storage)
-    if (state === DelegationState.ACTIVE) {
+    if (
+      state === DelegationState.ACTIVE ||
+      delegation.isEligibleForTransition
+    ) {
       return (
-        <div className="flex justify-end lg:justify-start">
+        <div
+          className="flex justify-end lg:justify-start"
+          data-tooltip-id="tooltip-transition"
+          data-tooltip-content={
+            state === DelegationState.ACTIVE &&
+            !delegation.isEligibleForTransition
+              ? "Staking transition is not available yet, come back later"
+              : ""
+          }
+        >
           <button
             className="btn btn-outline btn-xs inline-flex text-sm font-normal text-primary-dark"
             onClick={onTransition}
             disabled={
-              intermediateState === DelegationState.INTERMEDIATE_TRANSITIONING
+              intermediateState ===
+                DelegationState.INTERMEDIATE_TRANSITIONING ||
+              (state === DelegationState.ACTIVE &&
+                !delegation.isEligibleForTransition)
             }
           >
             Transition
           </button>
+          <Tooltip id="tooltip-transition" className="tooltip-wrap" />
         </div>
       );
     } else if (state === DelegationState.UNBONDED) {
@@ -143,6 +155,10 @@ export const Delegation: React.FC<DelegationProps> = ({
 
   const { coinName, mempoolApiUrl } = getNetworkConfig();
 
+  const renderActionRequired = () => {
+    return <p className="text-error-main text-sm">Action Required</p>;
+  };
+
   return (
     <div
       className={`relative rounded bg-secondary-contrast odd:bg-[#F9F9F9] p-4 text-base text-primary-dark`}
@@ -180,21 +196,25 @@ export const Delegation: React.FC<DelegationProps> = ({
         add its size 12px and gap 4px, 16/2 = 8px
         */}
         <div className="relative flex justify-start lg:justify-start order-4">
-          <div className="flex items-center justify-start gap-1">
-            <p>{renderState()}</p>
-            <span
-              className="cursor-pointer text-xs"
-              data-tooltip-id={`tooltip-${stakingTxHashHex}`}
-              data-tooltip-content={renderStateTooltip()}
-              data-tooltip-place="top"
-            >
-              <AiOutlineInfoCircle />
-            </span>
-            <Tooltip
-              id={`tooltip-${stakingTxHashHex}`}
-              className="tooltip-wrap"
-            />
-          </div>
+          {delegation.isEligibleForTransition ? (
+            renderActionRequired()
+          ) : (
+            <div className="flex items-center justify-start gap-1">
+              <p>{renderState()}</p>
+              <span
+                className="cursor-pointer text-xs"
+                data-tooltip-id={`tooltip-${stakingTxHashHex}`}
+                data-tooltip-content={renderStateTooltip()}
+                data-tooltip-place="top"
+              >
+                <AiOutlineInfoCircle />
+              </span>
+              <Tooltip
+                id={`tooltip-${stakingTxHashHex}`}
+                className="tooltip-wrap"
+              />
+            </div>
+          )}
         </div>
         <DelegationPoints
           stakingTxHashHex={stakingTxHashHex}

src/app/components/Delegations/Delegations.tsx

@@ -43,13 +43,16 @@ export const Delegations = () => {
       isWalletConnected={connected}
       address={address}
     >
-      <DelegationsContent
-        delegationsAPI={delegationsAPI.delegations}
-        address={address}
-        btcWalletNetwork={network}
-        publicKeyNoCoord={publicKeyNoCoord}
-        isWalletConnected={connected}
-      />
+      {/* If there are no delegations, don't render the content */}
+      {delegationsAPI.delegations.length > 0 && (
+        <DelegationsContent
+          delegationsAPI={delegationsAPI.delegations}
+          address={address}
+          btcWalletNetwork={network}
+          publicKeyNoCoord={publicKeyNoCoord}
+          isWalletConnected={connected}
+        />
+      )}
     </DelegationsPointsProvider>
   );
 };

src/app/components/Staking/Staking.tsx

@@ -76,6 +76,7 @@ export const Staking = () => {
   const { createDelegationEoi, estimateStakingFee } = useTransactionService();
   const { networkInfo } = useAppState();
   const latestParam = networkInfo?.params.bbnStakingParams?.latestParam;
+  const stakingStatus = networkInfo?.stakingStatus;
 
   const [pendingVerificationOpen, setPendingVerificationOpen] = useState(false);
   const [stakingTxHashHex, setStakingTxHashHex] = useState<
@@ -390,7 +391,12 @@ export const Staking = () => {
   const renderStakingForm = () => {
     // States of the staking form:
     // Health check failed
-    if (!isApiNormal || isGeoBlocked || hasError) {
+    if (
+      !isApiNormal ||
+      isGeoBlocked ||
+      hasError ||
+      !stakingStatus?.isStakingOpen
+    ) {
       return (
         <Message
           title="Staking is not available"

src/app/types/delegations.ts

@@ -7,7 +7,7 @@ export interface Delegation {
   stakingTx: StakingTx;
   unbondingTx: UnbondingTx | undefined;
   isOverflow: boolean;
-  transitioned: boolean;
+  isEligibleForTransition: boolean;
 }
 
 export interface StakingTx {

src/utils/getState.ts

@@ -36,7 +36,7 @@ export const getState = (state: string) => {
 // Create state tooltips for the additional information
 export const getStateTooltip = (state: string) => {
   switch (state) {
-    case DelegationState.ACTIVE:
+    case DelegationState.ACTIVE: // active state is shwon
       return "Stake is active";
     case DelegationState.UNBONDED:
       return "Stake has been unbonded";

src/utils/local_storage/toLocalStorageIntermediateDelegation.ts

@@ -22,6 +22,6 @@ export const toLocalStorageIntermediateDelegation = (
     timelock,
   },
   isOverflow: false,
+  isEligibleForTransition: false,
   unbondingTx: undefined,
-  transitioned: false,
 });

tests/helper/generateMockDelegation.ts

@@ -24,7 +24,7 @@ export function generateMockDelegation(
       timelock: 3600,
     },
     isOverflow: false,
+    isEligibleForTransition: false,
     unbondingTx: undefined,
-    transitioned: false,
   };
 }

tests/utils/local_storage/toLocalStorageIntermediateDelegation.test.ts

@@ -36,7 +36,7 @@ describe("utils/local_storage/toLocalStorageIntermediateDelegation", () => {
       },
       isOverflow: false,
       unbondingTx: undefined,
-      transitioned: false,
+      isEligibleForTransition: false,
     });
 
     // Validate startTimestamp is a valid ISO date string
@@ -79,7 +79,7 @@ describe("utils/local_storage/toLocalStorageIntermediateDelegation", () => {
       },
       isOverflow: false,
       unbondingTx: undefined,
-      transitioned: false,
+      isEligibleForTransition: false,
     });
 
     // Validate startTimestamp is a valid ISO date string