Merge branch 'main' into dark-mode

src/app/components/Delegations/DelegationActions.tsx

@@ -3,9 +3,11 @@ import { useState } from "react";
 import { IoMdMore } from "react-icons/io";
 import { Tooltip } from "react-tooltip";
 
+import { useBbnQuery } from "@/app/hooks/client/rpc/queries/useBbnQuery";
 import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 import { DelegationState } from "@/app/types/delegations";
 import { FinalityProviderState } from "@/app/types/finalityProviders";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 
 interface DelegationActionsProps {
   state: string;
@@ -32,10 +34,21 @@ export const DelegationActions: React.FC<DelegationActionsProps> = ({
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const { getFinalityProvider } = useFinalityProviderState();
 
+  const {
+    balanceQuery: { data: bbnBalance = 0 },
+  } = useBbnQuery();
+
+  const { networkFullName, coinSymbol } = getNetworkConfigBBN();
+
   const finalityProvider = getFinalityProvider(finalityProviderPkHex);
   const fpState = finalityProvider?.state;
   const isSlashed = fpState === FinalityProviderState.SLASHED;
 
+  const hasInsufficientBalance = bbnBalance === 0;
+  const insufficientBalanceMessage = hasInsufficientBalance
+    ? `Insufficient ${coinSymbol} Balance in ${networkFullName} Wallet`
+    : "";
+
   // We no longer show the registration button when the unbonding transaction is pending
   if (intermediateState === DelegationState.INTERMEDIATE_UNBONDING) {
     return null;
@@ -88,7 +101,7 @@ export const DelegationActions: React.FC<DelegationActionsProps> = ({
         data-tooltip-content={
           state === DelegationState.ACTIVE && !isEligibleForRegistration
             ? "Staking registration is not available yet, come back later"
-            : ""
+            : insufficientBalanceMessage
         }
       >
         <div className="flex items-center gap-1">
@@ -100,7 +113,9 @@ export const DelegationActions: React.FC<DelegationActionsProps> = ({
             disabled={
               intermediateState ===
                 DelegationState.INTERMEDIATE_TRANSITIONING ||
-              (state === DelegationState.ACTIVE && !isEligibleForRegistration)
+              (state === DelegationState.ACTIVE &&
+                !isEligibleForRegistration) ||
+              hasInsufficientBalance
             }
           >
             Register

src/app/components/FAQ/data/questions.tsx

@@ -39,8 +39,8 @@ export const questions = (coinName: string): Question[] => {
           <p>
             If a finality provider attacks the PoS system, the {coinName}s
             behind the voting powers delegated to it will be subject to protocol
-            slashing. This deters ${coinName} stakers and finality providers
-            from attacking the PoS system.
+            slashing. This deters {coinName} stakers and finality providers from
+            attacking the PoS system.
           </p>
         </>
       ),
@@ -50,9 +50,9 @@ export const questions = (coinName: string): Question[] => {
       content: (
         <p>
           The staking dApp is an interface to the Babylon Bitcoin Staking
-          protocol. The Babylon Bitcoin Staking protocol allows ${coinName}{" "}
-          holders to stake their ${coinName} and delegate their voting power to
-          a finality provider they select. Stakers can view their past staking
+          protocol. The Babylon Bitcoin Staking protocol allows {coinName}{" "}
+          holders to stake their {coinName} and delegate their voting power to a
+          finality provider they select. Stakers can view their past staking
           history and send a request to unlock their stake for early withdrawal.
         </p>
       ),
@@ -62,14 +62,14 @@ export const questions = (coinName: string): Question[] => {
       content: (
         <p>
           Technically, your {coinName} has not left your custody. However, your
-          wallet will not show the ${coinName} you staked in your available
-          balance once that ${coinName} is locked. Current wallet
-          implementations do not yet know how to display staked ${coinName} that
-          is still in your custody. When staking, you do not send the $
-          {coinName} to a third party. It is locked in a self-custodial Bitcoin
-          Staking script that you control. This means that any subsequent
-          movement of the ${coinName} will need your approval. You are the only
-          one who can unbond the stake and withdraw.
+          wallet will not show the {coinName} you staked in your available
+          balance once that {coinName} is locked. Current wallet implementations
+          do not yet know how to display staked {coinName} that is still in your
+          custody. When staking, you do not send the {coinName} to a third
+          party. It is locked in a self-custodial Bitcoin Staking script that
+          you control. This means that any subsequent movement of the {coinName}{" "}
+          will need your approval. You are the only one who can unbond the stake
+          and withdraw.
         </p>
       ),
     },
@@ -86,7 +86,7 @@ export const questions = (coinName: string): Question[] => {
           >
             <u>btc-staker CLI program</u>
           </a>{" "}
-          that allows for the creation of ${coinName} staking transactions from
+          that allows for the creation of {coinName} staking transactions from
           the CLI.
         </p>
       ),
@@ -98,10 +98,10 @@ export const questions = (coinName: string): Question[] => {
         <p>
           No, this should be avoided. Please do not connect or use a Bitcoin
           wallet holding BRC-20, ARC-20, Runes, or other NFTs or Bitcoin-native
-          assets (other than ${coinName}). They are still in their infancy and
-          in an experimental phase. Software built for the detection of such
-          tokens to avoid their misspending may not work, and you may lose all
-          such tokens.
+          assets (other than {coinName}). They are still in their infancy and in
+          an experimental phase. Software built for the detection of such tokens
+          to avoid their misspending may not work, and you may lose all such
+          tokens.
         </p>
       ),
     },

src/app/components/PersonalBalance/PersonalBalance.tsx

@@ -1,6 +1,7 @@
 import { Card } from "@babylonlabs-io/bbn-core-ui";
 
 import { useRewardsService } from "@/app/hooks/services/useRewardsService";
+import { useAppState } from "@/app/state";
 import { useRewardsState } from "@/app/state/RewardState";
 import { AuthGuard } from "@/components/common/AuthGuard";
 import { getNetworkConfigBBN } from "@/config/network/bbn";
@@ -30,6 +31,7 @@ export function PersonalBalance() {
     closeRewardModal,
   } = useRewardsState();
   const { claimRewards, showPreview } = useRewardsService();
+  const { ordinalsExcluded, hasOrdinals } = useAppState();
 
   const formattedRewardBalance = ubbnToBaby(rewardBalance);
 
@@ -41,6 +43,11 @@ export function PersonalBalance() {
             loading={loading}
             title={`Total ${coinName} Balance`}
             value={`${satoshiToBtc(totalBtcBalance)} ${coinSymbol}`}
+            tooltip={
+              hasOrdinals && ordinalsExcluded
+                ? `You have ${satoshiToBtc(totalBtcBalance - stakableBtcBalance)} ${coinSymbol} that contains inscriptions. To use this in your stakable balance unlock them within the menu.`
+                : undefined
+            }
           />
 
           <div className="divider mx-0 my-2 md:divider-horizontal" />

src/app/state/index.tsx

@@ -42,6 +42,7 @@ export interface AppState {
   isError: boolean;
   isLoading: boolean;
   ordinalsExcluded: boolean;
+  hasOrdinals: boolean;
   includeOrdinals: () => void;
   excludeOrdinals: () => void;
   refetchUTXOs: () => void;
@@ -56,6 +57,7 @@ const { StateProvider, useState: useApplicationState } =
     stakableBtcBalance: 0,
     totalBtcBalance: 0,
     ordinalsExcluded: true,
+    hasOrdinals: false,
     includeOrdinals: () => {},
     excludeOrdinals: () => {},
     refetchUTXOs: () => {},
@@ -150,6 +152,7 @@ export function AppState({ children }: PropsWithChildren) {
       isError,
       isLoading,
       ordinalsExcluded,
+      hasOrdinals: totalBtcBalance > stakableBtcBalance,
       includeOrdinals,
       excludeOrdinals,
       refetchUTXOs,