diff --git a/src/components/wallet/WalletButton.tsx b/src/components/wallet/WalletButton.tsx
new file mode 100644
index 0000000..b09d6b9
--- /dev/null
+++ b/src/components/wallet/WalletButton.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useRef, useState } from "react";
+import {
+ AlertCircle,
+ ChevronDown,
+ Copy,
+ ExternalLink,
+ Loader2,
+ Wallet,
+ X,
+} from "lucide-react";
+import { useWallet } from "../../context/WalletContext";
+
+const FREIGHTER_INSTALL_URL = "https://www.freighter.app";
+
+export function WalletButton() {
+ const {
+ address,
+ isLoading,
+ error,
+ isFreighterInstalled,
+ connect,
+ disconnect,
+ shortenAddress,
+ } = useWallet();
+
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [errorVisible, setErrorVisible] = useState(false);
+ const [copied, setCopied] = useState(false);
+ const dropdownRef = useRef
(null);
+ const errorTimerRef = useRef | null>(null);
+
+ // Close dropdown on outside click.
+ useEffect(() => {
+ function onOutsideClick(e: MouseEvent) {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(e.target as Node)
+ ) {
+ setDropdownOpen(false);
+ }
+ }
+ document.addEventListener("mousedown", onOutsideClick);
+ return () => document.removeEventListener("mousedown", onOutsideClick);
+ }, []);
+
+ // Show error popup for 6 seconds then auto-dismiss.
+ useEffect(() => {
+ if (error) {
+ setErrorVisible(true);
+ if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
+ errorTimerRef.current = setTimeout(() => setErrorVisible(false), 6000);
+ }
+ return () => {
+ if (errorTimerRef.current) clearTimeout(errorTimerRef.current);
+ };
+ }, [error]);
+
+ function copyAddress() {
+ if (!address) return;
+ navigator.clipboard.writeText(address).then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ });
+ }
+
+ // ── Connected state ──────────────────────────────────────────────────────────
+ if (address) {
+ return (
+
+
+
+ {dropdownOpen && (
+
+ {/* Address block */}
+
+
+ Connected wallet
+
+
+ {address}
+
+
+
+ {/* Actions */}
+
+
+
+
+ View on explorer
+
+
+
+
+
+
+ )}
+
+
+
+ {/* Error popup */}
+ {errorVisible && error && (
+
+
+
+
+
+ {isFreighterInstalled === false
+ ? "Freighter not installed"
+ : "Connection failed"}
+
+
{error}
+ {isFreighterInstalled === false && (
+
+ Install Freighter
+
+
+ )}
+
+
+
+
+ )}
+
+
{address ?? "none"}
+
{isLoading ? "loading" : "idle"}
+
{error ?? "no-error"}
+
+ {isFreighterInstalled === null
+ ? "unknown"
+ : isFreighterInstalled
+ ? "yes"
+ : "no"}
+
+
+
+