fix: update balance to stakable balance with tooltip (#84)

* fix: update balance to stakable balance with tooltip

---------

Co-authored-by: jeremy-babylonchain <[email protected]>
Co-authored-by: Govard Barkhatov <[email protected]>

Author: 3 people

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";
@@ -23,7 +25,7 @@ export const Summary: React.FC<SummaryProps> = ({
     <div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm xl:flex-row xl:items-center xl:justify-between xl:gap-4">
       <h3 className="mb-4 font-bold xl:mb-0">Your staking summary</h3>
       <div className="flex flex-1 justify-between gap-2">
-        <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">
+        <div className="flex flex-col gap-1 text-sm xl:flex-1 xl:flex-row xl:items-center xl:justify-center xl:gap-2">
           <p className="dark:text-neutral-content">Total staked</p>
           <div className="flex items-center gap-1">
             <FaBitcoin className="text-primary" size={16} />
@@ -36,8 +38,22 @@ export const Summary: React.FC<SummaryProps> = ({
           </div>
         </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>
+        <div className="flex flex-col gap-1 text-sm xl:flex-1 xl:flex-row xl:items-center xl:justify-center xl:gap-2">
+          <div className="flex items-center justify-end gap-1">
+            <p className="dark:text-neutral-content">Stakable Balance</p>
+            <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.`}
+            >
+              <AiOutlineInfoCircle />
+            </span>
+            <Tooltip
+              id={"tooltip-stakeable-balance"}
+              className="tooltip-wrap"
+            />
+          </div>
           <div className="flex items-center gap-1">
             <FaBitcoin className="text-primary" size={16} />
             {typeof btcWalletBalanceSat === "number" ? (
@@ -53,7 +69,7 @@ export const Summary: React.FC<SummaryProps> = ({
               href="https://discord.com/invite/babylonglobal"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-light text-primary hover:underline text-right lg:text-left"
+              className="font-light text-primary hover:underline text-right"
             >
               Get Test Tokens
             </a>