diff --git a/screen/wallets/pleaseBackup.js b/screen/wallets/pleaseBackup.js
index 3138d552..d3486963 100644
--- a/screen/wallets/pleaseBackup.js
+++ b/screen/wallets/pleaseBackup.js
@@ -1,430 +1,95 @@
-import React, { Component } from 'react';
-import { ActivityIndicator, View, BackHandler, Text } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { ActivityIndicator, View, BackHandler, Text, ScrollView } from 'react-native';
import { BlueSpacing20, SafeBlueArea, BlueNavigationStyle, BlueText, BlueButton } from '../../BlueComponents';
import { Badge } from 'react-native-elements';
-import PropTypes from 'prop-types';
import Privacy from '../../Privacy';
-import { ScrollView } from 'react-native-gesture-handler';
-let loc = require('../../loc');
+import { useNavigation, useNavigationParam } from 'react-navigation-hooks';
+const loc = require('../../loc');
-export default class PleaseBackup extends Component {
- static navigationOptions = ({ navigation }) => ({
- ...BlueNavigationStyle(navigation, true),
- title: loc.pleasebackup.title,
- headerLeft: null,
- headerRight: null,
- });
+const PleaseBackup = () => {
+ const [isLoading, setIsLoading] = useState(true);
+ const words = useNavigationParam('secret').split(' ');
+ const { dismiss } = useNavigation();
- constructor(props) {
- super(props);
-
- this.state = {
- isLoading: true,
- words: props.navigation.state.params.secret.split(' '),
- };
- BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));
- }
-
- handleBackButton() {
- this.props.navigation.dismiss();
+ const handleBackButton = useCallback(() => {
+ dismiss();
return true;
- }
+ }, [dismiss]);
- componentDidMount() {
+ useEffect(() => {
Privacy.enableBlur();
- this.setState({
- isLoading: false,
- });
- }
-
- componentWillUnmount() {
- Privacy.disableBlur();
- BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton.bind(this));
- }
+ setIsLoading(false);
+ return () => {
+ Privacy.disableBlur();
+ BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
+ };
+ }, [handleBackButton, words]);
- render() {
- if (this.state.isLoading) {
- return (
-
-
-
+ const renderSecret = () => {
+ let component = [];
+ for (const [index, secret] of words.entries()) {
+ component.push(
+
+
+
+ {`${index}`}. {secret}
+
+
+ ,
);
}
+ return component;
+ };
- return (
-
-
-
- {loc.pleasebackup.success}
- {loc.pleasebackup.text}
+ return isLoading ? (
+
+
+
+ ) : (
+
+
+
+ {loc.pleasebackup.success}
+ {loc.pleasebackup.text}
-
-
-
- 1. {this.state.words[0]}
-
-
-
-
- 2. {this.state.words[1]}
-
-
-
-
- 3. {this.state.words[2]}
-
-
-
-
- 4. {this.state.words[3]}
-
-
-
-
- 5. {this.state.words[4]}
-
-
-
-
- 6. {this.state.words[5]}
-
-
-
-
- 7. {this.state.words[6]}
-
-
-
-
- 8. {this.state.words[7]}
-
-
-
-
- 9. {this.state.words[8]}
-
-
-
-
- 10. {this.state.words[9]}
-
-
-
-
- 11. {this.state.words[10]}
-
-
-
-
- 12. {this.state.words[11]}
-
-
-
-
- 13. {this.state.words[12]}
-
-
-
-
- 14. {this.state.words[13]}
-
-
-
-
- 15. {this.state.words[14]}
-
-
-
-
- 16. {this.state.words[15]}
-
-
-
-
- 17. {this.state.words[16]}
-
-
-
-
- 18. {this.state.words[17]}
-
-
-
-
- 19. {this.state.words[18]}
-
-
-
-
- 20. {this.state.words[19]}
-
-
-
-
- 21. {this.state.words[20]}
-
-
-
-
- 22. {this.state.words[21]}
-
-
-
-
- 23. {this.state.words[22]}
-
-
-
-
- 24. {this.state.words[23]}
-
-
-
+
+ {renderSecret()}
+
-
-
-
- this.props.navigation.dismiss()} title={loc.pleasebackup.ok} />
-
+
+
+
+
-
-
- );
- }
-}
-
-PleaseBackup.propTypes = {
- navigation: PropTypes.shape({
- state: PropTypes.shape({
- params: PropTypes.shape({
- secret: PropTypes.string,
- }),
- }),
- dismiss: PropTypes.func,
- }),
+
+
+
+ );
};
+
+PleaseBackup.navigationOptions = ({ navigation }) => ({
+ ...BlueNavigationStyle(navigation, true),
+ title: loc.pleasebackup.title,
+ headerLeft: null,
+ headerRight: null,
+});
+
+export default PleaseBackup;