From 21f9a99071e5cc8798c2cf1088e3f8c9fc339ec6 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Fri, 13 Dec 2024 20:14:23 +0800
Subject: [PATCH] add phase 1 unbond button and hook up modal

---
 src/app/components/Delegations/Delegation.tsx | 178 ++++++------------
 .../Delegations/DelegationActions.tsx         | 118 ++++++++++++
 .../components/Delegations/Delegations.tsx    |  23 ++-
 .../Delegations/components/DelegationCell.tsx |  11 ++
 .../components/DelegationStatus.tsx           |  27 +++
 .../Delegations/components/OverflowBadge.tsx  |   8 +
 src/app/components/Modals/UnbondModal.tsx     |   2 -
 .../components/DelegationModal.tsx            |   1 -
 8 files changed, 244 insertions(+), 124 deletions(-)
 create mode 100644 src/app/components/Delegations/DelegationActions.tsx
 create mode 100644 src/app/components/Delegations/components/DelegationCell.tsx
 create mode 100644 src/app/components/Delegations/components/DelegationStatus.tsx
 create mode 100644 src/app/components/Delegations/components/OverflowBadge.tsx

diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
index a59283cf..1d19f0f4 100644
--- a/src/app/components/Delegations/Delegation.tsx
+++ b/src/app/components/Delegations/Delegation.tsx
@@ -1,9 +1,7 @@
 import { useEffect, useState } from "react";
-import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FaBitcoin } from "react-icons/fa";
-import { IoIosWarning } from "react-icons/io";
-import { Tooltip } from "react-tooltip";
 
+import { DelegationActions } from "@/app/components/Delegations/DelegationActions";
 import {
   type SigningStep,
   useTransactionService,
@@ -21,9 +19,14 @@ import { maxDecimals } from "@/utils/maxDecimals";
 import { durationTillNow } from "@/utils/time";
 import { trim } from "@/utils/trim";
 
+import { DelegationCell } from "./components/DelegationCell";
+import { DelegationStatus } from "./components/DelegationStatus";
+import { OverflowBadge } from "./components/OverflowBadge";
+
 interface DelegationProps {
   delegation: DelegationInterface;
   onWithdraw: (id: string) => void;
+  onUnbond: (id: string) => void;
   // This attribute is set when an action has been taken by the user
   // that should change the status but the back-end
   // has not had time to reflect this change yet
@@ -33,6 +36,7 @@ interface DelegationProps {
 export const Delegation: React.FC<DelegationProps> = ({
   delegation,
   onWithdraw,
+  onUnbond,
   intermediateState,
 }) => {
   const {
@@ -42,18 +46,18 @@ export const Delegation: React.FC<DelegationProps> = ({
     stakingValueSat,
     isOverflow,
     finalityProviderPkHex,
+    isEligibleForTransition,
   } = delegation;
 
   const { startTimestamp } = stakingTx;
   const [currentTime, setCurrentTime] = useState(Date.now());
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const { transitionPhase1Delegation } = useTransactionService();
-  const { getFinalityProviderMoniker } = useFinalityProviderState(); // get the moniker of the finality provider
-  useEffect(() => {
-    const timerId = setInterval(() => {
-      setCurrentTime(Date.now());
-    }, 60000); // set the refresh interval to 60 seconds
+  const { getFinalityProviderMoniker } = useFinalityProviderState();
+  const { coinName, mempoolApiUrl } = getNetworkConfig();
 
+  useEffect(() => {
+    const timerId = setInterval(() => setCurrentTime(Date.now()), 60000); // Update every minute
     return () => clearInterval(timerId);
   }, []);
 
@@ -77,110 +81,48 @@ export const Delegation: React.FC<DelegationProps> = ({
     // TODO: Close the transaction signing modal and update the UI
   };
 
-  const generateActionButton = () => {
-    if (
-      state === DelegationState.ACTIVE ||
-      delegation.isEligibleForTransition
-    ) {
-      return (
-        <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 ||
-              (state === DelegationState.ACTIVE &&
-                !delegation.isEligibleForTransition)
-            }
-          >
-            Transition
-          </button>
-          <Tooltip id="tooltip-transition" className="tooltip-wrap" />
-        </div>
-      );
-    } else if (state === DelegationState.UNBONDED) {
-      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={() => onWithdraw(stakingTxHashHex)}
-            disabled={
-              intermediateState === DelegationState.INTERMEDIATE_WITHDRAWAL
-            }
-          >
-            Withdraw
-          </button>
-        </div>
-      );
-    } else {
-      return null;
-    }
-  };
-
   const isActive =
     intermediateState === DelegationState.ACTIVE ||
     state === DelegationState.ACTIVE;
 
-  const renderState = () => {
+  const renderState = () =>
     // overflow should be shown only on active state
-    if (isOverflow && isActive) {
-      return getState(DelegationState.OVERFLOW);
-    } else {
-      return getState(intermediateState || state);
-    }
-  };
+    isOverflow && isActive
+      ? getState(DelegationState.OVERFLOW)
+      : getState(intermediateState || state);
 
-  const renderStateTooltip = () => {
+  const renderStateTooltip = () =>
     // overflow should be shown only on active state
-    if (isOverflow && isActive) {
-      return getStateTooltip(DelegationState.OVERFLOW);
-    } else {
-      return getStateTooltip(intermediateState || state);
-    }
-  };
-
-  const { coinName, mempoolApiUrl } = getNetworkConfig();
-
-  const renderActionRequired = () => {
-    return <p className="text-error-main text-sm">Action Required</p>;
-  };
+    isOverflow && isActive
+      ? getStateTooltip(DelegationState.OVERFLOW)
+      : getStateTooltip(intermediateState || state);
 
   return (
-    <div
-      className={`relative rounded bg-secondary-contrast odd:bg-[#F9F9F9] p-4 text-sm text-primary-dark`}
-    >
-      {isOverflow && (
-        <div className="absolute -top-1 right-1/2 flex translate-x-1/2 items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs text-white lg:right-2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-0">
-          <IoIosWarning size={14} />
-          <p>overflow</p>
-        </div>
-      )}
-      <div
-        className={`grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row lg:grid-cols-[1.5fr_1fr_1fr_1fr_1fr_1fr] lg:grid-rows-1`}
-      >
-        <div className="order-3 lg:order-1">
+    <div className="relative rounded bg-secondary-contrast odd:bg-[#F9F9F9] p-4 text-sm text-primary-dark">
+      {isOverflow && <OverflowBadge />}
+      <div className="grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row lg:grid-cols-[1.5fr_1fr_1fr_1fr_1fr_1fr] lg:grid-rows-1">
+        <DelegationCell order="order-3 lg:order-1">
           {durationTillNow(startTimestamp, currentTime)}
-        </div>
-        <div className="order-4 lg:order-2 text-right lg:text-left">
+        </DelegationCell>
+
+        <DelegationCell order="order-4 lg:order-2 text-right lg:text-left">
           {getFinalityProviderMoniker(finalityProviderPkHex)}
-        </div>
-        <div className="flex gap-1 items-center order-1 lg:order-3">
+        </DelegationCell>
+
+        <DelegationCell
+          order="order-1 lg:order-3"
+          className="flex gap-1 items-center"
+        >
           <FaBitcoin className="text-primary" />
           <p>
             {maxDecimals(satoshiToBtc(stakingValueSat), 8)} {coinName}
           </p>
-        </div>
-        <div className="justify-start lg:flex order-2 lg:order-4">
+        </DelegationCell>
+
+        <DelegationCell
+          order="order-2 lg:order-4"
+          className="justify-start lg:flex"
+        >
           <a
             href={`${mempoolApiUrl}/tx/${stakingTxHashHex}`}
             target="_blank"
@@ -189,29 +131,33 @@ export const Delegation: React.FC<DelegationProps> = ({
           >
             {trim(stakingTxHashHex)}
           </a>
-        </div>
+        </DelegationCell>
         {/*
         we need to center the text without the tooltip
         add its size 12px and gap 4px, 16/2 = 8px
         */}
-        <div className="relative flex justify-end lg:justify-start order-5">
-          <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>
-        <div className="order-6">{generateActionButton()}</div>
+        <DelegationCell
+          order="order-5"
+          className="relative flex justify-end lg:justify-start"
+        >
+          <DelegationStatus
+            state={renderState()}
+            tooltip={renderStateTooltip()}
+            stakingTxHashHex={stakingTxHashHex}
+          />
+        </DelegationCell>
+
+        <DelegationCell order="order-6">
+          <DelegationActions
+            state={state}
+            intermediateState={intermediateState}
+            isEligibleForTransition={isEligibleForTransition}
+            stakingTxHashHex={stakingTxHashHex}
+            onTransition={onTransition}
+            onUnbond={onUnbond}
+            onWithdraw={onWithdraw}
+          />
+        </DelegationCell>
       </div>
     </div>
   );
diff --git a/src/app/components/Delegations/DelegationActions.tsx b/src/app/components/Delegations/DelegationActions.tsx
new file mode 100644
index 00000000..e55b125c
--- /dev/null
+++ b/src/app/components/Delegations/DelegationActions.tsx
@@ -0,0 +1,118 @@
+import { Button, Popover } from "@babylonlabs-io/bbn-core-ui";
+import { useState } from "react";
+import { IoMdMore } from "react-icons/io";
+import { Tooltip } from "react-tooltip";
+
+import { DelegationState } from "@/app/types/delegations";
+
+interface DelegationActionsProps {
+  state: string;
+  intermediateState?: string;
+  isEligibleForTransition: boolean;
+  stakingTxHashHex: string;
+  onTransition: () => Promise<void>;
+  onUnbond: (id: string) => void;
+  onWithdraw: (id: string) => void;
+}
+
+export const DelegationActions: React.FC<DelegationActionsProps> = ({
+  state,
+  intermediateState,
+  isEligibleForTransition,
+  stakingTxHashHex,
+  onTransition,
+  onUnbond,
+  onWithdraw,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  // Unbonded
+  if (state === DelegationState.UNBONDED) {
+    return (
+      <div className="flex justify-end lg:justify-start">
+        <Button
+          variant="outlined"
+          size="small"
+          color="primary"
+          onClick={() => onWithdraw(stakingTxHashHex)}
+          disabled={
+            intermediateState === DelegationState.INTERMEDIATE_WITHDRAWAL
+          }
+          className="text-sm font-normal"
+        >
+          Withdraw
+        </Button>
+      </div>
+    );
+  }
+
+  // Active, eligible for transition
+  if (
+    state === DelegationState.ACTIVE ||
+    isEligibleForTransition ||
+    state === DelegationState.WITHDRAWN
+  ) {
+    return (
+      <div
+        className="flex justify-end lg:justify-start"
+        data-tooltip-id="tooltip-transition"
+        data-tooltip-content={
+          state === DelegationState.ACTIVE && !isEligibleForTransition
+            ? "Staking transition is not available yet, come back later"
+            : ""
+        }
+      >
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outlined"
+            size="small"
+            color="primary"
+            onClick={onTransition}
+            disabled={
+              intermediateState ===
+                DelegationState.INTERMEDIATE_TRANSITIONING ||
+              (state === DelegationState.ACTIVE && !isEligibleForTransition)
+            }
+            className="text-sm font-normal border-primary-main/20 bg-white"
+          >
+            Transition
+          </Button>
+          <Tooltip id="tooltip-transition" className="tooltip-wrap" />
+        </div>
+
+        <button
+          ref={setAnchorEl}
+          onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+          className="pl-1 pt-2 pr-0 pb-3 hover:bg-gray-100 rounded"
+        >
+          <IoMdMore className="h-6 w-6" />
+        </button>
+
+        <Popover
+          open={isPopoverOpen}
+          anchorEl={anchorEl}
+          placement="bottom-end"
+          onClickOutside={() => setIsPopoverOpen(false)}
+        >
+          <div className="py-1 px-2">
+            <Button
+              variant="outlined"
+              size="small"
+              color="primary"
+              onClick={() => {
+                onUnbond(stakingTxHashHex);
+                setIsPopoverOpen(false);
+              }}
+              className="text-sm font-normal border-primary-main/20 bg-white w-32"
+            >
+              Unbond
+            </Button>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+
+  return null;
+};
diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
index 7d68115d..6396852c 100644
--- a/src/app/components/Delegations/Delegations.tsx
+++ b/src/app/components/Delegations/Delegations.tsx
@@ -20,12 +20,14 @@ import { getIntermediateDelegationsLocalStorageKey } from "@/utils/local_storage
 import { toLocalStorageIntermediateDelegation } from "@/utils/local_storage/toLocalStorageIntermediateDelegation";
 
 import { Phase2HereModal } from "../Modals/Phase2Here";
+import { UnbondModal } from "../Modals/UnbondModal";
 
 import { Delegation } from "./Delegation";
 
 const MODE_TRANSITION = "transition";
 const MODE_WITHDRAW = "withdraw";
-type MODE = typeof MODE_TRANSITION | typeof MODE_WITHDRAW;
+const MODE_UNBOND = "unbond";
+type MODE = typeof MODE_TRANSITION | typeof MODE_WITHDRAW | typeof MODE_UNBOND;
 
 export const Delegations = ({}) => {
   const { publicKeyNoCoord, connected, network } = useBTCWallet();
@@ -296,6 +298,7 @@ export const Delegations = ({}) => {
                   onWithdraw={() =>
                     handleModal(stakingTxHashHex, MODE_WITHDRAW)
                   }
+                  onUnbond={() => handleModal(stakingTxHashHex, MODE_UNBOND)}
                   intermediateState={intermediateDelegation?.state}
                 />
               );
@@ -303,6 +306,10 @@ export const Delegations = ({}) => {
           </InfiniteScroll>
         </div>
       </div>
+      <Phase2HereModal
+        open={showPhase2HereModal}
+        onClose={() => setShowPhase2HereModal(false)}
+      />
       {modalMode && txID && selectedDelegation && (
         <WithdrawModal
           open={modalOpen}
@@ -313,10 +320,16 @@ export const Delegations = ({}) => {
           processing={awaitingWalletResponse}
         />
       )}
-      <Phase2HereModal
-        open={showPhase2HereModal}
-        onClose={() => setShowPhase2HereModal(false)}
-      />
+      {modalMode === MODE_UNBOND && (
+        <UnbondModal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          onSubmit={() => {
+            handleUnbond(txID);
+          }}
+          processing={awaitingWalletResponse}
+        />
+      )}
     </>
   );
 };
diff --git a/src/app/components/Delegations/components/DelegationCell.tsx b/src/app/components/Delegations/components/DelegationCell.tsx
new file mode 100644
index 00000000..d02158ee
--- /dev/null
+++ b/src/app/components/Delegations/components/DelegationCell.tsx
@@ -0,0 +1,11 @@
+interface DelegationCellProps {
+  children: React.ReactNode;
+  order: string;
+  className?: string;
+}
+
+export const DelegationCell: React.FC<DelegationCellProps> = ({
+  children,
+  order,
+  className = "",
+}) => <div className={`${order} ${className}`}>{children}</div>;
diff --git a/src/app/components/Delegations/components/DelegationStatus.tsx b/src/app/components/Delegations/components/DelegationStatus.tsx
new file mode 100644
index 00000000..1a55f6d4
--- /dev/null
+++ b/src/app/components/Delegations/components/DelegationStatus.tsx
@@ -0,0 +1,27 @@
+import { AiOutlineInfoCircle } from "react-icons/ai";
+import { Tooltip } from "react-tooltip";
+
+interface DelegationStatusProps {
+  state: string;
+  tooltip: string;
+  stakingTxHashHex: string;
+}
+
+export const DelegationStatus: React.FC<DelegationStatusProps> = ({
+  state,
+  tooltip,
+  stakingTxHashHex,
+}) => (
+  <div className="flex items-center justify-start gap-1">
+    <p>{state}</p>
+    <span
+      className="cursor-pointer text-xs"
+      data-tooltip-id={`tooltip-${stakingTxHashHex}`}
+      data-tooltip-content={tooltip}
+      data-tooltip-place="top"
+    >
+      <AiOutlineInfoCircle />
+    </span>
+    <Tooltip id={`tooltip-${stakingTxHashHex}`} className="tooltip-wrap" />
+  </div>
+);
diff --git a/src/app/components/Delegations/components/OverflowBadge.tsx b/src/app/components/Delegations/components/OverflowBadge.tsx
new file mode 100644
index 00000000..d49bbda1
--- /dev/null
+++ b/src/app/components/Delegations/components/OverflowBadge.tsx
@@ -0,0 +1,8 @@
+import { IoIosWarning } from "react-icons/io";
+
+export const OverflowBadge: React.FC = () => (
+  <div className="absolute -top-1 right-1/2 flex translate-x-1/2 items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs text-white lg:right-2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-0">
+    <IoIosWarning size={14} />
+    <p>overflow</p>
+  </div>
+);
diff --git a/src/app/components/Modals/UnbondModal.tsx b/src/app/components/Modals/UnbondModal.tsx
index 307664f1..8d4aec3e 100644
--- a/src/app/components/Modals/UnbondModal.tsx
+++ b/src/app/components/Modals/UnbondModal.tsx
@@ -1,6 +1,5 @@
 import { Text } from "@babylonlabs-io/bbn-core-ui";
 
-import { DelegationV2 } from "@/app/types/delegationsV2";
 import { getNetworkConfig } from "@/config/network.config";
 
 import { ConfirmationModal } from "./ConfirmationModal";
@@ -8,7 +7,6 @@ import { ConfirmationModal } from "./ConfirmationModal";
 interface UnbondModalProps {
   processing: boolean;
   open: boolean;
-  delegation: DelegationV2 | null;
   onClose: () => void;
   onSubmit: () => void;
 }
diff --git a/src/components/delegations/DelegationList/components/DelegationModal.tsx b/src/components/delegations/DelegationList/components/DelegationModal.tsx
index d280a45e..90178d34 100644
--- a/src/components/delegations/DelegationList/components/DelegationModal.tsx
+++ b/src/components/delegations/DelegationList/components/DelegationModal.tsx
@@ -37,7 +37,6 @@ export function DelegationModal({
       />
       <UnbondModal
         open={action === ACTIONS.UNBOUND}
-        delegation={delegation}
         onSubmit={handleSubmit}
         {...restProps}
       />