refactor(swap): modals

apps/wallet-mobile/android/app/src/main/AndroidManifest.xml

@@ -31,7 +31,7 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustPan"
+        android:windowSoftInputMode="adjustResize"
         android:screenOrientation="portrait"
         android:exported="true">
         <intent-filter>

apps/wallet-mobile/src/AppNavigator.tsx

@@ -13,6 +13,8 @@ import {supportsAndroidFingerprintOverlay} from './auth/biometrics'
 import {EnableLoginWithPin} from './auth/EnableLoginWithPin'
 import {AgreementChangedNavigator, InitializationNavigator} from './features/Initialization'
 import {LegalAgreement, useLegalAgreement} from './features/Initialization/common'
+import {ModalProvider} from './features/Modal/ModalContext'
+import {ModalScreen} from './features/Modal/ModalScreen'
 import {CONFIG} from './legacy/config'
 import {DeveloperScreen} from './legacy/DeveloperScreen'
 import {AppRoutes} from './navigation'
@@ -62,78 +64,86 @@ export const AppNavigator = () => {
 
   return (
     <NavigationContainer onReady={onReady} ref={navRef}>
-      <Stack.Navigator
-        screenOptions={{
-          headerShown: false /* used only for transition */,
-          detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
-        }}
-      >
-        {/* Not Authenticated */}
-
-        {isLoggedOut && (
-          <Stack.Group>
-            {firstAction === 'first-run' && (
-              <Stack.Screen name="first-run">
-                {() => (
-                  <SearchProvider>
-                    <InitializationNavigator />
-                  </SearchProvider>
-                )}
-              </Stack.Screen>
-            )}
-
-            {firstAction === 'show-agreement-changed-notice' && (
-              <Stack.Screen name="agreement-changed-notice">{() => <AgreementChangedNavigator />}</Stack.Screen>
-            )}
-
-            {firstAction === 'auth-with-pin' && (
-              <Stack.Screen
-                name="custom-pin-auth"
-                component={PinLoginScreen}
-                options={{title: strings.loginPinTitle}}
-              />
-            )}
-
-            {firstAction === 'auth-with-os' && (
-              <Stack.Screen name="bio-auth-initial" component={OsLoginScreen} options={{headerShown: false}} />
-            )}
-
-            {firstAction === 'request-new-pin' && (
-              <Stack.Screen //
-                name="enable-login-with-pin"
-                component={CreatePinScreenWrapper}
-                options={{title: strings.customPinTitle}}
-              />
-            )}
-          </Stack.Group>
-        )}
-
-        {/* Authenticated */}
-
-        {isLoggedIn && (
-          <Stack.Group>
-            <Stack.Screen name="app-root">
-              {() => (
-                <SearchProvider>
-                  <WalletNavigator />
-                </SearchProvider>
+      <ModalProvider>
+        <Stack.Navigator
+          screenOptions={{
+            headerShown: false /* used only for transition */,
+            detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
+          }}
+        >
+          {/* Not Authenticated */}
+
+          {isLoggedOut && (
+            <Stack.Group>
+              {firstAction === 'first-run' && (
+                <Stack.Screen name="first-run">
+                  {() => (
+                    <SearchProvider>
+                      <InitializationNavigator />
+                    </SearchProvider>
+                  )}
+                </Stack.Screen>
               )}
-            </Stack.Screen>
 
-            <Stack.Screen name="new-wallet" component={WalletInitNavigator} />
-          </Stack.Group>
-        )}
+              {firstAction === 'show-agreement-changed-notice' && (
+                <Stack.Screen name="agreement-changed-notice">{() => <AgreementChangedNavigator />}</Stack.Screen>
+              )}
 
-        {/* Development */}
+              {firstAction === 'auth-with-pin' && (
+                <Stack.Screen
+                  name="custom-pin-auth"
+                  component={PinLoginScreen}
+                  options={{title: strings.loginPinTitle}}
+                />
+              )}
 
-        {__DEV__ && (
-          <Stack.Group>
-            <Stack.Screen name="developer" component={DeveloperScreen} options={{headerShown: false}} />
+              {firstAction === 'auth-with-os' && (
+                <Stack.Screen name="bio-auth-initial" component={OsLoginScreen} options={{headerShown: false}} />
+              )}
 
-            <Stack.Screen name="storybook" component={StorybookScreen} />
-          </Stack.Group>
-        )}
-      </Stack.Navigator>
+              {firstAction === 'request-new-pin' && (
+                <Stack.Screen //
+                  name="enable-login-with-pin"
+                  component={CreatePinScreenWrapper}
+                  options={{title: strings.customPinTitle}}
+                />
+              )}
+            </Stack.Group>
+          )}
+
+          {/* Authenticated */}
+
+          {isLoggedIn && (
+            <>
+              <Stack.Group>
+                <Stack.Screen name="app-root">
+                  {() => (
+                    <SearchProvider>
+                      <WalletNavigator />
+                    </SearchProvider>
+                  )}
+                </Stack.Screen>
+
+                <Stack.Screen name="new-wallet" component={WalletInitNavigator} />
+              </Stack.Group>
+
+              <Stack.Group screenOptions={{presentation: 'transparentModal'}}>
+                <Stack.Screen name="modal" component={ModalScreen} />
+              </Stack.Group>
+            </>
+          )}
+
+          {/* Development */}
+
+          {__DEV__ && (
+            <Stack.Group>
+              <Stack.Screen name="developer" component={DeveloperScreen} options={{headerShown: false}} />
+
+              <Stack.Screen name="storybook" component={StorybookScreen} />
+            </Stack.Group>
+          )}
+        </Stack.Navigator>
+      </ModalProvider>
     </NavigationContainer>
   )
 }

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -3,6 +3,7 @@ import {getFocusedRouteNameFromRoute} from '@react-navigation/native'
 import {createStackNavigator} from '@react-navigation/stack'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
+import {Keyboard} from 'react-native'
 
 import {VotingRegistration as VotingRegistration} from './Catalyst'
 import {Icon, OfflineBanner} from './components'
@@ -25,6 +26,22 @@ const WalletTabNavigator = () => {
   const wallet = useSelectedWallet()
   const initialRoute = isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' : 'history'
 
+  const [keyboardStatus, setKeyboardStatus] = React.useState<boolean>()
+
+  React.useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardWillShow', () => {
+      setKeyboardStatus(true)
+    })
+    const hideSubscription = Keyboard.addListener('keyboardWillHide', () => {
+      setKeyboardStatus(false)
+    })
+
+    return () => {
+      showSubscription.remove()
+      hideSubscription.remove()
+    }
+  }, [])
+
   return (
     <>
       <OfflineBanner />
@@ -35,6 +52,9 @@ const WalletTabNavigator = () => {
           tabBarLabelStyle: {fontSize: 11},
           tabBarActiveTintColor: theme.COLORS.NAVIGATION_ACTIVE,
           tabBarInactiveTintColor: theme.COLORS.NAVIGATION_INACTIVE,
+          tabBarStyle: {
+            display: keyboardStatus ? 'none' : undefined,
+          },
         }}
         initialRouteName={initialRoute}
         backBehavior="initialRoute"

apps/wallet-mobile/src/features/Modal/ModalContext.tsx

@@ -0,0 +1,66 @@
+import {useNavigation} from '@react-navigation/native'
+import React from 'react'
+
+type ModalState = {
+  height: number
+  title: string
+  content: React.ReactNode
+}
+type ModalActions = {
+  openModal: (title: ModalState['title'], content: ModalState['content'], height?: ModalState['height']) => void
+  closeModal: () => void
+}
+
+const ModalContext = React.createContext<undefined | (ModalState & ModalActions)>(undefined)
+
+export const useModal = () => {
+  const value = React.useContext(ModalContext)
+  if (!value) {
+    throw new Error('useModal must be used within a ModalProvider')
+  }
+  return value
+}
+
+export const ModalProvider = ({
+  children,
+  initialState,
+}: {
+  children: React.ReactNode
+  initialState?: Partial<ModalState>
+}) => {
+  const [state, dispatch] = React.useReducer(modalReducer, {...defaultState, ...initialState})
+  const navigation = useNavigation()
+  const actions = React.useRef<ModalActions>({
+    closeModal: () => {
+      dispatch({type: 'close'})
+      navigation.goBack()
+    },
+    openModal: (title: ModalState['title'], content: ModalState['content'], height?: ModalState['height']) => {
+      dispatch({type: 'open', title, content, height})
+      navigation.navigate('modal')
+    },
+  }).current
+
+  const context = React.useMemo(() => ({...state, ...actions}), [state, actions])
+
+  return <ModalContext.Provider value={context}>{children}</ModalContext.Provider>
+}
+
+type ModalAction =
+  | {type: 'open'; height: ModalState['height'] | undefined; content: ModalState['content']; title: ModalState['title']}
+  | {type: 'close'}
+
+const modalReducer = (state: ModalState, action: ModalAction) => {
+  switch (action.type) {
+    case 'open':
+      return {...state, content: action.content, height: action.height ?? defaultState.height, title: action.title}
+
+    case 'close':
+      return {...defaultState}
+
+    default:
+      throw new Error(`modalReducer invalid action`)
+  }
+}
+
+const defaultState: ModalState = Object.freeze({content: undefined, height: 350, title: ''})