Merge pull request #6514 from BlueWallet/walletd

REF: wallet details loads UI faster

Navigation.tsx

@@ -88,6 +88,7 @@ import PaymentCode from './screen/wallets/paymentCode';
 import PaymentCodesList from './screen/wallets/paymentCodesList';
 import { BlueStorageContext } from './blue_modules/storage-context';
 import { useIsLargeScreen } from './hooks/useIsLargeScreen';
+import { HeaderRightButton } from './components/HeaderRightButton';
 
 const AddWalletStack = createNativeStackNavigator();
 const AddWalletRoot = () => {
@@ -391,6 +392,11 @@ const DetailViewRoot = createNativeStackNavigator();
 const DetailViewStackScreensStack = () => {
   const { walletsInitialized } = useContext(BlueStorageContext);
   const theme = useTheme();
+
+  const SaveButton = useMemo(() => {
+    return <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.details_save} />;
+  }, []);
+
   return (
     <DetailViewRoot.Navigator
       initialRouteName="UnlockWithScreen"
@@ -416,7 +422,15 @@ const DetailViewStackScreensStack = () => {
           />
           <DetailViewRoot.Screen name="LdkOpenChannel" component={LdkOpenChannel} options={LdkOpenChannel.navigationOptions(theme)} />
           <DetailViewRoot.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
-          <DetailViewRoot.Screen name="WalletDetails" component={WalletDetails} options={WalletDetails.navigationOptions(theme)} />
+          <DetailViewRoot.Screen
+            name="WalletDetails"
+            component={WalletDetails}
+            options={navigationStyle({
+              headerTitle: loc.wallets.details_title,
+              statusBarStyle: 'auto',
+              headerRight: () => SaveButton,
+            })(theme)}
+          />
           <DetailViewRoot.Screen name="LdkViewLogs" component={LdkViewLogs} options={LdkViewLogs.navigationOptions(theme)} />
           <DetailViewRoot.Screen
             name="TransactionDetails"

components/HeaderRightButton.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { useTheme } from './themes';
+import React from 'react';
+
+interface HeaderRightButtonProps {
+  disabled: boolean;
+  onPress?: () => void;
+  title: string;
+  testID?: string;
+}
+
+export const HeaderRightButton: React.FC<HeaderRightButtonProps> = ({ disabled = true, onPress, title, testID }) => {
+  const { colors } = useTheme();
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      disabled={disabled}
+      style={[styles.save, { backgroundColor: colors.lightButton }]}
+      onPress={onPress}
+      testID={testID}
+    >
+      <Text style={[styles.saveText, { color: colors.buttonTextColor }]}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  save: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 80,
+    borderRadius: 8,
+    height: 34,
+  },
+  saveText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});

screen/wallets/details.js

@@ -1,5 +1,5 @@
 import { useRoute } from '@react-navigation/native';
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Alert,
@@ -43,7 +43,6 @@ import presentAlert from '../../components/Alert';
 import Button from '../../components/Button';
 import ListItem from '../../components/ListItem';
 import { SecondButton } from '../../components/SecondButton';
-import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import prompt from '../../helpers/prompt';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
@@ -51,6 +50,7 @@ import loc, { formatBalanceWithoutSuffix } from '../../loc';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
 import SaveFileButton from '../../components/SaveFileButton';
 import { useSettings } from '../../components/Context/SettingsContext';
+import { HeaderRightButton } from '../../components/HeaderRightButton';
 
 const styles = StyleSheet.create({
   scrollViewContent: {
@@ -108,17 +108,6 @@ const styles = StyleSheet.create({
   marginRight16: {
     marginRight: 16,
   },
-  save: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 80,
-    borderRadius: 8,
-    height: 34,
-  },
-  saveText: {
-    fontSize: 15,
-    fontWeight: '600',
-  },
 });
 
 const WalletDetails = () => {
@@ -174,12 +163,6 @@ const WalletDetails = () => {
 
       backgroundColor: colors.inputBackgroundColor,
     },
-    save: {
-      backgroundColor: colors.lightButton,
-    },
-    saveText: {
-      color: colors.buttonTextColor,
-    },
     delete: {
       color: isToolTipMenuVisible ? colors.buttonDisabledTextColor : '#d0021b',
     },
@@ -190,7 +173,7 @@ const WalletDetails = () => {
     }
   }, [wallet]);
 
-  const save = () => {
+  const handleSave = useCallback(() => {
     setIsLoading(true);
     if (walletName.trim().length > 0) {
       wallet.setLabel(walletName.trim());
@@ -211,25 +194,18 @@ const WalletDetails = () => {
         console.log(error.message);
         setIsLoading(false);
       });
-  };
+  }, [walletName, saveToDisk, wallet, hideTransactionsInWalletsList, useWithHardwareWallet, isBIP47Enabled, goBack]);
 
-  useLayoutEffect(() => {
+  const SaveButton = useMemo(
+    () => <HeaderRightButton title={loc.wallets.details_save} onPress={handleSave} disabled={isLoading} testID="Save" />,
+    [isLoading, handleSave],
+  );
+
+  useEffect(() => {
     setOptions({
-      // eslint-disable-next-line react/no-unstable-nested-components
-      headerRight: () => (
-        <TouchableOpacity
-          accessibilityRole="button"
-          testID="Save"
-          disabled={isLoading || isToolTipMenuVisible}
-          style={[styles.save, stylesHook.save]}
-          onPress={save}
-        >
-          <Text style={[styles.saveText, stylesHook.saveText]}>{loc.wallets.details_save}</Text>
-        </TouchableOpacity>
-      ),
+      headerRight: () => SaveButton,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, colors, walletName, useWithHardwareWallet, hideTransactionsInWalletsList, isBIP47Enabled, isToolTipMenuVisible]);
+  }, [SaveButton, setOptions]);
 
   useEffect(() => {
     if (wallets.some(w => w.getID() === walletID)) {
@@ -761,10 +737,4 @@ const WalletDetails = () => {
   );
 };
 
-WalletDetails.navigationOptions = navigationStyle({}, opts => ({
-  ...opts,
-  headerTitle: loc.wallets.details_title,
-  statusBarStyle: 'auto',
-}));
-
 export default WalletDetails;