FIX: Vault UI modals were broken

components/BottomModal.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef, useImperativeHandle, useRef, ReactElement, ComponentType } from 'react';
 import { SheetSize, SizeInfo, TrueSheet, TrueSheetProps } from '@lodev09/react-native-true-sheet';
 import { Keyboard, StyleSheet, View, TouchableOpacity, Platform, GestureResponderEvent, Text } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 import SaveFileButton from './SaveFileButton';
 import { useTheme } from './themes';
-import { Image } from '@rneui/base';
+import { Icon, Image } from '@rneui/base';
 
 interface BottomModalProps extends TrueSheetProps {
   children?: React.ReactNode;
@@ -107,7 +106,12 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
               testID="ModalShareButton"
               key="ModalShareButton"
             >
-              <Ionicons name="share" size={20} color={colors.buttonTextColor} />
+              <Icon
+                name={Platform.OS === 'android' ? 'share' : 'file-upload'}
+                type="font-awesome6"
+                size={20}
+                color={colors.buttonTextColor}
+              />
             </SaveFileButton>,
           );
         } else if (shareButtonOnPress) {
@@ -118,7 +122,12 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
               style={[styles.topRightButton, stylesHook.barButton]}
               onPress={shareButtonOnPress}
             >
-              <Ionicons name="share" size={20} color={colors.buttonTextColor} />
+              <Icon
+                name={Platform.OS === 'android' ? 'share' : 'file-upload'}
+                type="font-awesome6"
+                size={20}
+                color={colors.buttonTextColor}
+              />
             </TouchableOpacity>,
           );
         }
@@ -131,11 +140,7 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
             key="ModalDoneButton"
             testID="ModalDoneButton"
           >
-            {Platform.OS === 'ios' ? (
-              <Ionicons name="close" size={20} color={colors.buttonTextColor} />
-            ) : (
             <Image source={require('../img/close.png')} style={styles.closeButton} />
-            )}
           </TouchableOpacity>,
         );
       }
@@ -155,12 +160,23 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
         );
       }
 
+      if (showCloseButton || shareContent)
         return (
           <View style={styles.headerContainer}>
             <View style={styles.headerContent}>{typeof header === 'function' ? <header /> : header}</View>
             {renderTopRightButton()}
           </View>
         );
+
+      if (header) {
+        return (
+          <View style={styles.headerContainerWithCloseButton}>
+            {React.isValidElement(header) ? header : header ? React.createElement(header as ComponentType<any>) : null}
+            {renderTopRightButton()}
+          </View>
+        );
+      }
+      return null;
     };
 
     const renderFooter = (): ReactElement | undefined => {
@@ -210,6 +226,18 @@ const styles = StyleSheet.create({
     right: 16,
     top: 16,
   },
+  headerContainerWithCloseButton: {
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    minHeight: 22,
+    paddingHorizontal: 22,
+    width: '100%',
+    top: 16,
+    left: 0,
+    justifyContent: 'space-between',
+  },
   headerContent: {
     flex: 1,
     justifyContent: 'center',

screen/wallets/addMultisigStep2.js

@@ -38,6 +38,7 @@ import ToolTipMenu from '../../components/TooltipMenu';
 import { CommonToolTipActions } from '../../typings/CommonToolTipActions';
 import { useSettings } from '../../hooks/context/useSettings';
 import { isDesktop } from '../../blue_modules/environment';
+import { useKeyboard } from '../../hooks/useKeyboard';
 
 const staticCache = {};
 
@@ -63,6 +64,7 @@ const WalletsAddMultisigStep2 = () => {
   const openScannerButton = useRef();
   const { isPrivacyBlurEnabled } = useSettings();
   const data = useRef(new Array(n));
+  const { isVisible } = useKeyboard();
 
   useFocusEffect(
     useCallback(() => {
@@ -578,7 +580,7 @@ const WalletsAddMultisigStep2 = () => {
         isGrabberVisible={false}
         dismissible={false}
         showCloseButton={!isLoading}
-        footerDefaultMargins
+        sizes={[Platform.OS ? 'auto' : '80%']}
         backgroundColor={colors.modal}
         footer={
           <View style={styles.modalFooterBottomPadding}>
@@ -620,8 +622,8 @@ const WalletsAddMultisigStep2 = () => {
   const renderProvideMnemonicsModal = () => {
     return (
       <BottomModal
-        footerDefaultMargins
         footer={
+          !isVisible && (
             <View style={styles.modalFooterBottomPadding}>
               {isLoading ? (
                 <ActivityIndicator />
@@ -643,17 +645,19 @@ const WalletsAddMultisigStep2 = () => {
                 </>
               )}
             </View>
+          )
         }
         ref={provideMnemonicsModalRef}
         backgroundColor={colors.modal}
         isGrabberVisible={false}
+        showCloseButton={true}
+        sizes={[Platform.OS ? 'auto' : '80%']}
         onDismiss={() => {
           Keyboard.dismiss();
           setImportText('');
           setAskPassphrase(false);
         }}
-      >
-        <>
+        header={
           <ToolTipMenu
             isButton
             isMenuPrimaryAction
@@ -666,14 +670,14 @@ const WalletsAddMultisigStep2 = () => {
           >
             <Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
           </ToolTipMenu>
-
+        }
+      >
         <BlueTextCentered>{loc.multisig.type_your_mnemonics}</BlueTextCentered>
         <BlueSpacing20 />
         <View style={styles.multiLineTextInput}>
           <BlueFormMultiInput value={importText} onChangeText={setImportText} />
           <BlueSpacing20 />
         </View>
-        </>
       </BottomModal>
     );
   };
@@ -691,14 +695,16 @@ const WalletsAddMultisigStep2 = () => {
         backgroundColor={colors.modal}
         shareContent={{ fileContent: cosignerXpub, fileName: cosignerXpubFilename }}
         footerDefaultMargins
-        contentContainerStyle={[styles.modalContent, styles.alignItemsCenter]}
+        contentContainerStyle={styles.modalContent}
         footer={<View style={styles.modalFooterBottomPadding}>{isLoading ? <ActivityIndicator /> : null}</View>}
       >
         <Text style={[styles.headerText, stylesHook.textDestination]}>
           {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
         </Text>
         <BlueSpacing20 />
+        <View style={styles.qrContainer}>
           <QRCodeComponent value={cosignerXpubURv2} size={260} />
+        </View>
         <BlueSpacing20 />
       </BottomModal>
     );
@@ -765,12 +771,12 @@ const styles = StyleSheet.create({
     paddingVertical: 32,
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: 450,
+    minHeight: 400,
   },
   multiLineTextInput: {
     minHeight: 200,
   },
-  modalFooterBottomPadding: { paddingBottom: 26 },
+  modalFooterBottomPadding: { padding: 26 },
   vaultKeyCircleSuccess: {
     width: 42,
     height: 42,
@@ -788,7 +794,7 @@ const styles = StyleSheet.create({
     paddingRight: 8,
     borderRadius: 4,
   },
-  askPassprase: { top: -44, left: 0, justifyContent: 'center', width: 33, height: 33, borderRadius: 33 / 2 },
+  askPassprase: { justifyContent: 'center', width: 33, height: 33, borderRadius: 33 / 2 },
 
   secretContainer: {
     flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
@@ -799,7 +805,9 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   headerText: { fontSize: 15, color: '#13244D' },
-  alignItemsCenter: { alignItems: 'center' },
+  qrContainer: {
+    alignItems: 'center',
+  },
   helpButtonWrapper: {
     alignItems: 'flex-end',
     flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',