From b78bf8c1fce46b0f8db3c6182c55b7f7e9857a8b Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Thu, 6 Jun 2024 13:04:50 -0400
Subject: [PATCH] REF: navigationStyle default close position

---
 components/navigationStyle.tsx                | 100 ++++++++----------
 navigation/AddWalletStack.tsx                 |   1 -
 navigation/AztecoRedeemStack.tsx              |  10 +-
 navigation/DetailViewScreensStack.tsx         |  26 ++---
 .../ExportMultisigCoordinationSetupStack.tsx  |   7 +-
 navigation/LNDCreateInvoiceStack.tsx          |   5 +-
 navigation/PaymentCodeStack.tsx               |   4 +-
 navigation/ReceiveDetailsStack.tsx            |   4 +-
 navigation/ReorderWalletsStack.tsx            |   1 -
 navigation/ScanLndInvoiceStack.tsx            |   4 +-
 navigation/SendDetailsStack.tsx               |  11 +-
 navigation/SignVerifyStack.tsx                |   4 +-
 navigation/ViewEditMultisigCosignersStack.tsx |   1 -
 navigation/WalletExportStack.tsx              |   1 -
 navigation/WalletXpubStack.tsx                |   1 -
 navigation/index.tsx                          |   1 -
 16 files changed, 71 insertions(+), 110 deletions(-)

diff --git a/components/navigationStyle.tsx b/components/navigationStyle.tsx
index f104aebb6..1b503d306 100644
--- a/components/navigationStyle.tsx
+++ b/components/navigationStyle.tsx
@@ -14,6 +14,12 @@ const styles = StyleSheet.create({
   },
 });
 
+enum CloseButtonPosition {
+  None = 'None',
+  Left = 'Left',
+  Right = 'Right',
+}
+
 type OptionsFormatter = (
   options: NativeStackNavigationOptions,
   deps: { theme: Theme; navigation: any; route: any },
@@ -23,32 +29,44 @@ export type NavigationOptionsGetter = (theme: Theme) => (deps: { navigation: any
 
 const navigationStyle = (
   {
-    closeButtonFunc,
+    closeButtonPosition,
+    onCloseButtonPressed,
     headerBackVisible = true,
     ...opts
   }: NativeStackNavigationOptions & {
-    closeButton?: boolean;
-    closeButtonFunc?: (deps: { navigation: any; route: any }) => React.ReactElement | void;
+    closeButtonPosition?: CloseButtonPosition;
+    onCloseButtonPressed?: (deps: { navigation: any; route: any }) => void;
   },
   formatter?: OptionsFormatter,
 ): NavigationOptionsGetter => {
   return theme =>
     ({ navigation, route }) => {
-      // Determine if the current screen is the first one in the stack using the updated method
       const isFirstRouteInStack = navigation.getState().index === 0;
+      const isModal = route.params?.presentation !== 'card';
 
-      // Default closeButton to true if the current screen is the first one in the stack
-      const closeButton = opts.closeButton !== undefined ? opts.closeButton : isFirstRouteInStack;
+      const closeButton =
+        closeButtonPosition !== undefined
+          ? closeButtonPosition
+          : isFirstRouteInStack && isModal
+            ? CloseButtonPosition.Right
+            : CloseButtonPosition.None;
+
+      const handleClose = onCloseButtonPressed
+        ? () => onCloseButtonPressed({ navigation, route })
+        : () => {
+            Keyboard.dismiss();
+            navigation.goBack(null);
+          };
 
       let headerRight;
       let headerLeft;
-      if (closeButton) {
-        const handleClose = closeButtonFunc
-          ? () => closeButtonFunc({ navigation, route })
-          : () => {
-              Keyboard.dismiss();
-              navigation.goBack(null);
-            };
+
+      if (!headerBackVisible) {
+        headerLeft = () => <></>;
+        opts.headerLeft = headerLeft;
+      }
+
+      if (closeButton === CloseButtonPosition.Right) {
         headerRight = () => (
           <TouchableOpacity
             accessibilityRole="button"
@@ -60,22 +78,30 @@ const navigationStyle = (
             <Image source={theme.closeImage} />
           </TouchableOpacity>
         );
+      } else if (closeButton === CloseButtonPosition.Left) {
+        headerLeft = () => (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel={loc._.close}
+            style={styles.button}
+            onPress={handleClose}
+            testID="NavigationCloseButton"
+          >
+            <Image source={theme.closeImage} />
+          </TouchableOpacity>
+        );
       }
 
-      if (!headerBackVisible) {
-        headerLeft = () => <></>;
-        opts.headerLeft = headerLeft;
-      }
-
       let options: NativeStackNavigationOptions = {
         headerShadowVisible: false,
         headerTitleStyle: {
           fontWeight: '600',
           color: theme.colors.foregroundColor,
         },
-        headerRight,
         headerBackTitleVisible: false,
         headerTintColor: theme.colors.foregroundColor,
+        headerRight,
+        headerLeft,
         ...opts,
       };
 
@@ -88,38 +114,4 @@ const navigationStyle = (
 };
 
 export default navigationStyle;
-
-export const navigationStyleTx = (opts: NativeStackNavigationOptions, formatter: OptionsFormatter): NavigationOptionsGetter => {
-  return theme =>
-    ({ navigation, route }) => {
-      let options: NativeStackNavigationOptions = {
-        headerTitleStyle: {
-          fontWeight: '600',
-          color: theme.colors.foregroundColor,
-        },
-        // headerBackTitle: null,
-        headerBackTitleVisible: false,
-        headerTintColor: theme.colors.foregroundColor,
-        headerLeft: () => (
-          <TouchableOpacity
-            accessibilityRole="button"
-            accessibilityLabel={loc._.close}
-            style={styles.button}
-            onPress={() => {
-              Keyboard.dismiss();
-              navigation.goBack(null);
-            }}
-          >
-            <Image source={theme.closeImage} />
-          </TouchableOpacity>
-        ),
-        ...opts,
-      };
-
-      if (formatter) {
-        options = formatter(options, { theme, navigation, route });
-      }
-
-      return options;
-    };
-};
+export { CloseButtonPosition };
diff --git a/navigation/AddWalletStack.tsx b/navigation/AddWalletStack.tsx
index e7a0142b0..04833aea6 100644
--- a/navigation/AddWalletStack.tsx
+++ b/navigation/AddWalletStack.tsx
@@ -30,7 +30,6 @@ const AddWalletStack = () => {
         name="AddWallet"
         component={AddComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           title: loc.wallets.add_title,
         })(theme)}
diff --git a/navigation/AztecoRedeemStack.tsx b/navigation/AztecoRedeemStack.tsx
index f17bb3f2c..f0bcf4a76 100644
--- a/navigation/AztecoRedeemStack.tsx
+++ b/navigation/AztecoRedeemStack.tsx
@@ -1,7 +1,6 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import navigationStyle from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import { AztecoRedeemComponent, SelectWalletComponent } from './LazyLoadAztecoRedeemStack';
@@ -16,11 +15,10 @@ const AztecoRedeemStackRoot = () => {
       <Stack.Screen
         name="AztecoRedeem"
         component={AztecoRedeemComponent}
-        options={navigationStyleTx({}, options => ({
-          ...options,
+        options={navigationStyle({
           title: loc.azteco.title,
           statusBarStyle: 'auto',
-        }))(theme)}
+        })(theme)}
       />
       <Stack.Screen
         name="SelectWallet"
diff --git a/navigation/DetailViewScreensStack.tsx b/navigation/DetailViewScreensStack.tsx
index 7211b0ecc..c35caec34 100644
--- a/navigation/DetailViewScreensStack.tsx
+++ b/navigation/DetailViewScreensStack.tsx
@@ -5,7 +5,7 @@ import { Icon } from 'react-native-elements';
 
 import { isDesktop } from '../blue_modules/environment';
 import HeaderRightButton from '../components/HeaderRightButton';
-import navigationStyle from '../components/navigationStyle';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
 import loc from '../loc';
@@ -31,13 +31,7 @@ import LdkViewLogs from '../screen/wallets/ldkViewLogs';
 import SelectWallet from '../screen/wallets/selectWallet';
 import WalletTransactions from '../screen/wallets/transactions';
 import WalletsList from '../screen/wallets/WalletsList';
-import {
-  NavigationDefaultOptions,
-  NavigationDefaultOptionsForDesktop,
-  NavigationFormModalOptions,
-  StatusBarLightOptions,
-  DetailViewStack,
-} from './index'; // Importing the navigator
+import { NavigationDefaultOptions, NavigationFormModalOptions, StatusBarLightOptions, DetailViewStack } from './index'; // Importing the navigator
 import AddWalletStack from './AddWalletStack';
 import AztecoRedeemStackRoot from './AztecoRedeemStack';
 import ExportMultisigCoordinationSetupStackRoot from './ExportMultisigCoordinationSetupStack';
@@ -72,16 +66,11 @@ import SignVerifyStackRoot from './SignVerifyStack';
 import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
-import { StackActions } from '@react-navigation/native';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
   const navigation = useExtendedNavigation();
 
-  const popToTop = () => {
-    navigation.dispatch(StackActions.popToTop());
-  };
-
   const SaveButton = useMemo(() => <HeaderRightButton testID="Save" disabled={true} title={loc.wallets.details_save} />, []);
   const DetailButton = useMemo(() => <HeaderRightButton testID="DetailButton" disabled={true} title={loc.send.create_details} />, []);
 
@@ -129,10 +118,9 @@ const DetailViewStackScreensStack = () => {
           title: loc.lnd.new_channel,
           headerLargeTitle: true,
           statusBarStyle: 'auto',
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           gestureEnabled: false,
-          closeButtonFunc: popToTop,
         })(theme)}
       />
       <DetailViewStack.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
@@ -217,8 +205,7 @@ const DetailViewStackScreensStack = () => {
         component={LnurlPay}
         options={navigationStyle({
           title: '',
-          closeButton: true,
-          closeButtonFunc: popToTop,
+          closeButtonPosition: CloseButtonPosition.Right,
         })(theme)}
       />
       <DetailViewStack.Screen
@@ -226,10 +213,9 @@ const DetailViewStackScreensStack = () => {
         component={LnurlPaySuccess}
         options={navigationStyle({
           title: '',
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           gestureEnabled: false,
-          closeButtonFunc: popToTop,
         })(theme)}
       />
       <DetailViewStack.Screen name="LnurlAuth" component={LnurlAuth} options={LnurlAuth.navigationOptions(theme)} />
@@ -247,7 +233,7 @@ const DetailViewStackScreensStack = () => {
       <DetailViewStack.Screen
         name="SendDetailsRoot"
         component={SendDetailsStack}
-        options={isDesktop ? NavigationDefaultOptionsForDesktop : NavigationDefaultOptions}
+        options={navigationStyle({ headerShown: false, presentation: isDesktop ? 'fullScreenModal' : 'modal' })(theme)}
       />
       <DetailViewStack.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={NavigationDefaultOptions} />
       <DetailViewStack.Screen name="ScanLndInvoiceRoot" component={ScanLndInvoiceRoot} options={NavigationDefaultOptions} />
diff --git a/navigation/ExportMultisigCoordinationSetupStack.tsx b/navigation/ExportMultisigCoordinationSetupStack.tsx
index 5cc8329d9..3ed85e8c1 100644
--- a/navigation/ExportMultisigCoordinationSetupStack.tsx
+++ b/navigation/ExportMultisigCoordinationSetupStack.tsx
@@ -1,7 +1,6 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle from '../components/navigationStyle';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import { ExportMultisigCoordinationSetupComponent } from './LazyLoadExportMultisigCoordinationSetupStack';
@@ -17,7 +16,7 @@ const ExportMultisigCoordinationSetupStackRoot = () => {
         name="ExportMultisigCoordinationSetup"
         component={ExportMultisigCoordinationSetupComponent}
         options={navigationStyle({
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           statusBarStyle: 'light',
           title: loc.multisig.export_coordination_setup,
diff --git a/navigation/LNDCreateInvoiceStack.tsx b/navigation/LNDCreateInvoiceStack.tsx
index 3003c5151..45b431572 100644
--- a/navigation/LNDCreateInvoiceStack.tsx
+++ b/navigation/LNDCreateInvoiceStack.tsx
@@ -1,7 +1,6 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-
-import navigationStyle from '../components/navigationStyle';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import {
@@ -24,7 +23,7 @@ const LNDCreateInvoiceRoot = () => {
         component={LNDCreateInvoiceComponent}
         options={navigationStyle({
           title: loc.receive.header,
-          closeButton: true,
+          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           statusBarStyle: 'light',
         })(theme)}
diff --git a/navigation/PaymentCodeStack.tsx b/navigation/PaymentCodeStack.tsx
index 1830d9eb9..5d32aadd8 100644
--- a/navigation/PaymentCodeStack.tsx
+++ b/navigation/PaymentCodeStack.tsx
@@ -33,12 +33,12 @@ const PaymentCodeStackRoot = () => {
       <Stack.Screen
         name="PaymentCode"
         component={PaymentCodeComponent}
-        options={navigationStyle({ title: loc.bip47.payment_code, closeButton: true })(theme)}
+        options={navigationStyle({ title: loc.bip47.payment_code })(theme)}
       />
       <Stack.Screen
         name="PaymentCodesList"
         component={PaymentCodesListComponent}
-        options={navigationStyle({ title: loc.bip47.contacts, closeButton: true })(theme)}
+        options={navigationStyle({ title: loc.bip47.contacts })(theme)}
       />
     </Stack.Navigator>
   );
diff --git a/navigation/ReceiveDetailsStack.tsx b/navigation/ReceiveDetailsStack.tsx
index b93401b49..a18377e49 100644
--- a/navigation/ReceiveDetailsStack.tsx
+++ b/navigation/ReceiveDetailsStack.tsx
@@ -16,9 +16,7 @@ const ReceiveDetailsStackRoot = () => {
       <Stack.Screen
         name="ReceiveDetails"
         component={ReceiveDetailsComponent}
-        options={navigationStyle({ closeButton: true, headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(
-          theme,
-        )}
+        options={navigationStyle({ headerBackVisible: false, title: loc.receive.header, statusBarStyle: 'light' })(theme)}
       />
     </Stack.Navigator>
   );
diff --git a/navigation/ReorderWalletsStack.tsx b/navigation/ReorderWalletsStack.tsx
index 160efa471..a88a5b7fb 100644
--- a/navigation/ReorderWalletsStack.tsx
+++ b/navigation/ReorderWalletsStack.tsx
@@ -19,7 +19,6 @@ const ReorderWalletsStackRoot = () => {
         options={navigationStyle({
           headerBackVisible: false,
           headerLargeTitle: true,
-          closeButton: true,
 
           headerTitle: loc.wallets.reorder_title,
         })(theme)}
diff --git a/navigation/ScanLndInvoiceStack.tsx b/navigation/ScanLndInvoiceStack.tsx
index e47ca2f23..1b2fb4d2d 100644
--- a/navigation/ScanLndInvoiceStack.tsx
+++ b/navigation/ScanLndInvoiceStack.tsx
@@ -21,7 +21,7 @@ const ScanLndInvoiceRoot = () => {
       <Stack.Screen
         name="ScanLndInvoice"
         component={ScanLndInvoiceComponent}
-        options={navigationStyle({ closeButton: true, headerBackVisible: false, title: loc.send.header, statusBarStyle: 'light' })(theme)}
+        options={navigationStyle({ headerBackVisible: false, title: loc.send.header, statusBarStyle: 'light' })(theme)}
         initialParams={{ uri: undefined, walletID: undefined, invoice: undefined }}
       />
       <Stack.Screen
@@ -39,7 +39,6 @@ const ScanLndInvoiceRoot = () => {
         component={LnurlPayComponent}
         options={navigationStyle({
           title: '',
-          closeButton: true,
         })(theme)}
       />
       <Stack.Screen
@@ -47,7 +46,6 @@ const ScanLndInvoiceRoot = () => {
         component={LnurlPaySuccessComponent}
         options={navigationStyle({
           title: '',
-          closeButton: true,
           headerBackVisible: false,
           gestureEnabled: false,
         })(theme)}
diff --git a/navigation/SendDetailsStack.tsx b/navigation/SendDetailsStack.tsx
index bc00ba124..bc6686cad 100644
--- a/navigation/SendDetailsStack.tsx
+++ b/navigation/SendDetailsStack.tsx
@@ -1,7 +1,6 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useMemo } from 'react';
-
-import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import {
@@ -29,11 +28,11 @@ const SendDetailsStack = () => {
       <Stack.Screen
         name="SendDetails"
         component={SendDetailsComponent}
-        options={navigationStyleTx({}, options => ({
-          ...options,
+        options={navigationStyle({
           title: loc.send.header,
           statusBarStyle: 'light',
-        }))(theme)}
+          closeButtonPosition: CloseButtonPosition.Left,
+        })(theme)}
         initialParams={{ isEditable: true }} // Correctly typed now
       />
       <Stack.Screen
diff --git a/navigation/SignVerifyStack.tsx b/navigation/SignVerifyStack.tsx
index 9ae31f6e3..df2d878f3 100644
--- a/navigation/SignVerifyStack.tsx
+++ b/navigation/SignVerifyStack.tsx
@@ -16,9 +16,7 @@ const SignVerifyStackRoot = () => {
       <Stack.Screen
         name="SignVerify"
         component={SignVerifyComponent}
-        options={navigationStyle({ closeButton: true, headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(
-          theme,
-        )}
+        options={navigationStyle({ headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(theme)}
       />
     </Stack.Navigator>
   );
diff --git a/navigation/ViewEditMultisigCosignersStack.tsx b/navigation/ViewEditMultisigCosignersStack.tsx
index 4ea300360..fb5aeba69 100644
--- a/navigation/ViewEditMultisigCosignersStack.tsx
+++ b/navigation/ViewEditMultisigCosignersStack.tsx
@@ -23,7 +23,6 @@ const ViewEditMultisigCosignersStackRoot = () => {
         name="ViewEditMultisigCosigners"
         component={ViewEditMultisigCosignersComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           title: loc.multisig.manage_keys,
         })(theme)}
diff --git a/navigation/WalletExportStack.tsx b/navigation/WalletExportStack.tsx
index 449278ffe..15734322a 100644
--- a/navigation/WalletExportStack.tsx
+++ b/navigation/WalletExportStack.tsx
@@ -21,7 +21,6 @@ const WalletExportStack = () => {
         name="WalletExport"
         component={WalletExportComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           title: loc.wallets.export_title,
         })(theme)}
diff --git a/navigation/WalletXpubStack.tsx b/navigation/WalletXpubStack.tsx
index 9f032a4ec..08132198a 100644
--- a/navigation/WalletXpubStack.tsx
+++ b/navigation/WalletXpubStack.tsx
@@ -17,7 +17,6 @@ const WalletXpubStackRoot = () => {
         name="WalletXpub"
         component={WalletXpubComponent}
         options={navigationStyle({
-          closeButton: true,
           headerBackVisible: false,
           headerTitle: loc.wallets.xpub_title,
         })(theme)}
diff --git a/navigation/index.tsx b/navigation/index.tsx
index e8f9f1443..2b1b4a737 100644
--- a/navigation/index.tsx
+++ b/navigation/index.tsx
@@ -18,7 +18,6 @@ export const NavigationFormModalOptions: NativeStackNavigationOptions = {
   headerShown: false,
   presentation: 'formSheet',
 };
-export const NavigationDefaultOptionsForDesktop: NativeStackNavigationOptions = { headerShown: false, presentation: 'fullScreenModal' };
 export const StatusBarLightOptions: NativeStackNavigationOptions = { statusBarStyle: 'light' };
 
 const DetailViewStack = createNativeStackNavigator<DetailViewStackParamList>();