chore: cleanup portfolio routes

examples/portfolio/package.json

@@ -63,7 +63,8 @@
         "tsx": "^4.21.0",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.59.2",
-        "vite": "^7.3.2"
+        "vite": "^7.3.2",
+        "vite-tsconfig-paths": "^6.1.1"
     },
     "files": [
         "dist/**"

examples/portfolio/src/routeTree.gen.ts

@@ -9,122 +9,195 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as SettingsRouteImport } from './routes/settings'
-import { Route as OldRouteImport } from './routes/old'
-import { Route as ConnectRouteImport } from './routes/connect'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as WalletWalletIdRouteImport } from './routes/wallet.$walletId'
+import { Route as NextRouteRouteImport } from './routes/next/route'
+import { Route as LegacyRouteRouteImport } from './routes/_legacy/route'
+import { Route as LegacyIndexRouteImport } from './routes/_legacy/index'
+import { Route as NextConnectRouteImport } from './routes/next/connect'
+import { Route as LegacySettingsRouteImport } from './routes/_legacy/settings'
+import { Route as LegacyOldRouteImport } from './routes/_legacy/old'
+import { Route as LegacyWalletWalletIdRouteImport } from './routes/_legacy/wallet.$walletId'
 
-const SettingsRoute = SettingsRouteImport.update({
-  id: '/settings',
-  path: '/settings',
+const NextRouteRoute = NextRouteRouteImport.update({
+  id: '/next',
+  path: '/next',
   getParentRoute: () => rootRouteImport,
 } as any)
-const OldRoute = OldRouteImport.update({
-  id: '/old',
-  path: '/old',
+const LegacyRouteRoute = LegacyRouteRouteImport.update({
+  id: '/_legacy',
   getParentRoute: () => rootRouteImport,
 } as any)
-const ConnectRoute = ConnectRouteImport.update({
+const LegacyIndexRoute = LegacyIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LegacyRouteRoute,
+} as any)
+const NextConnectRoute = NextConnectRouteImport.update({
   id: '/connect',
   path: '/connect',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => NextRouteRoute,
 } as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
+const LegacySettingsRoute = LegacySettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => LegacyRouteRoute,
+} as any)
+const LegacyOldRoute = LegacyOldRouteImport.update({
+  id: '/old',
+  path: '/old',
+  getParentRoute: () => LegacyRouteRoute,
 } as any)
-const WalletWalletIdRoute = WalletWalletIdRouteImport.update({
+const LegacyWalletWalletIdRoute = LegacyWalletWalletIdRouteImport.update({
   id: '/wallet/$walletId',
   path: '/wallet/$walletId',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => LegacyRouteRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/connect': typeof ConnectRoute
-  '/old': typeof OldRoute
-  '/settings': typeof SettingsRoute
-  '/wallet/$walletId': typeof WalletWalletIdRoute
+  '/': typeof LegacyIndexRoute
+  '/next': typeof NextRouteRouteWithChildren
+  '/old': typeof LegacyOldRoute
+  '/settings': typeof LegacySettingsRoute
+  '/next/connect': typeof NextConnectRoute
+  '/wallet/$walletId': typeof LegacyWalletWalletIdRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/connect': typeof ConnectRoute
-  '/old': typeof OldRoute
-  '/settings': typeof SettingsRoute
-  '/wallet/$walletId': typeof WalletWalletIdRoute
+  '/next': typeof NextRouteRouteWithChildren
+  '/old': typeof LegacyOldRoute
+  '/settings': typeof LegacySettingsRoute
+  '/next/connect': typeof NextConnectRoute
+  '/': typeof LegacyIndexRoute
+  '/wallet/$walletId': typeof LegacyWalletWalletIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-  '/connect': typeof ConnectRoute
-  '/old': typeof OldRoute
-  '/settings': typeof SettingsRoute
-  '/wallet/$walletId': typeof WalletWalletIdRoute
+  '/_legacy': typeof LegacyRouteRouteWithChildren
+  '/next': typeof NextRouteRouteWithChildren
+  '/_legacy/old': typeof LegacyOldRoute
+  '/_legacy/settings': typeof LegacySettingsRoute
+  '/next/connect': typeof NextConnectRoute
+  '/_legacy/': typeof LegacyIndexRoute
+  '/_legacy/wallet/$walletId': typeof LegacyWalletWalletIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/connect' | '/old' | '/settings' | '/wallet/$walletId'
+  fullPaths:
+    | '/'
+    | '/next'
+    | '/old'
+    | '/settings'
+    | '/next/connect'
+    | '/wallet/$walletId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/connect' | '/old' | '/settings' | '/wallet/$walletId'
-  id: '__root__' | '/' | '/connect' | '/old' | '/settings' | '/wallet/$walletId'
+  to:
+    | '/next'
+    | '/old'
+    | '/settings'
+    | '/next/connect'
+    | '/'
+    | '/wallet/$walletId'
+  id:
+    | '__root__'
+    | '/_legacy'
+    | '/next'
+    | '/_legacy/old'
+    | '/_legacy/settings'
+    | '/next/connect'
+    | '/_legacy/'
+    | '/_legacy/wallet/$walletId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  ConnectRoute: typeof ConnectRoute
-  OldRoute: typeof OldRoute
-  SettingsRoute: typeof SettingsRoute
-  WalletWalletIdRoute: typeof WalletWalletIdRoute
+  LegacyRouteRoute: typeof LegacyRouteRouteWithChildren
+  NextRouteRoute: typeof NextRouteRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/settings': {
-      id: '/settings'
-      path: '/settings'
-      fullPath: '/settings'
-      preLoaderRoute: typeof SettingsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/old': {
-      id: '/old'
-      path: '/old'
-      fullPath: '/old'
-      preLoaderRoute: typeof OldRouteImport
+    '/next': {
+      id: '/next'
+      path: '/next'
+      fullPath: '/next'
+      preLoaderRoute: typeof NextRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/connect': {
-      id: '/connect'
-      path: '/connect'
-      fullPath: '/connect'
-      preLoaderRoute: typeof ConnectRouteImport
+    '/_legacy': {
+      id: '/_legacy'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof LegacyRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/': {
-      id: '/'
+    '/_legacy/': {
+      id: '/_legacy/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
+      preLoaderRoute: typeof LegacyIndexRouteImport
+      parentRoute: typeof LegacyRouteRoute
+    }
+    '/next/connect': {
+      id: '/next/connect'
+      path: '/connect'
+      fullPath: '/next/connect'
+      preLoaderRoute: typeof NextConnectRouteImport
+      parentRoute: typeof NextRouteRoute
+    }
+    '/_legacy/settings': {
+      id: '/_legacy/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof LegacySettingsRouteImport
+      parentRoute: typeof LegacyRouteRoute
+    }
+    '/_legacy/old': {
+      id: '/_legacy/old'
+      path: '/old'
+      fullPath: '/old'
+      preLoaderRoute: typeof LegacyOldRouteImport
+      parentRoute: typeof LegacyRouteRoute
     }
-    '/wallet/$walletId': {
-      id: '/wallet/$walletId'
+    '/_legacy/wallet/$walletId': {
+      id: '/_legacy/wallet/$walletId'
       path: '/wallet/$walletId'
       fullPath: '/wallet/$walletId'
-      preLoaderRoute: typeof WalletWalletIdRouteImport
-      parentRoute: typeof rootRouteImport
+      preLoaderRoute: typeof LegacyWalletWalletIdRouteImport
+      parentRoute: typeof LegacyRouteRoute
     }
   }
 }
 
+interface LegacyRouteRouteChildren {
+  LegacyOldRoute: typeof LegacyOldRoute
+  LegacySettingsRoute: typeof LegacySettingsRoute
+  LegacyIndexRoute: typeof LegacyIndexRoute
+  LegacyWalletWalletIdRoute: typeof LegacyWalletWalletIdRoute
+}
+
+const LegacyRouteRouteChildren: LegacyRouteRouteChildren = {
+  LegacyOldRoute: LegacyOldRoute,
+  LegacySettingsRoute: LegacySettingsRoute,
+  LegacyIndexRoute: LegacyIndexRoute,
+  LegacyWalletWalletIdRoute: LegacyWalletWalletIdRoute,
+}
+
+const LegacyRouteRouteWithChildren = LegacyRouteRoute._addFileChildren(
+  LegacyRouteRouteChildren,
+)
+
+interface NextRouteRouteChildren {
+  NextConnectRoute: typeof NextConnectRoute
+}
+
+const NextRouteRouteChildren: NextRouteRouteChildren = {
+  NextConnectRoute: NextConnectRoute,
+}
+
+const NextRouteRouteWithChildren = NextRouteRoute._addFileChildren(
+  NextRouteRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  ConnectRoute: ConnectRoute,
-  OldRoute: OldRoute,
-  SettingsRoute: SettingsRoute,
-  WalletWalletIdRoute: WalletWalletIdRoute,
+  LegacyRouteRoute: LegacyRouteRouteWithChildren,
+  NextRouteRoute: NextRouteRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

examples/portfolio/src/routes/__root.tsx

@@ -1,6 +1,5 @@
-import { createRootRouteWithContext } from '@tanstack/react-router'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import type { QueryClient } from '@tanstack/react-query'
-import { RootComponent } from './__root.component'
 
 export interface RouterContext {
     queryClient: QueryClient
@@ -9,3 +8,7 @@ export interface RouterContext {
 export const Route = createRootRouteWithContext<RouterContext>()({
     shellComponent: RootComponent,
 })
+
+export function RootComponent() {
+    return <Outlet />
+}

examples/portfolio/src/routes/index.component.tsx → examples/portfolio/src/routes/_legacy/index.component.tsx

@@ -6,20 +6,20 @@ import type {
     AllocationView,
     SettlementInfo,
 } from '@canton-network/core-token-standard'
-import { ActionRequired } from '../components/action-required'
-import { usePrimaryAccount } from '../hooks/useAccounts'
+import { ActionRequired } from '../../components/action-required'
+import { usePrimaryAccount } from '../../hooks/useAccounts'
 import {
     usePendingTransfersQueryOptions,
     useAllocationRequestsQueryOptions,
     useAllocationsQueryOptions,
-} from '../hooks/query-options'
+} from '../../hooks/query-options'
 import { useSuspenseQuery, useQuery } from '@tanstack/react-query'
-import { WalletsPreview } from '../components/wallets-preview'
+import { WalletsPreview } from '../../components/wallets-preview'
 import type {
     ActionItem,
     TransferActionItem,
     AllocationActionItem,
-} from '../components/types'
+} from '../../components/types'
 
 export function Index() {
     const primaryParty = usePrimaryAccount()?.partyId

examples/portfolio/src/routes/index.tsx → examples/portfolio/src/routes/_legacy/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { Index } from './index.component'
 
-export const Route = createFileRoute('/')({
+export const Route = createFileRoute('/_legacy/')({
     component: Index,
 })

examples/portfolio/src/routes/old.component.tsx → examples/portfolio/src/routes/_legacy/old.component.tsx

@@ -1,12 +1,12 @@
-import '../App.css'
-import { HoldingsTab } from '../oldcomponents/HoldingsTab'
-import { RegistriesTab } from '../oldcomponents/RegistriesTab'
-import { PendingTransfersTab } from '../oldcomponents/PendingTransfersTab'
-import { TwoStepTransferTab } from '../oldcomponents/TwoStepTransferTab'
-import { TransactionHistoryTab } from '../oldcomponents/TransactionHistoryTab'
-import { ConnectionCard } from '../oldcomponents/ConnectionCard'
-import { AllocationsTab } from '../oldcomponents/AllocationsTab'
-import { Tabs } from '../oldcomponents/Tabs'
+import '../../App.css'
+import { HoldingsTab } from '../../oldcomponents/HoldingsTab'
+import { RegistriesTab } from '../../oldcomponents/RegistriesTab'
+import { PendingTransfersTab } from '../../oldcomponents/PendingTransfersTab'
+import { TwoStepTransferTab } from '../../oldcomponents/TwoStepTransferTab'
+import { TransactionHistoryTab } from '../../oldcomponents/TransactionHistoryTab'
+import { ConnectionCard } from '../../oldcomponents/ConnectionCard'
+import { AllocationsTab } from '../../oldcomponents/AllocationsTab'
+import { Tabs } from '../../oldcomponents/Tabs'
 
 export function OldApp() {
     return (

examples/portfolio/src/routes/old.tsx → examples/portfolio/src/routes/_legacy/old.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { OldApp } from './old.component'
 
-export const Route = createFileRoute('/old')({
+export const Route = createFileRoute('/_legacy/old')({
     component: OldApp,
 })

examples/portfolio/src/routes/__root.component.tsx → examples/portfolio/src/routes/_legacy/route.tsx

@@ -1,14 +1,18 @@
-import { Outlet } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
-import { Header } from '../components/header'
-import { NetworkBanner } from '../components/network-banner'
-import { RegistryValidationModal } from '../components/registry-validation-modal'
-import { useRegistryValidation } from '../hooks/useRegistryValidation'
 import { Container } from '@mui/material'
+import { Header } from '../../components/header'
+import { NetworkBanner } from '../../components/network-banner'
+import { RegistryValidationModal } from '../../components/registry-validation-modal'
+import { useRegistryValidation } from '../../hooks/useRegistryValidation'
 
-export function RootComponent() {
+export const Route = createFileRoute('/_legacy')({
+    component: LegacyLayout,
+})
+
+function LegacyLayout() {
     const validationStatus = useRegistryValidation()
 
     return (

examples/portfolio/src/routes/settings.component.tsx → examples/portfolio/src/routes/_legacy/settings.component.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@mui/material'
-import { RegistrySettings } from '../components/registry-settings'
-import { TapSettings } from '../components/tap-settings'
-import { useIsDevNet } from '../hooks/useIsDevNet'
+import { RegistrySettings } from '../../components/registry-settings'
+import { TapSettings } from '../../components/tap-settings'
+import { useIsDevNet } from '../../hooks/useIsDevNet'
 
 export function SettingsPage() {
     const { data: isDevNet } = useIsDevNet()