REF: Xpub Hooks and useFocusEffect

screen/wallets/xpub.js

@@ -1,15 +1,14 @@
-import React, { Component } from 'react';
+import React, { useCallback, useState } from 'react';
-import { Dimensions, ActivityIndicator, View, StatusBar, StyleSheet } from 'react-native';
+import { InteractionManager, useWindowDimensions, ActivityIndicator, View, StatusBar, StyleSheet } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { BlueSpacing20, SafeBlueArea, BlueText, BlueNavigationStyle, BlueCopyTextToClipboard } from '../../BlueComponents';
-import PropTypes from 'prop-types';
 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');
-const { height, width } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   root: {
@@ -25,102 +24,78 @@ const styles = StyleSheet.create({
   qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
 });
 
-export default class WalletXpub extends Component {
+const WalletXpub = () => {
-  constructor(props) {
+  const { secret } = useRoute().params;
-    super(props);
+  const [isLoading, setIsLoading] = useState(true);
-
+  const [xPub, setXPub] = useState();
-    const secret = props.route.params.secret;
+  const [xPubText, setXPubText] = useState();
-    let wallet;
+  const [wallet, setWallet] = useState();
+  const { goBack } = useNavigation();
+  const { colors } = useTheme();
+  const { width, height } = useWindowDimensions();
+  const stylesHook = { ...styles, root: { ...styles.root, backgroundColor: colors.elevated } };
 
+  useFocusEffect(
+    useCallback(() => {
+      Privacy.enableBlur();
+      const task = InteractionManager.runAfterInteractions(async () => {
         for (const w of BlueApp.getWallets()) {
           if (w.getSecret() === secret) {
             // found our wallet
-        wallet = w;
+            setWallet(w);
           }
         }
 
-    this.state = {
+        if (wallet) {
-      isLoading: true,
-      wallet,
-      xpub: wallet.getXpub(),
-      xpubText: wallet.getXpub(),
-      qrCodeHeight: height > width ? width - 40 : width / 2,
-    };
-  }
-
-  async componentDidMount() {
-    Privacy.enableBlur();
           const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
 
           if (isBiometricsEnabled) {
             if (!(await Biometric.unlockWithBiometrics())) {
-        return this.props.navigation.goBack();
+              return goBack();
             }
           }
-
+          setXPub(wallet.getXpub());
-    this.setState({
+          setXPubText(wallet.getXpub());
-      isLoading: false,
+          setIsLoading(false);
+        }
       });
-  }
+      return () => {
-
+        task.cancel();
-  async componentWillUnmount() {
         Privacy.disableBlur();
-  }
-
-  onLayout = () => {
-    const { height } = Dimensions.get('window');
-    this.setState({ qrCodeHeight: height > width ? width - 40 : width / 2 });
       };
+    }, [goBack, secret, wallet]),
+  );
 
-  render() {
+  return isLoading ? (
-    if (this.state.isLoading) {
+    <View style={stylesHook.root}>
-      return (
-        <View style={styles.root}>
       <ActivityIndicator />
     </View>
-      );
+  ) : (
-    }
+    <SafeBlueArea style={stylesHook.root}>
-
-    return (
-      <SafeBlueArea style={styles.root}>
       <StatusBar barStyle="light-content" />
-        <View style={styles.container} onLayout={this.onLayout}>
+      <View style={styles.container}>
         <View>
-            <BlueText>{this.state.wallet.typeReadable}</BlueText>
+          <BlueText>{wallet.typeReadable}</BlueText>
         </View>
         <BlueSpacing20 />
         <View style={styles.qrCodeContainer}>
           <QRCode
-              value={this.state.xpub}
+            value={xPub}
             logo={require('../../img/qr-code.png')}
-              size={this.state.qrCodeHeight}
+            size={height > width ? width - 40 : width / 2}
             logoSize={90}
             color="#000000"
-              logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
+            logoBackgroundColor={colors.brandingColor}
             backgroundColor="#FFFFFF"
             ecl="H"
           />
         </View>
 
         <BlueSpacing20 />
-          <BlueCopyTextToClipboard text={this.state.xpubText} />
+        <BlueCopyTextToClipboard text={xPubText} />
       </View>
     </SafeBlueArea>
   );
-  }
-}
-
-WalletXpub.propTypes = {
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func,
-    goBack: PropTypes.func,
-  }),
-  route: PropTypes.shape({
-    name: PropTypes.string,
-    params: PropTypes.shape({
-      secret: PropTypes.string,
-    }),
-  }),
 };
 
 WalletXpub.navigationOptions = ({ navigation }) => ({
@@ -128,3 +103,5 @@ WalletXpub.navigationOptions = ({ navigation }) => ({
   title: loc.wallets.xpub_title,
   headerLeft: null,
 });
+
+export default WalletXpub;