mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-23 23:27:26 +01:00
FIX: Vault UI modals were broken
This commit is contained in:
Marcos Rodriguez Velez
parent
5e2e0b58c2
commit
541d6aa206
2 changed files with 89 additions and 53 deletions
|
|
@ -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} />
|
||||
)}
|
||||
<Image source={require('../img/close.png')} style={styles.closeButton} />
|
||||
</TouchableOpacity>,
|
||||
);
|
||||
}
|
||||
|
|
@ -155,12 +160,23 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
|
|||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.headerContainer}>
|
||||
<View style={styles.headerContent}>{typeof header === 'function' ? <header /> : header}</View>
|
||||
{renderTopRightButton()}
|
||||
</View>
|
||||
);
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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,40 +622,42 @@ const WalletsAddMultisigStep2 = () => {
|
|||
const renderProvideMnemonicsModal = () => {
|
||||
return (
|
||||
<BottomModal
|
||||
footerDefaultMargins
|
||||
footer={
|
||||
<View style={styles.modalFooterBottomPadding}>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
testID="DoImportKeyButton"
|
||||
disabled={importText.trim().length === 0}
|
||||
title={loc.wallets.import_do_import}
|
||||
onPress={useMnemonicPhrase}
|
||||
/>
|
||||
<BlueButtonLink
|
||||
testID="ScanOrOpenFile"
|
||||
ref={openScannerButton}
|
||||
disabled={isLoading}
|
||||
onPress={scanOrOpenFile}
|
||||
title={loc.wallets.import_scan_qr}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
!isVisible && (
|
||||
<View style={styles.modalFooterBottomPadding}>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
testID="DoImportKeyButton"
|
||||
disabled={importText.trim().length === 0}
|
||||
title={loc.wallets.import_do_import}
|
||||
onPress={useMnemonicPhrase}
|
||||
/>
|
||||
<BlueButtonLink
|
||||
testID="ScanOrOpenFile"
|
||||
ref={openScannerButton}
|
||||
disabled={isLoading}
|
||||
onPress={scanOrOpenFile}
|
||||
title={loc.wallets.import_scan_qr}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
}
|
||||
>
|
||||
<BlueTextCentered>{loc.multisig.type_your_mnemonics}</BlueTextCentered>
|
||||
<BlueSpacing20 />
|
||||
<View style={styles.multiLineTextInput}>
|
||||
<BlueFormMultiInput value={importText} onChangeText={setImportText} />
|
||||
<BlueSpacing20 />
|
||||
<View style={styles.multiLineTextInput}>
|
||||
<BlueFormMultiInput value={importText} onChangeText={setImportText} />
|
||||
<BlueSpacing20 />
|
||||
</View>
|
||||
</>
|
||||
</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 />
|
||||
<QRCodeComponent value={cosignerXpubURv2} size={260} />
|
||||
<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',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue