FIX: Eliminate the need for a save button.

Follows modern HIGs

loc/en.json

@@ -342,7 +342,6 @@
     "details_outputs": "Outputs",
     "date": "Date",
     "details_received": "Received",
-    "transaction_saved": "Saved",
     "details_show_in_block_explorer": "View in Block Explorer",
     "details_title": "Transaction",
     "incoming_transaction": "Incoming Transaction",
@@ -417,7 +416,6 @@
     "details_master_fingerprint": "Master Fingerprint",
     "details_multisig_type": "multisig",
     "details_no_cancel": "No, cancel",
-    "details_save": "Save",
     "details_show_xpub": "Show Wallet XPUB",
     "details_show_addresses": "Show addresses",
     "details_title": "Wallet",

navigation/DetailViewScreensStack.tsx

@@ -133,7 +133,6 @@ const DetailViewStackScreensStack = () => {
             backgroundColor: theme.colors.customHeader,
           },
           headerTitle: loc.transactions.details_title,
-          headerRight: () => DetailButton,
         })(theme)}
       />
       <DetailViewStack.Screen

screen/transactions/TransactionDetails.tsx

@@ -1,17 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import assert from 'assert';
 import dayjs from 'dayjs';
-import { InteractionManager, Keyboard, Linking, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { InteractionManager, Linking, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import { BlueCard, BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
 import { Transaction, TWallet } from '../../class/wallets/types';
 import presentAlert from '../../components/Alert';
 import CopyToClipboardButton from '../../components/CopyToClipboardButton';
 import HandOffComponent from '../../components/HandOffComponent';
-import HeaderRightButton from '../../components/HeaderRightButton';
 import { useTheme } from '../../components/themes';
 import ToolTipMenu from '../../components/TooltipMenu';
 import loc from '../../loc';
@@ -61,7 +60,7 @@ type NavigationProps = NativeStackNavigationProp<DetailViewStackParamList, 'Tran
 type RouteProps = RouteProp<DetailViewStackParamList, 'TransactionDetails'>;
 
 const TransactionDetails = () => {
-  const { setOptions, navigate } = useExtendedNavigation<NavigationProps>();
+  const { addListener, navigate } = useExtendedNavigation<NavigationProps>();
   const { hash, walletID } = useRoute<RouteProps>().params;
   const { saveToDisk, txMetadata, counterpartyMetadata, wallets, getTransactions } = useStorage();
   const { selectedBlockExplorer } = useSettings();
@@ -88,29 +87,23 @@ const TransactionDetails = () => {
     },
   });
 
-  const handleOnSaveButtonTapped = useCallback(() => {
-    Keyboard.dismiss();
-    if (!tx) return;
-    txMetadata[tx.hash] = { memo };
-    if (counterpartyLabel && paymentCode) {
-      counterpartyMetadata[paymentCode] = { label: counterpartyLabel };
+  const saveTransactionDetails = useCallback(() => {
+    if (tx) {
+      txMetadata[tx.hash] = { memo };
+      if (counterpartyLabel && paymentCode) {
+        counterpartyMetadata[paymentCode] = { label: counterpartyLabel };
+      }
+      saveToDisk();
     }
-    saveToDisk().then(_success => {
-      triggerHapticFeedback(HapticFeedbackTypes.NotificationSuccess);
-      presentAlert({ message: loc.transactions.transaction_saved });
-    });
   }, [tx, txMetadata, memo, counterpartyLabel, paymentCode, saveToDisk, counterpartyMetadata]);
 
-  const HeaderRight = useMemo(
-    () => <HeaderRightButton onPress={handleOnSaveButtonTapped} testID="SaveButton" disabled={false} title={loc.wallets.details_save} />,
-
-    [handleOnSaveButtonTapped],
-  );
-
   useEffect(() => {
-    // This effect only handles changes in `colors`
-    setOptions({ headerRight: () => HeaderRight });
-  }, [colors, HeaderRight, setOptions]);
+    const unsubscribe = addListener('beforeRemove', () => {
+      saveTransactionDetails();
+    });
+
+    return unsubscribe;
+  }, [addListener, saveTransactionDetails]);
 
   useFocusEffect(
     useCallback(() => {
@@ -160,6 +153,10 @@ const TransactionDetails = () => {
     }, [hash, wallets]),
   );
 
+  const handleMemoBlur = useCallback(() => {
+    saveTransactionDetails();
+  }, [saveTransactionDetails]);
+
   const handleOnOpenTransactionOnBlockExplorerTapped = () => {
     const url = `${selectedBlockExplorer}/tx/${tx?.hash}`;
     Linking.canOpenURL(url)
@@ -268,6 +265,7 @@ const TransactionDetails = () => {
             clearButtonMode="while-editing"
             style={[styles.memoTextInput, stylesHooks.memoTextInput]}
             onChangeText={setMemo}
+            onBlur={handleMemoBlur}
             testID="TransactionDetailsMemoInput"
           />
           {isCounterpartyLabelVisible ? (
@@ -276,6 +274,7 @@ const TransactionDetails = () => {
               <TextInput
                 placeholder={loc.send.counterparty_label_placeholder}
                 value={counterpartyLabel}
+                onBlur={handleMemoBlur}
                 placeholderTextColor="#81868e"
                 style={[styles.memoTextInput, stylesHooks.memoTextInput]}
                 onChangeText={setCounterpartyLabel}