diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b0c3f22..93507b5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import "./globals.css"; import { Providers } from "@/components/providers"; import { Sidebar } from "@/components/ui/sidebar"; import { Toaster } from "@/components/ui/toaster"; +import { WalletButton } from "@/components/ui/wallet-button"; const inter = Inter({ subsets: ["latin"] }); @@ -21,7 +22,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
-
{children}
+
+
+ +
+ {children} +
diff --git a/src/components/ui/wallet-button.tsx b/src/components/ui/wallet-button.tsx new file mode 100644 index 0000000..28b634a --- /dev/null +++ b/src/components/ui/wallet-button.tsx @@ -0,0 +1,135 @@ +"use client"; + +import { useState } from "react"; +import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; +import { Copy, Check, ExternalLink, LogOut, Loader2, Wallet } from "lucide-react"; +import clsx from "clsx"; +import { twMerge } from "tailwind-merge"; +import { useWallet } from "@/hooks/use-wallet"; + +function shortenAddress(address: string): string { + if (!address || address.length < 8) return address; + return `${address.slice(0, 4)}...${address.slice(-4)}`; +} + +export function WalletButton() { + const { address, isConnecting, error, connect, disconnect } = useWallet(); + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + if (!address) return; + try { + await navigator.clipboard.writeText(address); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { + // clipboard not available + } + }; + + // Disconnected state + if (!address && !isConnecting) { + return ( +
+ {error && ( + + {error} + + )} + +
+ ); + } + + // Connecting state + if (isConnecting) { + return ( + + ); + } + + // Connected state with dropdown + return ( + + + + + + + +
+
+

Connected Account

+

+ {address} +

+
+ +
+ + + + + + View on Stellar Explorer + + + + + +
+
+
+ ); +}