fix tooltip and pending registration

babylonlabs-io · Jan 12, 2025 · f110d27 · f110d27
1 parent 72f2313
commit f110d27
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 36 deletions.
diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
@@ -13,6 +13,7 @@ import {
   type Delegation as DelegationInterface,
   DelegationState,
 } from "@/app/types/delegations";
+import { Hint } from "@/components/common/Hint";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 import { satoshiToBtc } from "@/utils/btc";
 import { getState, getStateTooltip } from "@/utils/getState";
@@ -23,7 +24,6 @@ import { trim } from "@/utils/trim";
 import { VerificationModal } from "../Modals/VerificationModal";
 
 import { DelegationCell } from "./components/DelegationCell";
-import { DelegationStatus } from "./components/DelegationStatus";
 import { OverflowBadge } from "./components/OverflowBadge";
 
 interface DelegationProps {
@@ -148,11 +148,7 @@ export const Delegation: React.FC<DelegationProps> = ({
             order="order-5"
             className="relative flex justify-end lg:justify-start"
           >
-            <DelegationStatus
-              state={renderState()}
-              tooltip={renderStateTooltip()}
-              stakingTxHashHex={stakingTxHashHex}
-            />
+            <Hint tooltip={renderStateTooltip()}>{renderState()}</Hint>
           </DelegationCell>
 
           <DelegationCell order="order-6">

diff --git a/src/app/components/Delegations/components/DelegationStatus.tsx b/src/app/components/Delegations/components/DelegationStatus.tsx
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -104,8 +104,10 @@ body.modal-open {
 
 .tooltip-wrap {
   max-width: 25rem;
-  white-space: normal;
+  white-space: pre-wrap;
   word-wrap: break-word;
+  height: fit-content !important;
+  z-index: 9999;
 }
 
 .tooltip-wrap[data-popper-placement*="top"] .tooltip-arrow {

diff --git a/src/utils/getState.ts b/src/utils/getState.ts
@@ -28,7 +28,7 @@ export const getState = (state: string) => {
     case DelegationState.INTERMEDIATE_WITHDRAWAL:
       return "Withdrawal Submitted";
     case DelegationState.INTERMEDIATE_TRANSITIONING:
-      return "Transitioning";
+      return "Active/Pending Registration";
     case DelegationState.TRANSITIONED:
       return "Transitioned";
     default:
@@ -57,7 +57,7 @@ export const getStateTooltip = (state: string) => {
     case DelegationState.INTERMEDIATE_WITHDRAWAL:
       return "Withdrawal transaction pending confirmation on Bitcoin";
     case DelegationState.INTERMEDIATE_TRANSITIONING:
-      return `Stake is transitioning to the ${bbnNetworkFullName} network`;
+      return `Stake is pending registration to the ${bbnNetworkFullName} network`;
     case DelegationState.TRANSITIONED:
       return `Stake has been transitioned to the ${bbnNetworkFullName} network`;
     default: