Fix: don't refresh main component on first page load

safe-global · May 12, 2023 · 895627a · 895627a
1 parent 460054c
commit 895627a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/hooks/useRouterQueryChanged.ts b/src/hooks/useRouterQueryChanged.ts
@@ -0,0 +1,23 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+// Return a given query param only when it has changed from a previous non-falsey value
+const useRouterQueryChanged = (queryParam: string): string => {
+  const router = useRouter()
+  const currentQuery = router.query[queryParam]?.toString() || ''
+  const [_, setPrevQuery] = useState<string>(currentQuery)
+  const [newQuery, setNewQuery] = useState<string>('')
+
+  useEffect(() => {
+    setPrevQuery((prev) => {
+      if (prev) {
+        setNewQuery(currentQuery)
+      }
+      return currentQuery
+    })
+  }, [currentQuery])
+
+  return newQuery
+}
+
+export default useRouterQueryChanged
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -40,6 +40,7 @@ const TermsBanner = dynamic(() => import('@/components/common/TermsBanner'), { s
 
 import useSafeMessageNotifications from '@/hooks/useSafeMessageNotifications'
 import useSafeMessagePendingStatuses from '@/hooks/useSafeMessagePendingStatuses'
+import useRouterQueryChanged from '@/hooks/useRouterQueryChanged'
 
 const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
 
@@ -94,10 +95,12 @@ const WebCoreApp = ({
   router,
   emotionCache = clientSideEmotionCache,
 }: WebCoreAppProps): ReactElement => {
+  const safeKey = useRouterQueryChanged('safe')
+
   return (
     <StoreHydrator>
       <Head>
-        <title key="default-title">{'Safe{Wallet}'}</title>
+        <title key="default-title">{'Safe'}</title>
         <MetaTags prefetchUrl={GATEWAY_URL} />
       </Head>
 
@@ -108,7 +111,7 @@ const WebCoreApp = ({
           <InitApp />
 
           <PageLayout pathname={router.pathname}>
-            <Component {...pageProps} key={router.query.safe?.toString()} />
+            <Component {...pageProps} key={safeKey} />
           </PageLayout>
 
           <CookieBanner />