Hide "Return to your browser" when in in-app browser

Closes #1213

apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx

@@ -92,6 +92,8 @@ interface WalletConnectContextValue {
 
   resetWalletConnectClientInitializationAttempts: () => void
   resetWalletConnectStorage: () => void
+  isInEcosystemInAppBrowser: boolean
+  setIsInEcosystemInAppBrowser: (value: boolean) => void
 }
 
 const initialValues: WalletConnectContextValue = {
@@ -104,7 +106,9 @@ const initialValues: WalletConnectContextValue = {
   respondToWalletConnect: () => Promise.resolve(),
 
   resetWalletConnectClientInitializationAttempts: () => null,
-  resetWalletConnectStorage: () => null
+  resetWalletConnectStorage: () => null,
+  isInEcosystemInAppBrowser: false,
+  setIsInEcosystemInAppBrowser: () => null
 }
 
 const WalletConnectContext = createContext(initialValues)
@@ -129,6 +133,7 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
   const [walletConnectClient, setWalletConnectClient] = useState<WalletConnectContextValue['walletConnectClient']>()
   const [activeSessions, setActiveSessions] = useState<SessionTypes.Struct[]>([])
   const [walletConnectClientInitializationAttempts, setWalletConnectClientInitializationAttempts] = useState(0)
+  const [isInEcosystemInAppBrowser, setIsInEcosystemInAppBrowser] = useState(false)
 
   const isWalletConnectClientReady =
     isWalletConnectEnabled && walletConnectClient && walletConnectClientStatus === 'initialized'
@@ -882,7 +887,9 @@ export const WalletConnectContextProvider = ({ children }: { children: ReactNode
         resetWalletConnectClientInitializationAttempts,
         resetWalletConnectStorage,
         respondToWalletConnectWithError,
-        respondToWalletConnect
+        respondToWalletConnect,
+        isInEcosystemInAppBrowser,
+        setIsInEcosystemInAppBrowser
       }}
     >
       {children}

apps/mobile-wallet/src/contexts/walletConnect/WalletConnectSessionProposalModal.tsx

@@ -18,6 +18,7 @@ import Button from '~/components/buttons/Button'
 import ButtonsRow from '~/components/buttons/ButtonsRow'
 import InfoBox from '~/components/InfoBox'
 import { ScreenSection } from '~/components/layout/Screen'
+import useWalletConnectToasts from '~/contexts/walletConnect/useWalletConnectToasts'
 import { useWalletConnectContext } from '~/contexts/walletConnect/WalletConnectContext'
 import { activateAppLoading, deactivateAppLoading } from '~/features/loader/loaderActions'
 import BottomModal from '~/features/modals/BottomModal'
@@ -57,6 +58,7 @@ const WalletConnectSessionProposalModal = withModal<WalletConnectSessionProposal
     const persistAddressSettings = usePersistAddressSettings()
     const { t } = useTranslation()
     const { walletConnectClient, activeSessions, refreshActiveSessions } = useWalletConnectContext()
+    const { showApprovedToast, showRejectedToast } = useWalletConnectToasts()
 
     const [signerAddress, setSignerAddress] = useState<Address>()
     const [showAlternativeSignerAddresses, setShowAlternativeSignerAddresses] = useState(false)
@@ -179,7 +181,7 @@ const WalletConnectSessionProposalModal = withModal<WalletConnectSessionProposal
       } finally {
         refreshActiveSessions()
         dispatch(deactivateAppLoading())
-        showToast({ text1: t('dApp request approved'), text2: t('You can go back to your browser.') })
+        showApprovedToast()
         dispatch(closeModal({ id: modalId }))
       }
     }
@@ -197,7 +199,7 @@ const WalletConnectSessionProposalModal = withModal<WalletConnectSessionProposal
       } finally {
         refreshActiveSessions()
         dispatch(deactivateAppLoading())
-        showToast({ text1: t('dApp request rejected'), text2: t('You can go back to your browser.'), type: 'info' })
+        showRejectedToast()
         dispatch(closeModal({ id: modalId }))
       }
     }

apps/mobile-wallet/src/contexts/walletConnect/WalletConnectSessionRequestModal.tsx

@@ -36,6 +36,7 @@ import ButtonsRow from '~/components/buttons/ButtonsRow'
 import { ModalScreenTitle, ScreenSection } from '~/components/layout/Screen'
 import Surface from '~/components/layout/Surface'
 import Row from '~/components/Row'
+import useWalletConnectToasts from '~/contexts/walletConnect/useWalletConnectToasts'
 import { useWalletConnectContext } from '~/contexts/walletConnect/WalletConnectContext'
 import useFundPasswordGuard from '~/features/fund-password/useFundPasswordGuard'
 import { activateAppLoading, deactivateAppLoading } from '~/features/loader/loaderActions'
@@ -70,6 +71,7 @@ const WalletConnectSessionRequestModal = withModal(
     const { t } = useTranslation()
     const { triggerBiometricsAuthGuard } = useBiometricsAuthGuard()
     const { triggerFundPasswordAuthGuard } = useFundPasswordGuard()
+    const { showApprovedToast, showRejectedToast } = useWalletConnectToasts()
 
     const [isApproving, setIsApproving] = useState(false)
 
@@ -254,7 +256,7 @@ const WalletConnectSessionRequestModal = withModal(
       console.log('✅ INFORMING: DONE!')
 
       console.log('👉 RESETTING SESSION REQUEST EVENT.')
-      showToast({ text1: t('dApp request approved'), text2: t('You can go back to your browser.') })
+      showApprovedToast()
     }
 
     const onReject = async () => {
@@ -265,7 +267,7 @@ const WalletConnectSessionRequestModal = withModal(
       } catch (e) {
         console.error('❌ INFORMING: FAILED.')
       } finally {
-        showToast({ text1: t('dApp request rejected'), text2: t('You can go back to your browser.'), type: 'info' })
+        showRejectedToast()
         dispatch(closeModal({ id }))
       }
     }
@@ -320,7 +322,7 @@ const WalletConnectSessionRequestModal = withModal(
               } finally {
                 console.log('👉 RESETTING SESSION REQUEST EVENT.')
                 dispatch(deactivateAppLoading())
-                showToast({ text1: t('dApp request approved'), text2: t('You can go back to your browser.') })
+                showApprovedToast()
                 dispatch(closeModal({ id }))
               }
             }

apps/mobile-wallet/src/contexts/walletConnect/useWalletConnectToasts.ts

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next'
+
+import { useWalletConnectContext } from '~/contexts/walletConnect/WalletConnectContext'
+import { showToast } from '~/utils/layout'
+
+const useWalletConnectToasts = () => {
+  const { isInEcosystemInAppBrowser } = useWalletConnectContext()
+  const { t } = useTranslation()
+
+  const text2 = !isInEcosystemInAppBrowser ? t('You can go back to your browser.') : undefined
+
+  return {
+    showApprovedToast: () => showToast({ text1: t('dApp request approved'), text2 }),
+    showRejectedToast: () => showToast({ text1: t('dApp request rejected'), text2, type: 'info' })
+  }
+}
+
+export default useWalletConnectToasts

apps/mobile-wallet/src/features/ecosystem/DAppWebViewScreen.tsx

@@ -1,7 +1,7 @@
-import { useNavigation } from '@react-navigation/native'
+import { useFocusEffect, useNavigation } from '@react-navigation/native'
 import { NativeStackNavigationProp, NativeStackScreenProps } from '@react-navigation/native-stack'
 import * as Clipboard from 'expo-clipboard'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import WebView, { WebViewNavigation } from 'react-native-webview'
@@ -23,13 +23,22 @@ interface DAppWebViewScreenProps extends NativeStackScreenProps<RootStackParamLi
 const DAppWebViewScreen = ({ navigation, route, ...props }: DAppWebViewScreenProps) => {
   const { dAppUrl, dAppName } = route.params
   const webViewRef = useRef<WebView>(null)
+  const { setIsInEcosystemInAppBrowser } = useWalletConnectContext()
 
   const [currentUrl, setCurrentUrl] = useState(dAppUrl)
   const [canGoBack, setCanGoBack] = useState(false)
   const [canGoForward, setCanGoForward] = useState(false)
 
   useDetectWCUrlInClipboardAndPair()
 
+  useFocusEffect(
+    useCallback(() => {
+      setIsInEcosystemInAppBrowser(true)
+
+      return () => setIsInEcosystemInAppBrowser(false)
+    }, [setIsInEcosystemInAppBrowser])
+  )
+
   if (!dAppUrl) return null
 
   const handleGoBack = () => webViewRef.current?.goBack()