REF: Use proper navigation options

navigation/DetailViewScreensStack.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { View } from 'react-native';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { isDesktop } from '../blue_modules/environment';
 import HeaderRightButton from '../components/HeaderRightButton';
 import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
@@ -63,6 +63,7 @@ import PlusIcon from '../components/icons/PlusIcon';
 import SettingsButton from '../components/icons/SettingsButton';
 import ExportMultisigCoordinationSetupStack from './ExportMultisigCoordinationSetupStack';
 import ManageWallets from '../screen/wallets/ManageWallets';
+import getWalletTransactionsOptions from './helpers/getWalletTransactionsOptions';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
@@ -102,6 +103,7 @@ const DetailViewStackScreensStack = () => {
   }, [RightBarButtons, theme.colors.customHeader, theme.colors.navigationBarColor]);
 
   const walletListScreenOptions = useWalletListScreenOptions;
+
   return (
     <DetailViewStack.Navigator
       initialRouteName="WalletsList"
@@ -111,7 +113,7 @@ const DetailViewStackScreensStack = () => {
       <DetailViewStack.Screen
         name="WalletTransactions"
         component={WalletTransactions}
-        options={WalletTransactions.navigationOptions(theme)}
+        options={({ route }) => getWalletTransactionsOptions({ route })}
       />
       <DetailViewStack.Screen
         name="WalletDetails"
@@ -152,10 +154,17 @@ const DetailViewStackScreensStack = () => {
           headerBackTitleVisible: true,
         })(theme)}
       />
-      <DetailViewStack.Screen name="CPFP" component={CPFP} options={CPFP.navigationOptions(theme)} />
-      <DetailViewStack.Screen name="RBFBumpFee" component={RBFBumpFee} options={RBFBumpFee.navigationOptions(theme)} />
-      <DetailViewStack.Screen name="RBFCancel" component={RBFCancel} options={RBFCancel.navigationOptions(theme)} />
-
+      <DetailViewStack.Screen name="CPFP" component={CPFP} options={navigationStyle({ title: loc.transactions.cpfp_title })(theme)} />
+      <DetailViewStack.Screen
+        name="RBFBumpFee"
+        component={RBFBumpFee}
+        options={navigationStyle({ title: loc.transactions.rbf_title })(theme)}
+      />
+      <DetailViewStack.Screen
+        name="RBFCancel"
+        component={RBFCancel}
+        options={navigationStyle({ title: loc.transactions.cancel_title })(theme)}
+      />
       <DetailViewStack.Screen
         name="SelectWallet"
         component={SelectWallet}
@@ -188,8 +197,16 @@ const DetailViewStackScreensStack = () => {
         component={Broadcast}
         options={navigationStyle({ title: loc.send.create_broadcast })(theme)}
       />
-      <DetailViewStack.Screen name="IsItMyAddress" component={IsItMyAddress} options={IsItMyAddress.navigationOptions(theme)} />
-      <DetailViewStack.Screen name="GenerateWord" component={GenerateWord} options={GenerateWord.navigationOptions(theme)} />
+      <DetailViewStack.Screen
+        name="IsItMyAddress"
+        component={IsItMyAddress}
+        options={navigationStyle({ title: loc.is_it_my_address.title })(theme)}
+      />
+      <DetailViewStack.Screen
+        name="GenerateWord"
+        component={GenerateWord}
+        options={navigationStyle({ title: loc.autofill_word.title })(theme)}
+      />
       <DetailViewStack.Screen
         name="LnurlPay"
         component={LnurlPay}
@@ -214,7 +231,7 @@ const DetailViewStackScreensStack = () => {
           gestureEnabled: false,
         })(theme)}
       />
-      <DetailViewStack.Screen name="LnurlAuth" component={LnurlAuth} options={LnurlAuth.navigationOptions(theme)} />
+      <DetailViewStack.Screen name="LnurlAuth" component={LnurlAuth} options={navigationStyle({ title: '' })(theme)} />
       <DetailViewStack.Screen
         name="Success"
         component={Success}
@@ -378,4 +395,8 @@ const styles = {
   width24: {
     width: 24,
   },
+  walletDetails: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
 };

navigation/DetailViewStackParamList.ts

@@ -4,9 +4,9 @@ import { SendDetailsParams } from './SendDetailsStackParamList';
 export type DetailViewStackParamList = {
   UnlockWithScreen: undefined;
   WalletsList: { scannedData?: string };
-  WalletTransactions: { walletID: string; walletType: string };
+  WalletTransactions: { isLoading?: boolean; walletID: string; walletType: string };
   WalletDetails: { walletID: string };
-  TransactionDetails: { transactionId: string };
+  TransactionDetails: { transactionId: string; hash: string; walletID: string };
   TransactionStatus: { hash?: string; walletID?: string };
   CPFP: { transactionId: string };
   RBFBumpFee: { transactionId: string };

navigation/SendDetailsStackParamList.ts

@@ -1,5 +1,5 @@
 import { Psbt } from 'bitcoinjs-lib';
-import { CreateTransactionTarget, CreateTransactionUtxo, TWallet, LightningTransaction } from '../class/wallets/types';
+import { CreateTransactionTarget, CreateTransactionUtxo, TWallet } from '../class/wallets/types';
 import { BitcoinUnit, Chain } from '../models/bitcoinUnits';
 
 export type SendDetailsParams = {
@@ -94,121 +94,3 @@ export type SendDetailsStackParamList = {
     };
   };
 };
-
-export type DetailViewStackParamList = {
-  UnlockWithScreen: undefined;
-  WalletsList: undefined;
-  WalletTransactions: { walletID: string; walletType: string };
-  WalletDetails: { walletID: string };
-  TransactionDetails: { transactionId: string };
-  TransactionStatus: { hash?: string; walletID?: string };
-  CPFP: { transactionId: string };
-  RBFBumpFee: { transactionId: string };
-  RBFCancel: { transactionId: string };
-  SelectWallet: undefined;
-  LNDViewInvoice: { invoice: LightningTransaction; walletID: string };
-  LNDViewAdditionalInvoiceInformation: { invoiceId: string };
-  LNDViewAdditionalInvoicePreImage: { invoiceId: string };
-  Broadcast: undefined;
-  IsItMyAddress: undefined;
-  GenerateWord: undefined;
-  LnurlPay: undefined;
-  LnurlPaySuccess: {
-    paymentHash: string;
-    justPaid: boolean;
-    fromWalletID: string;
-  };
-  LnurlAuth: undefined;
-  Success: undefined;
-  WalletAddresses: { walletID: string };
-  AddWalletRoot: undefined;
-  SendDetailsRoot: {
-    screen: string;
-    params: {
-      walletID: string;
-      address?: string;
-      amount?: number;
-      amountSats?: number;
-      unit?: BitcoinUnit;
-      noRbf?: boolean;
-      launchedBy?: string;
-      isEditable?: boolean;
-      uri?: string;
-      addRecipientParams?: {
-        address?: string;
-        amount?: number;
-        memo?: string;
-      };
-      memo?: string;
-    };
-    merge: boolean;
-  };
-  LNDCreateInvoiceRoot: undefined;
-  ScanLndInvoiceRoot: {
-    screen: string;
-    params: {
-      paymentHash: string;
-      fromWalletID: string;
-      justPaid: boolean;
-    };
-  };
-  AztecoRedeemRoot: undefined;
-  WalletExportRoot: undefined;
-  ExportMultisigCoordinationSetupRoot: undefined;
-  Settings: undefined;
-  Currency: undefined;
-  GeneralSettings: undefined;
-  PlausibleDeniability: undefined;
-  Licensing: undefined;
-  NetworkSettings: undefined;
-  About: undefined;
-  DefaultView: undefined;
-  ElectrumSettings: undefined;
-  EncryptStorage: undefined;
-  Language: undefined;
-  LightningSettings: {
-    url?: string;
-  };
-  NotificationSettings: undefined;
-  SelfTest: undefined;
-  ReleaseNotes: undefined;
-  Tools: undefined;
-  SettingsPrivacy: undefined;
-  ViewEditMultisigCosignersRoot: { walletID: string; cosigners: string[] };
-  WalletXpubRoot: undefined;
-  SignVerifyRoot: {
-    screen: 'SignVerify';
-    params: {
-      walletID: string;
-      address: string;
-    };
-  };
-  ReceiveDetailsRoot: {
-    screen: 'ReceiveDetails';
-    params: {
-      walletID: string;
-      address: string;
-    };
-  };
-  ScanQRCodeRoot: {
-    screen: string;
-    params: {
-      isLoading: false;
-      cameraStatusGranted?: boolean;
-      backdoorPressed?: boolean;
-      launchedBy?: string;
-      urTotal?: number;
-      urHave?: number;
-      backdoorText?: string;
-      onDismiss?: () => void;
-      showFileImportButton: true;
-      backdoorVisible?: boolean;
-      animatedQRCodeData?: Record<string, any>;
-    };
-  };
-  PaymentCodeList: {
-    paymentCode: string;
-    walletID: string;
-  };
-  ManageWallets: undefined;
-};

navigation/helpers/getWalletTransactionsOptions.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Icon } from '@rneui/themed';
+import WalletGradient from '../../class/wallet-gradient';
+import { RouteProp } from '@react-navigation/native';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import { DetailViewStackParamList } from '../DetailViewStackParamList';
+import { navigationRef } from '../../NavigationService';
+
+interface GetWalletTransactionsOptionsParams {
+  route: RouteProp<DetailViewStackParamList, 'WalletTransactions'>;
+}
+
+const getWalletTransactionsOptions = ({ route }: GetWalletTransactionsOptionsParams): NativeStackNavigationOptions => {
+  const { isLoading, walletID, walletType } = route.params;
+
+  const onPress = () => {
+    navigationRef.navigate('WalletDetails', {
+      walletID,
+    });
+  };
+  const RightButton = (
+    <TouchableOpacity accessibilityRole="button" testID="WalletDetails" disabled={isLoading} style={styles.walletDetails} onPress={onPress}>
+      <Icon name="more-horiz" type="material" size={22} color="#FFFFFF" />
+    </TouchableOpacity>
+  );
+
+  const backgroundColor = WalletGradient.headerColorFor(walletType);
+
+  return {
+    title: '',
+    headerBackTitleStyle: { fontSize: 0 },
+    headerStyle: {
+      backgroundColor,
+    },
+    headerShadowVisible: false,
+    headerTintColor: '#FFFFFF',
+    headerBackTitleVisible: true,
+    headerRight: () => RightButton,
+  };
+};
+
+const styles = StyleSheet.create({
+  walletDetails: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+});
+
+export default getWalletTransactionsOptions;

screen/lnd/lnurlAuth.js

@@ -6,7 +6,6 @@ import URL from 'url';
 import { BlueCard, BlueLoading, BlueSpacing20, BlueSpacing40, BlueText } from '../../BlueComponents';
 import Lnurl from '../../class/lnurl';
 import Button from '../../components/Button';
-import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
 import { useTheme } from '../../components/themes';
 import selectWallet from '../../helpers/select-wallet';
@@ -170,7 +169,3 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
 });
-
-LnurlAuth.navigationOptions = navigationStyle({
-  title: '',
-});

screen/send/isItMyAddress.js

@@ -3,7 +3,6 @@ import { useRoute } from '@react-navigation/native';
 import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, TextInput, View } from 'react-native';
 import { BlueButtonLink, BlueCard, BlueSpacing10, BlueSpacing20, BlueText } from '../../BlueComponents';
 import Button from '../../components/Button';
-import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
 import { useTheme } from '../../components/themes';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
@@ -138,7 +137,6 @@ const IsItMyAddress = () => {
 };
 
 export default IsItMyAddress;
-IsItMyAddress.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.is_it_my_address.title }));
 
 const styles = StyleSheet.create({
   wrapper: {

screen/transactions/CPFP.js

@@ -20,7 +20,6 @@ import { BlueCard, BlueSpacing, BlueSpacing20, BlueText } from '../../BlueCompon
 import { HDSegwitBech32Transaction, HDSegwitBech32Wallet } from '../../class';
 import presentAlert, { AlertType } from '../../components/Alert';
 import Button from '../../components/Button';
-import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
 import { BlueCurrentTheme } from '../../components/themes';
 import loc from '../../loc';
@@ -251,4 +250,3 @@ CPFP.propTypes = {
     }),
   }),
 };
-CPFP.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.transactions.cpfp_title }));

screen/transactions/RBFBumpFee.js

@@ -4,7 +4,6 @@ import { ActivityIndicator, ScrollView, StyleSheet, View } from 'react-native';
 import { BlueSpacing20, BlueText } from '../../BlueComponents';
 import { HDSegwitBech32Transaction, HDSegwitBech32Wallet } from '../../class';
 import presentAlert from '../../components/Alert';
-import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 import CPFP from './CPFP';
@@ -118,4 +117,3 @@ RBFBumpFee.propTypes = {
     }),
   }),
 };
-RBFBumpFee.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.transactions.rbf_title }));

screen/transactions/RBFCancel.js

@@ -4,7 +4,6 @@ import { ActivityIndicator, ScrollView, View } from 'react-native';
 import { BlueSpacing20, BlueText } from '../../BlueComponents';
 import { HDSegwitBech32Transaction, HDSegwitBech32Wallet } from '../../class';
 import presentAlert from '../../components/Alert';
-import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 import CPFP from './CPFP';
@@ -121,5 +120,3 @@ RBFCancel.propTypes = {
     }),
   }),
 };
-
-RBFCancel.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.transactions.cancel_title }));

screen/transactions/TransactionDetails.tsx

@@ -20,11 +20,6 @@ import { DetailViewStackParamList } from '../../navigation/DetailViewStackParamL
 import { useStorage } from '../../hooks/context/useStorage';
 import { HandOffActivityType } from '../../components/types';
 
-interface TransactionDetailsProps {
-  route: RouteProp<{ params: { hash: string; walletID: string } }, 'params'>;
-  navigation: NativeStackNavigationProp<any>;
-}
-
 const actionKeys = {
   CopyToClipboard: 'copyToClipboard',
   GoToWallet: 'goToWallet',
@@ -62,10 +57,11 @@ const toolTipMenuActions = [
 ];
 
 type NavigationProps = NativeStackNavigationProp<DetailViewStackParamList, 'TransactionDetails'>;
+type RouteProps = RouteProp<DetailViewStackParamList, 'TransactionDetails'>;
 
 const TransactionDetails = () => {
   const { setOptions, navigate } = useExtendedNavigation<NavigationProps>();
-  const { hash, walletID } = useRoute<TransactionDetailsProps['route']>().params;
+  const { hash, walletID } = useRoute<RouteProps>().params;
   const { saveToDisk, txMetadata, counterpartyMetadata, wallets, getTransactions } = useStorage();
   const [from, setFrom] = useState<string[]>([]);
   const [to, setTo] = useState<string[]>([]);

screen/wallets/generateWord.js

@@ -6,7 +6,6 @@ import { generateChecksumWords } from '../../blue_modules/checksumWords';
 import { BlueCard, BlueSpacing10, BlueSpacing20, BlueText } from '../../BlueComponents';
 import { randomBytes } from '../../class/rng';
 import Button from '../../components/Button';
-import navigationStyle from '../../components/navigationStyle';
 import SafeArea from '../../components/SafeArea';
 import loc from '../../loc';
 
@@ -103,7 +102,6 @@ const GenerateWord = () => {
 };
 
 export default GenerateWord;
-GenerateWord.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.autofill_word.title }));
 
 const styles = StyleSheet.create({
   wrapper: {

screen/wallets/transactions.js

@@ -14,7 +14,6 @@ import {
   ScrollView,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import { Icon } from '@rneui/themed';
@@ -28,7 +27,6 @@ import { LightningCustodianWallet, MultisigHDWallet, WatchOnlyWallet } from '../
 import WalletGradient from '../../class/wallet-gradient';
 import presentAlert, { AlertType } from '../../components/Alert';
 import { FButton, FContainer } from '../../components/FloatButtons';
-import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import { TransactionListItem } from '../../components/TransactionListItem';
 import TransactionsNavigationHeader, { actionKeys } from '../../components/TransactionsNavigationHeader';
@@ -602,37 +600,6 @@ const WalletTransactions = ({ navigation }) => {
 
 export default WalletTransactions;
 
-WalletTransactions.navigationOptions = navigationStyle({}, (options, { theme, navigation, route }) => {
-  return {
-    headerRight: () => (
-      <TouchableOpacity
-        accessibilityRole="button"
-        testID="WalletDetails"
-        disabled={route.params.isLoading === true}
-        style={styles.walletDetails}
-        onPress={() =>
-          navigation.navigate('WalletDetails', {
-            walletID: route.params.walletID,
-          })
-        }
-      >
-        <Icon name="more-horiz" type="material" size={22} color="#FFFFFF" />
-      </TouchableOpacity>
-    ),
-    title: '',
-    headerBackTitleStyle: { fontSize: 0 },
-    headerStyle: {
-      backgroundColor: WalletGradient.headerColorFor(route.params.walletType),
-      borderBottomWidth: 0,
-      elevation: 0,
-      // shadowRadius: 0,
-      shadowOffset: { height: 0, width: 0 },
-    },
-    headerTintColor: '#FFFFFF',
-    headerBackTitleVisible: true,
-  };
-});
-
 WalletTransactions.propTypes = {
   navigation: PropTypes.shape(),
 };
@@ -647,10 +614,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 40,
   },
-  walletDetails: {
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-  },
   activityIndicator: {
     marginVertical: 20,
   },