Merge pull request #6161 from BlueWallet/useprivacy

REF: Privacy to hooks

App.js

@@ -30,7 +30,6 @@ import Biometric from './class/biometrics';
 import WidgetCommunication from './blue_modules/WidgetCommunication';
 import ActionSheet from './screen/ActionSheet';
 import HandoffComponent from './components/handoff';
-import Privacy from './blue_modules/Privacy';
 import triggerHapticFeedback, { HapticFeedbackTypes } from './blue_modules/hapticFeedback';
 import MenuElements from './components/MenuElements';
 import { updateExchangeRate } from './blue_modules/currency';
@@ -308,7 +307,6 @@ const App = () => {
       <WatchConnectivity />
       <Biometric />
       <WidgetCommunication />
-      <Privacy />
     </SafeAreaProvider>
   );
 };

blue_modules/Privacy.android.tsx

@@ -1,29 +0,0 @@
-import { useContext, useEffect } from 'react';
-// @ts-ignore: react-native-obscure is not in the type definition
-import Obscure from 'react-native-obscure';
-import { BlueStorageContext } from './storage-context';
-interface PrivacyComponent extends React.FC {
-  enableBlur: (isPrivacyBlurEnabled: boolean) => void;
-  disableBlur: () => void;
-}
-
-const Privacy: PrivacyComponent = () => {
-  const { isPrivacyBlurEnabled } = useContext(BlueStorageContext);
-
-  useEffect(() => {
-    Obscure.deactivateObscure();
-  }, [isPrivacyBlurEnabled]);
-
-  return null;
-};
-
-Privacy.enableBlur = (isPrivacyBlurEnabled: boolean) => {
-  if (!isPrivacyBlurEnabled) return;
-  Obscure.activateObscure();
-};
-
-Privacy.disableBlur = () => {
-  Obscure.deactivateObscure();
-};
-
-export default Privacy;

blue_modules/Privacy.ios.tsx

@@ -1,30 +0,0 @@
-import { useContext, useEffect } from 'react';
-// @ts-ignore: react-native-obscure is not in the type definition
-import { enabled } from 'react-native-privacy-snapshot';
-import { BlueStorageContext } from './storage-context';
-
-interface PrivacyComponent extends React.FC {
-  enableBlur: (isPrivacyBlurEnabled: boolean) => void;
-  disableBlur: () => void;
-}
-
-const Privacy: PrivacyComponent = () => {
-  const { isPrivacyBlurEnabled } = useContext(BlueStorageContext);
-
-  useEffect(() => {
-    Privacy.disableBlur();
-  }, [isPrivacyBlurEnabled]);
-
-  return null;
-};
-
-Privacy.enableBlur = (isPrivacyBlurEnabled: boolean) => {
-  if (!isPrivacyBlurEnabled) return;
-  enabled(true);
-};
-
-Privacy.disableBlur = () => {
-  enabled(false);
-};
-
-export default Privacy;

blue_modules/Privacy.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-interface PrivacyComponent extends React.FC {
-  enableBlur: () => void;
-  disableBlur: () => void;
-}
-
-const Privacy: PrivacyComponent = () => {
-  // Define Privacy's behavior
-  return null;
-};
-
-Privacy.enableBlur = () => {
-  // Define the enableBlur behavior
-};
-
-Privacy.disableBlur = () => {
-  // Define the disableBlur behavior
-};
-
-export default Privacy;

hooks/usePrivacy.android.tsx

@@ -0,0 +1,35 @@
+import { useContext, useEffect, useCallback } from 'react';
+// @ts-ignore: react-native-obscure is not in the type definition
+import Obscure from 'react-native-obscure';
+import { BlueStorageContext } from '../blue_modules/storage-context';
+
+export const usePrivacy = () => {
+  const { isPrivacyBlurEnabled } = useContext(BlueStorageContext);
+
+  const enableBlur = useCallback(() => {
+    if (!isPrivacyBlurEnabled) return;
+    Obscure.activateObscure();
+  }, [isPrivacyBlurEnabled]);
+
+  const disableBlur = useCallback(() => {
+    Obscure.deactivateObscure();
+  }, []); // This doesn't depend on the isPrivacyBlurEnabled value
+
+  useEffect(() => {
+    // Automatically activate or deactivate on mount and when isPrivacyBlurEnabled changes
+    if (isPrivacyBlurEnabled) {
+      enableBlur();
+    } else {
+      disableBlur();
+    }
+
+    // Cleanup function to deactivate obscure when the component unmounts
+    return () => {
+      disableBlur();
+    };
+  }, [isPrivacyBlurEnabled, enableBlur, disableBlur]);
+
+  return { enableBlur, disableBlur };
+};
+
+export default usePrivacy;

hooks/usePrivacy.ios.tsx

@@ -0,0 +1,35 @@
+import { useContext, useEffect, useCallback } from 'react';
+// @ts-ignore: react-native-obscure is not in the type definition
+import { enabled } from 'react-native-privacy-snapshot';
+import { BlueStorageContext } from '../blue_modules/storage-context';
+
+export const usePrivacy = () => {
+  const { isPrivacyBlurEnabled } = useContext(BlueStorageContext);
+
+  const enableBlur = useCallback(() => {
+    if (!isPrivacyBlurEnabled) return;
+    enabled(true);
+  }, [isPrivacyBlurEnabled]);
+
+  const disableBlur = useCallback(() => {
+    enabled(false);
+  }, []); // This doesn't depend on the isPrivacyBlurEnabled value
+
+  useEffect(() => {
+    // Automatically activate or deactivate on mount and when isPrivacyBlurEnabled changes
+    if (isPrivacyBlurEnabled) {
+      enableBlur();
+    } else {
+      disableBlur();
+    }
+
+    // Cleanup function to deactivate obscure when the component unmounts
+    return () => {
+      disableBlur();
+    };
+  }, [isPrivacyBlurEnabled, enableBlur, disableBlur]);
+
+  return { enableBlur, disableBlur };
+};
+
+export default usePrivacy;

hooks/usePrivacy.tsx

@@ -0,0 +1,9 @@
+export const usePrivacy = () => {
+  const enableBlur = () => {};
+
+  const disableBlur = () => {};
+
+  return { enableBlur, disableBlur };
+};
+
+export default usePrivacy;

screen/send/create.js

@@ -8,7 +8,6 @@ import RNFS from 'react-native-fs';
 import BigNumber from 'bignumber.js';
 import { BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
-import Privacy from '../../blue_modules/Privacy';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import loc from '../../loc';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
@@ -18,6 +17,7 @@ import presentAlert from '../../components/Alert';
 import { PERMISSIONS, RESULTS, request } from 'react-native-permissions';
 import { useTheme } from '../../components/themes';
 import { satoshiToBTC } from '../../blue_modules/currency';
+import usePrivacy from '../../hooks/usePrivacy';
 const bitcoin = require('bitcoinjs-lib');
 
 const SendCreate = () => {
@@ -26,6 +26,7 @@ const SendCreate = () => {
   const size = transaction.virtualSize();
   const { colors } = useTheme();
   const { setOptions } = useNavigation();
+  const { enableBlur, disableBlur } = usePrivacy();
 
   const styleHooks = StyleSheet.create({
     transactionDetailsTitle: {
@@ -46,13 +47,12 @@ const SendCreate = () => {
   });
 
   useEffect(() => {
-    Privacy.enableBlur();
-
     console.log('send/create - useEffect');
+    enableBlur();
     return () => {
-      Privacy.disableBlur();
+      disableBlur();
     };
-  }, []);
+  }, [disableBlur, enableBlur]);
 
   const exportTXN = useCallback(async () => {
     const fileName = `${Date.now()}.txn`;

screen/wallets/addresses.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useState, useContext, useRef, useEffect, useLayoutEffect } from 'react';
 import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
-import Privacy from '../../blue_modules/Privacy';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import loc from '../../loc';
 import navigationStyle from '../../components/navigationStyle';
@@ -9,6 +8,7 @@ import { AddressItem } from '../../components/addresses/AddressItem';
 import { AddressTypeTabs, TABS } from '../../components/addresses/AddressTypeTabs';
 import { WatchOnlyWallet } from '../../class';
 import { useTheme } from '../../components/themes';
+import usePrivacy from '../../hooks/usePrivacy';
 
 export const totalBalance = ({ c, u } = { c: 0, u: 0 }) => c + u;
 
@@ -80,6 +80,8 @@ const WalletAddresses = () => {
 
   const [search, setSearch] = React.useState('');
 
+  const { enableBlur, disableBlur } = usePrivacy();
+
   const stylesHook = StyleSheet.create({
     root: {
       backgroundColor: colors.elevated,
@@ -126,10 +128,11 @@ const WalletAddresses = () => {
 
   useFocusEffect(
     useCallback(() => {
-      Privacy.enableBlur();
-
+      enableBlur();
       getAddresses();
-
+      return () => {
+        disableBlur();
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []),
   );

screen/wallets/export.js

@@ -4,7 +4,6 @@ import { useNavigation, useFocusEffect, useRoute } from '@react-navigation/nativ
 
 import { BlueSpacing20, BlueText, BlueCopyTextToClipboard, BlueCard } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
-import Privacy from '../../blue_modules/Privacy';
 import Biometric from '../../class/biometrics';
 import { LegacyWallet, LightningCustodianWallet, SegwitBech32Wallet, SegwitP2SHWallet, WatchOnlyWallet } from '../../class';
 import loc from '../../loc';
@@ -13,6 +12,7 @@ import QRCodeComponent from '../../components/QRCodeComponent';
 import HandoffComponent from '../../components/handoff';
 import { useTheme } from '../../components/themes';
 import SafeArea from '../../components/SafeArea';
+import usePrivacy from '../../hooks/usePrivacy';
 
 const WalletExport = () => {
   const { wallets, saveToDisk } = useContext(BlueStorageContext);
@@ -23,6 +23,7 @@ const WalletExport = () => {
   const wallet = wallets.find(w => w.getID() === walletID);
   const [qrCodeSize, setQRCodeSize] = useState(90);
   const appState = useRef(AppState.currentState);
+  const { enableBlur, disableBlur } = usePrivacy();
 
   useEffect(() => {
     const subscription = AppState.addEventListener('change', nextAppState => {
@@ -52,7 +53,7 @@ const WalletExport = () => {
 
   useFocusEffect(
     useCallback(() => {
-      Privacy.enableBlur();
+      enableBlur();
       const task = InteractionManager.runAfterInteractions(async () => {
         if (wallet) {
           const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
@@ -71,8 +72,9 @@ const WalletExport = () => {
       });
       return () => {
         task.cancel();
-        Privacy.disableBlur();
+        disableBlur();
       };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [goBack, saveToDisk, wallet]),
   );
 

screen/wallets/exportMultisigCoordinationSetup.js

@@ -1,17 +1,16 @@
 import React, { useCallback, useContext, useRef, useState } from 'react';
 import { ActivityIndicator, InteractionManager, ScrollView, StyleSheet, View } from 'react-native';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
-
 import { BlueSpacing20, BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
-import Privacy from '../../blue_modules/Privacy';
 import Biometric from '../../class/biometrics';
 import loc from '../../loc';
 import { SquareButton } from '../../components/SquareButton';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { useTheme } from '../../components/themes';
 import SafeArea from '../../components/SafeArea';
+import usePrivacy from '../../hooks/usePrivacy';
 const fs = require('../../blue_modules/fs');
 
 const ExportMultisigCoordinationSetup = () => {
@@ -24,6 +23,7 @@ const ExportMultisigCoordinationSetup = () => {
   const [isShareButtonTapped, setIsShareButtonTapped] = useState(false);
   const { goBack } = useNavigation();
   const { colors } = useTheme();
+  const { enableBlur, disableBlur } = usePrivacy();
   const stylesHook = StyleSheet.create({
     loading: {
       backgroundColor: colors.elevated,
@@ -51,7 +51,7 @@ const ExportMultisigCoordinationSetup = () => {
 
   useFocusEffect(
     useCallback(() => {
-      Privacy.enableBlur();
+      enableBlur();
       const task = InteractionManager.runAfterInteractions(async () => {
         if (wallet) {
           const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
@@ -67,9 +67,9 @@ const ExportMultisigCoordinationSetup = () => {
       });
       return () => {
         task.cancel();
-        Privacy.disableBlur();
+        disableBlur();
       };
-    }, [goBack, wallet]),
+    }, [disableBlur, enableBlur, goBack, wallet]),
   );
 
   return isLoading ? (

screen/wallets/import.js

@@ -10,13 +10,13 @@ import {
   BlueText,
 } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
-import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
 import { useTheme } from '../../components/themes';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
+import usePrivacy from '../../hooks/usePrivacy';
 
 const WalletsImport = () => {
   const navigation = useNavigation();
@@ -31,6 +31,7 @@ const WalletsImport = () => {
   const [isAdvancedModeEnabledRender, setIsAdvancedModeEnabledRender] = useState(false);
   const [searchAccounts, setSearchAccounts] = useState(false);
   const [askPassphrase, setAskPassphrase] = useState(false);
+  const { enableBlur, disableBlur } = usePrivacy();
 
   const styles = StyleSheet.create({
     root: {
@@ -58,15 +59,15 @@ const WalletsImport = () => {
   };
 
   useEffect(() => {
-    Privacy.enableBlur();
+    enableBlur();
     Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', () => setIsToolbarVisibleForAndroid(true));
     Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', () => setIsToolbarVisibleForAndroid(false));
     return () => {
       Keyboard.removeAllListeners(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow');
       Keyboard.removeAllListeners(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide');
-      Privacy.disableBlur();
+      disableBlur();
     };
-  }, []);
+  }, [disableBlur, enableBlur]);
 
   useEffect(() => {
     isAdvancedModeEnabled().then(setIsAdvancedModeEnabledRender);

screen/wallets/pleaseBackup.tsx

@@ -3,13 +3,13 @@ import { ActivityIndicator, View, BackHandler, Text, ScrollView, StyleSheet, I18
 import { useNavigation, useRoute } from '@react-navigation/native';
 
 import navigationStyle from '../../components/navigationStyle';
-import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { AbstractWallet } from '../../class';
 import { useTheme } from '../../components/themes';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
+import usePrivacy from '../../hooks/usePrivacy';
 
 const PleaseBackup: React.FC = () => {
   const { wallets } = useContext(BlueStorageContext);
@@ -18,6 +18,7 @@ const PleaseBackup: React.FC = () => {
   const wallet = wallets.find((w: AbstractWallet) => w.getID() === walletID);
   const navigation = useNavigation();
   const { colors } = useTheme();
+  const { enableBlur, disableBlur } = usePrivacy();
 
   const stylesHook = StyleSheet.create({
     flex: {
@@ -41,11 +42,11 @@ const PleaseBackup: React.FC = () => {
   }, [navigation]);
 
   useEffect(() => {
-    Privacy.enableBlur();
+    enableBlur();
     setIsLoading(false);
     BackHandler.addEventListener('hardwareBackPress', handleBackButton);
     return () => {
-      Privacy.disableBlur();
+      disableBlur();
       BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

screen/wallets/pleaseBackupLNDHub.js

@@ -4,13 +4,13 @@ import { View, StyleSheet, ScrollView, BackHandler } from 'react-native';
 
 import { BlueCopyTextToClipboard, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
-import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import { useTheme } from '../../components/themes';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
+import usePrivacy from '../../hooks/usePrivacy';
 
 const PleaseBackupLNDHub = () => {
   const { wallets } = useContext(BlueStorageContext);
@@ -19,6 +19,8 @@ const PleaseBackupLNDHub = () => {
   const navigation = useNavigation();
   const { colors } = useTheme();
   const [qrCodeSize, setQRCodeSize] = useState(90);
+  const { enableBlur, disableBlur } = usePrivacy();
+
   const handleBackButton = useCallback(() => {
     navigation.getParent().pop();
     return true;
@@ -38,13 +40,13 @@ const PleaseBackupLNDHub = () => {
   });
 
   useEffect(() => {
-    Privacy.enableBlur();
+    enableBlur();
     BackHandler.addEventListener('hardwareBackPress', handleBackButton);
     return () => {
-      Privacy.disableBlur();
+      disableBlur();
       BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
     };
-  }, [handleBackButton]);
+  }, [disableBlur, enableBlur, handleBackButton]);
 
   const pop = () => navigation.getParent().pop();
 

screen/wallets/pleaseBackupLdk.js

@@ -4,12 +4,12 @@ import { View, useWindowDimensions, StyleSheet, BackHandler, ScrollView } from '
 import QRCode from 'react-native-qrcode-svg';
 import { BlueCopyTextToClipboard, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
-import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { useTheme } from '../../components/themes';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
+import usePrivacy from '../../hooks/usePrivacy';
 
 const PleaseBackupLdk = () => {
   const { wallets } = useContext(BlueStorageContext);
@@ -19,6 +19,7 @@ const PleaseBackupLdk = () => {
   const navigation = useNavigation();
   const { colors } = useTheme();
   const { height, width } = useWindowDimensions();
+  const { enableBlur, disableBlur } = usePrivacy();
   const handleBackButton = useCallback(() => {
     navigation.getParent().pop();
     return true;
@@ -41,13 +42,13 @@ const PleaseBackupLdk = () => {
   });
 
   useEffect(() => {
-    Privacy.enableBlur();
+    enableBlur();
     BackHandler.addEventListener('hardwareBackPress', handleBackButton);
     return () => {
-      Privacy.disableBlur();
+      disableBlur();
       BackHandler.removeEventListener('hardwareBackPress', handleBackButton);
     };
-  }, [handleBackButton]);
+  }, [disableBlur, enableBlur, handleBackButton]);
 
   const pop = () => navigation.getParent().pop();
   return (

screen/wallets/viewEditMultisigCosigners.tsx

@@ -37,7 +37,6 @@ import MultipleStepsListItem, {
   MultipleStepsListItemButtohType,
   MultipleStepsListItemDashType,
 } from '../../components/MultipleStepsListItem';
-import Privacy from '../../blue_modules/Privacy';
 import Biometric from '../../class/biometrics';
 import { SquareButton } from '../../components/SquareButton';
 import { encodeUR } from '../../blue_modules/ur';
@@ -47,6 +46,7 @@ import { scanQrHelper } from '../../helpers/scan-qr';
 import { useTheme } from '../../components/themes';
 import Button from '../../components/Button';
 import { NativeStackScreenProps } from 'react-native-screens/native-stack';
+import usePrivacy from '../../hooks/usePrivacy';
 const fs = require('../../blue_modules/fs');
 const prompt = require('../../helpers/prompt');
 
@@ -78,6 +78,8 @@ const ViewEditMultisigCosigners = ({ route }: NativeStackScreenProps<StackParams
   const [askPassphrase, setAskPassphrase] = useState(false);
   const [isAdvancedModeEnabledRender, setIsAdvancedModeEnabledRender] = useState(false);
   const data = useRef<any[]>();
+  const { enableBlur, disableBlur } = usePrivacy();
+
   const stylesHook = StyleSheet.create({
     root: {
       backgroundColor: colors.elevated,
@@ -151,7 +153,7 @@ const ViewEditMultisigCosigners = ({ route }: NativeStackScreenProps<StackParams
       if (hasLoaded.current) return;
       setIsLoading(true);
 
-      Privacy.enableBlur();
+      enableBlur();
 
       const task = InteractionManager.runAfterInteractions(async () => {
         const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
@@ -174,7 +176,7 @@ const ViewEditMultisigCosigners = ({ route }: NativeStackScreenProps<StackParams
         setIsLoading(false);
       });
       return () => {
-        Privacy.disableBlur();
+        disableBlur();
         task.cancel();
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps

screen/wallets/xpub.tsx

@@ -5,7 +5,6 @@ import Share from 'react-native-share';
 import { styles, useDynamicStyles } from './xpub.styles';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueSpacing20, BlueText, BlueCopyTextToClipboard } from '../../BlueComponents';
-import Privacy from '../../blue_modules/Privacy';
 import Biometric from '../../class/biometrics';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -14,6 +13,7 @@ import HandoffComponent from '../../components/handoff';
 import Button from '../../components/Button';
 import SafeArea from '../../components/SafeArea';
 import { AbstractWallet } from '../../class';
+import usePrivacy from '../../hooks/usePrivacy';
 
 type WalletXpubRouteProp = RouteProp<{ params: { walletID: string; xpub: string } }, 'params'>;
 export type RootStackParamList = {
@@ -34,6 +34,7 @@ const WalletXpub: React.FC = () => {
   const stylesHook = useDynamicStyles(); // This now includes the theme implicitly
   const [qrCodeSize, setQRCodeSize] = useState<number>(90);
   const lastWalletIdRef = useRef<string | undefined>();
+  const { enableBlur, disableBlur } = usePrivacy();
 
   useFocusEffect(
     useCallback(() => {
@@ -41,7 +42,7 @@ const WalletXpub: React.FC = () => {
       if (lastWalletIdRef.current === walletID) {
         return;
       }
-      Privacy.enableBlur();
+      enableBlur();
       const task = InteractionManager.runAfterInteractions(async () => {
         if (wallet) {
           const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
@@ -64,9 +65,9 @@ const WalletXpub: React.FC = () => {
       lastWalletIdRef.current = walletID;
       return () => {
         task.cancel();
-        Privacy.disableBlur();
+        disableBlur();
       };
-    }, [wallet, xpub, walletID, navigation]),
+    }, [walletID, enableBlur, wallet, xpub, navigation, disableBlur]),
   );
 
   useEffect(() => {