Merge pull request #5756 from BlueWallet/promisehook

ADD: useAsyncPromise

hooks/useAsyncPromise.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * A custom React hook that accepts a promise and returns the resolved value and any errors that occur.
+ *
+ * @template T - The type of the resolved value.
+ * @param {Promise<T>} promise - The promise to be resolved.
+ * @returns {{ data: T | null, error: Error | null, loading: boolean }} - An object with the resolved data, any error, and loading state.
+ */
+function useAsyncPromise<T>(promise: Promise<T>): { data: T | null; error: Error | null; loading: boolean } {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    promise
+      .then(result => {
+        if (isMounted) {
+          setData(result);
+          setLoading(false);
+        }
+      })
+      .catch(err => {
+        if (isMounted) {
+          setError(err);
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [promise]);
+
+  return { data, error, loading };
+}
+
+export default useAsyncPromise;

screen/settings/about.js

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { TouchableOpacity, ScrollView, Linking, Image, View, Text, StyleSheet, useWindowDimensions, Platform, Alert } from 'react-native';
 import { useNavigation, useTheme } from '@react-navigation/native';
 import { Icon } from 'react-native-elements';
-import { getApplicationName, getVersion, getBundleId, getBuildNumber, getUniqueId, hasGmsSync } from 'react-native-device-info';
+import { getApplicationName, getVersion, getBundleId, getBuildNumber, getUniqueIdSync, hasGmsSync } from 'react-native-device-info';
 import Rate, { AndroidMarket } from 'react-native-rate';
 import { BlueButton, BlueCard, BlueListItem, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -20,7 +20,6 @@ const About = () => {
   const { colors } = useTheme();
   const { width, height } = useWindowDimensions();
   const { isElectrumDisabled } = useContext(BlueStorageContext);
-  const [uniqueID, setUniqueID] = useState();
   const styles = StyleSheet.create({
     copyToClipboard: {
       justifyContent: 'center',
@@ -76,10 +75,6 @@ const About = () => {
     },
   });
 
-  useEffect(() => {
-    getUniqueId().then(setUniqueID);
-  }, []);
-
   const handleOnReleaseNotesPress = () => {
     navigate('ReleaseNotes');
   };
@@ -249,12 +244,12 @@ const About = () => {
       <BlueTextCentered>
         w, h = {width}, {height}
       </BlueTextCentered>
-      <BlueTextCentered>Unique ID: {uniqueID}</BlueTextCentered>
+      <BlueTextCentered>Unique ID: {getUniqueIdSync()}</BlueTextCentered>
       <View style={styles.copyToClipboard}>
         <TouchableOpacity
           accessibilityRole="button"
           onPress={() => {
-            const stringToCopy = 'userId:' + uniqueID;
+            const stringToCopy = 'userId:' + getUniqueIdSync();
             A.logError('copied unique id');
             Clipboard.setString(stringToCopy);
           }}

screen/wallets/add.js

@@ -32,6 +32,7 @@ import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { LdkButton } from '../../components/LdkButton';
 import alert from '../../components/Alert';
+import useAsyncPromise from '../../hooks/useAsyncPromise';
 const BlueApp = require('../../BlueApp');
 const AppStorage = BlueApp.AppStorage;
 const A = require('../../blue_modules/analytics');
@@ -51,7 +52,7 @@ const WalletsAdd = () => {
   const [walletBaseURI, setWalletBaseURI] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [label, setLabel] = useState('');
-  const [isAdvancedOptionsEnabled, setIsAdvancedOptionsEnabled] = useState(false);
+  const isAdvancedOptionsEnabled = useAsyncPromise(isAdvancedModeEnabled());
   const [selectedWalletType, setSelectedWalletType] = useState(false);
   const [backdoorPressed, setBackdoorPressed] = useState(1);
   const { navigate, goBack, setOptions } = useNavigation();
@@ -82,11 +83,8 @@ const WalletsAdd = () => {
   useEffect(() => {
     AsyncStorage.getItem(AppStorage.LNDHUB)
       .then(url => setWalletBaseURI(url))
-      .catch(() => setWalletBaseURI(''));
-    isAdvancedModeEnabled()
-      .then(setIsAdvancedOptionsEnabled)
+      .catch(() => setWalletBaseURI(''))
       .finally(() => setIsLoading(false));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAdvancedOptionsEnabled]);
 
   useEffect(() => {
@@ -306,7 +304,7 @@ const WalletsAdd = () => {
 
         <View style={styles.advanced}>
           {(() => {
-            if (selectedWalletType === ButtonSelected.ONCHAIN && isAdvancedOptionsEnabled) {
+            if (selectedWalletType === ButtonSelected.ONCHAIN && isAdvancedOptionsEnabled.data) {
               return (
                 <View>
                   <BlueSpacing20 />
@@ -361,7 +359,7 @@ const WalletsAdd = () => {
               );
             }
           })()}
-          {isAdvancedOptionsEnabled && selectedWalletType === ButtonSelected.ONCHAIN && !isLoading && (
+          {isAdvancedOptionsEnabled.data && selectedWalletType === ButtonSelected.ONCHAIN && !isLoading && (
             <BlueButtonLink style={styles.import} title={entropyButtonText} onPress={navigateToEntropy} />
           )}
           <BlueSpacing20 />