mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-22 15:04:50 +01:00
REF: Export useFocusEffect and Hooks
This commit is contained in:
marcosrdz
Overtorment
parent
02bc15a646
commit
dfbaab3730
2 changed files with 89 additions and 108 deletions
|
|
@ -1,16 +1,14 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Dimensions, ScrollView, ActivityIndicator, StatusBar, View, StyleSheet } from 'react-native';
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { useWindowDimensions, InteractionManager, ScrollView, ActivityIndicator, StatusBar, View, StyleSheet } from 'react-native';
|
||||
import QRCode from 'react-native-qrcode-svg';
|
||||
import { BlueSpacing20, SafeBlueArea, BlueNavigationStyle, BlueText, BlueCopyTextToClipboard, BlueCard } from '../../BlueComponents';
|
||||
import PropTypes from 'prop-types';
|
||||
import Privacy from '../../Privacy';
|
||||
import Biometric from '../../class/biometrics';
|
||||
import { LegacyWallet, LightningCustodianWallet, SegwitBech32Wallet, SegwitP2SHWallet, WatchOnlyWallet } from '../../class';
|
||||
import loc from '../../loc';
|
||||
import { BlueCurrentTheme } from '../../components/themes';
|
||||
import { useTheme, useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
|
||||
/** @type {AppStorage} */
|
||||
const BlueApp = require('../../BlueApp');
|
||||
const { height, width } = Dimensions.get('window');
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
loading: {
|
||||
|
|
@ -19,7 +17,6 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
root: {
|
||||
flex: 1,
|
||||
backgroundColor: BlueCurrentTheme.colors.elevated,
|
||||
},
|
||||
scrollViewContent: {
|
||||
alignItems: 'center',
|
||||
|
|
@ -30,123 +27,109 @@ const styles = StyleSheet.create({
|
|||
type: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
color: BlueCurrentTheme.colors.foregroundColor,
|
||||
},
|
||||
secret: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
fontSize: 16,
|
||||
color: BlueCurrentTheme.colors.foregroundColor,
|
||||
lineHeight: 24,
|
||||
},
|
||||
});
|
||||
|
||||
export default class WalletExport extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const wallet = props.route.params.wallet;
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
qrCodeHeight: height > width ? width - 40 : width / 2,
|
||||
wallet,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
Privacy.enableBlur();
|
||||
const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
|
||||
|
||||
if (isBiometricsEnabled) {
|
||||
if (!(await Biometric.unlockWithBiometrics())) {
|
||||
return this.props.navigation.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
isLoading: false,
|
||||
},
|
||||
() => {
|
||||
this.state.wallet.setUserHasSavedExport(true);
|
||||
BlueApp.saveToDisk();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
Privacy.disableBlur();
|
||||
}
|
||||
|
||||
onLayout = () => {
|
||||
const { height } = Dimensions.get('window');
|
||||
this.setState({ qrCodeHeight: height > width ? width - 40 : width / 2 });
|
||||
const WalletExport = () => {
|
||||
const { wallet } = useRoute().params;
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const { goBack } = useNavigation();
|
||||
const { colors } = useTheme();
|
||||
const { width, height } = useWindowDimensions();
|
||||
const stylesHook = {
|
||||
...styles,
|
||||
loading: {
|
||||
...styles.loading,
|
||||
backgroundColor: colors.elevated,
|
||||
},
|
||||
root: {
|
||||
...styles.root,
|
||||
backgroundColor: colors.elevated,
|
||||
},
|
||||
type: { ...styles.type, color: colors.foregroundColor },
|
||||
secret: { ...styles.secret, color: colors.foregroundColor },
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.isLoading) {
|
||||
return (
|
||||
<View style={styles.loading} onLayout={this.onLayout}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
Privacy.enableBlur();
|
||||
const task = InteractionManager.runAfterInteractions(async () => {
|
||||
if (wallet) {
|
||||
const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
|
||||
|
||||
return (
|
||||
<SafeBlueArea style={styles.root}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
<ScrollView contentContainerStyle={styles.scrollViewContent} onLayout={this.onLayout}>
|
||||
<View>
|
||||
<BlueText style={styles.type}>{this.state.wallet.typeReadable}</BlueText>
|
||||
</View>
|
||||
|
||||
{(() => {
|
||||
if ([LegacyWallet.type, SegwitBech32Wallet.type, SegwitP2SHWallet.type].includes(this.state.wallet.type)) {
|
||||
return (
|
||||
<BlueCard>
|
||||
<BlueText>{this.state.wallet.getAddress()}</BlueText>
|
||||
</BlueCard>
|
||||
);
|
||||
if (isBiometricsEnabled) {
|
||||
if (!(await Biometric.unlockWithBiometrics())) {
|
||||
return goBack();
|
||||
}
|
||||
})()}
|
||||
<BlueSpacing20 />
|
||||
<View style={styles.activeQrcode}>
|
||||
<QRCode
|
||||
value={this.state.wallet.getSecret()}
|
||||
logo={require('../../img/qr-code.png')}
|
||||
size={this.state.qrCodeHeight}
|
||||
logoSize={70}
|
||||
color="#000000"
|
||||
logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
|
||||
backgroundColor="#FFFFFF"
|
||||
ecl="H"
|
||||
/>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
{this.state.wallet.type === LightningCustodianWallet.type || this.state.wallet.type === WatchOnlyWallet.type ? (
|
||||
<BlueCopyTextToClipboard text={this.state.wallet.getSecret()} />
|
||||
) : (
|
||||
<BlueText style={styles.secret}>{this.state.wallet.getSecret()}</BlueText>
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeBlueArea>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
WalletExport.propTypes = {
|
||||
navigation: PropTypes.shape({
|
||||
navigate: PropTypes.func,
|
||||
goBack: PropTypes.func,
|
||||
}),
|
||||
route: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
params: PropTypes.shape({
|
||||
wallet: PropTypes.object.isRequired,
|
||||
}),
|
||||
}),
|
||||
setIsLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
task.cancel();
|
||||
Privacy.disableBlur();
|
||||
wallet.setUserHasSavedExport(true);
|
||||
BlueApp.saveToDisk();
|
||||
};
|
||||
}, [goBack, wallet]),
|
||||
);
|
||||
|
||||
return isLoading ? (
|
||||
<View style={stylesHook.loading}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
) : (
|
||||
<SafeBlueArea style={stylesHook.root}>
|
||||
<StatusBar barStyle="light-content" />
|
||||
<ScrollView contentContainerStyle={styles.scrollViewContent}>
|
||||
<View>
|
||||
<BlueText style={stylesHook.type}>{wallet.typeReadable}</BlueText>
|
||||
</View>
|
||||
|
||||
{(() => {
|
||||
if ([LegacyWallet.type, SegwitBech32Wallet.type, SegwitP2SHWallet.type].includes(wallet.type)) {
|
||||
return (
|
||||
<BlueCard>
|
||||
<BlueText>{wallet.getAddress()}</BlueText>
|
||||
</BlueCard>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
<BlueSpacing20 />
|
||||
<View style={styles.activeQrcode}>
|
||||
<QRCode
|
||||
value={wallet.getSecret()}
|
||||
logo={require('../../img/qr-code.png')}
|
||||
size={height > width ? width - 40 : width / 2}
|
||||
logoSize={70}
|
||||
color="#000000"
|
||||
logoBackgroundColor={colors.brandingColor}
|
||||
backgroundColor="#FFFFFF"
|
||||
ecl="H"
|
||||
/>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
{wallet.type === LightningCustodianWallet.type || wallet.type === WatchOnlyWallet.type ? (
|
||||
<BlueCopyTextToClipboard text={wallet.getSecret()} />
|
||||
) : (
|
||||
<BlueText style={stylesHook.secret}>{wallet.getSecret()}</BlueText>
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeBlueArea>
|
||||
);
|
||||
};
|
||||
|
||||
WalletExport.navigationOptions = ({ navigation }) => ({
|
||||
...BlueNavigationStyle(navigation, true),
|
||||
title: loc.wallets.export_title,
|
||||
headerLeft: null,
|
||||
});
|
||||
|
||||
export default WalletExport;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { BlueSpacing20, SafeBlueArea, BlueText, BlueNavigationStyle, BlueCopyTex
|
|||
import Privacy from '../../Privacy';
|
||||
import Biometric from '../../class/biometrics';
|
||||
import loc from '../../loc';
|
||||
import { BlueCurrentTheme } from '../../components/themes';
|
||||
import { useFocusEffect, useRoute, useNavigation, useTheme } from '@react-navigation/native';
|
||||
/** @type {AppStorage} */
|
||||
const BlueApp = require('../../BlueApp');
|
||||
|
|
@ -14,7 +13,6 @@ const styles = StyleSheet.create({
|
|||
root: {
|
||||
flex: 1,
|
||||
paddingTop: 20,
|
||||
backgroundColor: BlueCurrentTheme.colors.elevated,
|
||||
},
|
||||
container: {
|
||||
alignItems: 'center',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue