lukechilds
/
BlueWallet
mirror of https://github.com/lukechilds/BlueWallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

REF: Secret words uses Hooks

master
marcosrdz 5 years ago
committed by Overtorment
parent
ce40b51408
commit
c95326ce7e
1 changed files with 78 additions and 413 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 491
      screen/wallets/pleaseBackup.js

491
screen/wallets/pleaseBackup.js
View File

@ -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 (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
const renderSecret = () => {
let component = [];
for (const [index, secret] of words.entries()) {
component.push(
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }} key={`${secret}${index}`}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>
{`${index}`}. {secret}
</Text>
</Badge>
</View>,
);
}
return component;
};
return (
<SafeBlueArea style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ justifyContent: 'space-between' }} testID="PleaseBackupScrollView">
<View style={{ alignItems: 'center', paddingHorizontal: 16 }}>
<BlueText style={{ textAlign: 'center', fontWeight: 'bold', color: '#0C2550' }}>{loc.pleasebackup.success}</BlueText>
<BlueText style={{ paddingBottom: 10, paddingRight: 0, paddingLeft: 0, color: '#0C2550' }}>{loc.pleasebackup.text}</BlueText>
return isLoading ? (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
) : (
<SafeBlueArea style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ justifyContent: 'space-between' }} testID="PleaseBackupScrollView">
<View style={{ alignItems: 'center', paddingHorizontal: 16 }}>
<BlueText style={{ textAlign: 'center', fontWeight: 'bold', color: '#0C2550' }}>{loc.pleasebackup.success}</BlueText>
<BlueText style={{ paddingBottom: 10, paddingRight: 0, paddingLeft: 0, color: '#0C2550' }}>{loc.pleasebackup.text}</BlueText>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap',
marginTop: 14,
}}
>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>1. {this.state.words[0]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>2. {this.state.words[1]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>3. {this.state.words[2]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>4. {this.state.words[3]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>5. {this.state.words[4]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>6. {this.state.words[5]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>7. {this.state.words[6]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>8. {this.state.words[7]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>9. {this.state.words[8]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>10. {this.state.words[9]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>11. {this.state.words[10]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>12. {this.state.words[11]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>13. {this.state.words[12]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>14. {this.state.words[13]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>15. {this.state.words[14]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>16. {this.state.words[15]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>17. {this.state.words[16]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>18. {this.state.words[17]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>19. {this.state.words[18]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>20. {this.state.words[19]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>21. {this.state.words[20]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>22. {this.state.words[21]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>23. {this.state.words[22]}</Text>
</Badge>
</View>
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>24. {this.state.words[23]}</Text>
</Badge>
</View>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap',
marginTop: 14,
}}
>
{renderSecret()}
</View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
<View style={{ flex: 1 }}>
<BlueSpacing20 />
<BlueButton testID="PleasebackupOk" onPress={() => this.props.navigation.dismiss()} title={loc.pleasebackup.ok} />
</View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
<View style={{ flex: 1 }}>
<BlueSpacing20 />
<BlueButton testID="PleasebackupOk" onPress={dismiss} title={loc.pleasebackup.ok} />
</View>
</View>
</ScrollView>
</SafeBlueArea>
);
}
}
PleaseBackup.propTypes = {
navigation: PropTypes.shape({
state: PropTypes.shape({
params: PropTypes.shape({
secret: PropTypes.string,
}),
}),
dismiss: PropTypes.func,
}),
</View>
</ScrollView>
</SafeBlueArea>
);
};
PleaseBackup.navigationOptions = ({ navigation }) => ({
...BlueNavigationStyle(navigation, true),
title: loc.pleasebackup.title,
headerLeft: null,
headerRight: null,
});
export default PleaseBackup;

Write Preview
Loading…
Cancel
Save