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 {
@@ -56,6 +57,7 @@ export const getDelegations = async (
     // "pagination_reverse": reverse,
     // "pagination_limit": limit,
     staker_btc_pk: encode(publicKeyNoCoord),
+    state: ["active", "unbonded"],
   };
 
   const response = await apiWrapper(
@@ -89,6 +91,7 @@ export const getDelegations = async (
           }
         : undefined,
       transitioned: apiDelegation.transitioned,
+      isEligibleForTransition: apiDelegation.is_eligible_for_transition,
     }),
   );
 

src/app/components/Delegations/Delegation.tsx

@@ -82,11 +82,21 @@ 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 (delegation.isEligibleForTransition) {
+      return (
+        <div className="flex justify-end lg:justify-start">
+          <button
+            className="btn btn-outline btn-xs inline-flex text-sm font-normal text-primary-dark"
+            onClick={onTransition}
+            disabled={
+              intermediateState === DelegationState.INTERMEDIATE_TRANSITIONING
+            }
+          >
+            Transition
+          </button>
+        </div>
+      );
+    } else if (state === DelegationState.ACTIVE) {
       return (
         <div className="flex justify-end lg:justify-start">
           <button
@@ -143,6 +153,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 +194,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

@@ -8,6 +8,7 @@ export interface Delegation {
   unbondingTx: UnbondingTx | undefined;
   isOverflow: boolean;
   transitioned: boolean;
+  isEligibleForTransition: boolean;
 }
 
 export interface StakingTx {
@@ -30,6 +31,7 @@ export const UNBONDED = "unbonded";
 export const WITHDRAWN = "withdrawn";
 export const PENDING = "pending";
 export const OVERFLOW = "overflow";
+export const SLASHED = "slashed";
 export const EXPIRED = "expired";
 export const INTERMEDIATE_UNBONDING = "intermediate_unbonding";
 export const INTERMEDIATE_WITHDRAWAL = "intermediate_withdrawal";
@@ -45,6 +47,7 @@ export const DelegationState = {
   WITHDRAWN,
   PENDING,
   OVERFLOW,
+  SLASHED,
   EXPIRED,
   INTERMEDIATE_UNBONDING,
   INTERMEDIATE_WITHDRAWAL,

src/utils/getState.ts

@@ -28,6 +28,8 @@ export const getState = (state: string) => {
       return "Transitioning";
     case DelegationState.TRANSITIONED:
       return "Transitioned";
+    case DelegationState.SLASHED:
+      return "Slashed";
     default:
       return "Unknown";
   }
@@ -55,6 +57,8 @@ export const getStateTooltip = (state: string) => {
       return "Stake is transitioning to the Babylon chain network";
     case DelegationState.TRANSITIONED:
       return "Stake has been transitioned to the Babylon chain network";
+    case DelegationState.SLASHED:
+      return "Stake has been slashed";
     default:
       return "Unknown";
   }

src/utils/local_storage/toLocalStorageIntermediateDelegation.ts

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

tests/helper/generateMockDelegation.ts

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