Merge branch 'develop' into core-node/fix/upgrade_test

apps/wallet-dashboard/app/dashboard/assets/layout.tsx → apps/wallet-dashboard/app/(protected)/assets/layout.tsx

@@ -3,12 +3,13 @@
 'use client';
 
 import { RouteLink } from '@/components/index';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
 import React, { type PropsWithChildren } from 'react';
 
 function AssetsLayout({ children }: PropsWithChildren): JSX.Element {
     const routes = [
-        { title: 'Visual Assets', path: '/dashboard/assets/visual-assets' },
-        { title: 'Everything Else', path: '/dashboard/assets/everything-else' },
+        { title: 'Visual Assets', path: ASSETS_ROUTE.path + '/visual-assets' },
+        { title: 'Everything Else', path: ASSETS_ROUTE.path + '/everything-else' },
     ];
 
     return (

apps/wallet-dashboard/app/dashboard/assets/visual-assets/[objectId]/page.tsx → apps/wallet-dashboard/app/(protected)/assets/visual-assets/[objectId]/page.tsx

@@ -9,6 +9,7 @@ import { AssetCard, Button, RouteLink, SendAssetPopup } from '@/components';
 import { isAssetTransferable, useGetObject } from '@iota/core';
 import { usePopups } from '@/hooks';
 import { useCurrentAccount } from '@iota/dapp-kit';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
 
 const VisualAssetDetailPage = () => {
     const params = useParams();
@@ -28,7 +29,7 @@ const VisualAssetDetailPage = () => {
 
     return (
         <div className="flex h-full w-full flex-col space-y-4 px-40">
-            <RouteLink path="/dashboard/assets/visual-assets" title="Back" />
+            <RouteLink path={ASSETS_ROUTE.path + '/visual-assets'} title="Back" />
             {asset?.data ? (
                 <AssetCard key={asset.data.objectId} asset={asset.data} />
             ) : (

apps/wallet-dashboard/app/dashboard/assets/visual-assets/page.tsx → apps/wallet-dashboard/app/(protected)/assets/visual-assets/page.tsx

@@ -9,6 +9,7 @@ import { AssetCard, VirtualList } from '@/components/index';
 import { useCurrentAccount } from '@iota/dapp-kit';
 import { hasDisplayData, useGetOwnedObjects } from '@iota/core';
 import { useRouter } from 'next/navigation';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
 
 function VisualAssetsPage(): JSX.Element {
     const account = useCurrentAccount();
@@ -29,7 +30,7 @@ function VisualAssetsPage(): JSX.Element {
     const virtualItem = (asset: IotaObjectData): JSX.Element => <AssetCard asset={asset} />;
 
     const handleClick = (objectId: string) => {
-        router.push(`/dashboard/assets/visual-assets/${objectId}`);
+        router.push(ASSETS_ROUTE.path + `/visual-assets/${objectId}`);
     };
 
     return (

apps/wallet-dashboard/app/(protected)/components/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './sidebar/Sidebar';

apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PROTECTED_ROUTES } from '@/lib/constants/routes.constants';
+import { IotaLogoMark } from '@iota/ui-icons';
+import { SidebarItem } from './SidebarItem';
+
+export function Sidebar() {
+    return (
+        <nav className="flex h-screen flex-col items-center gap-y-2xl bg-neutral-100 py-xl dark:bg-neutral-6">
+            <IotaLogoMark className="h-10 w-10 text-neutral-10 dark:text-neutral-92" />
+            <div className="flex flex-col gap-y-xs">
+                {PROTECTED_ROUTES.map((route) => (
+                    <SidebarItem key={route.path} {...route} />
+                ))}
+            </div>
+        </nav>
+    );
+}

apps/wallet-dashboard/app/(protected)/components/sidebar/SidebarItem.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import type { ProtectedRoute } from '@/lib/interfaces';
+import { NavbarItem, Tooltip, TooltipPosition } from '@iota/apps-ui-kit';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+export function SidebarItem({ icon, title, path }: ProtectedRoute) {
+    const pathname = usePathname();
+    const RouteIcon = icon;
+    const isActive = pathname === path;
+    return (
+        <Tooltip text={title} position={TooltipPosition.Right}>
+            <Link href={path} className="relative px-sm py-xxs">
+                <NavbarItem isSelected={isActive} icon={<RouteIcon />} />
+            </Link>
+        </Tooltip>
+    );
+}

apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Badge, BadgeType, Button, ButtonType } from '@iota/apps-ui-kit';
+import { ConnectButton } from '@iota/dapp-kit';
+import { Settings } from '@iota/ui-icons';
+
+export function TopNav() {
+    return (
+        <div className="flex w-full flex-row items-center justify-end gap-md py-xs--rs">
+            <Badge label="Mainnet" type={BadgeType.PrimarySoft} />
+            <ConnectButton size="md" />
+            <Button icon={<Settings />} type={ButtonType.Ghost} />
+        </div>
+    );
+}

apps/wallet-dashboard/app/dashboard/home/page.tsx → apps/wallet-dashboard/app/(protected)/home/page.tsx

@@ -16,7 +16,7 @@ function HomeDashboardPage(): JSX.Element {
     };
 
     return (
-        <main className="flex min-h-screen flex-col items-center space-y-8 p-24">
+        <main className="flex flex-1 flex-col items-center space-y-8 p-24">
             <p>Connection status: {connectionStatus}</p>
             {connectionStatus === 'connected' && account && (
                 <div className="flex flex-col items-center justify-center space-y-2">

apps/wallet-dashboard/app/(protected)/layout.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+
+import { Notifications } from '@/components/index';
+import React, { useEffect, useState, type PropsWithChildren } from 'react';
+import { useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit';
+import { Button } from '@iota/apps-ui-kit';
+import { redirect } from 'next/navigation';
+import { Sidebar } from './components';
+import { TopNav } from './components/top-nav/TopNav';
+
+function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+    const { connectionStatus } = useCurrentWallet();
+    const account = useCurrentAccount();
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+    };
+
+    useEffect(() => {
+        if (connectionStatus !== 'connected' && !account) {
+            redirect('/');
+        }
+    }, [connectionStatus, account]);
+
+    return (
+        <div className="h-full">
+            <div className="fixed left-0 top-0 z-50 h-full">
+                <Sidebar />
+            </div>
+
+            <div className="container relative min-h-screen">
+                <div className="sticky top-0">
+                    <TopNav />
+                </div>
+                <div>{children}</div>
+            </div>
+
+            <div className="fixed bottom-5 right-5">
+                <Button onClick={toggleDarkMode} text={isDarkMode ? 'Light Mode' : 'Dark Mode'} />
+            </div>
+
+            <Notifications />
+        </div>
+    );
+}
+
+export default DashboardLayout;

apps/wallet-dashboard/app/layout.tsx

@@ -6,7 +6,7 @@ import { Inter } from 'next/font/google';
 
 import './globals.css';
 
-import { IotaClientProvider, WalletProvider } from '@iota/dapp-kit';
+import { IotaClientProvider, lightTheme, darkTheme, WalletProvider } from '@iota/dapp-kit';
 import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
@@ -22,16 +22,27 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     const [queryClient] = React.useState(() => new QueryClient());
+    const bodyRef = React.useRef<HTMLBodyElement>(null);
 
     const allNetworks = getAllNetworks();
     const defaultNetwork = getDefaultNetwork();
 
     return (
         <html lang="en">
-            <body className={inter.className}>
+            <body className={inter.className} ref={bodyRef}>
                 <QueryClientProvider client={queryClient}>
                     <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
-                        <WalletProvider>
+                        <WalletProvider
+                            theme={[
+                                {
+                                    variables: lightTheme,
+                                },
+                                {
+                                    selector: '.dark',
+                                    variables: darkTheme,
+                                },
+                            ]}
+                        >
                             <PopupProvider>
                                 {children}
                                 <Popup />

apps/wallet-dashboard/app/page.tsx

@@ -5,21 +5,21 @@
 
 import { ConnectButton, useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit';
 import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { redirect } from 'next/navigation';
 import { IotaLogoWeb } from '@iota/ui-icons';
+import { HOMEPAGE_ROUTE } from '@/lib/constants/routes.constants';
 
 function HomeDashboardPage(): JSX.Element {
     const { connectionStatus } = useCurrentWallet();
     const account = useCurrentAccount();
-    const router = useRouter();
 
     const CURRENT_YEAR = new Date().getFullYear();
 
     useEffect(() => {
         if (connectionStatus === 'connected' && account) {
-            router.push('/dashboard/home');
+            redirect(HOMEPAGE_ROUTE.path);
         }
-    }, [connectionStatus, account, router]);
+    }, [connectionStatus, account]);
 
     return (
         <main className="flex h-screen">

apps/wallet-dashboard/components/Popup/Popups/SendAssetPopup.tsx

@@ -12,6 +12,7 @@ import { useRouter } from 'next/navigation';
 import { useNotifications } from '@/hooks';
 import { NotificationType } from '@/stores/notificationStore';
 import { useCreateSendAssetTransaction } from '@/hooks';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
 
 interface SendAssetPopupProps {
     asset: IotaObjectData;
@@ -48,7 +49,7 @@ export default function SendAssetPopup({ asset, onClose }: SendAssetPopupProps):
     function onSendAssetSuccess() {
         addNotification('Transfer transaction successful', NotificationType.Success);
         onClose?.();
-        router.push('/dashboard/assets/visual-assets');
+        router.push(ASSETS_ROUTE.path + '/visual-assets');
     }
 
     function onSendAssetError() {

apps/wallet-dashboard/lib/constants/routes.constants.ts

@@ -0,0 +1,49 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ProtectedRoute } from '../interfaces';
+import { ProtectedRouteTitle } from '../enums';
+import { Activity, Assets, Calendar, Home, Migration, Tokens } from '@iota/ui-icons';
+
+export const HOMEPAGE_ROUTE: ProtectedRoute = {
+    title: ProtectedRouteTitle.Home,
+    path: '/home',
+    icon: Home,
+};
+
+export const ASSETS_ROUTE: ProtectedRoute = {
+    title: ProtectedRouteTitle.Assets,
+    path: '/assets',
+    icon: Assets,
+};
+
+export const STAKING_ROUTE: ProtectedRoute = {
+    title: ProtectedRouteTitle.Staking,
+    path: '/staking',
+    icon: Activity,
+};
+
+export const ACTIVITY_ROUTE: ProtectedRoute = {
+    title: ProtectedRouteTitle.Activity,
+    path: '/activity',
+    icon: Tokens,
+};
+export const MIGRATIONS_ROUTE: ProtectedRoute = {
+    title: ProtectedRouteTitle.Migrations,
+    path: '/migrations',
+    icon: Calendar,
+};
+export const VESTING_ROUTE: ProtectedRoute = {
+    title: ProtectedRouteTitle.Vesting,
+    path: '/vesting',
+    icon: Migration,
+};
+
+export const PROTECTED_ROUTES = [
+    HOMEPAGE_ROUTE,
+    ASSETS_ROUTE,
+    STAKING_ROUTE,
+    ACTIVITY_ROUTE,
+    MIGRATIONS_ROUTE,
+    VESTING_ROUTE,
+] as const satisfies ProtectedRoute[];

apps/wallet-dashboard/lib/enums/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './protectedRouteTitle.enum';