diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx index 22bae4f2..7a0bde81 100644 --- a/src/components/TopNav.tsx +++ b/src/components/TopNav.tsx @@ -1,5 +1,5 @@ import { useState, type ComponentType } from 'react'; -import { Link, NavLink, useNavigate } from 'react-router-dom'; +import { Link, NavLink } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Activity, @@ -22,8 +22,11 @@ import { LoginArea } from '@/components/auth/LoginArea'; import { LogoIcon } from '@/components/icons/LogoIcon'; import { Sheet, SheetContent } from '@/components/ui/sheet'; import { useAppContext } from '@/hooks/useAppContext'; +import { useBtcPrice } from '@/hooks/useBtcPrice'; import { useCurrentUser } from '@/hooks/useCurrentUser'; import { useFeedSettings } from '@/hooks/useFeedSettings'; +import { useHdWallet } from '@/hooks/useHdWallet'; +import { satsToUSD } from '@/lib/bitcoin'; import { cn } from '@/lib/utils'; interface NavItem { @@ -58,9 +61,6 @@ export function TopNav() { const { user } = useCurrentUser(); const { orderedItems } = useFeedSettings(); const [mobileOpen, setMobileOpen] = useState(false); - const navigate = useNavigate(); - - const goToSearch = () => navigate('/search'); return (
@@ -113,17 +113,11 @@ export function TopNav() { {/* Right cluster */}
- {/* Search — navigates to the /search page. Visible on all - breakpoints so users can always reach search from the chrome. */} - + {/* Wallet balance in USD — links to /wallet. Replaces the search + entry point in the chrome; mobile users still reach search via + the hamburger menu. Hidden until the HD wallet is available and + the BTC price has loaded. */} + {/* LoginArea handles both logged-in (account avatar dropdown) and logged-out (Log in / Sign up) states. We render it inline-flex @@ -180,6 +174,34 @@ export function TopNav() { ); } +/** + * Compact USD balance pill in the top-nav right cluster, replacing the + * previous search icon. Reads the HD-wallet sats balance via {@link useHdWallet} + * and converts to USD via {@link useBtcPrice}. Renders nothing when the wallet + * isn't available (logged out, extension/bunker login, still loading, or no + * price yet) so the chrome stays quiet rather than flashing placeholder text. + */ +function WalletBalancePill() { + const { t } = useTranslation(); + const { availability, totalBalance, isLoading, error } = useHdWallet(); + const { data: btcPrice } = useBtcPrice(); + + if (availability.status !== 'available') return null; + if (isLoading || error || !btcPrice) return null; + + return ( + + + {satsToUSD(totalBalance, btcPrice)} + + ); +} + function NavLinkButton({ item }: { item: NavItem }) { const { t } = useTranslation(); return (