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
+
+
+
+
+
+
+
+
+ );
+}