REF: Export useFocusEffect and Hooks

screen/wallets/export.js

@@ -1,16 +1,14 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback } from 'react';
-import { Dimensions, ScrollView, ActivityIndicator, StatusBar, View, StyleSheet } from 'react-native';
+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 {
+const WalletExport = () => {
-  constructor(props) {
+  const { wallet } = useRoute().params;
-    super(props);
+  const [isLoading, setIsLoading] = useState(true);
-    const wallet = props.route.params.wallet;
+  const { goBack } = useNavigation();
-    this.state = {
+  const { colors } = useTheme();
-      isLoading: true,
+  const { width, height } = useWindowDimensions();
-      qrCodeHeight: height > width ? width - 40 : width / 2,
+  const stylesHook = {
-      wallet,
+    ...styles,
-    };
+    loading: {
-  }
+      ...styles.loading,
-
+      backgroundColor: colors.elevated,
-  async componentDidMount() {
+    },
-    Privacy.enableBlur();
+    root: {
-    const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
+      ...styles.root,
-
+      backgroundColor: colors.elevated,
-    if (isBiometricsEnabled) {
+    },
-      if (!(await Biometric.unlockWithBiometrics())) {
+    type: { ...styles.type, color: colors.foregroundColor },
-        return this.props.navigation.goBack();
+    secret: { ...styles.secret, color: colors.foregroundColor },
-      }
-    }
-
-    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 });
   };
 
-  render() {
+  useFocusEffect(
-    if (this.state.isLoading) {
+    useCallback(() => {
-      return (
+      Privacy.enableBlur();
-        <View style={styles.loading} onLayout={this.onLayout}>
+      const task = InteractionManager.runAfterInteractions(async () => {
-          <ActivityIndicator />
+        if (wallet) {
-        </View>
+          const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
-      );
-    }
 
-    return (
+          if (isBiometricsEnabled) {
-      <SafeBlueArea style={styles.root}>
+            if (!(await Biometric.unlockWithBiometrics())) {
-        <StatusBar barStyle="light-content" />
+              return goBack();
-        <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>
-              );
             }
-          })()}
+          }
-          <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 = {
+          setIsLoading(false);
-  navigation: PropTypes.shape({
+        }
-    navigate: PropTypes.func,
+      });
-    goBack: PropTypes.func,
+      return () => {
-  }),
+        task.cancel();
-  route: PropTypes.shape({
+        Privacy.disableBlur();
-    name: PropTypes.string,
+        wallet.setUserHasSavedExport(true);
-    params: PropTypes.shape({
+        BlueApp.saveToDisk();
-      wallet: PropTypes.object.isRequired,
+      };
-    }),
+    }, [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;

screen/wallets/xpub.js

@@ -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',