Fix: Safe App share URL not always working (#2830)

* Fix: Safe App share URL not always working * Fix tests
safe-global · Nov 28, 2023 · 75d7389 · 75d7389
1 parent 8f09c2f
commit 75d7389
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 73 deletions.
diff --git a/src/hooks/safe-apps/useChainFromQueryParams.ts b/src/hooks/safe-apps/useChainFromQueryParams.ts
diff --git a/src/pages/share/safe-app.tsx b/src/pages/share/safe-app.tsx
@@ -1,49 +1,27 @@
-import { useEffect } from 'react'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import { Box, CircularProgress } from '@mui/material'
 import { useSafeAppUrl } from '@/hooks/safe-apps/useSafeAppUrl'
-import { useChainFromQueryParams } from '@/hooks/safe-apps/useChainFromQueryParams'
 import { SafeAppLanding } from '@/components/safe-apps/SafeAppLandingPage'
-import { AppRoutes } from '@/config/routes'
+import { useCurrentChain } from '@/hooks/useChains'
 
 const ShareSafeApp = () => {
-  const router = useRouter()
   const appUrl = useSafeAppUrl()
-  const { chain, validChain, loading: chainLoading, error: chainError } = useChainFromQueryParams()
-
-  useEffect(() => {
-    if (chainLoading) return
-
-    if (router.isReady && (!appUrl || !validChain || !chain)) {
-      router.push(AppRoutes.index)
-    }
-  }, [appUrl, validChain, chain, chainLoading, router])
-
-  if (chainLoading) {
-    return (
-      <Box py={4} textAlign="center">
-        <CircularProgress size={40} />
-      </Box>
-    )
-  }
-
-  if (!appUrl || !validChain || !chain) {
-    return null
-  }
-
-  if (chainError) {
-    throw new Error(chainError)
-  }
+  const chain = useCurrentChain()
 
   return (
     <>
       <Head>
-        <title>Safe Apps – Share</title>
+        <title>{`Safe{Wallet} – Safe Apps`}</title>
       </Head>
 
       <main>
-        <SafeAppLanding appUrl={appUrl} chain={chain} />
+        {appUrl && chain ? (
+          <SafeAppLanding appUrl={appUrl} chain={chain} />
+        ) : (
+          <Box py={4} textAlign="center">
+            <CircularProgress size={40} />
+          </Box>
+        )}
       </main>
     </>
   )

diff --git a/src/tests/pages/apps-share.test.tsx b/src/tests/pages/apps-share.test.tsx
@@ -68,6 +68,14 @@ describe('Share Safe App Page', () => {
   })
 
   it('Should show the app name, description and URL', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: {
+        pathname: '/share/safe-app',
+        search: '?appUrl=https://apps-portal.safe.global/tx-builder&chain=eth',
+      },
+    })
+
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
@@ -147,20 +155,28 @@ describe('Share Safe App Page', () => {
   })
 
   it('Should link to Safe Creation flow when the connected wallet has no owned Safes', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: {
+        pathname: '/share/safe-app',
+        search: '?appUrl=https://apps-portal.safe.global/tx-builder&chain=gor',
+      },
+    })
+
     const address = `0x${crypto.randomBytes(20).toString('hex')}`
     jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({
       ens: 'craicis90.eth',
       address,
       provider: jest.fn() as unknown as EIP1193Provider,
       label: 'Metamask',
-      chainId: '4',
+      chainId: '5',
     }))
 
     render(<ShareSafeApp />, {
       routerProps: {
         query: {
           appUrl: TX_BUILDER,
-          chain: 'rin',
+          chain: 'gor',
         },
       },
       initialReduxState: {
@@ -173,14 +189,22 @@ describe('Share Safe App Page', () => {
     })
 
     await waitFor(() => {
-      expect(fetchSafeAppFromManifestSpy).toHaveBeenCalledWith(TX_BUILDER, '4')
-      expect(getSafeAppsSpy).toHaveBeenCalledWith('4', { url: TX_BUILDER })
+      expect(fetchSafeAppFromManifestSpy).toHaveBeenCalledWith(TX_BUILDER, '5')
+      expect(getSafeAppsSpy).toHaveBeenCalledWith('5', { url: TX_BUILDER })
 
       expect(screen.getByText('Create new Safe Account')).toBeInTheDocument()
     })
   })
 
   it('Should show a select input with owned safes when the connected wallet owns Safes', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: {
+        pathname: '/share/safe-app',
+        search: '?appUrl=https://apps-portal.safe.global/tx-builder&chain=eth',
+      },
+    })
+
     const address = `0x${crypto.randomBytes(20).toString('hex')}`
     const safeAddress = `0x${crypto.randomBytes(20).toString('hex')}`
     jest.spyOn(useWalletHook, 'default').mockImplementation(() => ({