diff --git a/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx b/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx index 66728fd43..eb8a13f02 100644 --- a/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectContext.tsx +++ b/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() const [activeSessions, setActiveSessions] = useState([]) 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} diff --git a/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectSessionProposalModal.tsx b/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectSessionProposalModal.tsx index 09cd13742..a599a83ae 100644 --- a/apps/mobile-wallet/src/contexts/walletConnect/WalletConnectSessionProposalModal.tsx +++ b/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() const [showAlternativeSignerAddresses, setShowAlternativeSignerAddresses] = useState(false) @@ -179,7 +181,7 @@ const WalletConnectSessionProposalModal = withModal { @@ -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 })) } } diff --git a/apps/mobile-wallet/src/contexts/walletConnect/useWalletConnectToasts.ts b/apps/mobile-wallet/src/contexts/walletConnect/useWalletConnectToasts.ts new file mode 100644 index 000000000..d25731eab --- /dev/null +++ b/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 diff --git a/apps/mobile-wallet/src/features/ecosystem/DAppWebViewScreen.tsx b/apps/mobile-wallet/src/features/ecosystem/DAppWebViewScreen.tsx index 4ac07875e..73bb01cb1 100644 --- a/apps/mobile-wallet/src/features/ecosystem/DAppWebViewScreen.tsx +++ b/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,6 +23,7 @@ interface DAppWebViewScreenProps extends NativeStackScreenProps { const { dAppUrl, dAppName } = route.params const webViewRef = useRef(null) + const { setIsInEcosystemInAppBrowser } = useWalletConnectContext() const [currentUrl, setCurrentUrl] = useState(dAppUrl) const [canGoBack, setCanGoBack] = useState(false) @@ -30,6 +31,14 @@ const DAppWebViewScreen = ({ navigation, route, ...props }: DAppWebViewScreenPro useDetectWCUrlInClipboardAndPair() + useFocusEffect( + useCallback(() => { + setIsInEcosystemInAppBrowser(true) + + return () => setIsInEcosystemInAppBrowser(false) + }, [setIsInEcosystemInAppBrowser]) + ) + if (!dAppUrl) return null const handleGoBack = () => webViewRef.current?.goBack()