REF: Reuse HeaderRightButton

Navigation.tsx

@@ -64,7 +64,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';
+import HeaderRightButton from './components/HeaderRightButton';
 import WalletExportStack from './navigation/WalletExportStack';
 import SendDetailsStack from './navigation/SendDetailsStack';
 import LNDCreateInvoiceRoot from './navigation/LNDCreateInvoiceStack';
@@ -171,9 +171,7 @@ const DetailViewStackScreensStack = () => {
     navigation.dispatch(StackActions.popToTop());
   };
 
-  const SaveButton = useMemo(() => {
+  const SaveButton = useMemo(() => <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.details_save} />, []);
-    return <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.details_save} />;
-  }, []);
 
   return (
     <DetailViewRoot.Navigator
@@ -236,6 +234,7 @@ const DetailViewStackScreensStack = () => {
               headerStyle: {
                 backgroundColor: theme.colors.customHeader,
               },
+              headerRight: () => SaveButton,
             })(theme)}
           />
           <DetailViewRoot.Screen name="CPFP" component={CPFP} options={CPFP.navigationOptions(theme)} />

components/HeaderRightButton.tsx

@@ -1,15 +1,15 @@
+import React from 'react';
 import { StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { useTheme } from './themes';
-import React from 'react';
 
 interface HeaderRightButtonProps {
-  disabled: boolean;
+  disabled?: boolean;
   onPress?: () => void;
   title: string;
   testID?: string;
 }
 
-export const HeaderRightButton: React.FC<HeaderRightButtonProps> = ({ disabled = true, onPress, title, testID }) => {
+const HeaderRightButton: React.FC<HeaderRightButtonProps> = ({ disabled = true, onPress, title, testID }) => {
   const { colors } = useTheme();
   return (
     <TouchableOpacity
@@ -37,3 +37,5 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
 });
+
+export default HeaderRightButton;

screen/transactions/details.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { InteractionManager, Keyboard, Linking, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { InteractionManager, Keyboard, Linking, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 import { RouteProp, useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import dayjs from 'dayjs';
@@ -16,6 +16,7 @@ import CopyToClipboardButton from '../../components/CopyToClipboardButton';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { Transaction, TWallet } from '../../class/wallets/types';
 import assert from 'assert';
+import HeaderRightButton from '../../components/HeaderRightButton';
 
 interface TransactionDetailsProps {
   route: RouteProp<{ params: { hash: string; walletID: string } }, 'params'>;
@@ -61,12 +62,6 @@ const TransactionDetails = () => {
     Link: {
       color: colors.buttonTextColor,
     },
-    save: {
-      backgroundColor: colors.lightButton,
-    },
-    saveText: {
-      color: colors.buttonTextColor,
-    },
   });
 
   const handleOnSaveButtonTapped = useCallback(() => {
@@ -82,23 +77,16 @@ const TransactionDetails = () => {
     });
   }, [tx, txMetadata, memo, counterpartyLabel, paymentCode, saveToDisk, counterpartyMetadata]);
 
-  const HeaderRightButton = useMemo(() => {
+  const HeaderRight = useMemo(
-    return (
+    () => <HeaderRightButton disabled={isLoading} onPress={handleOnSaveButtonTapped} title={loc.wallets.details_save} />,
-      <TouchableOpacity
+
-        accessibilityRole="button"
+    [isLoading, handleOnSaveButtonTapped],
-        disabled={isLoading}
+  );
-        style={[styles.save, stylesHooks.save]}
-        onPress={handleOnSaveButtonTapped}
-      >
-        <Text style={[styles.saveText, stylesHooks.saveText]}>{loc.wallets.details_save}</Text>
-      </TouchableOpacity>
-    );
-  }, [isLoading, stylesHooks.save, stylesHooks.saveText, handleOnSaveButtonTapped]);
 
   useEffect(() => {
     // This effect only handles changes in `colors`
-    setOptions({ headerRight: () => HeaderRightButton });
+    setOptions({ headerRight: () => HeaderRight });
-  }, [colors, HeaderRightButton, setOptions]);
+  }, [colors, HeaderRight, setOptions]);
 
   useFocusEffect(
     useCallback(() => {
@@ -200,6 +188,17 @@ const TransactionDetails = () => {
     });
   };
 
+  const onPressMenuItem = (key: string) => {
+    if (key === TransactionDetails.actionKeys.CopyToClipboard) {
+      handleCopyPress(key);
+    } else if (key === TransactionDetails.actionKeys.GoToWallet) {
+      const wallet = weOwnAddress(key);
+      if (wallet) {
+        navigateToWallet(wallet);
+      }
+    }
+  };
+
   const renderSection = (array: any[]) => {
     const fromArray = [];
 
@@ -220,20 +219,7 @@ const TransactionDetails = () => {
       }
 
       fromArray.push(
-        <ToolTipMenu
+        <ToolTipMenu key={address} isButton title={address} isMenuPrimaryAction actions={actions} onPressMenuItem={onPressMenuItem}>
-          key={address}
-          isButton
-          title={address}
-          isMenuPrimaryAction
-          actions={actions}
-          onPressMenuItem={(id: string) => {
-            if (id === TransactionDetails.actionKeys.CopyToClipboard) {
-              handleCopyPress(address);
-            } else if (id === TransactionDetails.actionKeys.GoToWallet) {
-              isWeOwnAddress && navigateToWallet(isWeOwnAddress);
-            }
-          }}
-        >
           <BlueText style={isWeOwnAddress ? [styles.rowValue, styles.weOwnAddress] : styles.rowValue}>
             {address}
             {index === array.length - 1 ? null : ','}
@@ -400,17 +386,6 @@ const styles = StyleSheet.create({
   weOwnAddress: {
     fontWeight: '700',
   },
-  save: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 80,
-    borderRadius: 8,
-    height: 34,
-  },
-  saveText: {
-    fontSize: 15,
-    fontWeight: '600',
-  },
   memoTextInput: {
     flexDirection: 'row',
     borderWidth: 1,

screen/wallets/details.js

@@ -45,7 +45,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';
+import HeaderRightButton from '../../components/HeaderRightButton';
 import { writeFileAndExport } from '../../blue_modules/fs';
 
 const styles = StyleSheet.create({