From a46778fe93ae7dc42fa0faad15b79df79f568806 Mon Sep 17 00:00:00 2001 From: JCNoguera <88061365+VmMad@users.noreply.github.com> Date: Tue, 29 Oct 2024 09:18:06 +0100 Subject: [PATCH] feat(wallet-dashboard): add protected layout (#3676) * feat(wallet-dashboard): add protected layout * feat: add missing TopNav * fix: tests * fix: imports * fix: add missing themes * feat: improve connect button size --------- Co-authored-by: evavirseda --- .../activity/page.tsx | 0 .../assets/everything-else/page.tsx | 0 .../assets/layout.tsx | 5 +- .../assets/page.tsx | 0 .../assets/visual-assets/[objectId]/page.tsx | 3 +- .../assets/visual-assets/page.tsx | 3 +- .../app/(protected)/components/index.ts | 4 ++ .../components/sidebar/Sidebar.tsx | 19 +++++++ .../components/sidebar/SidebarItem.tsx | 22 +++++++ .../(protected)/components/top-nav/TopNav.tsx | 16 ++++++ .../{dashboard => (protected)}/home/page.tsx | 2 +- .../app/(protected)/layout.tsx | 55 ++++++++++++++++++ .../migrations/page.tsx | 0 .../staking/page.tsx | 0 .../vesting/page.tsx | 0 .../app/dashboard/apps/page.tsx | 17 ------ .../wallet-dashboard/app/dashboard/layout.tsx | 57 ------------------- apps/wallet-dashboard/app/layout.tsx | 17 +++++- apps/wallet-dashboard/app/page.tsx | 8 +-- .../Popup/Popups/SendAssetPopup.tsx | 3 +- .../lib/constants/routes.constants.ts | 49 ++++++++++++++++ apps/wallet-dashboard/lib/enums/index.ts | 4 ++ .../lib/enums/protectedRouteTitle.enum.ts | 11 ++++ .../lib/interfaces/appRoute.interface.ts | 8 +++ apps/wallet-dashboard/lib/interfaces/index.ts | 1 + apps/wallet-dashboard/package.json | 1 + apps/wallet-dashboard/tsconfig.json | 1 + pnpm-lock.yaml | 50 +++++++++------- .../src/components/AccountDropdownMenu.tsx | 5 +- sdk/dapp-kit/src/components/ConnectButton.tsx | 12 ++-- sdk/dapp-kit/src/index.ts | 1 + 31 files changed, 262 insertions(+), 112 deletions(-) rename apps/wallet-dashboard/app/{dashboard => (protected)}/activity/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/everything-else/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/layout.tsx (74%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/visual-assets/[objectId]/page.tsx (90%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/visual-assets/page.tsx (92%) create mode 100644 apps/wallet-dashboard/app/(protected)/components/index.ts create mode 100644 apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx create mode 100644 apps/wallet-dashboard/app/(protected)/components/sidebar/SidebarItem.tsx create mode 100644 apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx rename apps/wallet-dashboard/app/{dashboard => (protected)}/home/page.tsx (93%) create mode 100644 apps/wallet-dashboard/app/(protected)/layout.tsx rename apps/wallet-dashboard/app/{dashboard => (protected)}/migrations/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/staking/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/vesting/page.tsx (100%) delete mode 100644 apps/wallet-dashboard/app/dashboard/apps/page.tsx delete mode 100644 apps/wallet-dashboard/app/dashboard/layout.tsx create mode 100644 apps/wallet-dashboard/lib/constants/routes.constants.ts create mode 100644 apps/wallet-dashboard/lib/enums/index.ts create mode 100644 apps/wallet-dashboard/lib/enums/protectedRouteTitle.enum.ts create mode 100644 apps/wallet-dashboard/lib/interfaces/appRoute.interface.ts diff --git a/apps/wallet-dashboard/app/dashboard/activity/page.tsx b/apps/wallet-dashboard/app/(protected)/activity/page.tsx similarity index 100% rename from apps/wallet-dashboard/app/dashboard/activity/page.tsx rename to apps/wallet-dashboard/app/(protected)/activity/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/assets/everything-else/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/everything-else/page.tsx similarity index 100% rename from apps/wallet-dashboard/app/dashboard/assets/everything-else/page.tsx rename to apps/wallet-dashboard/app/(protected)/assets/everything-else/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/assets/layout.tsx b/apps/wallet-dashboard/app/(protected)/assets/layout.tsx similarity index 74% rename from apps/wallet-dashboard/app/dashboard/assets/layout.tsx rename to apps/wallet-dashboard/app/(protected)/assets/layout.tsx index 2ace7b31545..b579dfae131 100644 --- a/apps/wallet-dashboard/app/dashboard/assets/layout.tsx +++ b/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 ( diff --git a/apps/wallet-dashboard/app/dashboard/assets/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/page.tsx similarity index 100% rename from apps/wallet-dashboard/app/dashboard/assets/page.tsx rename to apps/wallet-dashboard/app/(protected)/assets/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/assets/visual-assets/[objectId]/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/visual-assets/[objectId]/page.tsx similarity index 90% rename from apps/wallet-dashboard/app/dashboard/assets/visual-assets/[objectId]/page.tsx rename to apps/wallet-dashboard/app/(protected)/assets/visual-assets/[objectId]/page.tsx index 587d2ccce03..e9fe1e9146c 100644 --- a/apps/wallet-dashboard/app/dashboard/assets/visual-assets/[objectId]/page.tsx +++ b/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 (
- + {asset?.data ? ( ) : ( diff --git a/apps/wallet-dashboard/app/dashboard/assets/visual-assets/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/visual-assets/page.tsx similarity index 92% rename from apps/wallet-dashboard/app/dashboard/assets/visual-assets/page.tsx rename to apps/wallet-dashboard/app/(protected)/assets/visual-assets/page.tsx index fe08f79fdfd..2819bb4bfd3 100644 --- a/apps/wallet-dashboard/app/dashboard/assets/visual-assets/page.tsx +++ b/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 => ; const handleClick = (objectId: string) => { - router.push(`/dashboard/assets/visual-assets/${objectId}`); + router.push(ASSETS_ROUTE.path + `/visual-assets/${objectId}`); }; return ( diff --git a/apps/wallet-dashboard/app/(protected)/components/index.ts b/apps/wallet-dashboard/app/(protected)/components/index.ts new file mode 100644 index 00000000000..b4406b11a68 --- /dev/null +++ b/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'; diff --git a/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx b/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx new file mode 100644 index 00000000000..0f49225192d --- /dev/null +++ b/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 ( + + ); +} diff --git a/apps/wallet-dashboard/app/(protected)/components/sidebar/SidebarItem.tsx b/apps/wallet-dashboard/app/(protected)/components/sidebar/SidebarItem.tsx new file mode 100644 index 00000000000..e81e6da5b66 --- /dev/null +++ b/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 ( + + + } /> + + + ); +} diff --git a/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx b/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx new file mode 100644 index 00000000000..8dd5f01ca2b --- /dev/null +++ b/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 ( +
+ + +
+ ); +} diff --git a/apps/wallet-dashboard/app/dashboard/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx similarity index 93% rename from apps/wallet-dashboard/app/dashboard/home/page.tsx rename to apps/wallet-dashboard/app/(protected)/home/page.tsx index f862e2ffc03..53c3d8433b3 100644 --- a/apps/wallet-dashboard/app/dashboard/home/page.tsx +++ b/apps/wallet-dashboard/app/(protected)/home/page.tsx @@ -16,7 +16,7 @@ function HomeDashboardPage(): JSX.Element { }; return ( -
+

Connection status: {connectionStatus}

{connectionStatus === 'connected' && account && (
diff --git a/apps/wallet-dashboard/app/(protected)/layout.tsx b/apps/wallet-dashboard/app/(protected)/layout.tsx new file mode 100644 index 00000000000..18168a98870 --- /dev/null +++ b/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 ( +
+
+ +
+ +
+
+ +
+
{children}
+
+ +
+
+ + +
+ ); +} + +export default DashboardLayout; diff --git a/apps/wallet-dashboard/app/dashboard/migrations/page.tsx b/apps/wallet-dashboard/app/(protected)/migrations/page.tsx similarity index 100% rename from apps/wallet-dashboard/app/dashboard/migrations/page.tsx rename to apps/wallet-dashboard/app/(protected)/migrations/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/staking/page.tsx b/apps/wallet-dashboard/app/(protected)/staking/page.tsx similarity index 100% rename from apps/wallet-dashboard/app/dashboard/staking/page.tsx rename to apps/wallet-dashboard/app/(protected)/staking/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/vesting/page.tsx b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx similarity index 100% rename from apps/wallet-dashboard/app/dashboard/vesting/page.tsx rename to apps/wallet-dashboard/app/(protected)/vesting/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/apps/page.tsx b/apps/wallet-dashboard/app/dashboard/apps/page.tsx deleted file mode 100644 index cb6c956a6a4..00000000000 --- a/apps/wallet-dashboard/app/dashboard/apps/page.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -'use client'; - -import { AppList } from '@/components'; - -function AppsPage(): JSX.Element { - return ( -
-

APPS

- -
- ); -} - -export default AppsPage; diff --git a/apps/wallet-dashboard/app/dashboard/layout.tsx b/apps/wallet-dashboard/app/dashboard/layout.tsx deleted file mode 100644 index 7db89a819c7..00000000000 --- a/apps/wallet-dashboard/app/dashboard/layout.tsx +++ /dev/null @@ -1,57 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 -'use client'; - -import { Notifications, RouteLink } from '@/components/index'; -import React, { useEffect, useState, type PropsWithChildren } from 'react'; -import { ConnectButton, useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit'; -import { Button } from '@iota/apps-ui-kit'; -import { useRouter } from 'next/navigation'; - -const routes = [ - { title: 'Home', path: '/dashboard/home' }, - { title: 'Assets', path: '/dashboard/assets' }, - { title: 'Staking', path: '/dashboard/staking' }, - { title: 'Apps', path: '/dashboard/apps' }, - { title: 'Activity', path: '/dashboard/activity' }, - { title: 'Migrations', path: '/dashboard/migrations' }, - { title: 'Vesting', path: '/dashboard/vesting' }, -]; - -function DashboardLayout({ children }: PropsWithChildren): JSX.Element { - const [isDarkMode, setIsDarkMode] = useState(false); - const { connectionStatus } = useCurrentWallet(); - const account = useCurrentAccount(); - - const router = useRouter(); - const toggleDarkMode = () => { - setIsDarkMode(!isDarkMode); - if (isDarkMode) { - document.documentElement.classList.remove('dark'); - } else { - document.documentElement.classList.add('dark'); - } - }; - - useEffect(() => { - if (connectionStatus !== 'connected' && !account) { - router.push('/'); - } - }, [connectionStatus, account, router]); - - return ( - <> -
- - {routes.map((route) => { - return ; - })} -
-
{children}
- - ); -} - -export default DashboardLayout; diff --git a/apps/wallet-dashboard/app/layout.tsx b/apps/wallet-dashboard/app/layout.tsx index badfa837057..dadbd552dbf 100644 --- a/apps/wallet-dashboard/app/layout.tsx +++ b/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(null); const allNetworks = getAllNetworks(); const defaultNetwork = getDefaultNetwork(); return ( - + - + {children} diff --git a/apps/wallet-dashboard/app/page.tsx b/apps/wallet-dashboard/app/page.tsx index e0940c12afe..38001d4b184 100644 --- a/apps/wallet-dashboard/app/page.tsx +++ b/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 (
diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendAssetPopup.tsx b/apps/wallet-dashboard/components/Popup/Popups/SendAssetPopup.tsx index 305476e73f7..8dbcf912276 100644 --- a/apps/wallet-dashboard/components/Popup/Popups/SendAssetPopup.tsx +++ b/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() { diff --git a/apps/wallet-dashboard/lib/constants/routes.constants.ts b/apps/wallet-dashboard/lib/constants/routes.constants.ts new file mode 100644 index 00000000000..246be3eb40e --- /dev/null +++ b/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[]; diff --git a/apps/wallet-dashboard/lib/enums/index.ts b/apps/wallet-dashboard/lib/enums/index.ts new file mode 100644 index 00000000000..a9ebb8b34ad --- /dev/null +++ b/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'; diff --git a/apps/wallet-dashboard/lib/enums/protectedRouteTitle.enum.ts b/apps/wallet-dashboard/lib/enums/protectedRouteTitle.enum.ts new file mode 100644 index 00000000000..a25fbd825a4 --- /dev/null +++ b/apps/wallet-dashboard/lib/enums/protectedRouteTitle.enum.ts @@ -0,0 +1,11 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export enum ProtectedRouteTitle { + Home = 'Home', + Assets = 'Assets', + Staking = 'Staking', + Activity = 'Activity', + Migrations = 'Migrations', + Vesting = 'Vesting', +} diff --git a/apps/wallet-dashboard/lib/interfaces/appRoute.interface.ts b/apps/wallet-dashboard/lib/interfaces/appRoute.interface.ts new file mode 100644 index 00000000000..c661dce5598 --- /dev/null +++ b/apps/wallet-dashboard/lib/interfaces/appRoute.interface.ts @@ -0,0 +1,8 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export interface ProtectedRoute { + title: string; + path: string; + icon: (props: React.SVGProps) => React.JSX.Element; +} diff --git a/apps/wallet-dashboard/lib/interfaces/index.ts b/apps/wallet-dashboard/lib/interfaces/index.ts index b00df15b193..eeab2cb4f5c 100644 --- a/apps/wallet-dashboard/lib/interfaces/index.ts +++ b/apps/wallet-dashboard/lib/interfaces/index.ts @@ -4,3 +4,4 @@ export * from './transactions.interface'; export * from './timelock.interface'; export * from './vesting.interface'; +export * from './appRoute.interface'; diff --git a/apps/wallet-dashboard/package.json b/apps/wallet-dashboard/package.json index 1398daf9a87..6807f6fda94 100644 --- a/apps/wallet-dashboard/package.json +++ b/apps/wallet-dashboard/package.json @@ -22,6 +22,7 @@ "@iota/ui-icons": "workspace:*", "@tanstack/react-query": "^5.50.1", "@tanstack/react-virtual": "^3.5.0", + "clsx": "^2.1.1", "next": "14.2.10", "react": "^18.3.1", "zustand": "^4.4.1" diff --git a/apps/wallet-dashboard/tsconfig.json b/apps/wallet-dashboard/tsconfig.json index 2e42283cc00..d452a8afa13 100644 --- a/apps/wallet-dashboard/tsconfig.json +++ b/apps/wallet-dashboard/tsconfig.json @@ -20,6 +20,7 @@ ], "paths": { "@/*": ["./*"], + "@/lib/*": ["./lib/*"], "@/app/*": ["./app/*"], "@/components/*": ["./components/*"], "@/hooks/*": ["./hooks/*"], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index edecb0e30ae..9883c275a4a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -179,7 +179,7 @@ importers: version: 5.2.1(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3) jest: specifier: ^29.5.0 - version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) prettier: specifier: ^3.3.1 version: 3.3.3 @@ -191,7 +191,7 @@ importers: version: 6.3.4 ts-jest: specifier: ^29.1.0 - version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) + version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) ts-loader: specifier: ^9.4.4 version: 9.5.1(typescript@5.6.2)(webpack@5.95.0(@swc/core@1.7.28)) @@ -1012,6 +1012,9 @@ importers: '@tanstack/react-virtual': specifier: ^3.5.0 version: 3.10.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: + specifier: ^2.1.1 + version: 2.1.1 next: specifier: 14.2.10 version: 14.2.10(@babel/core@7.25.2)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.79.3) @@ -1039,7 +1042,7 @@ importers: version: 14.2.3(eslint@8.57.1)(typescript@5.6.2) jest: specifier: ^29.5.0 - version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + version: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) postcss: specifier: ^8.4.31 version: 8.4.47 @@ -1048,7 +1051,7 @@ importers: version: 3.4.13(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) ts-jest: specifier: ^29.1.0 - version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) + version: 29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2) typescript: specifier: ^5.5.3 version: 5.6.2 @@ -15437,6 +15440,10 @@ packages: resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} engines: {node: '>=6'} + tough-cookie@2.5.0: + resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==} + engines: {node: '>=0.8'} + tough-cookie@4.1.4: resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==} engines: {node: '>=6'} @@ -20530,7 +20537,7 @@ snapshots: jest-util: 29.7.0 slash: 3.0.0 - '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2))': + '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0(node-notifier@10.0.0) @@ -20544,7 +20551,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -26461,13 +26468,13 @@ snapshots: crc-32@1.2.2: {} - create-jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): + create-jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -29676,16 +29683,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): + jest-cli@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): dependencies: - '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + create-jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) exit: 0.1.2 import-local: 3.2.0 - jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + jest-config: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -29697,7 +29704,7 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): + jest-config@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): dependencies: '@babel/core': 7.25.2 '@jest/test-sequencer': 29.7.0 @@ -29954,12 +29961,12 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)): + jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)): dependencies: - '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) '@jest/types': 29.6.3 import-local: 3.2.0 - jest-cli: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + jest-cli: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) optionalDependencies: node-notifier: 10.0.0 transitivePeerDependencies: @@ -33353,7 +33360,7 @@ snapshots: performance-now: 2.1.0 qs: 6.5.3 safe-buffer: 5.2.1 - tough-cookie: 4.1.4 + tough-cookie: 2.5.0 tunnel-agent: 0.6.0 uuid: 3.4.0 @@ -34508,6 +34515,11 @@ snapshots: totalist@3.0.1: {} + tough-cookie@2.5.0: + dependencies: + psl: 1.9.0 + punycode: 2.3.1 + tough-cookie@4.1.4: dependencies: psl: 1.9.0 @@ -34541,12 +34553,12 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-jest@29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2): + ts-jest@29.2.5(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)))(typescript@5.6.2): dependencies: bs-logger: 0.2.6 ejs: 3.1.10 fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@types/node@20.16.9)(typescript@5.6.2)) + jest: 29.7.0(@types/node@20.16.9)(babel-plugin-macros@3.1.0)(node-notifier@10.0.0)(ts-node@10.9.2(@swc/core@1.7.28)(@types/node@20.16.9)(typescript@5.6.2)) jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 diff --git a/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx b/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx index 6482478262c..cb602d9ebe1 100644 --- a/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx +++ b/sdk/dapp-kit/src/components/AccountDropdownMenu.tsx @@ -19,9 +19,10 @@ import { Text } from './ui/Text.js'; type AccountDropdownMenuProps = { currentAccount: WalletAccount; + size?: React.ComponentProps['size']; }; -export function AccountDropdownMenu({ currentAccount }: AccountDropdownMenuProps) { +export function AccountDropdownMenu({ currentAccount, size = 'lg' }: AccountDropdownMenuProps) { const { mutate: disconnectWallet } = useDisconnectWallet(); const accounts = useAccounts(); @@ -29,7 +30,7 @@ export function AccountDropdownMenu({ currentAccount }: AccountDropdownMenuProps - + } /> diff --git a/sdk/dapp-kit/src/index.ts b/sdk/dapp-kit/src/index.ts index 37eba378f44..ba0224e5a8c 100644 --- a/sdk/dapp-kit/src/index.ts +++ b/sdk/dapp-kit/src/index.ts @@ -25,6 +25,7 @@ export * from './hooks/wallet/useReportTransactionEffects.js'; export * from './hooks/wallet/useSwitchAccount.js'; export * from './hooks/wallet/useWallets.js'; export * from './themes/lightTheme.js'; +export * from './themes/darkTheme.js'; export * from './types.js'; export type { Theme, ThemeVars, DynamicTheme } from './themes/themeContract.js';