-
-
{session.walletName}
-
{shortenPublicKey(session.publicKey)}
+
+ {/* Wallet chip — shows wallet name, network, and shortened key */}
+
+ {session.walletName}
+
+ {networkLabel}
+
+
+ {shortenPublicKey(session.publicKey)}
+
- {session.mocked ? (
-
- Mocked wallet session is active while adapter integrations are in
- progress.
-
- ) : null}
-
{renderContent()}
-
diff --git a/frontend/components/wallet/WalletButton.tsx b/frontend/components/wallet/WalletButton.tsx
new file mode 100644
index 0000000..49d13bc
--- /dev/null
+++ b/frontend/components/wallet/WalletButton.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+/**
+ * components/wallet/WalletButton.tsx
+ *
+ * Top-level connect/disconnect control for the Navbar.
+ *
+ * - Disconnected: shows "Connect Wallet" button → opens WalletModal.
+ * - Connecting: shows a loading chip.
+ * - Connected: shows a compact wallet chip (wallet name + network + short key).
+ * Clicking opens a small dropdown with:
+ * - Full public key with "Copy" button
+ * - "Disconnect" button
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import { useWallet } from "@/context/wallet-context";
+import {
+ formatNetwork,
+ shortenPublicKey,
+ isExpectedNetwork,
+} from "@/lib/wallet";
+import { WalletModal } from "./WalletModal";
+
+export function WalletButton() {
+ const { status, session, disconnect, isHydrated } = useWallet();
+ const [modalOpen, setModalOpen] = useState(false);
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [copied, setCopied] = useState(false);
+ const dropdownRef = useRef
(null);
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ function handleClickOutside(e: MouseEvent) {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(e.target as Node)
+ ) {
+ setDropdownOpen(false);
+ }
+ }
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+
+
+ const handleCopy = async () => {
+ if (!session?.publicKey) return;
+ try {
+ await navigator.clipboard.writeText(session.publicKey);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch {
+ // Clipboard API may be blocked in some environments
+ }
+ };
+
+ const handleDisconnect = () => {
+ setDropdownOpen(false);
+ setModalOpen(false);
+ disconnect();
+ };
+
+ // Don't render anything until client-side hydration is complete to avoid
+ // localStorage mismatch flicker.
+ if (!isHydrated) {
+ return (
+
+ );
+ }
+
+ if (status === "connected" && session) {
+ // const networkLabel = formatNetwork(session.network);
+ const networkOk = isExpectedNetwork(session.network);
+
+ return (
+
+
+
+ {dropdownOpen && (
+
+
+
+ {session.publicKey.slice(0, 20)}…
+
+
+
+
+ {!networkOk && (
+
+ ⚠ Network mismatch — app expects{" "}
+ {process.env.NEXT_PUBLIC_STELLAR_NETWORK === "MAINNET"
+ ? "Mainnet"
+ : "Testnet"}
+ .
+
+ )}
+
+
+
+ )}
+
+
+ Connecting…
+
+ );
+ }
+
+ return (
+ <>
+
+
+ {modalOpen && (
+ setModalOpen(false)} />
+ )}
+
+ );
+}
diff --git a/frontend/components/wallet/WalletModal.tsx b/frontend/components/wallet/WalletModal.tsx
new file mode 100644
index 0000000..443ad18
--- /dev/null
+++ b/frontend/components/wallet/WalletModal.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+/**
+ * components/wallet/WalletModal.tsx
+ *
+ * Wallet selection modal. Shows three wallet cards (Freighter, Albedo, xBull)
+ * and handles all connecting states and error display.
+ *
+ * - Freighter: shows "Install Freighter" link when extension is absent.
+ * - Albedo: note that a popup window will open.
+ * - xBull: note for mobile / extension users.
+ * - Dismiss via Escape key or backdrop click.
+ */
+
+import React, { useEffect, useCallback } from "react";
+import { type WalletId } from "@/lib/wallet";
+import { useWallet } from "@/context/wallet-context";
+
+import { isConnected } from "@stellar/freighter-api";
+
+interface WalletModalProps {
+ onClose: () => void;
+}
+
+const WALLET_NOTES: Partial> = {};
+
+export function WalletModal({ onClose }: WalletModalProps) {
+ const { wallets, status, selectedWalletId, errorMessage, connect, clearError } =
+ useWallet();
+
+ const isConnecting = status === "connecting";
+ const [freighterInstalled, setFreighterInstalled] = React.useState(true);
+
+ // The Freighter extension injects itself asynchronously.
+ // We need to poll briefly after mount to reliably detect it.
+ useEffect(() => {
+ let attempts = 0;
+ const interval = setInterval(async () => {
+ const res = await isConnected();
+ if (res.isConnected) {
+ setFreighterInstalled(true);
+ clearInterval(interval);
+ } else {
+ attempts++;
+ if (attempts >= 10) {
+ setFreighterInstalled(false);
+ clearInterval(interval);
+ }
+ }
+ }, 100);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ // Close on Escape
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === "Escape" && !isConnecting) {
+ onClose();
+ }
+ },
+ [isConnecting, onClose],
+ );
+
+ useEffect(() => {
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [handleKeyDown]);
+
+ // Prevent body scroll while modal is open
+ useEffect(() => {
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, []);
+
+ const handleConnect = async (walletId: WalletId) => {
+ clearError();
+ await connect(walletId);
+ };
+
+ const handleBackdropClick = (e: React.MouseEvent) => {
+ if (e.target === e.currentTarget && !isConnecting) {
+ onClose();
+ }
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
FlowFi
+
Connect a wallet
+
+ Choose your Stellar wallet. Your session is stored locally so you
+ stay signed in after refresh.
+
+
+
+
+
+ {/* Error banner */}
+ {errorMessage && (
+
+ {errorMessage}
+
+
+ )}
+
+ {/* Wallet cards */}
+
+ {wallets.map((wallet, index) => {
+ const isActiveWallet = selectedWalletId === wallet.id;
+ const isConnectingThis = isConnecting && isActiveWallet;
+ const isFreighter = wallet.id === "freighter";
+ const notInstalled = isFreighter && !freighterInstalled;
+ const note = WALLET_NOTES[wallet.id];
+
+ return (
+
+
+ {wallet.name}
+ {wallet.badge}
+
+ {wallet.description}
+ {note && !notInstalled && (
+ {note}
+ )}
+
+ {notInstalled ? (
+
+ Install Freighter →
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+
+
+ {isConnecting
+ ? "Waiting for wallet approval…"
+ : "Freighter"}
+
+
+