From 11f079f07a564fd70ac8863e3485f1805b82902e Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Mon, 25 Nov 2024 12:39:43 -0600 Subject: [PATCH] prevent portal overlay on pin authentication screen --- src/App.tsx | 4 ---- src/hooks/useActiveRoute.ts | 16 ++++++++++++++++ src/navigation/Routes.android.tsx | 6 ++++++ src/navigation/Routes.ios.tsx | 6 ++++++ src/react-native-cool-modals/Portal.tsx | 11 ++++++++--- 5 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 src/hooks/useActiveRoute.ts diff --git a/src/App.tsx b/src/App.tsx index 80a5f7140a2..3d4cc1d7cc2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,6 @@ import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-cont import { enableScreens } from 'react-native-screens'; import { connect, Provider as ReduxProvider, shallowEqual } from 'react-redux'; import { RecoilRoot } from 'recoil'; -import PortalConsumer from '@/components/PortalConsumer'; import ErrorBoundary from '@/components/error-boundary/ErrorBoundary'; import { OfflineToast } from '@/components/toasts'; import { designSystemPlaygroundEnabled, reactNativeDisableYellowBox, showNetworkRequests, showNetworkResponses } from '@/config/debug'; @@ -26,7 +25,6 @@ import { MainThemeProvider } from '@/theme/ThemeContext'; import { addressKey } from '@/utils/keychainConstants'; import { SharedValuesProvider } from '@/helpers/SharedValuesContext'; import { InitialRouteContext } from '@/navigation/initialRoute'; -import { Portal } from '@/react-native-cool-modals/Portal'; import { NotificationsHandler } from '@/notifications/NotificationsHandler'; import { analyticsV2 } from '@/analytics'; import { getOrCreateDeviceId, securelyHashWalletAddress } from '@/analytics/utils'; @@ -82,8 +80,6 @@ function App({ walletReady }: AppProps) { - - ); diff --git a/src/hooks/useActiveRoute.ts b/src/hooks/useActiveRoute.ts new file mode 100644 index 00000000000..523eb741004 --- /dev/null +++ b/src/hooks/useActiveRoute.ts @@ -0,0 +1,16 @@ +import { Navigation, useNavigation } from '@/navigation'; +import { useEffect, useState } from 'react'; + +export const useActiveRoute = () => { + const { addListener } = useNavigation(); + const [activeRoute, setActiveRoute] = useState(Navigation.getActiveRoute()); + + useEffect(() => { + const unsubscribe = addListener('state', () => { + setActiveRoute(Navigation.getActiveRoute()); + }); + return unsubscribe; + }, [addListener]); + + return activeRoute?.name; +}; diff --git a/src/navigation/Routes.android.tsx b/src/navigation/Routes.android.tsx index 79bfbd90c29..5fdf407299a 100644 --- a/src/navigation/Routes.android.tsx +++ b/src/navigation/Routes.android.tsx @@ -90,6 +90,8 @@ import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPane import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel'; import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel'; import { RootStackParamList } from './types'; +import PortalConsumer from '@/components/PortalConsumer'; +import { Portal as CMPortal } from '@/react-native-cool-modals/Portal'; const Stack = createStackNavigator(); const OuterStack = createStackNavigator(); @@ -272,6 +274,10 @@ const AppContainerWithAnalytics = React.forwardRef + + {/* NOTE: Internally, these use some navigational checks */} + + )); diff --git a/src/navigation/Routes.ios.tsx b/src/navigation/Routes.ios.tsx index 459561484d3..64b293f2378 100644 --- a/src/navigation/Routes.ios.tsx +++ b/src/navigation/Routes.ios.tsx @@ -102,6 +102,8 @@ import { ControlPanel } from '@/components/DappBrowser/control-panel/ControlPane import { ClaimRewardsPanel } from '@/screens/points/claim-flow/ClaimRewardsPanel'; import { ClaimClaimablePanel } from '@/screens/claimables/ClaimClaimablePanel'; import { RootStackParamList } from './types'; +import PortalConsumer from '@/components/PortalConsumer'; +import { Portal as CMPortal } from '@/react-native-cool-modals/Portal'; const Stack = createStackNavigator(); const NativeStack = createNativeStackNavigator(); @@ -286,6 +288,10 @@ const AppContainerWithAnalytics = React.forwardRef + + {/* NOTE: Internally, these use some navigational checks */} + + )); diff --git a/src/react-native-cool-modals/Portal.tsx b/src/react-native-cool-modals/Portal.tsx index 19c09a0aa3d..97ab83052da 100644 --- a/src/react-native-cool-modals/Portal.tsx +++ b/src/react-native-cool-modals/Portal.tsx @@ -1,18 +1,23 @@ -import React from 'react'; -import { IS_IOS } from '@/env'; +import React, { useEffect, useState } from 'react'; +import { IS_ANDROID, IS_IOS } from '@/env'; import { portalStore } from '@/state/portal/portal'; import { requireNativeComponent, StyleSheet, View } from 'react-native'; +import Routes from '@/navigation/routesNames'; +import { Navigation, useNavigation } from '@/navigation'; +import { useActiveRoute } from '@/hooks/useActiveRoute'; const NativePortal = IS_IOS ? requireNativeComponent('WindowPortal') : View; const Wrapper = IS_IOS ? ({ children }: { children: React.ReactNode }) => children : View; export function Portal() { + const activeRoute = useActiveRoute(); + const { blockTouches, Component } = portalStore(state => ({ blockTouches: state.blockTouches, Component: state.Component, })); - if (!Component) { + if (!Component || (activeRoute === Routes.PIN_AUTHENTICATION_SCREEN && !IS_IOS)) { return null; }