REF: Lazy load SendDetailsStack

Navigation.tsx

@@ -43,14 +43,7 @@ import ReceiveDetails from './screen/receive/details';
 
 import ScanQRCode from './screen/send/ScanQRCode';
 import Broadcast from './screen/send/Broadcast';
-import CoinControl from './screen/send/coinControl';
-import Confirm from './screen/send/confirm';
-import SendCreate from './screen/send/create';
-import SendDetails from './screen/send/details';
 import IsItMyAddress from './screen/send/isItMyAddress';
-import PsbtMultisig from './screen/send/psbtMultisig';
-import PsbtMultisigQRCode from './screen/send/psbtMultisigQRCode';
-import PsbtWithHardwareWallet from './screen/send/psbtWithHardwareWallet';
 import Success from './screen/send/success';
 
 import UnlockWith from './screen/UnlockWith';
@@ -77,46 +70,7 @@ import { BlueStorageContext } from './blue_modules/storage-context';
 import { useIsLargeScreen } from './hooks/useIsLargeScreen';
 import { HeaderRightButton } from './components/HeaderRightButton';
 import WalletExportStack from './navigation/WalletExportStack';
-
-// CreateTransactionStackNavigator === SendDetailsStack
-const SendDetailsStack = createNativeStackNavigator();
-const SendDetailsRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <SendDetailsStack.Navigator screenOptions={{ headerShadowVisible: false }}>
-      <SendDetailsStack.Screen
-        name="SendDetails"
-        component={SendDetails}
-        options={SendDetails.navigationOptions(theme)}
-        initialParams={SendDetails.initialParams}
-      />
-      <SendDetailsStack.Screen name="Confirm" component={Confirm} options={Confirm.navigationOptions(theme)} />
-      <SendDetailsStack.Screen
-        name="PsbtWithHardwareWallet"
-        component={PsbtWithHardwareWallet}
-        options={PsbtWithHardwareWallet.navigationOptions(theme)}
-      />
-      <SendDetailsStack.Screen name="CreateTransaction" component={SendCreate} options={SendCreate.navigationOptions(theme)} />
-      <SendDetailsStack.Screen name="PsbtMultisig" component={PsbtMultisig} options={PsbtMultisig.navigationOptions(theme)} />
-      <SendDetailsStack.Screen
-        name="PsbtMultisigQRCode"
-        component={PsbtMultisigQRCode}
-        options={PsbtMultisigQRCode.navigationOptions(theme)}
-      />
-      <SendDetailsStack.Screen
-        name="Success"
-        component={Success}
-        options={{
-          headerShown: false,
-          gestureEnabled: false,
-        }}
-      />
-      <SendDetailsStack.Screen name="SelectWallet" component={SelectWallet} options={SelectWallet.navigationOptions(theme)} />
-      <SendDetailsStack.Screen name="CoinControl" component={CoinControl} options={CoinControl.navigationOptions(theme)} />
-    </SendDetailsStack.Navigator>
-  );
-};
+import SendDetailsStack from './navigation/SendDetailsStack';
 
 const LNDCreateInvoiceStack = createNativeStackNavigator();
 const LNDCreateInvoiceRoot = () => {
@@ -129,7 +83,11 @@ const LNDCreateInvoiceRoot = () => {
         component={LNDCreateInvoice}
         options={LNDCreateInvoice.navigationOptions(theme)}
       />
-      <LNDCreateInvoiceStack.Screen name="SelectWallet" component={SelectWallet} options={SelectWallet.navigationOptions(theme)} />
+      <LNDCreateInvoiceStack.Screen
+        name="SelectWallet"
+        component={SelectWallet}
+        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+      />
       <LNDCreateInvoiceStack.Screen name="LNDViewInvoice" component={LNDViewInvoice} options={LNDViewInvoice.navigationOptions(theme)} />
       <LNDCreateInvoiceStack.Screen
         name="LNDViewAdditionalInvoiceInformation"
@@ -158,7 +116,11 @@ const ScanLndInvoiceRoot = () => {
         options={ScanLndInvoice.navigationOptions(theme)}
         initialParams={ScanLndInvoice.initialParams}
       />
-      <ScanLndInvoiceStack.Screen name="SelectWallet" component={SelectWallet} options={SelectWallet.navigationOptions(theme)} />
+      <ScanLndInvoiceStack.Screen
+        name="SelectWallet"
+        component={SelectWallet}
+        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+      />
       <ScanLndInvoiceStack.Screen name="Success" component={Success} options={{ headerShown: false, gestureEnabled: false }} />
       <ScanLndInvoiceStack.Screen name="LnurlPay" component={LnurlPay} options={LnurlPay.navigationOptions(theme)} />
       <ScanLndInvoiceStack.Screen name="LnurlPaySuccess" component={LnurlPaySuccess} options={LnurlPaySuccess.navigationOptions(theme)} />
@@ -172,7 +134,11 @@ const LDKOpenChannelRoot = () => {
 
   return (
     <LDKOpenChannelStack.Navigator id="LDKOpenChannelRoot" screenOptions={{ headerShadowVisible: false }} initialRouteName="SelectWallet">
-      <LDKOpenChannelStack.Screen name="SelectWallet" component={SelectWallet} options={SelectWallet.navigationOptions(theme)} />
+      <LDKOpenChannelStack.Screen
+        name="SelectWallet"
+        component={SelectWallet}
+        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+      />
       <LDKOpenChannelStack.Screen
         name="LDKOpenChannelSetAmount"
         component={LdkOpenChannel}
@@ -374,7 +340,11 @@ const DetailViewStackScreensStack = () => {
               headerLargeTitle: true,
             })(theme)}
           />
-          <DetailViewRoot.Screen name="SelectWallet" component={SelectWallet} options={SelectWallet.navigationOptions(theme)} />
+          <DetailViewRoot.Screen
+            name="SelectWallet"
+            component={SelectWallet}
+            options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+          />
           <DetailViewRoot.Screen name="Currency" component={Currency} options={navigationStyle({ title: loc.settings.currency })(theme)} />
           <DetailViewRoot.Screen name="About" component={About} options={About.navigationOptions(theme)} />
           <DetailViewRoot.Screen name="ReleaseNotes" component={ReleaseNotes} options={ReleaseNotes.navigationOptions(theme)} />
@@ -451,7 +421,7 @@ const DetailViewStackScreensStack = () => {
           <DetailViewRoot.Screen name="AddWalletRoot" component={AddWalletStack} options={NavigationFormModalOptions} />
           <DetailViewRoot.Screen
             name="SendDetailsRoot"
-            component={SendDetailsRoot}
+            component={SendDetailsStack}
             options={isDesktop ? NavigationDefaultOptionsForDesktop : NavigationDefaultOptions}
           />
           <DetailViewRoot.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={NavigationDefaultOptions} />

navigation/LazyLoadSendDetailsStack.tsx

@@ -0,0 +1,59 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const SendDetails = lazy(() => import('../screen/send/details'));
+const Confirm = lazy(() => import('../screen/send/confirm'));
+const PsbtWithHardwareWallet = lazy(() => import('../screen/send/psbtWithHardwareWallet'));
+const CreateTransaction = lazy(() => import('../screen/send/create'));
+const PsbtMultisig = lazy(() => import('../screen/send/psbtMultisig'));
+const PsbtMultisigQRCode = lazy(() => import('../screen/send/psbtMultisigQRCode'));
+const Success = lazy(() => import('../screen/send/success'));
+const SelectWallet = lazy(() => import('../screen/wallets/selectWallet'));
+const CoinControl = lazy(() => import('../screen/send/coinControl'));
+
+// Export each component with its lazy loader and optional configurations
+export const SendDetailsComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <SendDetails />
+  </Suspense>
+);
+export const ConfirmComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <Confirm />
+  </Suspense>
+);
+export const PsbtWithHardwareWalletComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <PsbtWithHardwareWallet />
+  </Suspense>
+);
+export const CreateTransactionComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <CreateTransaction />
+  </Suspense>
+);
+export const PsbtMultisigComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <PsbtMultisig />
+  </Suspense>
+);
+export const PsbtMultisigQRCodeComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <PsbtMultisigQRCode />
+  </Suspense>
+);
+export const SuccessComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <Success />
+  </Suspense>
+);
+export const SelectWalletComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <SelectWallet />
+  </Suspense>
+);
+export const CoinControlComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <CoinControl />
+  </Suspense>
+);

navigation/SendDetailsStack.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  SendDetailsComponent,
+  ConfirmComponent,
+  PsbtWithHardwareWalletComponent,
+  CreateTransactionComponent,
+  PsbtMultisigComponent,
+  PsbtMultisigQRCodeComponent,
+  SuccessComponent,
+  SelectWalletComponent,
+  CoinControlComponent,
+} from './LazyLoadSendDetailsStack';
+import { useTheme } from '../components/themes';
+import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
+import loc from '../loc';
+
+export type SendDetailsStackParamList = {
+  SendDetails: { isEditable: boolean }; // Now expects an isEditable boolean
+  Confirm: undefined;
+  PsbtWithHardwareWallet: undefined;
+  CreateTransaction: undefined;
+  PsbtMultisig: undefined;
+  PsbtMultisigQRCode: undefined;
+  Success: undefined;
+  SelectWallet: undefined;
+  CoinControl: undefined;
+};
+
+const Stack = createNativeStackNavigator<SendDetailsStackParamList>();
+
+const SendDetailsStack = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator initialRouteName="SendDetails" screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="SendDetails"
+        component={SendDetailsComponent}
+        options={navigationStyleTx({}, options => ({
+          ...options,
+          title: loc.send.header,
+          statusBarStyle: 'light',
+        }))(theme)}
+        initialParams={{ isEditable: true }} // Correctly typed now
+      />
+      <Stack.Screen name="Confirm" component={ConfirmComponent} options={navigationStyle({ title: loc.send.confirm_header })(theme)} />
+      <Stack.Screen
+        name="PsbtWithHardwareWallet"
+        component={PsbtWithHardwareWalletComponent}
+        options={navigationStyle({ title: loc.send.header, gestureEnabled: false, fullScreenGestureEnabled: false })(theme)}
+      />
+      <Stack.Screen
+        name="CreateTransaction"
+        component={CreateTransactionComponent}
+        options={navigationStyle({ title: loc.send.create_details })(theme)}
+      />
+      <Stack.Screen
+        name="PsbtMultisig"
+        component={PsbtMultisigComponent}
+        options={navigationStyle({ title: loc.multisig.header })(theme)}
+      />
+      <Stack.Screen
+        name="PsbtMultisigQRCode"
+        component={PsbtMultisigQRCodeComponent}
+        options={navigationStyle({ title: loc.multisig.header })(theme)}
+      />
+      <Stack.Screen
+        name="Success"
+        component={SuccessComponent}
+        options={navigationStyle({ headerShown: false, gestureEnabled: false })(theme)}
+      />
+      <Stack.Screen
+        name="SelectWallet"
+        component={SelectWalletComponent}
+        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+      />
+      <Stack.Screen name="CoinControl" component={CoinControlComponent} options={navigationStyle({ title: loc.cc.header })(theme)} />
+    </Stack.Navigator>
+  );
+};
+
+export default SendDetailsStack;

screen/send/coinControl.js

@@ -21,7 +21,6 @@ import * as RNLocalize from 'react-native-localize';
 import loc, { formatBalance } from '../../loc';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import { BlueSpacing10, BlueSpacing20 } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import BottomModal from '../../components/BottomModal';
 import { FContainer, FButton } from '../../components/FloatButtons';
 import debounce from '../../blue_modules/debounce';
@@ -475,6 +474,4 @@ const styles = StyleSheet.create({
   },
 });
 
-CoinControl.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.cc.header }));
-
 export default CoinControl;

screen/send/confirm.js

@@ -8,7 +8,6 @@ import * as bitcoin from 'bitcoinjs-lib';
 
 import PayjoinTransaction from '../../class/payjoin-transaction';
 import { BlueText, BlueCard } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import Biometric from '../../class/biometrics';
 import loc, { formatBalance, formatBalanceWithoutSuffix } from '../../loc';
@@ -340,5 +339,3 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
 });
-
-Confirm.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.send.confirm_header }));

screen/send/create.js

@@ -7,9 +7,7 @@ import Share from 'react-native-share';
 import RNFS from 'react-native-fs';
 import BigNumber from 'bignumber.js';
 import * as bitcoin from 'bitcoinjs-lib';
-
 import { BlueText } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import loc from '../../loc';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
@@ -240,10 +238,3 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
 });
-
-SendCreate.navigationOptions = navigationStyle({}, (options, { theme, navigation, route }) => {
-  return {
-    ...options,
-    title: loc.send.create_details,
-  };
-});

screen/send/details.js

@@ -41,7 +41,6 @@ import CoinsSelected from '../../components/CoinsSelected';
 import InputAccessoryAllFunds from '../../components/InputAccessoryAllFunds';
 import ListItem from '../../components/ListItem';
 import ToolTipMenu from '../../components/TooltipMenu';
-import { navigationStyleTx } from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import prompt from '../../helpers/prompt';
 import { requestCameraAuthorization, scanQrHelper } from '../../helpers/scan-qr';
@@ -1653,11 +1652,3 @@ const styles = StyleSheet.create({
     marginVertical: 8,
   },
 });
-
-SendDetails.navigationOptions = navigationStyleTx({}, options => ({
-  ...options,
-  title: loc.send.header,
-  statusBarStyle: 'light',
-}));
-
-SendDetails.initialParams = { isEditable: true };

screen/send/psbtMultisig.js

@@ -4,9 +4,7 @@ import { Icon } from 'react-native-elements';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import * as bitcoin from 'bitcoinjs-lib';
 import BigNumber from 'bignumber.js';
-
 import { BlueCard, BlueText } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -403,6 +401,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PsbtMultisig.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.multisig.header }));
-
 export default PsbtMultisig;

screen/send/psbtMultisigQRCode.js

@@ -7,7 +7,6 @@ import presentAlert from '../../components/Alert';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
 import SafeArea from '../../components/SafeArea';
 import { SquareButton } from '../../components/SquareButton';
-import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import { scanQrHelper } from '../../helpers/scan-qr';
 import loc from '../../loc';
@@ -129,6 +128,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PsbtMultisigQRCode.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.multisig.header }));
-
 export default PsbtMultisigQRCode;

screen/send/psbtWithHardwareWallet.js

@@ -15,7 +15,6 @@ import presentAlert from '../../components/Alert';
 import CopyToClipboardButton from '../../components/CopyToClipboardButton';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
 import { SecondButton } from '../../components/SecondButton';
-import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
 import loc from '../../loc';
@@ -300,13 +299,6 @@ const PsbtWithHardwareWallet = () => {
 
 export default PsbtWithHardwareWallet;
 
-PsbtWithHardwareWallet.navigationOptions = navigationStyle({}, opts => ({
-  ...opts,
-  title: loc.send.header,
-  gestureEnabled: false,
-  fullScreenGestureEnabled: false,
-}));
-
 const styles = StyleSheet.create({
   scrollViewContent: {
     flexGrow: 1,

screen/wallets/selectWallet.js

@@ -2,9 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { View, ActivityIndicator, Image, Text, TouchableOpacity, I18nManager, FlatList, StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useRoute, useNavigation, useNavigationState } from '@react-navigation/native';
-
 import { BlueText, BlueSpacing20 } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import WalletGradient from '../../class/wallet-gradient';
 import loc, { formatBalance, transactionTimeToReadable } from '../../loc';
 import { LightningLdkWallet, MultisigHDWallet, LightningCustodianWallet } from '../../class';
@@ -212,6 +210,4 @@ const SelectWallet = () => {
   }
 };
 
-SelectWallet.navigationOptions = navigationStyle({}, opts => ({ ...opts, headerTitle: loc.wallets.select_wallet }));
-
 export default SelectWallet;