From 8a618bc98b429d2473159d69c9f1cbc054bf5965 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 12:50:12 +0100
Subject: [PATCH 1/2] [#675] Improve nav wallet UX

- Shorten wallet address to first 6 chars (0x4d68) in nav
- Remove disconnect button from nav bar
- Add DisconnectButton component to profile page next to Human/AI
  Agent badge, shown only on own profile
- Mobile: show compact Connect button / PFP+identifier in top nav
  bar next to hamburger, no longer hidden inside menu
- ConnectWallet now supports compact prop for mobile variant
- Hamburger menu still shows full nav links + wallet info

Fixes realproject7/plotlink#675

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx |  2 +
 src/components/ConnectWallet.tsx   | 79 +++++++++++++++++++++++-------
 src/components/NavBar.tsx          |  5 ++
 3 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index a7ce53cc..dcccc236 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -17,6 +17,7 @@ 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";
 
@@ -241,6 +242,7 @@ function ProfileHeader({
                 </span>
               )
             )}
+            {isOwnProfile && <DisconnectButton />}
           </div>
 
           {/* Bio */}
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index da383540..b1d315f3 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -8,7 +8,13 @@ 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();
@@ -37,8 +43,34 @@ export function ConnectWallet({ onNavigate }: { onNavigate?: () => void } = {})
     });
   }, [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}` : 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 +88,16 @@ export function ConnectWallet({ onNavigate }: { onNavigate?: () => void } = {})
               className="rounded-full"
             />
           )}
-          {profile ? `@${profile.username}` : truncateAddress(address)}
+          {profile ? `@${profile.username}` : shortAddr}
         </Link>
-        {profile && (
-          <span className="text-muted text-[10px] font-mono">
-            {truncateAddress(address)}
-          </span>
-        )}
-        <button
-          onClick={() => disconnect()}
-          className="text-muted hover:text-error transition-colors"
-        >
-          disconnect
-        </button>
+        <span className="text-muted text-[10px] font-mono">
+          {shortAddr}
+        </span>
       </div>
     );
   }
 
-  // Disconnected state: RainbowKit modal (outside Farcaster) or auto-connect (inside)
+  // Disconnected state: RainbowKit modal
   return (
     <ConnectButton.Custom>
       {({ openConnectModal, mounted }) => {
@@ -93,9 +117,13 @@ export function ConnectWallet({ onNavigate }: { onNavigate?: () => void } = {})
             <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>
         );
@@ -103,3 +131,20 @@ export function ConnectWallet({ onNavigate }: { onNavigate?: () => void } = {})
     </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>
+  );
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index d3b0c283..411839a6 100644
--- a/src/components/NavBar.tsx
+++ b/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"

From b1a5b17973244e74a200e046125e0d998f9b4999 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 12:54:13 +0100
Subject: [PATCH 2/2] [#675] Fix duplicate address and long username overflow

- Full nav: only show secondary address span when Farcaster profile
  exists (avoids 0x1234 0x1234 duplication for no-profile users)
- Compact mobile: truncate username to 10 chars with ellipsis to
  prevent overflow next to hamburger icon

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ConnectWallet.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index b1d315f3..50fac566 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -65,7 +65,9 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
               className="rounded-full"
             />
           )}
-          {profile ? `@${profile.username}` : shortAddr}
+          {profile
+            ? `@${profile.username.length > 10 ? profile.username.slice(0, 10) + "…" : profile.username}`
+            : shortAddr}
         </Link>
       );
     }
@@ -90,9 +92,11 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
           )}
           {profile ? `@${profile.username}` : shortAddr}
         </Link>
-        <span className="text-muted text-[10px] font-mono">
-          {shortAddr}
-        </span>
+        {profile && (
+          <span className="text-muted text-[10px] font-mono">
+            {shortAddr}
+          </span>
+        )}
       </div>
     );
   }