feat: Added a wrapper for the react-router-dom navigate hook

packages/toolbox-ui/src/components/BackButton.tsx

@@ -1,13 +1,14 @@
 import { UnstyledButton } from '@mantine/core'
 import { IconChevronLeft } from '@tabler/icons'
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
+
+import { useNavigation } from '../hooks/useNavigation'
 
 export const BackButton = () => {
-  const navigate = useNavigate()
+  const navigation = useNavigation()
 
   return (
-    <UnstyledButton onClick={() => navigate(-1)}>
+    <UnstyledButton onClick={() => navigation.goBack()}>
       <IconChevronLeft size={32} />
     </UnstyledButton>
   )

packages/toolbox-ui/src/hooks/useNavigation.ts

@@ -0,0 +1,65 @@
+import type { routeUrls } from '../routes'
+
+import { useNavigate } from 'react-router-dom'
+
+type Routes = typeof routeUrls
+// eslint-disable-next-line @typescript-eslint/ban-types
+type ExtractValues<T extends string, U extends object = {}> = T extends `${string}{${infer V}}${infer Rest}`
+  ? ExtractValues<Rest, U & { [key in V]: string }>
+  : U
+
+type RouteValues<S extends Routes[number]> = ExtractValues<S>
+
+function constructRoute<T extends Routes[number], Payload = RouteValues<T>>(
+  ...args: keyof Payload extends never ? [route: T] : [route: T, payload: RouteValues<T>]
+): string {
+  const [url, payload] = args
+  if (!payload) return url
+
+  let formattedUrl: string = url
+  for (const [key, value] of Object.entries(payload)) {
+    formattedUrl = formattedUrl.replace(`{${key}}`, `${value}`)
+  }
+
+  return formattedUrl
+}
+
+interface UseNavigationHook {
+  goBack(): void
+
+  navigate<T extends Routes[number], Payload = ExtractValues<T>>(
+    ...args: keyof Payload extends never ? [route: T] : [route: T, payload: ExtractValues<T>]
+  ): void
+
+  replace<T extends Routes[number], Payload = ExtractValues<T>>(
+    ...args: keyof Payload extends never ? [route: T] : [route: T, payload: ExtractValues<T>]
+  ): void
+  unSafeNavigate(route: string): void
+}
+
+export const useNavigation = (): UseNavigationHook => {
+  const navigate = useNavigate()
+
+  return {
+    goBack() {
+      navigate(-1)
+    },
+    navigate<T extends Routes[number], Payload = ExtractValues<T>>(
+      ...args: keyof Payload extends never ? [route: T] : [route: T, payload: ExtractValues<T>]
+    ) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      navigate(constructRoute(...args))
+    },
+    replace<T extends Routes[number], Payload = ExtractValues<T>>(
+      ...args: keyof Payload extends never ? [route: T] : [route: T, payload: ExtractValues<T>]
+    ) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      navigate(constructRoute(...args), { replace: true })
+    },
+    unSafeNavigate(route: string) {
+      navigate(route)
+    },
+  }
+}

packages/toolbox-ui/src/layout/LayoutActions.tsx

@@ -1,9 +1,9 @@
 import { createStyles } from '@mantine/core'
 import { IconLogout } from '@tabler/icons'
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { useAgentManager } from '../contexts/AgentManagerContext'
+import { useNavigation } from '../hooks/useNavigation'
 
 const useStyles = createStyles((theme, _params, getRef) => {
   const icon = getRef('icon')
@@ -41,11 +41,11 @@ const useStyles = createStyles((theme, _params, getRef) => {
 
 export const LayoutActions = () => {
   const { classes } = useStyles()
-  const navigate = useNavigate()
+  const navigation = useNavigation()
   const { setCurrentAgentId } = useAgentManager()
 
   const signOut = () => {
-    navigate('/')
+    navigation.navigate('/')
 
     setCurrentAgentId(undefined)
   }

packages/toolbox-ui/src/layout/LayoutNavBar.tsx

@@ -3,7 +3,8 @@ import type { TablerIcon } from '@tabler/icons'
 
 import { createStyles, Navbar } from '@mantine/core'
 import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+
+import { useNavigation } from '../hooks/useNavigation'
 
 import { LayoutActions } from './LayoutActions'
 import { LayoutAvatar } from './LayoutAvatar'
@@ -78,7 +79,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
 
 export const LayoutNavBar = ({ navigationItems, agent }: LayoutNavigationProps) => {
   const { classes, cx } = useStyles()
-  const navigate = useNavigate()
+  const navigation = useNavigation()
   const [activeIndex, setActiveIndex] = useState(0)
 
   return (
@@ -95,7 +96,7 @@ export const LayoutNavBar = ({ navigationItems, agent }: LayoutNavigationProps)
             key={item.name}
             onClick={(event) => {
               event.preventDefault()
-              navigate(item.href)
+              navigation.unSafeNavigate(item.href)
               setActiveIndex(index)
             }}
           >

packages/toolbox-ui/src/pages/AgentSelectionScreen.tsx

@@ -1,17 +1,17 @@
 import { Card, Container, Flex, Group, Space, Text, Title, UnstyledButton } from '@mantine/core'
 import { IconPlus } from '@tabler/icons'
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { useAgentManager } from '../contexts/AgentManagerContext'
+import { useNavigation } from '../hooks/useNavigation'
 
 export const AgentSelectionScreen = () => {
-  const navigate = useNavigate()
+  const navigation = useNavigation()
   const { agents, setCurrentAgentId } = useAgentManager()
 
   const switchToAgent = (agentId: string) => {
     setCurrentAgentId(agentId)
-    navigate('/agent')
+    navigation.navigate('/agent')
   }
 
   return (
@@ -26,7 +26,7 @@ export const AgentSelectionScreen = () => {
             </Card>
           </UnstyledButton>
         ))}
-        <UnstyledButton onClick={() => navigate('/setup')} h={80}>
+        <UnstyledButton onClick={() => navigation.navigate('/setup')} h={80}>
           <Group spacing="sm">
             <IconPlus />
             <Text span>Create new Agent</Text>

packages/toolbox-ui/src/pages/SetupScreen.tsx

@@ -2,10 +2,10 @@ import { uuid } from '@animo/toolbox-core/src/utils'
 import { createStyles, TextInput, Paper, Title, Button } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { BackButton } from '../components/BackButton'
 import { useAgentManager } from '../contexts/AgentManagerContext'
+import { useNavigation } from '../hooks/useNavigation'
 
 const useStyles = createStyles(() => ({
   backButton: {
@@ -28,7 +28,7 @@ interface CreateAgentForm {
 }
 
 export const SetupScreen = () => {
-  const navigate = useNavigate()
+  const navigation = useNavigation()
   const { classes } = useStyles()
   const form = useForm<CreateAgentForm>({
     initialValues: {
@@ -56,7 +56,7 @@ export const SetupScreen = () => {
       },
     ])
 
-    navigate('/')
+    navigation.navigate('/')
   }
 
   return (

packages/toolbox-ui/src/routes.tsx

@@ -9,6 +9,8 @@ import { AgentHomeScreen } from './pages/agent/AgentHomeScreen'
 import { ConnectionsScreen } from './pages/agent/connections/ConnectionsScreen'
 import { CredentialsScreen } from './pages/agent/credentials/CredentialsScreen'
 
+export const routeUrls = ['/', '/setup', '/agent', '/agent/connections', '/agent/credentials', '/agent/proofs'] as const
+
 export const routes: RouteObject[] = [
   {
     path: '/',