From e8f72a362d787ccf4f2e118dd4a467b9aab03862 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 28 Nov 2024 16:57:12 +0800
Subject: [PATCH 1/4] feat: add eligibility for transition in delegations and
 update UI accordingly

---
 src/app/api/getDelegations.ts                 |  3 +
 src/app/components/Delegations/Delegation.tsx | 58 ++++++++++++-------
 .../components/Delegations/Delegations.tsx    | 17 +++---
 src/app/components/Staking/Staking.tsx        |  8 ++-
 src/app/types/delegations.ts                  |  3 +
 src/utils/getState.ts                         |  4 ++
 .../toLocalStorageIntermediateDelegation.ts   |  1 +
 tests/helper/generateMockDelegation.ts        |  1 +
 8 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/src/app/api/getDelegations.ts b/src/app/api/getDelegations.ts
index 4507b70e..412c9399 100644
--- a/src/app/api/getDelegations.ts
+++ b/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,
     }),
   );
 
diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
index 971e7e89..4bedb4fa 100644
--- a/src/app/components/Delegations/Delegation.tsx
+++ b/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}
diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
index 11ee18b3..0c227e23 100644
--- a/src/app/components/Delegations/Delegations.tsx
+++ b/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>
   );
 };
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 8f969e16..834cdc24 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/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"
diff --git a/src/app/types/delegations.ts b/src/app/types/delegations.ts
index dc5016b4..1edd0194 100644
--- a/src/app/types/delegations.ts
+++ b/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,
diff --git a/src/utils/getState.ts b/src/utils/getState.ts
index f971c053..e5520d60 100644
--- a/src/utils/getState.ts
+++ b/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";
   }
diff --git a/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts b/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts
index edbd85d0..3fd835d5 100644
--- a/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts
+++ b/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts
@@ -22,6 +22,7 @@ export const toLocalStorageIntermediateDelegation = (
     timelock,
   },
   isOverflow: false,
+  isEligibleForTransition: false,
   unbondingTx: undefined,
   transitioned: false,
 });
diff --git a/tests/helper/generateMockDelegation.ts b/tests/helper/generateMockDelegation.ts
index 678f9de8..4a36d14a 100644
--- a/tests/helper/generateMockDelegation.ts
+++ b/tests/helper/generateMockDelegation.ts
@@ -24,6 +24,7 @@ export function generateMockDelegation(
       timelock: 3600,
     },
     isOverflow: false,
+    isEligibleForTransition: false,
     unbondingTx: undefined,
     transitioned: false,
   };

From 57931966e2eb22adf49d1d5c7a26750fbd65563b Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 28 Nov 2024 18:19:18 +0800
Subject: [PATCH 2/4] resolve comments

---
 src/app/api/getDelegations.ts                 |  3 --
 src/app/components/Delegations/Delegation.tsx | 36 ++++++++++---------
 src/app/types/delegations.ts                  |  1 -
 src/utils/getState.ts                         |  2 +-
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/app/api/getDelegations.ts b/src/app/api/getDelegations.ts
index 412c9399..e0ef035a 100644
--- a/src/app/api/getDelegations.ts
+++ b/src/app/api/getDelegations.ts
@@ -54,8 +54,6 @@ export const getDelegations = async (
 
   const params = {
     pagination_key: encode(key),
-    // "pagination_reverse": reverse,
-    // "pagination_limit": limit,
     staker_btc_pk: encode(publicKeyNoCoord),
     state: ["active", "unbonded"],
   };
@@ -90,7 +88,6 @@ export const getDelegations = async (
             outputIndex: apiDelegation.unbonding_tx.output_index,
           }
         : undefined,
-      transitioned: apiDelegation.transitioned,
       isEligibleForTransition: apiDelegation.is_eligible_for_transition,
     }),
   );
diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
index 4bedb4fa..619e7290 100644
--- a/src/app/components/Delegations/Delegation.tsx
+++ b/src/app/components/Delegations/Delegation.tsx
@@ -82,32 +82,34 @@ export const Delegation: React.FC<DelegationProps> = ({
   };
 
   const generateActionButton = () => {
-    if (delegation.isEligibleForTransition) {
+    if (
+      state === DelegationState.ACTIVE ||
+      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">
+        <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) {
diff --git a/src/app/types/delegations.ts b/src/app/types/delegations.ts
index 1edd0194..a596639c 100644
--- a/src/app/types/delegations.ts
+++ b/src/app/types/delegations.ts
@@ -7,7 +7,6 @@ export interface Delegation {
   stakingTx: StakingTx;
   unbondingTx: UnbondingTx | undefined;
   isOverflow: boolean;
-  transitioned: boolean;
   isEligibleForTransition: boolean;
 }
 
diff --git a/src/utils/getState.ts b/src/utils/getState.ts
index e5520d60..f5104665 100644
--- a/src/utils/getState.ts
+++ b/src/utils/getState.ts
@@ -38,7 +38,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";

From da88d6d30b3785eb5f6dcbe9ca82e53980c7ed5b Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 28 Nov 2024 18:29:13 +0800
Subject: [PATCH 3/4] resolve test fail

---
 .../local_storage/toLocalStorageIntermediateDelegation.ts     | 1 -
 tests/helper/generateMockDelegation.ts                        | 1 -
 .../toLocalStorageIntermediateDelegation.test.ts              | 4 ++--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts b/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts
index 3fd835d5..6b2a43be 100644
--- a/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts
+++ b/src/utils/local_storage/toLocalStorageIntermediateDelegation.ts
@@ -24,5 +24,4 @@ export const toLocalStorageIntermediateDelegation = (
   isOverflow: false,
   isEligibleForTransition: false,
   unbondingTx: undefined,
-  transitioned: false,
 });
diff --git a/tests/helper/generateMockDelegation.ts b/tests/helper/generateMockDelegation.ts
index 4a36d14a..b08115f9 100644
--- a/tests/helper/generateMockDelegation.ts
+++ b/tests/helper/generateMockDelegation.ts
@@ -26,6 +26,5 @@ export function generateMockDelegation(
     isOverflow: false,
     isEligibleForTransition: false,
     unbondingTx: undefined,
-    transitioned: false,
   };
 }
diff --git a/tests/utils/local_storage/toLocalStorageIntermediateDelegation.test.ts b/tests/utils/local_storage/toLocalStorageIntermediateDelegation.test.ts
index 330392d2..5814a543 100644
--- a/tests/utils/local_storage/toLocalStorageIntermediateDelegation.test.ts
+++ b/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

From a0f8a3ad111f0b4bddd37090f880bc05f959ee8a Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Fri, 29 Nov 2024 13:09:28 +0800
Subject: [PATCH 4/4] remove slashed state

---
 src/app/types/delegations.ts | 2 --
 src/utils/getState.ts        | 4 ----
 2 files changed, 6 deletions(-)

diff --git a/src/app/types/delegations.ts b/src/app/types/delegations.ts
index a596639c..3c18409a 100644
--- a/src/app/types/delegations.ts
+++ b/src/app/types/delegations.ts
@@ -30,7 +30,6 @@ 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";
@@ -46,7 +45,6 @@ export const DelegationState = {
   WITHDRAWN,
   PENDING,
   OVERFLOW,
-  SLASHED,
   EXPIRED,
   INTERMEDIATE_UNBONDING,
   INTERMEDIATE_WITHDRAWAL,
diff --git a/src/utils/getState.ts b/src/utils/getState.ts
index f5104665..8f04e44e 100644
--- a/src/utils/getState.ts
+++ b/src/utils/getState.ts
@@ -28,8 +28,6 @@ export const getState = (state: string) => {
       return "Transitioning";
     case DelegationState.TRANSITIONED:
       return "Transitioned";
-    case DelegationState.SLASHED:
-      return "Slashed";
     default:
       return "Unknown";
   }
@@ -57,8 +55,6 @@ 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";
   }