disable unstake button for 15 minutes after stopping node, add toolti…

…p to inform users why

components/molecules/StakeDisplay.tsx

@@ -10,13 +10,15 @@ import { ConfirmUnstakeModal } from "./ConfirmUnstakeModal";
 import { ClipboardIcon } from "../atoms/ClipboardIcon";
 import { MobileModalWrapper } from "../layouts/MobileModalWrapper";
 import { useAccountStakeInfo } from "../../hooks/useAccountStakeInfo";
+import { useSettings } from "../../hooks/useSettings";
 
 export const StakeDisplay = () => {
   const addressRef = useRef<HTMLSpanElement>(null);
   const { address, isConnected } = useAccount();
   const { stakeInfo } = useAccountStakeInfo(address);
   const { chain } = useNetwork();
   const { nodeStatus } = useNodeStatus();
+  const { settings } = useSettings();
   const { setShowModal, setContent, resetModal } = useModalStore(
     (state: any) => ({
       setShowModal: state.setShowModal,
@@ -42,6 +44,20 @@ export const StakeDisplay = () => {
     }
   }, [nodeStatus?.state]);
 
+  const { isStoppedForLongerThan15Minutes, remainingWaitTime } = useMemo(() => {
+    if (!settings?.lastStopped) return { isStoppedForLongerThan15Minutes: false, remainingWaitTime: 0 };
+    const timeDifference = Date.now() - settings.lastStopped;
+    const isStoppedForLongerThan15Minutes = timeDifference > 15 * 60 * 1000;
+    const remainingWaitTime = Math.max(15 * 60 * 1000 - timeDifference, 0);
+    return { isStoppedForLongerThan15Minutes, remainingWaitTime };
+  }, [settings?.lastStopped]);
+
+  const formatRemainingTime = (ms: number) => {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    return `${minutes}m ${seconds}s`;
+  };
+
   return (
     <Card>
       <div className="flex flex-col text-subtleFg">
@@ -84,22 +100,25 @@ export const StakeDisplay = () => {
               {isConnected && chain?.id === CHAIN_ID ? (
                 <div className="flex justify-end gap-x-2">
                   <button
-                    className={
-                      "bg-white border border-bodyFg text-sm px-3 py-2 rounded basis-0 grow " +
-                      (hasNodeStopped &&
-                      parseFloat(nodeStatus?.lockedStake || "0") > 0
-                        ? "text-primary"
-                        : `text-gray-400 ${
-                            parseFloat(nodeStatus?.lockedStake || "0") > 0
-                              ? "tooltip tooltip-bottom"
-                              : ""
-                          }`)
+                    className={`
+                      bg-white border border-bodyFg text-sm px-3 py-2 rounded basis-0 grow 
+                      ${hasNodeStopped && parseFloat(nodeStatus?.lockedStake || "0") > 0
+                        ? isStoppedForLongerThan15Minutes
+                          ? "text-primary"
+                          : "text-yellow-500"
+                        : "text-gray-400"
+                      }
+                      ${!isStoppedForLongerThan15Minutes && parseFloat(nodeStatus?.lockedStake || "0") > 0 ? "tooltip tooltip-bottom" : ""}
+                    `}
+                    data-tip={
+                      hasNodeStopped && !isStoppedForLongerThan15Minutes
+                        ? `Node is currently stopped and is being removed from the active validator list. Please wait for another ${formatRemainingTime(remainingWaitTime)} before you can remove your stake.`
+                        : "It is not recommended to unstake while validating. If absolutely necessary, use the force remove option in settings to remove stake (Not Recommended)."
                     }
-                    data-tip="It is not recommended to unstake while validating.
-                    If absolutely necessary, use the force remove option in settings to remove stake (Not Recommended)."
                     disabled={
                       !hasNodeStopped ||
-                      parseFloat(nodeStatus?.lockedStake || "0") === 0
+                      parseFloat(nodeStatus?.lockedStake || "0") === 0 ||
+                      !isStoppedForLongerThan15Minutes
                     }
                     onClick={() => {
                       resetModal();
@@ -163,4 +182,4 @@ export const StakeDisplay = () => {
       </div>
     </Card>
   );
-};
+};