diff --git a/src/components/common/overall-layout/layout.tsx b/src/components/common/overall-layout/layout.tsx index 914bd2f..6974f13 100644 --- a/src/components/common/overall-layout/layout.tsx +++ b/src/components/common/overall-layout/layout.tsx @@ -8,12 +8,14 @@ import { api } from "@/utils/api"; import useUser from "@/hooks/useUser"; import { useUserStore } from "@/lib/zustand/user"; import useAppWallet from "@/hooks/useAppWallet"; +import useMultisigWallet from "@/hooks/useMultisigWallet"; import SessionProvider from "@/components/SessionProvider"; import { getServerSession } from "next-auth"; -// import MenuWallets from "@/components/common/overall-layout/menus/wallets"; +import MenuWallets from "@/components/common/overall-layout/menus/wallets"; import MenuWallet from "@/components/common/overall-layout/menus/multisig-wallet"; +import WalletSelector from "@/components/common/overall-layout/wallet-selector"; import { WalletDataLoaderWrapper, DialogReportWrapper, @@ -69,6 +71,7 @@ export default function RootLayout({ const { user, isLoading } = useUser(); const router = useRouter(); const { appWallet } = useAppWallet(); + const { multisigWallet } = useMultisigWallet(); const { generateNsec } = useNostrChat(); const userAddress = useUserStore((state) => state.userAddress); @@ -164,6 +167,43 @@ export default function RootLayout({ const walletPageNames = walletPageRoute ? walletPageRoute.split("/") : []; const pageIsPublic = publicRoutes.includes(router.pathname); const isLoggedIn = !!user; + const isHomepage = router.pathname === "/"; + + // Keep track of the last visited wallet to show wallet menu even on other pages + const [lastVisitedWalletId, setLastVisitedWalletId] = React.useState(null); + const [lastVisitedWalletName, setLastVisitedWalletName] = React.useState(null); + const [lastWalletStakingEnabled, setLastWalletStakingEnabled] = React.useState(null); + + React.useEffect(() => { + const walletId = router.query.wallet as string | undefined; + if (walletId && isWalletPath && appWallet && multisigWallet) { + setLastVisitedWalletId(walletId); + setLastVisitedWalletName(appWallet.name); + // Check if staking is enabled for this wallet + try { + const stakingEnabled = multisigWallet.stakingEnabled(); + setLastWalletStakingEnabled(stakingEnabled); + } catch (error) { + // Don't update state on error - keep the last known value + console.error("Error checking staking status:", error); + } + } + }, [router.query.wallet, isWalletPath, appWallet, multisigWallet]); + + const clearWalletContext = React.useCallback(() => { + setLastVisitedWalletId(null); + setLastVisitedWalletName(null); + setLastWalletStakingEnabled(null); + }, []); + + // Clear wallet context when navigating to homepage + React.useEffect(() => { + if (isHomepage && lastVisitedWalletId) { + clearWalletContext(); + } + }, [isHomepage, lastVisitedWalletId, clearWalletContext]); + + const showWalletMenu = isLoggedIn && (isWalletPath || !!lastVisitedWalletId); return (
@@ -175,11 +215,21 @@ export default function RootLayout({ data-header="main" >
- {/* Mobile menu button - only in wallet context */} - {isWalletPath && } + {/* Mobile menu button - hidden only on public homepage (not logged in) */} + {(isLoggedIn || !isHomepage) && ( + + )} {/* Logo - in fixed-width container matching sidebar width */} -
+
{/* Content area with sidebar + main */} -
- {/* Sidebar for larger screens - only in wallet context */} - {isWalletPath && ( +
+ {/* Sidebar for larger screens - hidden only on public homepage (not logged in) */} + {(isLoggedIn || !isHomepage) && (
+
); } diff --git a/src/components/common/overall-layout/wallet-selector.tsx b/src/components/common/overall-layout/wallet-selector.tsx new file mode 100644 index 0000000..2d110f4 --- /dev/null +++ b/src/components/common/overall-layout/wallet-selector.tsx @@ -0,0 +1,114 @@ +import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; +import { ChevronDown, ChevronUp, Wallet2, Plus, House } from "lucide-react"; +import useUserWallets from "@/hooks/useUserWallets"; +import useAppWallet from "@/hooks/useAppWallet"; +import WalletNavLink from "@/components/common/overall-layout/wallet-nav-link"; +import MenuLink from "@/components/common/overall-layout/menus/menu-link"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +interface WalletSelectorProps { + fallbackWalletName?: string | null; + onClearWallet?: () => void; +} + +export default function WalletSelector({ fallbackWalletName, onClearWallet }: WalletSelectorProps = {}) { + const router = useRouter(); + const { wallets } = useUserWallets(); + const { appWallet } = useAppWallet(); + const [open, setOpen] = useState(false); + + const displayName = appWallet?.name || fallbackWalletName || "Select Wallet"; + + const handleHomeClick = () => { + if (onClearWallet) { + onClearWallet(); + } + void router.push("/"); + }; + + // Close dropdown on route change + useEffect(() => { + const handleRouteChange = () => { + setOpen(false); + }; + router.events.on("routeChangeStart", handleRouteChange); + return () => { + router.events.off("routeChangeStart", handleRouteChange); + }; + }, [router.events]); + + if (!wallets) return null; + + return ( +
+
+ {/* Wallet Selector */} +
+ + + + + + {wallets + .filter((wallet) => !wallet.isArchived) + .sort((a, b) => a.name.localeCompare(b.name)) + .map((wallet) => ( + + + + ))} + + + + + + +
+ + {/* Home Link */} +
+ +
+
+
+ ); +} diff --git a/src/components/pages/homepage/index.tsx b/src/components/pages/homepage/index.tsx index e9ebfda..307178f 100644 --- a/src/components/pages/homepage/index.tsx +++ b/src/components/pages/homepage/index.tsx @@ -462,6 +462,12 @@ export function PageHomepage() {

+ + Resources + void; + stakingEnabled?: boolean; + isWalletPath?: boolean; } -export function MobileNavigation({ isWalletPath }: MobileNavigationProps) { +export function MobileNavigation({ showWalletMenu, isLoggedIn, walletId, fallbackWalletName, onClearWallet, stakingEnabled, isWalletPath }: MobileNavigationProps) { + const router = useRouter(); const [open, setOpen] = useState(false); - const { user } = useUser(); return ( <> @@ -116,11 +125,51 @@ export function MobileNavigation({ isWalletPath }: MobileNavigationProps) {