Merge branch 'releases/v0.0.8' into feat/ui/integration

e2e/availabilities.spec.ts

@@ -3,6 +3,7 @@ import test, { expect } from "@playwright/test";
 test('creates an availability', async ({ page }) => {
     await page.goto('/dashboard');
     await page.getByRole('link', { name: 'Sales' }).click();
+    await page.waitForTimeout(500);
     await page.getByRole('button').first().click();
     await page.getByLabel('Total size').click();
     await page.getByLabel('Total size').fill('0.50');
@@ -26,6 +27,7 @@ test('creates an availability', async ({ page }) => {
 
 test('availability navigation buttons', async ({ page }) => {
     await page.goto('/dashboard/availabilities');
+    await page.waitForTimeout(500);
     await page.getByRole('button').first().click();
     await expect(page.locator('.stepper-number-done')).not.toBeVisible()
     await expect(page.locator('.stepper-number-active')).toBeVisible()

package-lock.json

@@ -4841,4 +4841,4 @@
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
-}
+}

src/routeTree.gen.ts

@@ -8,6 +8,8 @@
 
 // This file is auto-generated by TanStack Router
 
+import { createFileRoute } from '@tanstack/react-router'
+
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
@@ -32,6 +34,13 @@ import { Route as DashboardAvailabilitiesImport } from './routes/dashboard/avail
 import { Route as DashboardAnalyticsImport } from './routes/dashboard/analytics'
 import { Route as DashboardAboutImport } from './routes/dashboard/about'
 
+// Create Virtual Routes
+
+const DashboardPeersLazyImport = createFileRoute('/dashboard/peers')()
+const DashboardAvailabilitiesLazyImport = createFileRoute(
+  '/dashboard/availabilities',
+)()
+
 // Create/Update Routes
 
 const OnboardingNameRoute = OnboardingNameImport.update({
@@ -69,6 +78,22 @@ const DashboardWalletRoute = DashboardWalletImport.update({
   path: '/wallet',
   getParentRoute: () => DashboardRoute,
 } as any)
+const DashboardPeersLazyRoute = DashboardPeersLazyImport.update({
+  id: '/peers',
+  path: '/peers',
+  getParentRoute: () => DashboardRoute,
+} as any).lazy(() =>
+  import('./routes/dashboard/peers.lazy').then((d) => d.Route),
+)
+
+const DashboardAvailabilitiesLazyRoute =
+  DashboardAvailabilitiesLazyImport.update({
+    id: '/availabilities',
+    path: '/availabilities',
+    getParentRoute: () => DashboardRoute,
+  } as any).lazy(() =>
+    import('./routes/dashboard/availabilities.lazy').then((d) => d.Route),
+  )
 
 const DashboardSettingsRoute = DashboardSettingsImport.update({
   id: '/settings',
@@ -289,134 +314,171 @@ declare module '@tanstack/react-router' {
       path: '/wallet'
       fullPath: '/dashboard/wallet'
       preLoaderRoute: typeof DashboardWalletImport
-      parentRoute: typeof DashboardImport
-    }
-    '/dashboard/': {
-      id: '/dashboard/'
-      path: '/'
-      fullPath: '/dashboard/'
-      preLoaderRoute: typeof DashboardIndexImport
-      parentRoute: typeof DashboardImport
+      '/dashboard/availabilities': {
+        id: '/dashboard/availabilities'
+        path: '/availabilities'
+        fullPath: '/dashboard/availabilities'
+        preLoaderRoute: typeof DashboardAvailabilitiesLazyImport
+        parentRoute: typeof DashboardImport
+      }
+      '/dashboard/peers': {
+        id: '/dashboard/peers'
+        path: '/peers'
+        fullPath: '/dashboard/peers'
+        preLoaderRoute: typeof DashboardPeersLazyImport
+        parentRoute: typeof DashboardImport
+      }
+      '/dashboard/': {
+        id: '/dashboard/'
+        path: '/'
+        fullPath: '/dashboard/'
+        preLoaderRoute: typeof DashboardIndexImport
+        parentRoute: typeof DashboardImport
+      }
     }
   }
-}
 
-// Create and export the route tree
+  // Create and export the route tree
 
-interface DashboardRouteChildren {
-  DashboardAboutRoute: typeof DashboardAboutRoute
-  DashboardAnalyticsRoute: typeof DashboardAnalyticsRoute
-  DashboardAvailabilitiesRoute: typeof DashboardAvailabilitiesRoute
-  DashboardDeviceRoute: typeof DashboardDeviceRoute
-  DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute
-  DashboardFavoritesRoute: typeof DashboardFavoritesRoute
-  DashboardFilesRoute: typeof DashboardFilesRoute
-  DashboardHelpRoute: typeof DashboardHelpRoute
-  DashboardLogsRoute: typeof DashboardLogsRoute
-  DashboardNodesRoute: typeof DashboardNodesRoute
-  DashboardPeersRoute: typeof DashboardPeersRoute
-  DashboardPurchasesRoute: typeof DashboardPurchasesRoute
-  DashboardRequestsRoute: typeof DashboardRequestsRoute
-  DashboardSettingsRoute: typeof DashboardSettingsRoute
-  DashboardWalletRoute: typeof DashboardWalletRoute
-  DashboardIndexRoute: typeof DashboardIndexRoute
-}
+  interface DashboardRouteChildren {
+    DashboardAboutRoute: typeof DashboardAboutRoute
+    DashboardAnalyticsRoute: typeof DashboardAnalyticsRoute
+    DashboardAvailabilitiesRoute: typeof DashboardAvailabilitiesRoute
+    DashboardDeviceRoute: typeof DashboardDeviceRoute
+    DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute
+    DashboardFavoritesRoute: typeof DashboardFavoritesRoute
+    DashboardFilesRoute: typeof DashboardFilesRoute
+    DashboardHelpRoute: typeof DashboardHelpRoute
+    DashboardLogsRoute: typeof DashboardLogsRoute
+    DashboardNodesRoute: typeof DashboardNodesRoute
+    DashboardPeersRoute: typeof DashboardPeersRoute
+    DashboardPurchasesRoute: typeof DashboardPurchasesRoute
+    DashboardRequestsRoute: typeof DashboardRequestsRoute
+    DashboardSettingsRoute: typeof DashboardSettingsRoute
+    DashboardWalletRoute: typeof DashboardWalletRoute
+    DashboardPurchasesRoute: typeof DashboardPurchasesRoute
+    DashboardRequestsRoute: typeof DashboardRequestsRoute
+    DashboardSettingsRoute: typeof DashboardSettingsRoute
+    DashboardAvailabilitiesLazyRoute: typeof DashboardAvailabilitiesLazyRoute
+    DashboardPeersLazyRoute: typeof DashboardPeersLazyRoute
+    DashboardIndexRoute: typeof DashboardIndexRoute
+  }
 
-const DashboardRouteChildren: DashboardRouteChildren = {
-  DashboardAboutRoute: DashboardAboutRoute,
-  DashboardAnalyticsRoute: DashboardAnalyticsRoute,
-  DashboardAvailabilitiesRoute: DashboardAvailabilitiesRoute,
-  DashboardDeviceRoute: DashboardDeviceRoute,
-  DashboardDisclaimerRoute: DashboardDisclaimerRoute,
-  DashboardFavoritesRoute: DashboardFavoritesRoute,
-  DashboardFilesRoute: DashboardFilesRoute,
-  DashboardHelpRoute: DashboardHelpRoute,
-  DashboardLogsRoute: DashboardLogsRoute,
-  DashboardNodesRoute: DashboardNodesRoute,
-  DashboardPeersRoute: DashboardPeersRoute,
-  DashboardPurchasesRoute: DashboardPurchasesRoute,
-  DashboardRequestsRoute: DashboardRequestsRoute,
-  DashboardSettingsRoute: DashboardSettingsRoute,
-  DashboardWalletRoute: DashboardWalletRoute,
-  DashboardIndexRoute: DashboardIndexRoute,
-}
+  const DashboardRouteChildren: DashboardRouteChildren = {
+    DashboardAboutRoute: DashboardAboutRoute,
+    DashboardAnalyticsRoute: DashboardAnalyticsRoute,
+    DashboardAvailabilitiesRoute: DashboardAvailabilitiesRoute,
+    DashboardDeviceRoute: DashboardDeviceRoute,
+    DashboardDisclaimerRoute: DashboardDisclaimerRoute,
+    DashboardFavoritesRoute: DashboardFavoritesRoute,
+    DashboardFilesRoute: DashboardFilesRoute,
+    DashboardHelpRoute: DashboardHelpRoute,
+    DashboardLogsRoute: DashboardLogsRoute,
+    DashboardNodesRoute: DashboardNodesRoute,
+    DashboardPeersRoute: DashboardPeersRoute,
+    DashboardPurchasesRoute: DashboardPurchasesRoute,
+    DashboardRequestsRoute: DashboardRequestsRoute,
+    DashboardSettingsRoute: DashboardSettingsRoute,
+    DashboardWalletRoute: DashboardWalletRoute,
+    DashboardPurchasesRoute: DashboardPurchasesRoute,
+    DashboardRequestsRoute: DashboardRequestsRoute,
+    DashboardSettingsRoute: DashboardSettingsRoute,
+    DashboardAvailabilitiesLazyRoute: DashboardAvailabilitiesLazyRoute,
+    DashboardPeersLazyRoute: DashboardPeersLazyRoute,
+    DashboardIndexRoute: DashboardIndexRoute,
+  }
 
-const DashboardRouteWithChildren = DashboardRoute._addFileChildren(
-  DashboardRouteChildren,
-)
+  const DashboardRouteWithChildren = DashboardRoute._addFileChildren(
+    DashboardRouteChildren,
+  )
 
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-  '/dashboard': typeof DashboardRouteWithChildren
-  '/onboarding-checks': typeof OnboardingChecksRoute
-  '/onboarding-name': typeof OnboardingNameRoute
-  '/dashboard/about': typeof DashboardAboutRoute
-  '/dashboard/analytics': typeof DashboardAnalyticsRoute
-  '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
-  '/dashboard/device': typeof DashboardDeviceRoute
-  '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
-  '/dashboard/favorites': typeof DashboardFavoritesRoute
-  '/dashboard/files': typeof DashboardFilesRoute
-  '/dashboard/help': typeof DashboardHelpRoute
-  '/dashboard/logs': typeof DashboardLogsRoute
-  '/dashboard/nodes': typeof DashboardNodesRoute
-  '/dashboard/peers': typeof DashboardPeersRoute
-  '/dashboard/purchases': typeof DashboardPurchasesRoute
-  '/dashboard/requests': typeof DashboardRequestsRoute
-  '/dashboard/settings': typeof DashboardSettingsRoute
-  '/dashboard/wallet': typeof DashboardWalletRoute
-  '/dashboard/': typeof DashboardIndexRoute
-}
+  export interface FileRoutesByFullPath {
+    '/': typeof IndexRoute
+    '/dashboard': typeof DashboardRouteWithChildren
+    '/onboarding-checks': typeof OnboardingChecksRoute
+    '/onboarding-name': typeof OnboardingNameRoute
+    '/dashboard/about': typeof DashboardAboutRoute
+    '/dashboard/analytics': typeof DashboardAnalyticsRoute
+    '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
+    '/dashboard/device': typeof DashboardDeviceRoute
+    '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
+    '/dashboard/favorites': typeof DashboardFavoritesRoute
+    '/dashboard/files': typeof DashboardFilesRoute
+    '/dashboard/help': typeof DashboardHelpRoute
+    '/dashboard/logs': typeof DashboardLogsRoute
+    '/dashboard/nodes': typeof DashboardNodesRoute
+    '/dashboard/peers': typeof DashboardPeersRoute
+    '/dashboard/purchases': typeof DashboardPurchasesRoute
+    '/dashboard/requests': typeof DashboardRequestsRoute
+    '/dashboard/settings': typeof DashboardSettingsRoute
+    '/dashboard/wallet': typeof DashboardWalletRoute
+    '/dashboard/purchases': typeof DashboardPurchasesRoute
+    '/dashboard/requests': typeof DashboardRequestsRoute
+    '/dashboard/settings': typeof DashboardSettingsRoute
+    '/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute
+    '/dashboard/peers': typeof DashboardPeersLazyRoute
+    '/dashboard/': typeof DashboardIndexRoute
+  }
 
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-  '/onboarding-checks': typeof OnboardingChecksRoute
-  '/onboarding-name': typeof OnboardingNameRoute
-  '/dashboard/about': typeof DashboardAboutRoute
-  '/dashboard/analytics': typeof DashboardAnalyticsRoute
-  '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
-  '/dashboard/device': typeof DashboardDeviceRoute
-  '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
-  '/dashboard/favorites': typeof DashboardFavoritesRoute
-  '/dashboard/files': typeof DashboardFilesRoute
-  '/dashboard/help': typeof DashboardHelpRoute
-  '/dashboard/logs': typeof DashboardLogsRoute
-  '/dashboard/nodes': typeof DashboardNodesRoute
-  '/dashboard/peers': typeof DashboardPeersRoute
-  '/dashboard/purchases': typeof DashboardPurchasesRoute
-  '/dashboard/requests': typeof DashboardRequestsRoute
-  '/dashboard/settings': typeof DashboardSettingsRoute
-  '/dashboard/wallet': typeof DashboardWalletRoute
-  '/dashboard': typeof DashboardIndexRoute
-}
+  export interface FileRoutesByTo {
+    '/': typeof IndexRoute
+    '/onboarding-checks': typeof OnboardingChecksRoute
+    '/onboarding-name': typeof OnboardingNameRoute
+    '/dashboard/about': typeof DashboardAboutRoute
+    '/dashboard/analytics': typeof DashboardAnalyticsRoute
+    '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
+    '/dashboard/device': typeof DashboardDeviceRoute
+    '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
+    '/dashboard/favorites': typeof DashboardFavoritesRoute
+    '/dashboard/files': typeof DashboardFilesRoute
+    '/dashboard/help': typeof DashboardHelpRoute
+    '/dashboard/logs': typeof DashboardLogsRoute
+    '/dashboard/nodes': typeof DashboardNodesRoute
+    '/dashboard/peers': typeof DashboardPeersRoute
+    '/dashboard/purchases': typeof DashboardPurchasesRoute
+    '/dashboard/requests': typeof DashboardRequestsRoute
+    '/dashboard/settings': typeof DashboardSettingsRoute
+    '/dashboard/wallet': typeof DashboardWalletRoute
+    '/dashboard/purchases': typeof DashboardPurchasesRoute
+    '/dashboard/requests': typeof DashboardRequestsRoute
+    '/dashboard/settings': typeof DashboardSettingsRoute
+    '/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute
+    '/dashboard/peers': typeof DashboardPeersLazyRoute
+    '/dashboard': typeof DashboardIndexRoute
+  }
 
-export interface FileRoutesById {
-  __root__: typeof rootRoute
-  '/': typeof IndexRoute
-  '/dashboard': typeof DashboardRouteWithChildren
-  '/onboarding-checks': typeof OnboardingChecksRoute
-  '/onboarding-name': typeof OnboardingNameRoute
-  '/dashboard/about': typeof DashboardAboutRoute
-  '/dashboard/analytics': typeof DashboardAnalyticsRoute
-  '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
-  '/dashboard/device': typeof DashboardDeviceRoute
-  '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
-  '/dashboard/favorites': typeof DashboardFavoritesRoute
-  '/dashboard/files': typeof DashboardFilesRoute
-  '/dashboard/help': typeof DashboardHelpRoute
-  '/dashboard/logs': typeof DashboardLogsRoute
-  '/dashboard/nodes': typeof DashboardNodesRoute
-  '/dashboard/peers': typeof DashboardPeersRoute
-  '/dashboard/purchases': typeof DashboardPurchasesRoute
-  '/dashboard/requests': typeof DashboardRequestsRoute
-  '/dashboard/settings': typeof DashboardSettingsRoute
-  '/dashboard/wallet': typeof DashboardWalletRoute
-  '/dashboard/': typeof DashboardIndexRoute
-}
+  export interface FileRoutesById {
+    __root__: typeof rootRoute
+    '/': typeof IndexRoute
+    '/dashboard': typeof DashboardRouteWithChildren
+    '/onboarding-checks': typeof OnboardingChecksRoute
+    '/onboarding-name': typeof OnboardingNameRoute
+    '/dashboard/about': typeof DashboardAboutRoute
+    '/dashboard/analytics': typeof DashboardAnalyticsRoute
+    '/dashboard/availabilities': typeof DashboardAvailabilitiesRoute
+    '/dashboard/device': typeof DashboardDeviceRoute
+    '/dashboard/disclaimer': typeof DashboardDisclaimerRoute
+    '/dashboard/favorites': typeof DashboardFavoritesRoute
+    '/dashboard/files': typeof DashboardFilesRoute
+    '/dashboard/help': typeof DashboardHelpRoute
+    '/dashboard/logs': typeof DashboardLogsRoute
+    '/dashboard/nodes': typeof DashboardNodesRoute
+    '/dashboard/peers': typeof DashboardPeersRoute
+    '/dashboard/purchases': typeof DashboardPurchasesRoute
+    '/dashboard/requests': typeof DashboardRequestsRoute
+    '/dashboard/settings': typeof DashboardSettingsRoute
+    '/dashboard/wallet': typeof DashboardWalletRoute
+    '/dashboard/purchases': typeof DashboardPurchasesRoute
+    '/dashboard/requests': typeof DashboardRequestsRoute
+    '/dashboard/settings': typeof DashboardSettingsRoute
+    '/dashboard/availabilities': typeof DashboardAvailabilitiesLazyRoute
+    '/dashboard/peers': typeof DashboardPeersLazyRoute
+    '/dashboard/': typeof DashboardIndexRoute
+  }
 
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
+  export interface FileRouteTypes {
+    fileRoutesByFullPath: FileRoutesByFullPath
+    fullPaths:
     | '/'
     | '/dashboard'
     | '/onboarding-checks'
@@ -436,9 +498,14 @@ export interface FileRouteTypes {
     | '/dashboard/requests'
     | '/dashboard/settings'
     | '/dashboard/wallet'
+    | '/dashboard/purchases'
+    | '/dashboard/requests'
+    | '/dashboard/settings'
+    | '/dashboard/availabilities'
+    | '/dashboard/peers'
     | '/dashboard/'
-  fileRoutesByTo: FileRoutesByTo
-  to:
+    fileRoutesByTo: FileRoutesByTo
+    to:
     | '/'
     | '/onboarding-checks'
     | '/onboarding-name'
@@ -457,8 +524,13 @@ export interface FileRouteTypes {
     | '/dashboard/requests'
     | '/dashboard/settings'
     | '/dashboard/wallet'
+    | '/dashboard/purchases'
+    | '/dashboard/requests'
+    | '/dashboard/settings'
+    | '/dashboard/availabilities'
+    | '/dashboard/peers'
     | '/dashboard'
-  id:
+    id:
     | '__root__'
     | '/'
     | '/dashboard'
@@ -479,27 +551,32 @@ export interface FileRouteTypes {
     | '/dashboard/requests'
     | '/dashboard/settings'
     | '/dashboard/wallet'
+    | '/dashboard/purchases'
+    | '/dashboard/requests'
+    | '/dashboard/settings'
+    | '/dashboard/availabilities'
+    | '/dashboard/peers'
     | '/dashboard/'
-  fileRoutesById: FileRoutesById
-}
+    fileRoutesById: FileRoutesById
+  }
 
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-  DashboardRoute: typeof DashboardRouteWithChildren
-  OnboardingChecksRoute: typeof OnboardingChecksRoute
-  OnboardingNameRoute: typeof OnboardingNameRoute
-}
+  export interface RootRouteChildren {
+    IndexRoute: typeof IndexRoute
+    DashboardRoute: typeof DashboardRouteWithChildren
+    OnboardingChecksRoute: typeof OnboardingChecksRoute
+    OnboardingNameRoute: typeof OnboardingNameRoute
+  }
 
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-  DashboardRoute: DashboardRouteWithChildren,
-  OnboardingChecksRoute: OnboardingChecksRoute,
-  OnboardingNameRoute: OnboardingNameRoute,
-}
+  const rootRouteChildren: RootRouteChildren = {
+    IndexRoute: IndexRoute,
+    DashboardRoute: DashboardRouteWithChildren,
+    OnboardingChecksRoute: OnboardingChecksRoute,
+    OnboardingNameRoute: OnboardingNameRoute,
+  }
 
-export const routeTree = rootRoute
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
+  export const routeTree = rootRoute
+    ._addFileChildren(rootRouteChildren)
+    ._addFileTypes<FileRouteTypes>()
 
 /* prettier-ignore-end */
 
@@ -536,6 +613,11 @@ export const routeTree = rootRoute
         "/dashboard/requests",
         "/dashboard/settings",
         "/dashboard/wallet",
+        "/dashboard/purchases",
+        "/dashboard/requests",
+        "/dashboard/settings",
+        "/dashboard/availabilities",
+        "/dashboard/peers",
         "/dashboard/"
       ]
     },
@@ -603,6 +685,12 @@ export const routeTree = rootRoute
     },
     "/dashboard/wallet": {
       "filePath": "dashboard/wallet.tsx",
+    "/dashboard/availabilities": {
+      "filePath": "dashboard/availabilities.lazy.tsx",
+      "parent": "/dashboard"
+    },
+    "/dashboard/peers": {
+      "filePath": "dashboard/peers.lazy.tsx",
       "parent": "/dashboard"
     },
     "/dashboard/": {

src/routes/dashboard/availabilities.lazy.tsx

@@ -1,30 +1,30 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { ErrorBoundary } from "@sentry/react";
-import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { ErrorBoundary } from '@sentry/react'
+import { ErrorPlaceholder } from '../../components/ErrorPlaceholder/ErrorPlaceholder'
 import {
   SpaceAllocationItem,
   Spinner,
-} from "@codex-storage/marketplace-ui-components";
-import { useQuery } from "@tanstack/react-query";
-import { Promises } from "../../utils/promises";
-import { CodexSdk } from "../../sdk/codex";
-import "./availabilities.css";
-import { AvailabilitiesTable } from "../../components/Availability/AvailabilitiesTable";
-import { AvailabilityEdit } from "../../components/Availability/AvailabilityEdit";
-import { Strings } from "../../utils/strings";
-import { PrettyBytes } from "../../utils/bytes";
-import { AvailabilitySunburst } from "../../components/Availability/AvailabilitySunburst";
-import { Errors } from "../../utils/errors";
-import { availabilityColors } from "../../components/Availability/availability.colors";
-import { AvailabilityStorage } from "../../utils/availabilities-storage";
-import { AvailabilityWithSlots } from "../../components/Availability/types";
+} from '@codex-storage/marketplace-ui-components'
+import { useQuery } from '@tanstack/react-query'
+import { Promises } from '../../utils/promises'
+import { CodexSdk } from '../../sdk/codex'
+import './availabilities.css'
+import { AvailabilitiesTable } from '../../components/Availability/AvailabilitiesTable'
+import { AvailabilityEdit } from '../../components/Availability/AvailabilityEdit'
+import { Strings } from '../../utils/strings'
+import { PrettyBytes } from '../../utils/bytes'
+import { AvailabilitySunburst } from '../../components/Availability/AvailabilitySunburst'
+import { Errors } from '../../utils/errors'
+import { availabilityColors } from '../../components/Availability/availability.colors'
+import { AvailabilityStorage } from '../../utils/availabilities-storage'
+import { AvailabilityWithSlots } from '../../components/Availability/types'
 
 const defaultSpace = {
   quotaMaxBytes: 0,
   quotaReservedBytes: 0,
   quotaUsedBytes: 0,
   totalBlocks: 0,
-};
+}
 
 export function Availabilities() {
   {
@@ -44,22 +44,22 @@ export function Availabilities() {
                   .reservations(a.id)
                   .then((res) => {
                     if (res.error) {
-                      Errors.report(res);
-                      return { ...a, slots: [] };
+                      Errors.report(res)
+                      return { ...a, slots: [] }
                     }
 
-                    return { ...a, slots: res.data };
+                    return { ...a, slots: res.data }
                   })
                   .then((data) =>
                     AvailabilityStorage.get(data.id).then((n) => ({
                       ...data,
-                      name: n || "",
-                    }))
-                  )
-              )
-            )
+                      name: n || '',
+                    })),
+                  ),
+              ),
+            ),
           ),
-      queryKey: ["availabilities"],
+      queryKey: ['availabilities'],
       initialData: [],
 
       // .then((res) =>
@@ -79,7 +79,7 @@ export function Availabilities() {
 
       // Throw the error to the error boundary
       throwOnError: true,
-    });
+    })
 
     // Error will be catched in ErrorBounday
     const { data: space = defaultSpace } = useQuery({
@@ -87,7 +87,7 @@ export function Availabilities() {
         CodexSdk.data()
           .space()
           .then((s) => Promises.rejectOnError(s)),
-      queryKey: ["space"],
+      queryKey: ['space'],
       initialData: defaultSpace,
 
       // No need to retry because if the connection to the node
@@ -104,24 +104,24 @@ export function Availabilities() {
 
       // Throw the error to the error boundary
       throwOnError: true,
-    });
+    })
 
     const allocation: SpaceAllocationItem[] = availabilities.map(
       (a, index) => ({
         title: Strings.shortId(a.id),
         size: a.totalSize,
-        tooltip: a.id + "\u000D\u000A" + PrettyBytes(a.totalSize),
+        tooltip: a.id + '\u000D\u000A' + PrettyBytes(a.totalSize),
         color: availabilityColors[index],
-      })
-    );
+      }),
+    )
 
     allocation.push({
-      title: "Space remaining",
+      title: 'Space remaining',
       // TODO move this to domain
       size:
         space.quotaMaxBytes - space.quotaReservedBytes - space.quotaUsedBytes,
-      color: "transparent",
-    });
+      color: 'transparent',
+    })
 
     return (
       <div className="container">
@@ -135,7 +135,8 @@ export function Availabilities() {
               <div className="availabilities-header">
                 <AvailabilitySunburst
                   availabilities={availabilities}
-                  space={space}></AvailabilitySunburst>
+                  space={space}
+                ></AvailabilitySunburst>
 
                 <AvailabilityEdit
                   space={space}
@@ -155,17 +156,18 @@ export function Availabilities() {
           )}
         </div>
       </div>
-    );
+    )
   }
 }
 
-export const Route = createFileRoute("/dashboard/availabilities")({
+export const Route = createLazyFileRoute('/dashboard/availabilities')({
   component: () => (
     <ErrorBoundary
       fallback={({ error }) => (
         <ErrorPlaceholder error={error} subtitle="Cannot retrieve the data." />
-      )}>
+      )}
+    >
       <Availabilities />
     </ErrorBoundary>
   ),
-});
+})

src/routes/dashboard/peers.lazy.tsx

@@ -1,5 +1,4 @@
 import { Cell, Row, Table } from "@codex-storage/marketplace-ui-components";
-import { createFileRoute } from "@tanstack/react-router";
 import { getMapJSON } from "dotted-map";
 import DottedMap from "dotted-map/without-countries";
 import { Promises } from "../../utils/promises";
@@ -14,6 +13,7 @@ import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceho
 import { PeersIcon } from "../../components/Menu/PeersIcon";
 import { SuccessCheckIcon } from "../../components/SuccessCheckIcon/SuccessCheckIcon";
 import { ErrorCircleIcon } from "../../components/ErrorCircleIcon/ErrorCircleIcon";
+import { createLazyFileRoute } from "@tanstack/react-router";
 
 // This function accepts the same arguments as DottedMap in the example above.
 const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" });
@@ -139,7 +139,7 @@ const Peers = () => {
   );
 };
 
-export const Route = createFileRoute("/dashboard/peers")({
+export const Route = createLazyFileRoute("/dashboard/peers")({
   component: () => (
     <ErrorBoundary
       fallback={({ error }) => (

vite.config.ts

@@ -12,6 +12,11 @@ export default defineConfig({
   build: {
     sourcemap: true,
     rollupOptions: {
+      output: {
+        manualChunks: {
+          "@sentry/react": ["@sentry/react"],
+        }
+      },
       onwarn(warning, defaultHandler) {
         if (warning.code === "SOURCEMAP_ERROR") {
           return;