diff --git a/src/Managing.WebApp/src/components/mollecules/NavBar/NavBar.tsx b/src/Managing.WebApp/src/components/mollecules/NavBar/NavBar.tsx
index 7f0818b7..238844f9 100644
--- a/src/Managing.WebApp/src/components/mollecules/NavBar/NavBar.tsx
+++ b/src/Managing.WebApp/src/components/mollecules/NavBar/NavBar.tsx
@@ -1,10 +1,8 @@
import {useIsFetching, useQuery} from '@tanstack/react-query'
import {usePrivy} from '@privy-io/react-auth'
-import type {ReactNode} from 'react'
import {useState} from 'react'
-import {Link} from 'react-router-dom'
+import {Link, NavLink} 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'
@@ -20,46 +18,51 @@ const navigation = [
{ href: '/admin', name: 'Admin' },
]
-function navItems(isMobile = false) {
- return navigation.map((item) => (
-
- {item.name}
-
- ))
+// Global Loader Component
+const GlobalLoader = () => {
+ const isFetching = useIsFetching()
+ return isFetching ? (
+
+
+ Loading...
+
+ ) : null
}
-function PrimaryNavbar() {
+// Environment Badge Component
+const EnvironmentBadge = ({ environment }: { environment: 'local' | 'sandbox' | 'production' }) => {
+ const badgeColors = {
+ local: 'badge-warning',
+ sandbox: 'badge-info',
+ production: 'badge-success',
+ }
+
+ const badgeLabels = {
+ local: 'Local',
+ sandbox: 'Sandbox',
+ production: 'Production',
+ }
+
return (
-
-
-
-
- {/*
*/}
-
{navItems()}
+
+ {badgeLabels[environment]}
)
}
-const GlobalLoader = () => {
- const isFetching = useIsFetching()
- return isFetching ?
: null
-}
-
-// Custom Privy wallet button component
-const PrivyWalletButton = () => {
+// User Profile Dropdown Component
+const UserProfileDropdown = () => {
const { login, logout, authenticated, user } = usePrivy()
const { apiUrl } = useApiUrlStore()
const { getCookie } = useCookie()
const api = new UserClient({}, apiUrl)
- // Get JWT token from cookies
const jwtToken = getCookie('token')
- // Fetch user information from the API
const { data: userInfo } = useQuery({
queryKey: ['user'],
queryFn: () => api.user_GetCurrentUser(),
- enabled: authenticated && !!jwtToken, // Only fetch when authenticated AND JWT token exists
+ enabled: authenticated && !!jwtToken,
})
if (!authenticated) {
@@ -73,8 +76,7 @@ const PrivyWalletButton = () => {
)
}
- // Display username (agentName) or fallback to wallet address
- const displayName = userInfo?.name || (user?.wallet?.address
+ const displayName = userInfo?.agentName || userInfo?.name || (user?.wallet?.address
? `${user.wallet.address.slice(0, 6)}...${user.wallet.address.slice(-4)}`
: 'Connected')
@@ -83,7 +85,6 @@ const PrivyWalletButton = () => {
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)
}
@@ -91,83 +92,134 @@ const PrivyWalletButton = () => {
return (
-