bump react router and fix issues

ChainSafe · Dec 3, 2024 · eeae06f · eeae06f
1 parent afc2ecb
commit eeae06f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 48 deletions.
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -77,6 +77,7 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
   }, [multisigList, pureProxyList])
   const { ownAddressList } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
+
   const getMultiProxyByAddress = useCallback(
     (address?: string) => {
       if (!address) return undefined
@@ -118,6 +119,7 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     () => isWatchedAccount(selectedMultiProxy),
     [isWatchedAccount, selectedMultiProxy]
   )
+
   const [, setSearchParams] = useSearchParams({
     address: ''
   })
@@ -126,7 +128,6 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     setMultisigList(null)
     setPureProxyList(null)
   }, [])
-
   const setAddressInUrl = useCallback(
     (address: string) => {
       setSearchParams((prev) => {

diff --git a/packages/ui/src/hooks/useSwitchAddress.tsx b/packages/ui/src/hooks/useSwitchAddress.tsx
@@ -1,15 +1,16 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { useMultiProxy } from '../contexts/MultiProxyContext'
 
 export const useSwitchAddress = () => {
-  const [searchParams, setSearchParams] = useSearchParams({
+  const [searchParams] = useSearchParams({
     address: '',
     network: ''
   })
   const urlAddress = useMemo(() => {
     return searchParams.get('address') || ''
   }, [searchParams])
+
   const {
     multiProxyList,
     isLoading: isMultiproxyLoading,
@@ -19,59 +20,34 @@ export const useSwitchAddress = () => {
     setCanFindMultiProxyFromUrl
   } = useMultiProxy()
 
-  const setAddress = useCallback(
-    (address: string) => {
-      setSearchParams((prev) => {
-        prev.set('address', address)
-        return prev
-      })
-    },
-    [setSearchParams]
-  )
-
   useEffect(() => {
     if (isMultiproxyLoading) {
       // we're not yet initialized
       return
     }
 
-    if (!urlAddress && !!defaultAddress) {
-      // no address in the url, init with the first multiProxy from the list
-      setAddress(defaultAddress)
-      return
-    }
-  }, [
-    defaultAddress,
-    isMultiproxyLoading,
-    multiProxyList,
-    setAddress,
-    setCanFindMultiProxyFromUrl,
-    urlAddress
-  ])
+    if (!!urlAddress && !selectedMultiProxyAddress) {
+      // this looks like a first load with an address
+      const isSuccess = selectMultiProxy(urlAddress)
+      setCanFindMultiProxyFromUrl(isSuccess)
 
-  // the url address is driving the UI if there's a mismatch
-  // force the url address to match
-  useEffect(() => {
-    if (isMultiproxyLoading) {
-      // we're not yet initialized
       return
     }
 
-    if (!urlAddress || urlAddress === selectedMultiProxyAddress) {
-      setCanFindMultiProxyFromUrl(true)
-    }
-
-    if (!!urlAddress && urlAddress !== selectedMultiProxyAddress) {
-      const isSuccess = selectMultiProxy(urlAddress)
+    if (!urlAddress && !!defaultAddress) {
+      // no address in the url, init with the default
+      const isSuccess = selectMultiProxy(defaultAddress)
       setCanFindMultiProxyFromUrl(isSuccess)
+
+      return
     }
   }, [
-    urlAddress,
+    defaultAddress,
+    isMultiproxyLoading,
     multiProxyList,
     selectMultiProxy,
-    defaultAddress,
     selectedMultiProxyAddress,
-    isMultiproxyLoading,
-    setCanFindMultiProxyFromUrl
+    setCanFindMultiProxyFromUrl,
+    urlAddress
   ])
 }
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -12,6 +12,11 @@ const root = createRoot(container!)
 
 root.render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <RouterProvider
+      router={router}
+      future={{
+        v7_startTransition: true
+      }}
+    />
   </StrictMode>
 )
diff --git a/packages/ui/src/pages/routes.tsx b/packages/ui/src/pages/routes.tsx
@@ -44,11 +44,22 @@ export const ROUTES: Route[] = [
   }
 ]
 
-export const router = createBrowserRouter([
+export const router = createBrowserRouter(
+  [
+    {
+      path: '/',
+      element: <App />,
+      errorElement: <ErrorFallback />,
+      children: ROUTES
+    }
+  ],
   {
-    path: '/',
-    element: <App />,
-    errorElement: <ErrorFallback />,
-    children: ROUTES
+    future: {
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true
+    }
   }
-])
+)