From 2f54e9ec5182dc637d67bf47a8ffd71857c8d4de Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Tue, 6 Aug 2024 15:03:15 +0800
Subject: [PATCH 1/6] fix tooltip word wrap issue

---
 src/app/components/Stats/Stats.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
index f5d37843..27375b9e 100644
--- a/src/app/components/Stats/Stats.tsx
+++ b/src/app/components/Stats/Stats.tsx
@@ -197,7 +197,10 @@ export const Stats: React.FC = () => {
                         >
                           <AiOutlineInfoCircle />
                         </span>
-                        <Tooltip id={`tooltip-${subSection.title}`} />
+                        <Tooltip
+                          id={`tooltip-${subSection.title}`}
+                          className="max-w-xs whitespace-normal break-words"
+                        />
                       </>
                     )}
                   </div>

From 254c7c22b63cb7a8490b27509517b25a228ed621 Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Tue, 6 Aug 2024 18:43:10 +0800
Subject: [PATCH 2/6] closes #42 and #45

---
 src/app/components/Connect/ConnectSmall.tsx     |  2 +-
 src/app/components/Delegations/Delegation.tsx   |  2 +-
 .../FinalityProviders/FinalityProvider.tsx      |  2 +-
 .../FinalityProviders/FinalityProviders.tsx     |  4 ++--
 src/app/components/Modals/ConnectModal.tsx      |  5 ++++-
 src/app/components/Stakers/Stakers.tsx          |  4 ++--
 .../FinalityProviders/FinalityProvider.tsx      | 12 +++++++++---
 src/app/components/Staking/Staking.tsx          |  2 +-
 src/app/components/Stats/Stats.tsx              |  2 +-
 src/app/components/Summary/Summary.tsx          | 17 ++++++++++++++++-
 src/app/globals.css                             |  6 ++++++
 src/app/page.tsx                                |  4 ++++
 12 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx
index 906e6b38..21d33c78 100644
--- a/src/app/components/Connect/ConnectSmall.tsx
+++ b/src/app/components/Connect/ConnectSmall.tsx
@@ -54,7 +54,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
         >
           <AiOutlineInfoCircle />
         </span>
-        <Tooltip id="tooltip-connect" />
+        <Tooltip id="tooltip-connect" className="tooltip-wrap" />
       </>
     );
   };
diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
index 65109f9b..b3ff0dd0 100644
--- a/src/app/components/Delegations/Delegation.tsx
+++ b/src/app/components/Delegations/Delegation.tsx
@@ -152,7 +152,7 @@ export const Delegation: React.FC<DelegationProps> = ({
             >
               <AiOutlineInfoCircle />
             </span>
-            <Tooltip id={`tooltip-${stakingTxHash}`} />
+            <Tooltip id={`tooltip-${stakingTxHash}`} className="tooltip-wrap" />
           </div>
         </div>
         {generateActionButton()}
diff --git a/src/app/components/FinalityProviders/FinalityProvider.tsx b/src/app/components/FinalityProviders/FinalityProvider.tsx
index ae38488d..ef88076a 100644
--- a/src/app/components/FinalityProviders/FinalityProvider.tsx
+++ b/src/app/components/FinalityProviders/FinalityProvider.tsx
@@ -95,7 +95,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           0
         )}
       </div>
-      <Tooltip id="tooltip-missing" />
+      <Tooltip id="tooltip-missing" className="tooltip-wrap" />
     </div>
   );
 };
diff --git a/src/app/components/FinalityProviders/FinalityProviders.tsx b/src/app/components/FinalityProviders/FinalityProviders.tsx
index 0ac6da29..9d8668f1 100644
--- a/src/app/components/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/FinalityProviders/FinalityProviders.tsx
@@ -82,8 +82,8 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
           )}
         </InfiniteScroll>
       </div>
-      <Tooltip id="tooltip-delegations" />
-      <Tooltip id="tooltip-stake" />
+      <Tooltip id="tooltip-delegations" className="tooltip-wrap" />
+      <Tooltip id="tooltip-stake" className="tooltip-wrap" />
     </div>
   );
 };
diff --git a/src/app/components/Modals/ConnectModal.tsx b/src/app/components/Modals/ConnectModal.tsx
index 9c7fefd0..2d7b819a 100644
--- a/src/app/components/Modals/ConnectModal.tsx
+++ b/src/app/components/Modals/ConnectModal.tsx
@@ -224,7 +224,10 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
                           >
                             <AiOutlineInfoCircle />
                           </span>
-                          <Tooltip id={name} />
+                          <Tooltip
+                            id={name}
+                            className="max-w-xs whitespace-normal break-words"
+                          />
                         </div>
                       )}
                     </div>
diff --git a/src/app/components/Stakers/Stakers.tsx b/src/app/components/Stakers/Stakers.tsx
index 8ff9954e..d4068422 100644
--- a/src/app/components/Stakers/Stakers.tsx
+++ b/src/app/components/Stakers/Stakers.tsx
@@ -89,8 +89,8 @@ export const Stakers: React.FC<StakersProps> = () => {
           <LoadingView />
         )}
       </div>
-      <Tooltip id="tooltip-delegations" />
-      <Tooltip id="tooltip-stake" />
+      <Tooltip id="tooltip-delegations" className="tooltip-wrap" />
+      <Tooltip id="tooltip-stake" className="tooltip-wrap" />
     </div>
   );
 };
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProvider.tsx b/src/app/components/Staking/FinalityProviders/FinalityProvider.tsx
index 11b3837c..b576eec5 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProvider.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProvider.tsx
@@ -79,7 +79,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
               >
                 <AiOutlineInfoCircle size={16} />
               </span>
-              <Tooltip id="tooltip-missing-fp" />
+              <Tooltip id="tooltip-missing-fp" className="tooltip-wrap" />
               <span>No data provided</span>
             </div>
           )}
@@ -100,7 +100,10 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           >
             <AiOutlineInfoCircle />
           </span>
-          <Tooltip id={`tooltip-delegation-${pkHex}`} />
+          <Tooltip
+            id={`tooltip-delegation-${pkHex}`}
+            className="tooltip-wrap"
+          />
         </div>
         <div className="flex items-center justify-end gap-1 lg:justify-start">
           <p className="hidden sm:flex lg:hidden">Commission:</p>
@@ -115,7 +118,10 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
           >
             <AiOutlineInfoCircle />
           </span>
-          <Tooltip id={`tooltip-delegation-${pkHex}`} />
+          <Tooltip
+            id={`tooltip-delegation-${pkHex}`}
+            className="tooltip-wrap"
+          />
         </div>
       </div>
     </div>
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 50e2e09a..fbab9a12 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -629,7 +629,7 @@ export const Staking: React.FC<StakingProps> = ({
               >
                 Preview
               </button>
-              <Tooltip id="tooltip-staking-preview" />
+              <Tooltip id="tooltip-staking-preview" className="tooltip-wrap" />
             </span>
             {previewReady && (
               <PreviewModal
diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
index 27375b9e..07183386 100644
--- a/src/app/components/Stats/Stats.tsx
+++ b/src/app/components/Stats/Stats.tsx
@@ -199,7 +199,7 @@ export const Stats: React.FC = () => {
                         </span>
                         <Tooltip
                           id={`tooltip-${subSection.title}`}
-                          className="max-w-xs whitespace-normal break-words"
+                          className="tooltip-wrap"
                         />
                       </>
                     )}
diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx
index d8f2ed06..1f0d1500 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";
@@ -10,11 +12,13 @@ import { LoadingSmall } from "../Loading/Loading";
 interface SummaryProps {
   totalStakedSat: number;
   btcWalletBalanceSat?: number;
+  confirmationDepth?: number;
 }
 
 export const Summary: React.FC<SummaryProps> = ({
   totalStakedSat,
   btcWalletBalanceSat,
+  confirmationDepth,
 }) => {
   const { coinName } = getNetworkConfig();
   const onMainnet = getNetworkConfig().network === Network.MAINNET;
@@ -24,7 +28,18 @@ export const Summary: React.FC<SummaryProps> = ({
       <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">
-          <p className="dark:text-neutral-content">Total staked</p>
+          <div className="flex gap-1 items-center">
+            <p className="dark:text-neutral-content">Total staked</p>
+            <span
+              className="cursor-pointer text-xs"
+              data-tooltip-id="tooltip-total-staked"
+              data-tooltip-content={`Total staked is updated after ${confirmationDepth || 10} confirmations`}
+              data-tooltip-place="bottom"
+            >
+              <AiOutlineInfoCircle />
+            </span>
+            <Tooltip id="tooltip-total-staked" className="tooltip-wrap" />
+          </div>
           <div className="flex items-center gap-1">
             <FaBitcoin className="text-primary" size={16} />
             <p className="whitespace-nowrap font-semibold">
diff --git a/src/app/globals.css b/src/app/globals.css
index 8e50c77b..3810a469 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -110,3 +110,9 @@ input[type="number"] {
 body.modal-open {
   overflow: hidden;
 }
+
+.tooltip-wrap {
+  max-width: 20rem;
+  white-space: normal;
+  word-wrap: break-word;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bcbe380b..d0f0a153 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -401,6 +401,10 @@ const Home: React.FC<HomeProps> = () => {
             <Summary
               totalStakedSat={totalStakedSat}
               btcWalletBalanceSat={btcWalletBalanceSat}
+              confirmationDepth={
+                paramWithContext?.nextBlockParams.currentVersion
+                  ?.confirmationDepth
+              }
             />
           )}
           <Staking

From 54709fa051952369affd4b68008d4cf5e6a38185 Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Tue, 6 Aug 2024 19:16:08 +0800
Subject: [PATCH 3/6] get confirmation depth in Summary

---
 src/app/components/Summary/Summary.tsx | 28 +++++++++++++++++++++++---
 src/app/page.tsx                       |  4 ----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx
index 1f0d1500..eef644b1 100644
--- a/src/app/components/Summary/Summary.tsx
+++ b/src/app/components/Summary/Summary.tsx
@@ -1,9 +1,16 @@
+import { useMemo, useState } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FaBitcoin } from "react-icons/fa";
 import { Tooltip } from "react-tooltip";
 
+import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
+import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
+import {
+  getCurrentGlobalParamsVersion,
+  ParamsWithContext,
+} from "@/utils/globalParams";
 import { maxDecimals } from "@/utils/maxDecimals";
 import { Network } from "@/utils/wallet/wallet_provider";
 
@@ -12,16 +19,31 @@ import { LoadingSmall } from "../Loading/Loading";
 interface SummaryProps {
   totalStakedSat: number;
   btcWalletBalanceSat?: number;
-  confirmationDepth?: number;
 }
 
 export const Summary: React.FC<SummaryProps> = ({
   totalStakedSat,
   btcWalletBalanceSat,
-  confirmationDepth,
 }) => {
   const { coinName } = getNetworkConfig();
   const onMainnet = getNetworkConfig().network === Network.MAINNET;
+  const [paramWithCtx, setParamWithCtx] = useState<
+    ParamsWithContext | undefined
+  >();
+
+  const btcHeight = useBtcHeight();
+  const globalParams = useGlobalParams();
+
+  useMemo(() => {
+    if (!btcHeight || !globalParams.data) {
+      return;
+    }
+    const paramCtx = getCurrentGlobalParamsVersion(
+      btcHeight + 1,
+      globalParams.data,
+    );
+    setParamWithCtx(paramCtx);
+  }, [btcHeight, globalParams]);
 
   return (
     <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">
@@ -33,7 +55,7 @@ export const Summary: React.FC<SummaryProps> = ({
             <span
               className="cursor-pointer text-xs"
               data-tooltip-id="tooltip-total-staked"
-              data-tooltip-content={`Total staked is updated after ${confirmationDepth || 10} confirmations`}
+              data-tooltip-content={`Total staked is updated after ${paramWithCtx?.currentVersion?.confirmationDepth || 10} confirmations`}
               data-tooltip-place="bottom"
             >
               <AiOutlineInfoCircle />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d0f0a153..bcbe380b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -401,10 +401,6 @@ const Home: React.FC<HomeProps> = () => {
             <Summary
               totalStakedSat={totalStakedSat}
               btcWalletBalanceSat={btcWalletBalanceSat}
-              confirmationDepth={
-                paramWithContext?.nextBlockParams.currentVersion
-                  ?.confirmationDepth
-              }
             />
           )}
           <Staking

From b6d9bf0ea1630cbd4f2704b6a99856ce9e22fc1d Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Tue, 6 Aug 2024 19:20:10 +0800
Subject: [PATCH 4/6] bump version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 17e1df1f..e5027773 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.2.30",
+      "version": "0.2.31",
       "dependencies": {
         "@bitcoinerlab/secp256k1": "^1.1.1",
         "@keystonehq/animated-qr": "^0.8.6",
diff --git a/package.json b/package.json
index e3df98c8..b9087f41 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.30",
+  "version": "0.2.31",
   "private": true,
   "scripts": {
     "dev": "next dev",

From ca5e0e7a84d68be43ae64828ae904007333f8e22 Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Wed, 7 Aug 2024 12:46:17 +0800
Subject: [PATCH 5/6] revert #45

---
 src/app/components/Summary/Summary.tsx | 39 +-------------------------
 1 file changed, 1 insertion(+), 38 deletions(-)

diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx
index eef644b1..d8f2ed06 100644
--- a/src/app/components/Summary/Summary.tsx
+++ b/src/app/components/Summary/Summary.tsx
@@ -1,16 +1,7 @@
-import { useMemo, useState } from "react";
-import { AiOutlineInfoCircle } from "react-icons/ai";
 import { FaBitcoin } from "react-icons/fa";
-import { Tooltip } from "react-tooltip";
 
-import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
-import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
-import {
-  getCurrentGlobalParamsVersion,
-  ParamsWithContext,
-} from "@/utils/globalParams";
 import { maxDecimals } from "@/utils/maxDecimals";
 import { Network } from "@/utils/wallet/wallet_provider";
 
@@ -27,41 +18,13 @@ export const Summary: React.FC<SummaryProps> = ({
 }) => {
   const { coinName } = getNetworkConfig();
   const onMainnet = getNetworkConfig().network === Network.MAINNET;
-  const [paramWithCtx, setParamWithCtx] = useState<
-    ParamsWithContext | undefined
-  >();
-
-  const btcHeight = useBtcHeight();
-  const globalParams = useGlobalParams();
-
-  useMemo(() => {
-    if (!btcHeight || !globalParams.data) {
-      return;
-    }
-    const paramCtx = getCurrentGlobalParamsVersion(
-      btcHeight + 1,
-      globalParams.data,
-    );
-    setParamWithCtx(paramCtx);
-  }, [btcHeight, globalParams]);
 
   return (
     <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 gap-1 items-center">
-            <p className="dark:text-neutral-content">Total staked</p>
-            <span
-              className="cursor-pointer text-xs"
-              data-tooltip-id="tooltip-total-staked"
-              data-tooltip-content={`Total staked is updated after ${paramWithCtx?.currentVersion?.confirmationDepth || 10} confirmations`}
-              data-tooltip-place="bottom"
-            >
-              <AiOutlineInfoCircle />
-            </span>
-            <Tooltip id="tooltip-total-staked" className="tooltip-wrap" />
-          </div>
+          <p className="dark:text-neutral-content">Total staked</p>
           <div className="flex items-center gap-1">
             <FaBitcoin className="text-primary" size={16} />
             <p className="whitespace-nowrap font-semibold">

From 93f5110404a9377d6bc644e3675e017091e73dd9 Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Wed, 7 Aug 2024 17:48:38 +0800
Subject: [PATCH 6/6] update comments

---
 src/app/components/Modals/ConnectModal.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/components/Modals/ConnectModal.tsx b/src/app/components/Modals/ConnectModal.tsx
index 2d7b819a..7ff42c9f 100644
--- a/src/app/components/Modals/ConnectModal.tsx
+++ b/src/app/components/Modals/ConnectModal.tsx
@@ -224,10 +224,7 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
                           >
                             <AiOutlineInfoCircle />
                           </span>
-                          <Tooltip
-                            id={name}
-                            className="max-w-xs whitespace-normal break-words"
-                          />
+                          <Tooltip id={name} className="tooltip-wrap" />
                         </div>
                       )}
                     </div>