ADD: useAsyncPromise

class/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);
           }}