refactor(swap): modals

apps/wallet-mobile/.storybook/decorators/modals.tsx

@@ -2,7 +2,7 @@ import {action} from '@storybook/addon-actions'
 import React from 'react'
 import {Button, View} from 'react-native'
 
-import {Modal} from '../../src/components'
+import {Modal} from '../../src/legacy/Modal'
 
 type childrenFn = (modalProps: {
   visible: boolean

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

@@ -11,6 +11,8 @@ import {OsLoginScreen, PinLoginScreen, useBackgroundTimeout} from './auth'
 import {useAuth} from './auth/AuthProvider'
 import {supportsAndroidFingerprintOverlay} from './auth/biometrics'
 import {EnableLoginWithPin} from './auth/EnableLoginWithPin'
+import {ModalProvider} from './components/Modal/ModalContext'
+import {ModalScreen} from './components/Modal/ModalScreen'
 import {AgreementChangedNavigator, InitializationNavigator} from './features/Initialization'
 import {LegalAgreement, useLegalAgreement} from './features/Initialization/common'
 import {CONFIG} from './legacy/config'
@@ -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/Catalyst/VotingRegistrationBackupCheckModal.tsx

@@ -2,8 +2,9 @@ import React, {useState} from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, View} from 'react-native'
 
-import {Button, Checkbox, Modal, Spacer, Text} from '../components'
+import {Button, Checkbox, Spacer, Text} from '../components'
 import globalMessages, {confirmationMessages} from '../i18n/global-messages'
+import {Modal} from '../legacy/Modal'
 
 type Props = {
   onConfirm: () => void

apps/wallet-mobile/src/Dashboard/Dashboard.tsx

@@ -5,8 +5,9 @@ import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {ActivityIndicator, RefreshControl, ScrollView, StyleSheet, View, ViewProps} from 'react-native'
 
-import {Banner, Button, Modal, StatusBar} from '../components'
+import {Banner, Button, StatusBar} from '../components'
 import globalMessages from '../i18n/global-messages'
+import {Modal} from '../legacy/Modal'
 import {useWalletNavigation} from '../navigation'
 import {useSelectedWallet} from '../SelectedWallet'
 import {isEmptyString} from '../utils/utils'

apps/wallet-mobile/src/HW/LedgerConnect/LedgerConnect.stories.tsx

@@ -2,7 +2,7 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 
 import {WithModalProps} from '../../../.storybook/decorators'
-import {Modal} from '../../components'
+import {Modal} from '../../legacy/Modal'
 import {LedgerConnect} from './LedgerConnect'
 
 const devices = [

apps/wallet-mobile/src/HW/LedgerTransportSwitchModal/LedgerTransportSwitchModal.tsx

@@ -3,8 +3,9 @@ import {defineMessages, useIntl} from 'react-intl'
 import {Alert, Platform, ScrollView, StyleSheet, View} from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 
-import {Button, Modal, Text} from '../../components'
+import {Button, Text} from '../../components'
 import globalMessages from '../../i18n/global-messages'
+import {Modal} from '../../legacy/Modal'
 import {spacing} from '../../theme'
 import {HARDWARE_WALLETS, useLedgerPermissions} from '../../yoroi-wallets/hw'
 

apps/wallet-mobile/src/Receive/AddressModal.tsx

@@ -4,7 +4,8 @@ import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, View} from 'react-native'
 import QRCode from 'react-native-qrcode-svg'
 
-import {CopyButton, Modal, Spacer, Text} from '../components'
+import {CopyButton, Spacer, Text} from '../components'
+import {Modal} from '../legacy/Modal'
 import {useSelectedWallet} from '../SelectedWallet'
 import {getSpendingKey, getStakingKey} from '../yoroi-wallets/cardano/addressInfo'
 import {AddressType, formatPath} from '../yoroi-wallets/cardano/formatPath'

apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx

@@ -3,8 +3,9 @@ import {defineMessages, useIntl} from 'react-intl'
 import {Image, ScrollView, StyleSheet, TextStyle, View} from 'react-native'
 
 import image from '../../assets/img/mnemonic_explanation.png'
-import {Button, Modal, Text} from '../../components'
+import {Button, Text} from '../../components'
 import {confirmationMessages} from '../../i18n/global-messages'
+import {Modal} from '../../legacy/Modal'
 import {spacing} from '../../theme'
 
 type Props = {

apps/wallet-mobile/src/TxHistory/ModalInfo/ModalInfo.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet} from 'react-native'
 
-import {Icon, Modal, Spacer} from '../../components'
+import {Icon, Spacer} from '../../components'
+import {Modal} from '../../legacy/Modal'
 import {COLORS} from '../../theme'
 
 type Props = {

apps/wallet-mobile/src/WalletInit/MnemonicBackupModal/MnemonicBackupImportanceModal.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet} from 'react-native'
 
-import {Button, Checkbox, Modal, Text} from '../../components'
+import {Button, Checkbox, Text} from '../../components'
+import {Modal} from '../../legacy/Modal'
 import {spacing} from '../../theme'
 
 type Props = {

apps/wallet-mobile/src/WalletInit/MnemonicExplanationModal/MnemonicExplanationModal.tsx

@@ -4,7 +4,8 @@ import {Image, StyleSheet, View} from 'react-native'
 import Markdown from 'react-native-markdown-display'
 
 import image from '../../assets/img/mnemonic_explanation.png'
-import {Button, Modal} from '../../components'
+import {Button} from '../../components'
+import {Modal} from '../../legacy/Modal'
 import {spacing} from '../../theme'
 
 type Props = {

apps/wallet-mobile/src/WalletInit/WalletInit/WalletInitScreen.tsx

@@ -4,9 +4,10 @@ import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import {Button, Modal, ScreenBackground, StatusBar} from '../../components'
+import {Button, ScreenBackground, StatusBar} from '../../components'
 import {LedgerTransportSwitchModal} from '../../HW'
 import globalMessages from '../../i18n/global-messages'
+import {Modal} from '../../legacy/Modal'
 import {WalletInitRouteNavigation, WalletInitRoutes} from '../../navigation'
 import {COLORS} from '../../theme'
 import {WALLET_CONFIG_24} from '../../yoroi-wallets/cardano/constants/mainnet/constants'

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 [isKeyboardOpen, setIsKeyboardOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardWillShow', () => {
+      setIsKeyboardOpen(true)
+    })
+    const hideSubscription = Keyboard.addListener('keyboardWillHide', () => {
+      setIsKeyboardOpen(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: isKeyboardOpen ? 'none' : undefined,
+          },
         }}
         initialRouteName={initialRoute}
         backBehavior="initialRoute"

apps/wallet-mobile/src/components/ConfirmTx/Dialog.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import {useIntl} from 'react-intl'
 
-import {ErrorView, Modal, PleaseWaitView} from '../../components'
+import {ErrorView, PleaseWaitView} from '../../components'
 import {LedgerConnect, LedgerTransportSwitchView} from '../../HW'
 import globalMessages, {ledgerMessages, txLabels} from '../../i18n/global-messages'
+import {Modal} from '../../legacy/Modal'
 import {DeviceId, DeviceObj} from '../../yoroi-wallets/hw'
 
 type ErrorData = {

apps/wallet-mobile/src/components/DangerousActionModal/DangerousActionModal.tsx

@@ -4,8 +4,9 @@ import {ScrollView, StyleSheet, View} from 'react-native'
 
 import {Icon} from '../../components/Icon'
 import globalMessages, {confirmationMessages} from '../../i18n/global-messages'
+import {Modal} from '../../legacy/Modal'
 import {COLORS} from '../../theme'
-import {Button, Checkbox, Modal, Spacer, Text} from '..'
+import {Button, Checkbox, Spacer, Text} from '..'
 
 type DangerousActionProps = {
   title: string

apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx

@@ -4,11 +4,11 @@ import {Image, LayoutAnimation, ScrollView, StyleSheet, Text, TouchableOpacity,
 
 import image from '../../assets/img/error.png'
 import globalMessages, {errorMessages} from '../../i18n/global-messages'
+import {Modal} from '../../legacy/Modal'
 import {brand, COLORS, spacing} from '../../theme'
 import {isEmptyString} from '../../utils/utils'
 import {Button} from '../Button'
 import {Icon} from '../Icon'
-import {Modal} from '../Modal'
 
 type ErrorViewProps = {
   title?: string