update ui

src/Managing.WebApp/src/app/store/accountStore.tsx

@@ -1,6 +1,6 @@
-import { create } from 'zustand'
+import {create} from 'zustand'
 
-import type { AccountStore } from '../../global/type'
+import type {AccountStore} from '../../global/type.tsx'
 
 export const useAuthStore = create<AccountStore>((set) => ({
   accounts: [],

src/Managing.WebApp/src/app/store/apiStore.tsx

@@ -66,8 +66,8 @@ const useApiUrlStore = create<ApiStore>((set) => ({
   workerUrl: initialUrls.workerUrl,
   privyAppId: initialUrls.privyAppId,
   setEnvironment: (env: Environment) => {
-    // Save to cookie with 1 year expiration
-    setCookie(ENV_COOKIE_NAME, env, 365)
+    // Save to cookie with 2 days expiration
+    setCookie(ENV_COOKIE_NAME, env, 2)
 
     const urls = getUrlsForEnvironment(env)
     set({

src/Managing.WebApp/src/components/mollecules/NavBar/NavBar.tsx

@@ -1,4 +1,4 @@
-import {useIsFetching} from '@tanstack/react-query'
+import {useIsFetching, useQuery} from '@tanstack/react-query'
 import {usePrivy} from '@privy-io/react-auth'
 import type {ReactNode} from 'react'
 import {useState} from 'react'
@@ -6,6 +6,7 @@ import {Link} from 'react-router-dom'
 
 import {NavItem} from '..'
 import useApiUrlStore from '../../../app/store/apiStore'
+import {UserClient} from '../../../generated/ManagingApi'
 import Logo from '../../../assets/img/logo.png'
 import {Loader} from '../../atoms'
 
@@ -45,6 +46,15 @@ const GlobalLoader = () => {
 // Custom Privy wallet button component
 const PrivyWalletButton = () => {
   const { login, logout, authenticated, user } = usePrivy()
+  const { apiUrl } = useApiUrlStore()
+  const api = new UserClient({}, apiUrl)
+  
+  // Fetch user information from the API
+  const { data: userInfo } = useQuery({
+    queryKey: ['user'],
+    queryFn: () => api.user_GetCurrentUser(),
+    enabled: authenticated, // Only fetch when authenticated
+  })
   
   if (!authenticated) {
     return (
@@ -57,17 +67,88 @@ const PrivyWalletButton = () => {
     )
   }
   
-  // Display wallet address or user info if authenticated
-  const displayAddress = user?.wallet?.address 
+  // Display username (agentName) or fallback to wallet address
+  const displayName = userInfo?.name || (user?.wallet?.address 
     ? `${user.wallet.address.slice(0, 6)}...${user.wallet.address.slice(-4)}`
-    : 'Connected'
+    : 'Connected')
+  
+  const walletAddress = user?.wallet?.address
+  
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      // You could add a toast notification here if you have a toast system
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err)
+    }
+  }
   
   return (
     <div className="dropdown dropdown-end">
       <label tabIndex={0} className="btn btn-primary btn-sm">
-        {displayAddress}
+        {displayName}
       </label>
       <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+        <li>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              {userInfo?.avatarUrl && (
+                <img 
+                  src={userInfo.avatarUrl} 
+                  alt="User Avatar" 
+                  className="w-6 h-6 rounded-full object-cover"
+                  onError={(e) => {
+                    // Fallback to a default avatar if image fails to load
+                    e.currentTarget.style.display = 'none'
+                  }}
+                />
+              )}
+            
+                          </div>
+              {userInfo?.agentName && (
+                <span className="text-xs opacity-70 font-semibold">
+                  {userInfo.agentName}
+                </span>
+              )}
+            </div>
+        </li>
+        {user?.linkedAccounts && user.linkedAccounts.length > 0 && (
+          <>
+            <li className="text-xs opacity-70 font-semibold">Linked Accounts:</li>
+            {user.linkedAccounts.map((account, index) => (
+              <li key={index} className="text-xs opacity-70">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-2">
+                    <span className="capitalize">{account.type}</span>
+                    {account.type === 'wallet' && account.address && (
+                      <span className="opacity-60">
+                        {account.address.slice(0, 4)}...{account.address.slice(-4)}
+                      </span>
+                    )}
+                    {account.type === 'twitter_oauth' && (
+                      <span className="opacity-60">Twitter Connected</span>
+                    )}
+                    {account.type === 'google_oauth' && (
+                      <span className="opacity-60">Google Connected</span>
+                    )}
+                    {account.type === 'email' && account.address && (
+                      <span className="opacity-60">{account.address}</span>
+                    )}
+                  </div>
+                  {(account.type === 'wallet' && account.address) || (account.type === 'email' && account.address) ? (
+                    <button 
+                      onClick={() => copyToClipboard(account.address)}
+                      className="btn btn-xs btn-ghost"
+                      title="Copy to clipboard"
+                    >
+                      📋
+                    </button>
+                  ) : null}
+                </div>
+              </li>
+            ))}
+          </>
+        )}
         <li><a onClick={logout}>Disconnect</a></li>
       </ul>
     </div>