From c656089abe537f2efc25898832b18cf76b8980a8 Mon Sep 17 00:00:00 2001
From: dnlbui <dnlbui@proton.me>
Date: Tue, 10 Sep 2024 13:08:18 -0500
Subject: [PATCH] feat: Add tooltip and icon for Add Stake button in Onboarding
 Page

---
 components/molecules/StakeDisplay.tsx |  8 ++---
 pages/onboarding/index.tsx            | 49 ++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/components/molecules/StakeDisplay.tsx b/components/molecules/StakeDisplay.tsx
index 312eeab..2507a67 100644
--- a/components/molecules/StakeDisplay.tsx
+++ b/components/molecules/StakeDisplay.tsx
@@ -157,19 +157,19 @@ export const StakeDisplay = () => {
                         (stakeInfo?.nominee &&
                           stakeInfo.nominee !== nodeStatus?.nomineeAddress)
                         ? "text-gray-400 border border-bodyFg tooltip tooltip-bottom"
-                          : "bg-primary text-white"
+                        : "bg-primary text-white"
                       }
                     `}
-                    disabled={
+                    disabled={!!(
                       hasNodeStopped ||
                       !nodeStatus?.nomineeAddress ||
                       (stakeInfo?.nominee &&
                         stakeInfo.nominee !== nodeStatus?.nomineeAddress)
-                    }
+                    )}
                     data-tip={
                       stakeInfo?.nominee &&
                       stakeInfo.nominee !== nodeStatus?.nomineeAddress
-                        ? "Stake Address is staked to another node. Use force remove in settings to remove existing stake in order to stake to this node."
+                        ? "Wallet is staked to another node. Navigate to settings (top-right cog icon) to force remove stake."
                         : hasNodeStopped || !nodeStatus?.nomineeAddress
                         ? "Node is stopped or nominee address is missing"
                         : ""
diff --git a/pages/onboarding/index.tsx b/pages/onboarding/index.tsx
index 43e5f29..0580d20 100644
--- a/pages/onboarding/index.tsx
+++ b/pages/onboarding/index.tsx
@@ -8,6 +8,7 @@ import {
   QuestionMarkCircleIcon,
 } from "@heroicons/react/24/solid";
 import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { Logo } from "../../components/atoms/Logo";
 import { useAccount, useNetwork, useSwitchNetwork, useDisconnect } from "wagmi";
 import { useNodeStatus } from "../../hooks/useNodeStatus";
@@ -26,6 +27,7 @@ import {
   NotificationSeverity,
   NotificationType,
 } from "../../hooks/useNotificationsStore";
+import { useAccountStakeInfo } from "../../hooks/useAccountStakeInfo";
 
 const tokensClaimedByKey = "tokensClaimedBy";
 export const onboardingCompletedKey = "onboardingCompleted";
@@ -57,6 +59,7 @@ const Onboarding = () => {
       setAccountBalance("");
     },
   });
+  const { stakeInfo } = useAccountStakeInfo(address);
   const [isStakingComplete, setIsStakingComplete] = useState(
     localStorage.getItem(onboardingCompletedKey) === "true"
   );
@@ -593,18 +596,46 @@ const Onboarding = () => {
                                   await sendTransaction();
                                 }}
                                 disabled={
-                                  isEmpty ||
-                                  stakedAmount < minimumStakeRequirement
+                                  !!(
+                                    isEmpty ||
+                                    stakedAmount < minimumStakeRequirement ||
+                                    (stakeInfo?.nominee &&
+                                      stakeInfo.nominee !==
+                                        nodeStatus?.nomineeAddress)
+                                  )
                                 }
-                                className={
-                                  (isEmpty ||
-                                  stakedAmount < minimumStakeRequirement
-                                    ? "bg-gray-300"
-                                    : "bg-indigo-600 hover:bg-indigo-700") +
-                                  " text-white text-sm font-semibold w-32 py-2 rounded flex justify-center ease-in-out duration-300 " +
-                                  GeistSans.className
+                                data-tip={
+                                  stakeInfo?.nominee &&
+                                  stakeInfo.nominee !==
+                                    nodeStatus?.nomineeAddress
+                                    ? "Wallet is staked to another node. Press `Skip setup for now` to continue. Skip setup, then use settings (top-right cog) to remove existing stake."
+                                    : isEmpty ||
+                                      stakedAmount < minimumStakeRequirement
+                                    ? "Please enter a valid stake amount"
+                                    : ""
                                 }
+                                className={`
+                                  text-white text-sm font-semibold w-32 py-2 rounded
+                                  flex items-center justify-center gap-2
+                                  ease-in-out duration-300 ${
+                                    GeistSans.className
+                                  }
+                                  ${
+                                    isEmpty ||
+                                    stakedAmount < minimumStakeRequirement ||
+                                    (stakeInfo?.nominee &&
+                                      stakeInfo.nominee !==
+                                        nodeStatus?.nomineeAddress)
+                                      ? "bg-gray-300 tooltip tooltip-bottom"
+                                      : "bg-indigo-600 hover:bg-indigo-700"
+                                  }
+                              `}
                               >
+                                {stakeInfo?.nominee &&
+                                  stakeInfo.nominee !==
+                                    nodeStatus?.nomineeAddress && (
+                                    <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
+                                  )}
                                 Stake
                               </button>
                             )}