[#675] Improve nav wallet UX

src/app/profile/[address]/page.tsx

@@ -6,17 +6,18 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { formatUnits, type Address } from "viem";
 import Link from "next/link";
 import { supabase, type Storyline, type Donation, type TradeHistory, type User } from "../../../../lib/supabase";
 import { STORY_FACTORY, RESERVE_LABEL, EXPLORER_URL, MCV2_BOND, PLOT_TOKEN } from "../../../../lib/contracts/constants";
 import { getFullUserProfile } from "../../../../lib/actions";
 import { truncateAddress } from "../../../../lib/utils";
 import { formatPrice } from "../../../../lib/format";
 import { getTokenPrice, mcv2BondAbi, erc20Abi, type TokenPriceInfo } from "../../../../lib/price";
 import { browserClient } from "../../../../lib/rpc";
 import type { FarcasterProfile } from "../../../../lib/farcaster";
 import type { AgentMetadata } from "../../../../lib/contracts/erc8004";
 import { usePlotUsdPrice } from "../../../hooks/usePlotUsdPrice";
 import { formatUsdValue } from "../../../../lib/usd-price";
+import { DisconnectButton } from "../../../components/ConnectWallet";
 
 type Tab = "stories" | "portfolio" | "activity";
 
@@ -109,7 +110,7 @@
       if (r <= 0) clearInterval(interval);
     }, 1000);
     return () => clearInterval(interval);
   }, [dbUser?.steemhunt_fetched_at]);
 
   const onCooldown = cooldownRemaining > 0;
 
@@ -241,6 +242,7 @@
                 </span>
               )
             )}
+            {isOwnProfile && <DisconnectButton />}
           </div>
 
           {/* Bio */}

src/components/ConnectWallet.tsx

@@ -5,13 +5,19 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import Link from "next/link";
 import { isFarcasterMiniApp } from "../../lib/farcaster-detect";
 import { truncateAddress } from "../../lib/utils";
 import { useConnectedIdentity } from "../hooks/useConnectedIdentity";
 
-export function ConnectWallet({ onNavigate }: { onNavigate?: () => void } = {}) {
+interface ConnectWalletProps {
+  onNavigate?: () => void;
+  /** Compact mode for mobile top nav — shows only PFP + short ID */
+  compact?: boolean;
+}
+
+export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {}) {
   const { address, isConnected } = useAccount();
   const { connect, connectors } = useConnect();
   const { disconnect } = useDisconnect();
   const autoConnectAttempted = useRef(false);
   const [inMiniApp, setInMiniApp] = useState(false);
   const { profile } = useConnectedIdentity();
@@ -37,8 +43,36 @@
     });
   }, [inMiniApp, connectors, connect, isConnected]);
 
-  // Connected state: show Farcaster PFP + username + address + disconnect
+  // Connected state
   if (isConnected && address) {
+    const shortAddr = address.slice(0, 6);
+
+    // Compact mode: PFP + short identifier for mobile top nav
+    if (compact) {
+      return (
+        <Link
+          href={`/profile/${address}`}
+          onClick={onNavigate}
+          className="text-accent inline-flex items-center gap-1 text-xs font-medium hover:opacity-80 transition-opacity"
+        >
+          {profile?.pfpUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={profile.pfpUrl}
+              alt=""
+              width={16}
+              height={16}
+              className="rounded-full"
+            />
+          )}
+          {profile
+            ? `@${profile.username.length > 10 ? profile.username.slice(0, 10) + "…" : profile.username}`
+            : shortAddr}
+        </Link>
+      );
+    }
+
+    // Full mode: PFP + username + shortened address (no disconnect)
     return (
       <div className="border-border flex items-center gap-3 rounded border px-3 py-2 text-sm">
         <Link
@@ -56,24 +90,18 @@
               className="rounded-full"
             />
           )}
-          {profile ? `@${profile.username}` : truncateAddress(address)}
+          {profile ? `@${profile.username}` : shortAddr}
         </Link>
         {profile && (
           <span className="text-muted text-[10px] font-mono">
-            {truncateAddress(address)}
+            {shortAddr}
           </span>
         )}
-        <button
-          onClick={() => disconnect()}
-          className="text-muted hover:text-error transition-colors"
-        >
-          disconnect
-        </button>
       </div>
     );
   }
 
-  // Disconnected state: RainbowKit modal (outside Farcaster) or auto-connect (inside)
+  // Disconnected state: RainbowKit modal
   return (
     <ConnectButton.Custom>
       {({ openConnectModal, mounted }) => {
@@ -93,13 +121,34 @@
             <button
               onClick={openConnectModal}
               type="button"
-              className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+              className={
+                compact
+                  ? "border-accent text-accent hover:bg-accent hover:text-background rounded border px-2.5 py-1 text-xs transition-colors"
+                  : "border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+              }
             >
-              connect wallet
+              {compact ? "Connect" : "connect wallet"}
             </button>
           </div>
         );
       }}
     </ConnectButton.Custom>
   );
 }
+
+/**
+ * Disconnect button for use on the profile page.
+ * Only renders when the viewer is viewing their own profile.
+ */
+export function DisconnectButton() {
+  const { disconnect } = useDisconnect();
+
+  return (
+    <button
+      onClick={() => disconnect()}
+      className="text-muted hover:text-error border-border rounded border px-2 py-0.5 text-[10px] transition-colors"
+    >
+      disconnect
+    </button>
+  );
+}

src/components/NavBar.tsx

@@ -60,9 +60,14 @@ export function NavBar() {
 
         {/* Right side: wallet + mobile toggle */}
         <div className="flex items-center gap-2">
+          {/* Desktop: full ConnectWallet */}
           <div className="hidden md:block">
             <ConnectWallet />
           </div>
+          {/* Mobile: compact Connect button / PFP in top nav */}
+          <div className="md:hidden">
+            <ConnectWallet compact />
+          </div>
           <button
             onClick={() => setMobileOpen(!mobileOpen)}
             className="text-muted hover:text-foreground p-1 transition-colors md:hidden"