chore: handle unknown network

* handle unknown network

* chore: alternative solution (#102)

---------

Co-authored-by: Neil Campbell <[email protected]>

Author: PatrickDinh

src/App.routes.tsx

@@ -34,6 +34,7 @@ export const routes = evalTemplates([
       },
       {
         template: Urls.Explore,
+        errorElement: <ErrorPage />,
         element: (
           <NetworkPage>
             <Outlet />

src/features/deep-link/hooks/use-deep-link.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect } from 'react'
 import { listen } from '@tauri-apps/api/event'
 import { useNavigate } from 'react-router-dom'
-import { useSelectedNetwork } from '@/features/settings/data'
+import { useSetSelectedNetwork } from '@/features/settings/data'
 import { parseDeepLink } from '@/features/deep-link/parse-deep-link'
 import { Urls } from '@/routes/urls'
 
 export function useDeepLink() {
-  const [_, setSelectedNetwork] = useSelectedNetwork()
+  const setSelectedNetwork = useSetSelectedNetwork()
   const navigate = useNavigate()
 
   const handleDeepLink = useCallback(

src/features/network/pages/network-page.tsx

@@ -1,21 +1,28 @@
 import { useRequiredParam } from '@/features/common/hooks/use-required-param'
-import { UrlParams, Urls } from '@/routes/urls'
-import { networksConfigs } from '@/features/settings/data'
-import { useNavigate } from 'react-router-dom'
+import { UrlParams } from '@/routes/urls'
+import { networksConfigs, useSelectedNetwork } from '@/features/settings/data'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useEffect } from 'react'
 
 type Props = {
   children: React.ReactNode
 }
 export function NetworkPage({ children }: Props) {
+  const [selectedNetwork] = useSelectedNetwork()
   const { networkId } = useRequiredParam(UrlParams.NetworkId)
   const navigate = useNavigate()
+  const { pathname, search, hash } = useLocation()
+  const isWildcardNetworkRoute = networkId === '_'
+  const isValidNetwork = isWildcardNetworkRoute || (networksConfigs.find((c) => c.id === networkId) ? true : false)
+  if (!isValidNetwork) {
+    throw new Error(`"${networkId}" is not a valid network.`)
+  }
 
   useEffect(() => {
-    if (!networksConfigs.find((c) => c.id === networkId)) {
-      navigate(Urls.Index.build({}))
+    if (isWildcardNetworkRoute) {
+      navigate(pathname.replace('_', selectedNetwork) + search + hash)
     }
-  }, [navigate, networkId])
+  }, [hash, pathname, search, navigate, selectedNetwork, isWildcardNetworkRoute])
 
   return children
 }