From b0c998330cb75b3fdb40fcf4e82e5ed65c06f6de Mon Sep 17 00:00:00 2001 From: JCNoguera <88061365+VmMad@users.noreply.github.com> Date: Fri, 25 Oct 2024 18:04:25 +0200 Subject: [PATCH 01/12] feat(wallet-dashboard): add protected layout --- .../account-switcher/AccountSwitcher.tsx | 49 ++++++++++++++++++ .../molecules/AccountSwitcher.stories.tsx | 28 +++++++++++ .../activity/page.tsx | 0 .../assets/everything-else/page.tsx | 0 .../assets/layout.tsx | 0 .../assets/page.tsx | 0 .../assets/visual-assets/[objectId]/page.tsx | 0 .../assets/visual-assets/page.tsx | 3 +- .../app/(protected)/components/index.ts | 4 ++ .../components/sidebar/Sidebar.tsx | 30 +++++++++++ .../(protected)/components/top-nav/TopNav.tsx | 12 +++++ .../{dashboard => (protected)}/home/page.tsx | 0 .../app/{dashboard => (protected)}/layout.tsx | 47 +++++++++-------- .../migrations/page.tsx | 0 .../staking/page.tsx | 0 .../vesting/page.tsx | 0 .../app/dashboard/apps/page.tsx | 17 ------- apps/wallet-dashboard/app/page.tsx | 8 +-- .../Popup/Popups/SendAssetPopup.tsx | 3 +- apps/wallet-dashboard/lib/constants/index.ts | 1 + .../lib/constants/routes.constants.ts | 36 +++++++++++++ apps/wallet-dashboard/lib/enums/index.ts | 4 ++ .../lib/enums/protectedAppRoute.enum.ts | 11 ++++ apps/wallet-dashboard/package.json | 1 + apps/wallet-dashboard/tsconfig.json | 1 + pnpm-lock.yaml | 50 ++++++++++++------- 26 files changed, 239 insertions(+), 66 deletions(-) create mode 100644 apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx create mode 100644 apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx 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 (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/visual-assets/[objectId]/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/assets/visual-assets/page.tsx (93%) 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/top-nav/TopNav.tsx rename apps/wallet-dashboard/app/{dashboard => (protected)}/home/page.tsx (100%) rename apps/wallet-dashboard/app/{dashboard => (protected)}/layout.tsx (52%) 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 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/protectedAppRoute.enum.ts diff --git a/apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx b/apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx new file mode 100644 index 00000000000..a36dc9f6bc5 --- /dev/null +++ b/apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx @@ -0,0 +1,49 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { ArrowDown } from '@iota/ui-icons'; +import classNames from 'classnames'; + +enum AccountSwitcherType { + AccountSwitcher, + Connected, +} + +interface AccountSwitcherProps { + accounts: T[]; + text?: string; + onAccountChange: (account: T) => void; + type: AccountSwitcherType; + isOpen?: boolean; + onClick?: (e: React.MouseEvent) => void; +} + +const ACCOUNT_SWITCHER_STYLE = { + [AccountSwitcherType.AccountSwitcher]: 'border-neutral-80 bg-transparent', + [AccountSwitcherType.Connected]: 'border-neutral-90 bg-neutral-90', +}; + +export function AccountSwitcher({ + accounts, + text, + onAccountChange, + type = AccountSwitcherType.AccountSwitcher, + isOpen, + onClick, +}: AccountSwitcherProps) { + return ( +
+ {text} + +
+ ); +} diff --git a/apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx b/apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx new file mode 100644 index 00000000000..07d5c28d994 --- /dev/null +++ b/apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx @@ -0,0 +1,28 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import type { Meta, StoryObj } from '@storybook/react'; + +import { AccountSwitcher } from '@/components/molecules/account-switcher/AccountSwitcher'; + +const meta: Meta = { + component: AccountSwitcher, + tags: ['autodocs'], + render: (props) => { + return ( +
+ +
+ ); + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Connect', + }, +}; 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 100% rename from apps/wallet-dashboard/app/dashboard/assets/layout.tsx rename to apps/wallet-dashboard/app/(protected)/assets/layout.tsx 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 100% 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 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 93% 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..a4300f69284 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'; 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..b74a2051de7 --- /dev/null +++ b/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx @@ -0,0 +1,30 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +'use client'; + +import { PROTECTED_ROUTES } from '@/lib/constants'; +import { NavbarItem } from '@iota/apps-ui-kit'; +import { IotaLogoMark } from '@iota/ui-icons'; +import { usePathname } from 'next/navigation'; +import Link from 'next/link'; + +export function Sidebar() { + const pathname = usePathname(); + 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..699157276a4 --- /dev/null +++ b/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx @@ -0,0 +1,12 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { Badge, BadgeType } from '@iota/apps-ui-kit'; + +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 100% rename from apps/wallet-dashboard/app/dashboard/home/page.tsx rename to apps/wallet-dashboard/app/(protected)/home/page.tsx diff --git a/apps/wallet-dashboard/app/dashboard/layout.tsx b/apps/wallet-dashboard/app/(protected)/layout.tsx similarity index 52% rename from apps/wallet-dashboard/app/dashboard/layout.tsx rename to apps/wallet-dashboard/app/(protected)/layout.tsx index 7db89a819c7..b2f08ecf5aa 100644 --- a/apps/wallet-dashboard/app/dashboard/layout.tsx +++ b/apps/wallet-dashboard/app/(protected)/layout.tsx @@ -6,24 +6,16 @@ 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' }, -]; +import { redirect } from 'next/navigation'; +import { PROTECTED_ROUTES } from '@/lib/constants'; +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 router = useRouter(); const toggleDarkMode = () => { setIsDarkMode(!isDarkMode); if (isDarkMode) { @@ -35,22 +27,29 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element { useEffect(() => { if (connectionStatus !== 'connected' && !account) { - router.push('/'); + redirect('/'); } - }, [connectionStatus, account, router]); + }, [connectionStatus, account]); return ( - <> -
- - {routes.map((route) => { - return ; - })} -
+
+ +
+ +
+ + {PROTECTED_ROUTES.map(({ title, path }) => ( + + ))} +
+
{children}
- +
); } 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/page.tsx b/apps/wallet-dashboard/app/page.tsx index e0940c12afe..ba398e27586 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'; 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..3682b5a8e39 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'; 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/index.ts b/apps/wallet-dashboard/lib/constants/index.ts index a7c8637513f..f24da8ee774 100644 --- a/apps/wallet-dashboard/lib/constants/index.ts +++ b/apps/wallet-dashboard/lib/constants/index.ts @@ -3,3 +3,4 @@ export * from './time.constants'; export * from './vesting.constants'; +export * from './routes.constants'; 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..ad70c25dfae --- /dev/null +++ b/apps/wallet-dashboard/lib/constants/routes.constants.ts @@ -0,0 +1,36 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { ProtectedAppRoute } from '@/lib/enums'; +import { Activity, Assets, Calendar, Home, Migration, Tokens } from '@iota/ui-icons'; + +export const HOMEPAGE_ROUTE = { title: ProtectedAppRoute.Home, path: '/home', icon: Home }; + +export const ASSETS_ROUTE = { title: ProtectedAppRoute.Assets, path: '/assets', icon: Assets }; + +export const STAKING_ROUTE = { title: ProtectedAppRoute.Staking, path: '/staking', icon: Activity }; + +export const ACTIVITY_ROUTE = { + title: ProtectedAppRoute.Activity, + path: '/activity', + icon: Tokens, +}; +export const MIGRATIONS_ROUTE = { + title: ProtectedAppRoute.Migrations, + path: '/migrations', + icon: Calendar, +}; +export const VESTING_ROUTE = { + title: ProtectedAppRoute.Vesting, + path: '/vesting', + icon: Migration, +}; + +export const PROTECTED_ROUTES = [ + HOMEPAGE_ROUTE, + ASSETS_ROUTE, + STAKING_ROUTE, + ACTIVITY_ROUTE, + MIGRATIONS_ROUTE, + VESTING_ROUTE, +] as const; diff --git a/apps/wallet-dashboard/lib/enums/index.ts b/apps/wallet-dashboard/lib/enums/index.ts new file mode 100644 index 00000000000..e100452857f --- /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 './protectedAppRoute.enum'; diff --git a/apps/wallet-dashboard/lib/enums/protectedAppRoute.enum.ts b/apps/wallet-dashboard/lib/enums/protectedAppRoute.enum.ts new file mode 100644 index 00000000000..c693c4af8fc --- /dev/null +++ b/apps/wallet-dashboard/lib/enums/protectedAppRoute.enum.ts @@ -0,0 +1,11 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export enum ProtectedAppRoute { + Home = 'Home', + Assets = 'Assets', + Staking = 'Staking', + Activity = 'Activity', + Migrations = 'Migrations', + Vesting = 'Vesting', +} 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 From 670f496d154bf2a693107d390b85fa3ec535aa85 Mon Sep 17 00:00:00 2001 From: JCNoguera <88061365+VmMad@users.noreply.github.com> Date: Mon, 28 Oct 2024 10:51:04 +0100 Subject: [PATCH 02/12] feat: add missing TopNav --- .../account-switcher/AccountSwitcher.tsx | 49 ------------------- .../molecules/AccountSwitcher.stories.tsx | 28 ----------- .../components/sidebar/Sidebar.tsx | 21 ++------ .../components/sidebar/SidebarItem.tsx | 20 ++++++++ .../(protected)/components/top-nav/TopNav.tsx | 8 ++- .../app/(protected)/home/page.tsx | 2 +- .../app/(protected)/layout.tsx | 33 ++++++------- .../lib/constants/routes.constants.ts | 27 +++++++--- .../lib/interfaces/appRoute.interface.ts | 8 +++ apps/wallet-dashboard/lib/interfaces/index.ts | 1 + 10 files changed, 77 insertions(+), 120 deletions(-) delete mode 100644 apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx delete mode 100644 apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx create mode 100644 apps/wallet-dashboard/app/(protected)/components/sidebar/SidebarItem.tsx create mode 100644 apps/wallet-dashboard/lib/interfaces/appRoute.interface.ts diff --git a/apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx b/apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx deleted file mode 100644 index a36dc9f6bc5..00000000000 --- a/apps/ui-kit/src/lib/components/molecules/account-switcher/AccountSwitcher.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { ArrowDown } from '@iota/ui-icons'; -import classNames from 'classnames'; - -enum AccountSwitcherType { - AccountSwitcher, - Connected, -} - -interface AccountSwitcherProps { - accounts: T[]; - text?: string; - onAccountChange: (account: T) => void; - type: AccountSwitcherType; - isOpen?: boolean; - onClick?: (e: React.MouseEvent) => void; -} - -const ACCOUNT_SWITCHER_STYLE = { - [AccountSwitcherType.AccountSwitcher]: 'border-neutral-80 bg-transparent', - [AccountSwitcherType.Connected]: 'border-neutral-90 bg-neutral-90', -}; - -export function AccountSwitcher({ - accounts, - text, - onAccountChange, - type = AccountSwitcherType.AccountSwitcher, - isOpen, - onClick, -}: AccountSwitcherProps) { - return ( -
- {text} - -
- ); -} diff --git a/apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx b/apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx deleted file mode 100644 index 07d5c28d994..00000000000 --- a/apps/ui-kit/src/storybook/stories/molecules/AccountSwitcher.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import type { Meta, StoryObj } from '@storybook/react'; - -import { AccountSwitcher } from '@/components/molecules/account-switcher/AccountSwitcher'; - -const meta: Meta = { - component: AccountSwitcher, - tags: ['autodocs'], - render: (props) => { - return ( -
- -
- ); - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - text: 'Connect', - }, -}; diff --git a/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx b/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx index b74a2051de7..7232fd8b1c2 100644 --- a/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx +++ b/apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx @@ -1,29 +1,18 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -'use client'; - import { PROTECTED_ROUTES } from '@/lib/constants'; -import { NavbarItem } from '@iota/apps-ui-kit'; import { IotaLogoMark } from '@iota/ui-icons'; -import { usePathname } from 'next/navigation'; -import Link from 'next/link'; +import { SidebarItem } from './SidebarItem'; export function Sidebar() { - const pathname = usePathname(); return ( -