BlueWallet/screen/wallets/pleaseBackup.tsx

156 lines
4.2 KiB
TypeScript
Raw Normal View History

2020-10-29 05:26:39 -04:00
import React, { useEffect, useState, useCallback, useContext } from 'react';
2021-09-27 12:40:58 -04:00
import { ActivityIndicator, View, BackHandler, Text, ScrollView, StyleSheet, I18nManager } from 'react-native';
2023-10-23 21:28:44 -04:00
import { useNavigation, useRoute } from '@react-navigation/native';
2020-12-25 19:09:53 +03:00
import navigationStyle from '../../components/navigationStyle';
2021-01-18 22:44:55 -05:00
import Privacy from '../../blue_modules/Privacy';
2020-07-20 16:38:46 +03:00
import loc from '../../loc';
2020-10-29 05:26:39 -04:00
import { BlueStorageContext } from '../../blue_modules/storage-context';
2023-10-22 21:59:16 -04:00
import { AbstractWallet } from '../../class';
2023-10-23 21:28:44 -04:00
import { useTheme } from '../../components/themes';
2023-11-15 04:40:22 -04:00
import Button from '../../components/Button';
import SafeArea from '../../components/SafeArea';
2023-10-22 21:59:16 -04:00
const PleaseBackup: React.FC = () => {
2020-10-29 05:26:39 -04:00
const { wallets } = useContext(BlueStorageContext);
2020-04-27 19:10:42 -04:00
const [isLoading, setIsLoading] = useState(true);
2023-10-22 21:59:16 -04:00
const { walletID } = useRoute().params as { walletID: string };
const wallet = wallets.find((w: AbstractWallet) => w.getID() === walletID);
2020-05-27 14:12:17 +03:00
const navigation = useNavigation();
2020-07-15 13:32:59 -04:00
const { colors } = useTheme();
2023-10-22 21:59:16 -04:00
2020-10-29 05:26:39 -04:00
const stylesHook = StyleSheet.create({
2020-07-15 13:32:59 -04:00
flex: {
backgroundColor: colors.elevated,
},
word: {
backgroundColor: colors.inputBackgroundColor,
},
wortText: {
color: colors.labelText,
},
pleaseText: {
color: colors.foregroundColor,
},
});
2020-04-27 19:10:42 -04:00
const handleBackButton = useCallback(() => {
2023-10-22 21:59:16 -04:00
// @ts-ignore: Ignore
2023-11-11 07:33:50 -04:00
navigation.getParent()?.pop();
return true;
2020-05-27 14:12:17 +03:00
}, [navigation]);
2020-04-27 19:10:42 -04:00
useEffect(() => {
Privacy.enableBlur();
2020-04-27 19:10:42 -04:00
setIsLoading(false);
BackHandler.addEventListener('hardwareBackPress', handleBackButton);
2020-04-27 19:10:42 -04:00
return () => {
Privacy.disableBlur();
BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
};
2020-10-29 05:26:39 -04:00
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
2020-04-27 19:10:42 -04:00
const renderSecret = () => {
2023-10-22 21:59:16 -04:00
const component: JSX.Element[] = [];
2023-10-23 10:23:19 -04:00
const entries = wallet?.getSecret().split(/\s/).entries();
if (entries) {
for (const [index, secret] of entries) {
if (secret) {
const text = `${index + 1}. ${secret} `;
component.push(
<View style={[styles.word, stylesHook.word]} key={index}>
<Text style={[styles.wortText, stylesHook.wortText]} textBreakStrategy="simple">
{text}
</Text>
</View>,
);
}
2023-10-22 21:59:16 -04:00
}
}
2020-04-27 19:10:42 -04:00
return component;
};
2023-10-22 21:59:16 -04:00
return (
<SafeArea style={[isLoading ? styles.loading : {}, stylesHook.flex]}>
2023-10-22 21:59:16 -04:00
{isLoading ? (
<ActivityIndicator />
) : (
<ScrollView contentContainerStyle={styles.flex} testID="PleaseBackupScrollView">
<View style={styles.please}>
<Text style={[styles.pleaseText, stylesHook.pleaseText]}>{loc.pleasebackup.text}</Text>
</View>
<View style={styles.list}>
<View style={styles.secret}>{renderSecret()}</View>
</View>
<View style={styles.bottom}>
2023-11-15 04:40:22 -04:00
<Button testID="PleasebackupOk" onPress={handleBackButton} title={loc.pleasebackup.ok} />
2023-10-22 21:59:16 -04:00
</View>
</ScrollView>
)}
</SafeArea>
2020-04-27 19:10:42 -04:00
);
};
2020-04-27 19:10:42 -04:00
2023-10-22 21:59:16 -04:00
// @ts-ignore: Ignore
2021-02-15 11:03:54 +03:00
PleaseBackup.navigationOptions = navigationStyle(
{
gestureEnabled: false,
swipeEnabled: false,
2023-11-11 07:33:50 -04:00
headerHideBackButton: false,
2021-02-15 11:03:54 +03:00
},
opts => ({ ...opts, title: loc.pleasebackup.title }),
);
2020-12-25 19:09:53 +03:00
2020-10-29 05:26:39 -04:00
const styles = StyleSheet.create({
loading: {
flex: 1,
justifyContent: 'center',
2020-10-29 05:26:39 -04:00
},
2021-04-20 16:33:55 +02:00
flex: {
flex: 1,
justifyContent: 'space-around',
},
2020-10-29 05:26:39 -04:00
word: {
marginRight: 8,
marginBottom: 8,
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
},
wortText: {
fontWeight: 'bold',
textAlign: 'left',
2021-04-20 16:33:55 +02:00
fontSize: 17,
2020-10-29 05:26:39 -04:00
},
please: {
2021-04-20 16:33:55 +02:00
flexGrow: 1,
paddingHorizontal: 16,
},
list: {
flexGrow: 8,
2020-10-29 05:26:39 -04:00
paddingHorizontal: 16,
},
2021-04-20 16:33:55 +02:00
bottom: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'center',
},
2020-10-29 05:26:39 -04:00
pleaseText: {
2021-04-20 16:33:55 +02:00
marginVertical: 16,
fontSize: 16,
fontWeight: '500',
2021-10-22 01:54:06 -04:00
writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
2020-10-29 05:26:39 -04:00
},
secret: {
flexWrap: 'wrap',
2021-03-17 21:35:25 -04:00
justifyContent: 'center',
2020-10-29 05:26:39 -04:00
marginTop: 14,
2021-03-17 21:35:25 -04:00
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
2020-10-29 05:26:39 -04:00
},
});
2020-04-27 19:10:42 -04:00
export default PleaseBackup;