From c78432722fa1f2c7e79da206bd44ae370cc4632e Mon Sep 17 00:00:00 2001
From: wjrjerome <wjrjerome@babylonchain.io>
Date: Fri, 16 Aug 2024 19:14:48 +1000
Subject: [PATCH] fix: update balance to stakable balance with tooltip

---
 src/app/components/Summary/Summary.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx
index d8f2ed06..efddbca1 100644
--- a/src/app/components/Summary/Summary.tsx
+++ b/src/app/components/Summary/Summary.tsx
@@ -1,4 +1,6 @@
+import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FaBitcoin } from "react-icons/fa";
+import { Tooltip } from "react-tooltip";
 
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
@@ -37,7 +39,7 @@ export const Summary: React.FC<SummaryProps> = ({
         </div>
         <div className="divider divider-horizontal xl:m-0" />
         <div className="flex flex-col gap-1 text-sm xl:flex-1 xl:flex-row xl:items-center xl:justify-center xl:gap-2 xl:text-base">
-          <p className="dark:text-neutral-content">Balance</p>
+          <p className="dark:text-neutral-content">Stakable Balance</p>
           <div className="flex items-center gap-1">
             <FaBitcoin className="text-primary" size={16} />
             {typeof btcWalletBalanceSat === "number" ? (
@@ -48,6 +50,21 @@ export const Summary: React.FC<SummaryProps> = ({
               <LoadingSmall text="Loading..." />
             )}
           </div>
+          <div>
+            <span
+              className="cursor-pointer text-xs"
+              data-tooltip-id={"tooltip-stakeable-balance"}
+              data-tooltip-content={`Stakable balance only includes confirmed Bitcoin balance. 
+              It does not include balance stemming from pending transactions.`}
+              data-tooltip-place="top"
+            >
+              <AiOutlineInfoCircle />
+            </span>
+            <Tooltip
+              id={"tooltip-stakeable-balance"}
+              className="tooltip-wrap"
+            />
+          </div>
           {!onMainnet && (
             <a
               href="https://discord.com/invite/babylonglobal"