implement non-btc wallet selection on BABY staking

Author: Jonathan Bursztyn

src/ui/common/components/Wallet/Connect.tsx

@@ -11,6 +11,7 @@ import {
 import { useMemo, useState } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { PiWalletBold } from "react-icons/pi";
+import { useLocation } from "react-router";
 import { Tooltip } from "react-tooltip";
 import { twMerge } from "tailwind-merge";
 
@@ -42,6 +43,10 @@ export const Connect: React.FC<ConnectProps> = ({
     setIsWalletMenuOpen(open);
   };
 
+  const location = useLocation();
+  const isBabyRoute = location.pathname.startsWith("/baby");
+  const requireBothWallets = !isBabyRoute;
+
   // App state and wallet context
   const { includeOrdinals, excludeOrdinals, ordinalsExcluded } = useAppState();
   const { linkedDelegationsVisibility, displayLinkedDelegations } =
@@ -108,14 +113,26 @@ export const Connect: React.FC<ConnectProps> = ({
     apiMessage,
     isLoading: isHealthcheckLoading,
   } = useHealthCheck();
+
   const isConnected = useMemo(
     () =>
-      btcConnected && bbnConnected && !isGeoBlocked && !isHealthcheckLoading,
-    [btcConnected, bbnConnected, isGeoBlocked, isHealthcheckLoading],
+      (requireBothWallets ? btcConnected && bbnConnected : bbnConnected) &&
+      !isGeoBlocked &&
+      !isHealthcheckLoading,
+    [
+      requireBothWallets,
+      btcConnected,
+      bbnConnected,
+      isGeoBlocked,
+      isHealthcheckLoading,
+    ],
   );
 
   const isLoading =
-    isConnected || !isApiNormal || loading || btcLoading || bbnLoading;
+    isConnected ||
+    !isApiNormal ||
+    loading ||
+    (requireBothWallets ? btcLoading || bbnLoading : bbnLoading);
 
   const transformedWallets = useMemo(() => {
     const result: Record<string, { name: string; icon: string }> = {};
@@ -174,16 +191,18 @@ export const Connect: React.FC<ConnectProps> = ({
         trigger={
           <div className="cursor-pointer">
             <AvatarGroup max={2} variant="circular">
-              <Avatar
-                alt={selectedWallets["BTC"]?.name}
-                url={selectedWallets["BTC"]?.icon}
-                size="large"
-                className={twMerge(
-                  "object-contain bg-accent-contrast box-content",
-                  isWalletMenuOpen &&
-                    "outline outline-[2px] outline-accent-primary",
-                )}
-              />
+              {selectedWallets["BTC"] ? (
+                <Avatar
+                  alt={selectedWallets["BTC"]?.name}
+                  url={selectedWallets["BTC"]?.icon}
+                  size="large"
+                  className={twMerge(
+                    "object-contain bg-accent-contrast box-content",
+                    isWalletMenuOpen &&
+                      "outline outline-[2px] outline-accent-primary",
+                  )}
+                />
+              ) : null}
               <Avatar
                 alt={selectedWallets["BBN"]?.name}
                 url={selectedWallets["BBN"]?.icon}

src/ui/common/context/wallet/BTCWalletProvider.tsx

@@ -196,8 +196,9 @@ export const BTCWalletProvider = ({ children }: PropsWithChildren) => {
   );
 
   useEffect(() => {
-    if (!btcConnector) return;
+    // Ensure loading is cleared even when BTC connector is not configured
     setLoading(false);
+    if (!btcConnector) return;
     if (btcConnector.connectedWallet) {
       connectBTC(btcConnector?.connectedWallet.provider);
     }

src/ui/common/context/wallet/WalletConnectionProvider.tsx

@@ -5,6 +5,7 @@ import {
 } from "@babylonlabs-io/wallet-connector";
 import { useTheme } from "next-themes";
 import { useCallback, type PropsWithChildren } from "react";
+import { useLocation } from "react-router";
 
 import { logTermsAcceptance } from "@/ui/common/api/logTermAcceptance";
 import { verifyBTCAddress } from "@/ui/common/api/verifyBTCAddress";
@@ -29,7 +30,7 @@ const config: ChainConfigArr = [
     connectors: [
       {
         id: "tomo-btc-connector",
-        widget: ({ onError }) => (
+        widget: ({ onError }: { onError?: (e: Error) => void }) => (
           <ExternalWallets chainName="bitcoin" onError={onError} />
         ),
       },
@@ -41,7 +42,7 @@ const config: ChainConfigArr = [
     connectors: [
       {
         id: "tomo-bbn-connector",
-        widget: ({ onError }) => (
+        widget: ({ onError }: { onError?: (e: Error) => void }) => (
           <ExternalWallets chainName="cosmos" onError={onError} />
         ),
       },
@@ -54,6 +55,7 @@ export const WalletConnectionProvider = ({ children }: PropsWithChildren) => {
   const { handleError } = useError();
   const { theme } = useTheme();
   const logger = useLogger();
+  const location = useLocation();
 
   const onError = useCallback(
     (error: Error) => {
@@ -74,6 +76,10 @@ export const WalletConnectionProvider = ({ children }: PropsWithChildren) => {
     [handleError, logger],
   );
 
+  const requiredChains = (
+    location.pathname.startsWith("/baby") ? ["BBN"] : ["BTC", "BBN"]
+  ) as ("BTC" | "BBN")[];
+
   return (
     <WalletProvider
       persistent
@@ -83,6 +89,7 @@ export const WalletConnectionProvider = ({ children }: PropsWithChildren) => {
       context={context}
       onError={onError}
       disabledWallets={FeatureFlagService.IsLedgerEnabled ? [] : ["ledget_btc"]}
+      requiredChains={requiredChains}
     >
       {children}
     </WalletProvider>

src/ui/common/hooks/useAuthGuard.ts

@@ -5,8 +5,7 @@ import {
 
 export function useAuthGuard() {
   const { connected } = useWalletConnect();
-  const btc = useChainConnector("BTC");
   const baby = useChainConnector("BBN");
 
-  return { connected, loading: !btc || !baby };
+  return { connected, loading: !baby };
 }