Merge branch 'development' of github.com:gnosis/safe-react into feature/#512-network-switching

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "3.6.6",
+  "version": "3.6.7",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {

src/components/CookiesBanner/index.tsx

@@ -9,6 +9,7 @@ import { COOKIES_KEY } from 'src/logic/cookies/model/cookie'
 import { openCookieBanner } from 'src/logic/cookies/store/actions/openCookieBanner'
 import { cookieBannerOpen } from 'src/logic/cookies/store/selectors'
 import { loadFromCookie, saveCookie } from 'src/logic/cookies/utils'
+import { useSafeAppUrl } from 'src/logic/hooks/useSafeAppUrl'
 import { mainFontFamily, md, primary, screenSm } from 'src/theme/variables'
 import { loadGoogleAnalytics, removeCookies } from 'src/utils/googleAnalytics'
 import { closeIntercom, isIntercomLoaded, loadIntercom } from 'src/utils/intercom'
@@ -97,7 +98,7 @@ interface CookiesBannerFormProps {
 const CookiesBanner = (): ReactElement => {
   const classes = useStyles()
   const dispatch = useRef(useDispatch())
-
+  const { url: appUrl } = useSafeAppUrl()
   const [showAnalytics, setShowAnalytics] = useState(false)
   const [showIntercom, setShowIntercom] = useState(false)
   const [localNecessary, setLocalNecessary] = useState(true)
@@ -106,6 +107,12 @@ const CookiesBanner = (): ReactElement => {
 
   const showBanner = useSelector(cookieBannerOpen)
 
+  useEffect(() => {
+    if (appUrl) {
+      setTimeout(closeIntercom, 50)
+    }
+  }, [appUrl])
+
   useEffect(() => {
     async function fetchCookiesFromStorage() {
       const cookiesState = await loadFromCookie(COOKIES_KEY)
@@ -171,7 +178,7 @@ const CookiesBanner = (): ReactElement => {
     dispatch.current(openCookieBanner({ cookieBannerOpen: false }))
   }
 
-  if (showIntercom) {
+  if (showIntercom && !appUrl) {
     loadIntercom()
   }
 

src/logic/hooks/useSafeAppUrl.tsx

@@ -0,0 +1,22 @@
+import { useLocation } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+
+type AppUrlReturnType = {
+  url: string | null
+}
+
+export const useSafeAppUrl = (): AppUrlReturnType => {
+  const [url, setUrl] = useState<string | null>(null)
+  const { search } = useLocation()
+
+  useEffect(() => {
+    if (search !== url) {
+      const query = new URLSearchParams(search)
+      setUrl(query.get('appUrl'))
+    }
+  }, [search, url])
+
+  return {
+    url,
+  }
+}

src/routes/safe/components/Apps/index.tsx

@@ -1,20 +1,14 @@
 import React from 'react'
-
-import { useLocation } from 'react-router-dom'
+import { useSafeAppUrl } from 'src/logic/hooks/useSafeAppUrl'
 
 import AppFrame from './components/AppFrame'
 import AppsList from './components/AppsList'
 
-const useQuery = () => {
-  return new URLSearchParams(useLocation().search)
-}
-
 const Apps = (): React.ReactElement => {
-  const query = useQuery()
-  const appUrl = query.get('appUrl')
+  const { url } = useSafeAppUrl()
 
-  if (appUrl) {
-    return <AppFrame appUrl={appUrl} />
+  if (url) {
+    return <AppFrame appUrl={url} />
   } else {
     return <AppsList />
   }