This commit is contained in:
Marcos Rodriguez Velez 2024-07-06 17:55:03 -04:00
parent 3518b7bf9d
commit 52e4be2f27
No known key found for this signature in database
GPG key ID: 6030B2F48CCE86D7
4 changed files with 130 additions and 118 deletions

View file

@ -90,7 +90,6 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
const renderFooter = (): ReactElement<any, string | JSXElementConstructor<any>> | ComponentType<unknown> | undefined => { const renderFooter = (): ReactElement<any, string | JSXElementConstructor<any>> | ComponentType<unknown> | undefined => {
// Footer is not working correctly on Android yet. // Footer is not working correctly on Android yet.
if (Platform.OS === 'android') return undefined;
if (!footer) return undefined; if (!footer) return undefined;
if (React.isValidElement(footer)) { if (React.isValidElement(footer)) {
@ -104,6 +103,8 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
return undefined; return undefined;
}; };
const FooterComponent = Platform.OS !== 'android' && renderFooter();
return ( return (
<TrueSheet <TrueSheet
name={name ?? 'BottomModal'} name={name ?? 'BottomModal'}
@ -114,14 +115,15 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
onPresent={onPresent} onPresent={onPresent}
onSizeChange={onSizeChange} onSizeChange={onSizeChange}
grabber={isGrabberVisible} grabber={isGrabberVisible}
FooterComponent={renderFooter()} // Footer is not working correctly on Android yet.
FooterComponent={FooterComponent as ReactElement}
{...props} {...props}
blurTint="regular" blurTint="regular"
accessibilityViewIsModal accessibilityViewIsModal
> >
{children} {children}
{renderTopRightButton()} {renderTopRightButton()}
{renderFooter() as ReactNode} {Platform.OS === 'android' && (renderFooter() as ReactNode)}
</TrueSheet> </TrueSheet>
); );
}, },

View file

@ -1284,32 +1284,36 @@ const SendDetails = () => {
</TouchableOpacity> </TouchableOpacity>
} }
> >
{options.map(({ label, time, fee, rate, active, disabled }) => ( <View style={styles.paddingTop80}>
<TouchableOpacity {options.map(({ label, time, fee, rate, active, disabled }) => (
accessibilityRole="button" <TouchableOpacity
key={label} accessibilityRole="button"
disabled={disabled} key={label}
onPress={() => { disabled={disabled}
setFeePrecalc(fp => ({ ...fp, current: fee })); onPress={() => {
feeModalRef.current?.dismiss(); setFeePrecalc(fp => ({ ...fp, current: fee }));
setCustomFee(rate.toString()); feeModalRef.current?.dismiss();
}} setCustomFee(rate.toString());
style={[styles.feeModalItem, active && styles.feeModalItemActive, active && !disabled && stylesHook.feeModalItemActive]} }}
> style={[styles.feeModalItem, active && styles.feeModalItemActive, active && !disabled && stylesHook.feeModalItemActive]}
<View style={styles.feeModalRow}> >
<Text style={[styles.feeModalLabel, disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalLabel]}>{label}</Text> <View style={styles.feeModalRow}>
<View style={[styles.feeModalTime, disabled ? stylesHook.feeModalItemDisabled : stylesHook.feeModalTime]}> <Text style={[styles.feeModalLabel, disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalLabel]}>
<Text style={stylesHook.feeModalTimeText}>~{time}</Text> {label}
</Text>
<View style={[styles.feeModalTime, disabled ? stylesHook.feeModalItemDisabled : stylesHook.feeModalTime]}>
<Text style={stylesHook.feeModalTimeText}>~{time}</Text>
</View>
</View> </View>
</View> <View style={styles.feeModalRow}>
<View style={styles.feeModalRow}> <Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>{fee && formatFee(fee)}</Text>
<Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>{fee && formatFee(fee)}</Text> <Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>
<Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}> {rate} {loc.units.sat_vbyte}
{rate} {loc.units.sat_vbyte} </Text>
</Text> </View>
</View> </TouchableOpacity>
</TouchableOpacity> ))}
))} </View>
</BottomModal> </BottomModal>
); );
}; };
@ -1655,7 +1659,9 @@ const styles = StyleSheet.create({
}, },
modalContent: { modalContent: {
margin: 22, margin: 22,
minHeight: 370,
}, },
paddingTop80: { paddingTop: 80 },
optionsContent: { optionsContent: {
padding: 22, padding: 22,
}, },

View file

@ -400,7 +400,6 @@ const ViewEditMultisigCosigners: React.FC = () => {
)} )}
<MultipleStepsListItem <MultipleStepsListItem
useActionSheet
actionSheetOptions={{ actionSheetOptions={{
options: [loc._.cancel, loc.multisig.confirm], options: [loc._.cancel, loc.multisig.confirm],
title: loc._.seed, title: loc._.seed,
@ -561,15 +560,10 @@ const ViewEditMultisigCosigners: React.FC = () => {
<BottomModal <BottomModal
ref={shareModalRef} ref={shareModalRef}
onClose={hideShareModal} onClose={hideShareModal}
contentContainerStyle={[styles.modalContent, styles.alignItemsCenter]} contentContainerStyle={[styles.modalContent, styles.alignItemsCenter, styles.shareModalHeight]}
backgroundColor={colors.elevated} backgroundColor={colors.elevated}
> footerDefaultMargins
<Text style={[styles.headerText, stylesHook.textDestination]}> footer={
{loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
</Text>
<QRCodeComponent value={exportStringURv2} size={260} isLogoRendered={false} />
<BlueSpacing20 />
<View style={styles.squareButtonWrapper}>
<SaveFileButton <SaveFileButton
style={[styles.exportButton, stylesHook.exportButton]} style={[styles.exportButton, stylesHook.exportButton]}
fileContent={exportString} fileContent={exportString}
@ -578,7 +572,13 @@ const ViewEditMultisigCosigners: React.FC = () => {
> >
<SquareButton title={loc.multisig.share} /> <SquareButton title={loc.multisig.share} />
</SaveFileButton> </SaveFileButton>
</View> }
>
<Text style={[styles.headerText, stylesHook.textDestination]}>
{loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
</Text>
<QRCodeComponent value={exportStringURv2} size={260} isLogoRendered={false} />
<BlueSpacing20 />
</BottomModal> </BottomModal>
); );
}; };
@ -661,8 +661,7 @@ const styles = StyleSheet.create({
newKeyModalContent: { newKeyModalContent: {
paddingHorizontal: 22, paddingHorizontal: 22,
paddingTop: 32, paddingTop: 32,
justifyContent: 'center', minHeight: 370,
minHeight: 300,
}, },
modalContent: { modalContent: {
padding: 22, padding: 22,
@ -679,14 +678,13 @@ const styles = StyleSheet.create({
exportButton: { exportButton: {
height: 48, height: 48,
borderRadius: 8, borderRadius: 8,
flex: 1,
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 16, paddingHorizontal: 16,
}, },
headerText: { fontSize: 15, color: '#13244D' }, headerText: { fontSize: 15, color: '#13244D' },
mainBlock: { marginHorizontal: 16 }, mainBlock: { marginHorizontal: 16 },
alignItemsCenter: { alignItems: 'center' }, alignItemsCenter: { alignItems: 'center' },
squareButtonWrapper: { height: 50, width: 250 }, shareModalHeight: { minHeight: 300 },
tipKeys: { tipKeys: {
fontSize: 15, fontSize: 15,
fontWeight: '600', fontWeight: '600',

View file

@ -567,42 +567,72 @@ const WalletsAddMultisigStep2 = () => {
const renderMnemonicsModal = () => { const renderMnemonicsModal = () => {
return ( return (
<BottomModal onClose={Keyboard.dismiss} ref={mnemonicsModalRef} isGrabberVisible={false} dismissible={false}> <BottomModal
<View style={[styles.newKeyModalContent, stylesHook.modalContent]}> ref={mnemonicsModalRef}
<View style={styles.itemKeyUnprovidedWrapper}> isGrabberVisible={false}
<View style={[styles.vaultKeyCircleSuccess, stylesHook.vaultKeyCircleSuccess]}> dismissible={false}
<Icon size={24} name="check" type="ionicons" color={colors.msSuccessCheck} /> showCloseButton={!isLoading}
</View> footerDefaultMargins
<View style={styles.vaultKeyTextWrapper}> contentContainerStyle={[styles.newKeyModalContent, stylesHook.modalContent]}
<Text style={[styles.vaultKeyText, stylesHook.vaultKeyText]}> footer={
{loc.formatString(loc.multisig.vault_key, { number: vaultKeyData.keyIndex })} isLoading ? <ActivityIndicator /> : <Button title={loc.send.success_done} onPress={() => mnemonicsModalRef.current.dismiss()} />
</Text> }
</View> >
<View style={styles.itemKeyUnprovidedWrapper}>
<View style={[styles.vaultKeyCircleSuccess, stylesHook.vaultKeyCircleSuccess]}>
<Icon size={24} name="check" type="ionicons" color={colors.msSuccessCheck} />
</View>
<View style={styles.vaultKeyTextWrapper}>
<Text style={[styles.vaultKeyText, stylesHook.vaultKeyText]}>
{loc.formatString(loc.multisig.vault_key, { number: vaultKeyData.keyIndex })}
</Text>
</View> </View>
<BlueSpacing20 />
<Text style={[styles.headerText, stylesHook.textDestination]}>{loc.multisig.wallet_key_created}</Text>
<BlueSpacing20 />
<Text style={[styles.textDestination, stylesHook.textDestination]}>{loc._.seed}</Text>
<BlueSpacing10 />
<View style={styles.secretContainer}>{renderSecret(vaultKeyData.seed.split(' '))}</View>
<BlueSpacing20 />
{isLoading ? <ActivityIndicator /> : <Button title={loc.send.success_done} onPress={() => mnemonicsModalRef.current.dismiss()} />}
</View> </View>
<BlueSpacing20 />
<Text style={[styles.headerText, stylesHook.textDestination]}>{loc.multisig.wallet_key_created}</Text>
<BlueSpacing20 />
<Text style={[styles.textDestination, stylesHook.textDestination]}>{loc._.seed}</Text>
<BlueSpacing10 />
<View style={styles.secretContainer}>{renderSecret(vaultKeyData.seed.split(' '))}</View>
<BlueSpacing20 />
</BottomModal> </BottomModal>
); );
}; };
const hideProvideMnemonicsModal = () => { const hideProvideMnemonicsModal = () => {
Keyboard.dismiss();
provideMnemonicsModalRef.current.dismiss();
setImportText(''); setImportText('');
setAskPassphrase(false); setAskPassphrase(false);
}; };
const renderProvideMnemonicsModal = () => { const renderProvideMnemonicsModal = () => {
return ( return (
<BottomModal onClose={hideProvideMnemonicsModal} ref={provideMnemonicsModalRef} isGrabberVisible={false}> <BottomModal
footerDefaultMargins
footer={
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}
/>
</>
)
}
onClose={hideProvideMnemonicsModal}
ref={provideMnemonicsModalRef}
isGrabberVisible={false}
>
<View style={[styles.modalContent, stylesHook.modalContent]}> <View style={[styles.modalContent, stylesHook.modalContent]}>
<BlueTextCentered>{loc.multisig.type_your_mnemonics}</BlueTextCentered> <BlueTextCentered>{loc.multisig.type_your_mnemonics}</BlueTextCentered>
<BlueSpacing20 /> <BlueSpacing20 />
@ -616,24 +646,6 @@ const WalletsAddMultisigStep2 = () => {
</View> </View>
</> </>
)} )}
<BlueSpacing20 />
{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> </View>
</BottomModal> </BottomModal>
); );
@ -654,30 +666,33 @@ const WalletsAddMultisigStep2 = () => {
const renderCosignersXpubModal = () => { const renderCosignersXpubModal = () => {
return ( return (
<BottomModal onClose={hideCosignersXpubModal} ref={renderCosignersXpubModalRef} isGrabberVisible={false}> <BottomModal
<View style={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}> onClose={hideCosignersXpubModal}
<Text style={[styles.headerText, stylesHook.textDestination]}> ref={renderCosignersXpubModalRef}
{loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''} footerDefaultMargins
</Text> contentContainerStyle={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}
<BlueSpacing20 /> footer={
<QRCodeComponent value={cosignerXpubURv2} size={260} /> isLoading ? (
<BlueSpacing20 /> <ActivityIndicator />
<View style={styles.squareButtonWrapper}> ) : (
{isLoading ? ( <SaveFileButton
<ActivityIndicator /> style={[styles.exportButton, stylesHook.exportButton]}
) : ( fileName={cosignerXpubFilename}
<SaveFileButton fileContent={cosignerXpub}
style={[styles.exportButton, stylesHook.exportButton]} beforeOnPress={exportCosignerBeforeOnPress}
fileName={cosignerXpubFilename} afterOnPress={exportCosignerAfterOnPress}
fileContent={cosignerXpub} >
beforeOnPress={exportCosignerBeforeOnPress} <SquareButton title={loc.multisig.share} />
afterOnPress={exportCosignerAfterOnPress} </SaveFileButton>
> )
<SquareButton title={loc.multisig.share} /> }
</SaveFileButton> >
)} <Text style={[styles.headerText, stylesHook.textDestination]}>
</View> {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
</View> </Text>
<BlueSpacing20 />
<QRCodeComponent value={cosignerXpubURv2} size={260} />
<BlueSpacing20 />
</BottomModal> </BottomModal>
); );
}; };
@ -742,19 +757,12 @@ const styles = StyleSheet.create({
paddingHorizontal: 22, paddingHorizontal: 22,
paddingVertical: 32, paddingVertical: 32,
justifyContent: 'center', justifyContent: 'center',
borderTopLeftRadius: 16, minHeight: 480,
borderTopRightRadius: 16,
borderColor: 'rgba(0, 0, 0, 0.1)',
minHeight: 400,
}, },
newKeyModalContent: { newKeyModalContent: {
paddingHorizontal: 22, paddingHorizontal: 22,
paddingBottom: 60,
paddingTop: 50,
justifyContent: 'center', justifyContent: 'center',
borderTopLeftRadius: 16, minHeight: 400,
borderTopRightRadius: 16,
borderColor: 'rgba(0, 0, 0, 0.1)',
}, },
vaultKeyCircleSuccess: { vaultKeyCircleSuccess: {
width: 42, width: 42,
@ -784,13 +792,11 @@ const styles = StyleSheet.create({
exportButton: { exportButton: {
height: 48, height: 48,
borderRadius: 8, borderRadius: 8,
flex: 1,
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 16, paddingHorizontal: 16,
}, },
headerText: { fontSize: 15, color: '#13244D' }, headerText: { fontSize: 15, color: '#13244D' },
alignItemsCenter: { alignItems: 'center' }, alignItemsCenter: { alignItems: 'center' },
squareButtonWrapper: { height: 50, width: 250 },
helpButtonWrapper: { helpButtonWrapper: {
alignItems: 'flex-end', alignItems: 'flex-end',
flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse', flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',