REF: More lazy loading

Navigation.tsx

@@ -26,7 +26,6 @@ import WalletDetails from './screen/wallets/details';
 import GenerateWord from './screen/wallets/generateWord';
 import WalletsList from './screen/wallets/WalletsList';
 import SelectWallet from './screen/wallets/selectWallet';
-import SignVerify from './screen/wallets/signVerify';
 import WalletTransactions from './screen/wallets/transactions';
 
 import CPFP from './screen/transactions/CPFP';
@@ -35,8 +34,6 @@ import RBFCancel from './screen/transactions/RBFCancel';
 import TransactionDetails from './screen/transactions/details';
 import TransactionStatus from './screen/transactions/TransactionStatus';
 
-import AztecoRedeem from './screen/receive/aztecoRedeem';
-
 import Broadcast from './screen/send/Broadcast';
 import IsItMyAddress from './screen/send/isItMyAddress';
 import Success from './screen/send/success';
@@ -47,7 +44,6 @@ import navigationStyle from './components/navigationStyle';
 import { useTheme } from './components/themes';
 import loc from './loc';
 import LdkInfo from './screen/lnd/ldkInfo';
-import LdkOpenChannel from './screen/lnd/ldkOpenChannel';
 import LNDViewAdditionalInvoiceInformation from './screen/lnd/lndViewAdditionalInvoiceInformation';
 import LNDViewAdditionalInvoicePreImage from './screen/lnd/lndViewAdditionalInvoicePreImage';
 import LNDViewInvoice from './screen/lnd/lndViewInvoice';
@@ -73,39 +69,9 @@ import WalletXpubStackRoot from './navigation/WalletXpubStack';
 import ScanQRCodeStackRoot from './navigation/ScanQRCodeStack';
 import ExportMultisigCoordinationSetupStackRoot from './navigation/ExportMultisigCoordinationSetupStack';
 import ViewEditMultisigCosignersStackRoot from './navigation/ViewEditMultisigCosignersStack';
-
-const LDKOpenChannelStack = createNativeStackNavigator();
-const LDKOpenChannelRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <LDKOpenChannelStack.Navigator id="LDKOpenChannelRoot" screenOptions={{ headerShadowVisible: false }} initialRouteName="SelectWallet">
-      <LDKOpenChannelStack.Screen
-        name="SelectWallet"
-        component={SelectWallet}
-        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
-      />
-      <LDKOpenChannelStack.Screen
-        name="LDKOpenChannelSetAmount"
-        component={LdkOpenChannel}
-        options={LdkOpenChannel.navigationOptions(theme)}
-      />
-      <LDKOpenChannelStack.Screen name="Success" component={Success} options={{ headerShown: false, gestureEnabled: false }} />
-    </LDKOpenChannelStack.Navigator>
-  );
-};
-
-const AztecoRedeemStack = createNativeStackNavigator();
-const AztecoRedeemRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <AztecoRedeemStack.Navigator screenOptions={{ headerShadowVisible: false }}>
-      <AztecoRedeemStack.Screen name="AztecoRedeem" component={AztecoRedeem} options={AztecoRedeem.navigationOptions(theme)} />
-      <AztecoRedeemStack.Screen name="SelectWallet" component={SelectWallet} />
-    </AztecoRedeemStack.Navigator>
-  );
-};
+import SignVerifyStackRoot from './navigation/SignVerifyStack';
+import AztecoRedeemStackRoot from './navigation/AztecoRedeemStack';
+import LDKOpenChannelRoot from './navigation/LDKOpenChannelStack';
 
 const DrawerListContent = (props: any) => {
   return <DrawerList {...props} />;
@@ -135,21 +101,6 @@ const DrawerRoot = () => {
   );
 };
 
-const SignVerifyStack = createNativeStackNavigator();
-const SignVerifyStackRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <SignVerifyStack.Navigator
-      id="SignVerifyRoot"
-      screenOptions={{ headerShadowVisible: false, statusBarStyle: 'light' }}
-      initialRouteName="SignVerify"
-    >
-      <SignVerifyStack.Screen name="SignVerify" component={SignVerify} options={SignVerify.navigationOptions(theme)} />
-    </SignVerifyStack.Navigator>
-  );
-};
-
 const DetailViewRoot = createNativeStackNavigator();
 const DetailViewStackScreensStack = () => {
   const { walletsInitialized } = useContext(BlueStorageContext);
@@ -193,7 +144,19 @@ const DetailViewStackScreensStack = () => {
             component={WalletTransactions}
             options={WalletTransactions.navigationOptions(theme)}
           />
-          <DetailViewRoot.Screen name="LdkOpenChannel" component={LdkOpenChannel} options={LdkOpenChannel.navigationOptions(theme)} />
+          <DetailViewRoot.Screen
+            name="LdkOpenChannel"
+            component={LDKOpenChannelRoot}
+            options={navigationStyle({
+              title: loc.lnd.new_channel,
+              headerLargeTitle: true,
+              statusBarStyle: 'auto',
+              closeButton: true,
+              headerBackVisible: false,
+              gestureEnabled: false,
+              closeButtonFunc: popToTop,
+            })(theme)}
+          />
           <DetailViewRoot.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
           <DetailViewRoot.Screen
             name="WalletDetails"
@@ -352,7 +315,7 @@ const DetailViewStackScreensStack = () => {
           />
           <DetailViewRoot.Screen name="LNDCreateInvoiceRoot" component={LNDCreateInvoiceRoot} options={NavigationDefaultOptions} />
           <DetailViewRoot.Screen name="ScanLndInvoiceRoot" component={ScanLndInvoiceRoot} options={NavigationDefaultOptions} />
-          <DetailViewRoot.Screen name="AztecoRedeemRoot" component={AztecoRedeemRoot} options={NavigationDefaultOptions} />
+          <DetailViewRoot.Screen name="AztecoRedeemRoot" component={AztecoRedeemStackRoot} options={NavigationDefaultOptions} />
           {/* screens */}
           <DetailViewRoot.Screen
             name="WalletExportRoot"
@@ -381,7 +344,19 @@ const DetailViewStackScreensStack = () => {
             options={{ ...NavigationDefaultOptions, ...StatusBarLightOptions }}
           />
           <DetailViewRoot.Screen name="ReceiveDetailsRoot" component={ReceiveDetailsStackRoot} options={NavigationDefaultOptions} />
-          <DetailViewRoot.Screen name="LDKOpenChannelRoot" component={LDKOpenChannelRoot} options={NavigationDefaultOptions} />
+          <DetailViewRoot.Screen
+            name="LDKOpenChannelRoot"
+            component={LDKOpenChannelRoot}
+            options={navigationStyle({
+              title: loc.lnd.new_channel,
+              headerLargeTitle: true,
+              statusBarStyle: 'auto',
+              closeButton: true,
+              headerBackVisible: false,
+              gestureEnabled: false,
+              closeButtonFunc: popToTop,
+            })(theme)}
+          />
 
           <DetailViewRoot.Screen
             name="ScanQRCodeRoot"

navigation/AztecoRedeemStack.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { AztecoRedeemComponent, SelectWalletComponent } from './LazyLoadAztecoRedeemStack';
+import { useTheme } from '../components/themes';
+import navigationStyle, { navigationStyleTx } from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const AztecoRedeemStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="AztecoRedeem"
+        component={AztecoRedeemComponent}
+        options={navigationStyleTx({}, options => ({
+          ...options,
+          title: loc.azteco.title,
+          statusBarStyle: 'auto',
+        }))(theme)}
+      />
+      <Stack.Screen
+        name="SelectWallet"
+        component={SelectWalletComponent}
+        options={navigationStyle({
+          title: loc.wallets.select_wallet,
+        })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default AztecoRedeemStackRoot;

navigation/LDKOpenChannelStack.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SelectWalletComponent, LdkOpenChannelComponent, SuccessComponent } from './LazyLoadLDKOpenChannelStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const LDKOpenChannelRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }} initialRouteName="SelectWallet">
+      <Stack.Screen
+        name="SelectWallet"
+        component={SelectWalletComponent}
+        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+      />
+      <Stack.Screen name="LDKOpenChannelSetAmount" component={LdkOpenChannelComponent} />
+      <Stack.Screen name="Success" component={SuccessComponent} options={{ headerShown: false, gestureEnabled: false }} />
+    </Stack.Navigator>
+  );
+};
+
+export default LDKOpenChannelRoot;

navigation/LazyLoadAztecoRedeemStack.tsx

@@ -0,0 +1,17 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const AztecoRedeem = lazy(() => import('../screen/receive/aztecoRedeem'));
+const SelectWallet = lazy(() => import('../screen/wallets/selectWallet')); // Assuming the path is correct
+
+export const AztecoRedeemComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <AztecoRedeem />
+  </Suspense>
+);
+
+export const SelectWalletComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <SelectWallet />
+  </Suspense>
+);

navigation/LazyLoadLDKOpenChannelStack.tsx

@@ -0,0 +1,24 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const SelectWallet = lazy(() => import('../screen/wallets/selectWallet'));
+const LdkOpenChannel = lazy(() => import('../screen/lnd/ldkOpenChannel'));
+const Success = lazy(() => import('../screen/send/success'));
+
+export const SelectWalletComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <SelectWallet />
+  </Suspense>
+);
+
+export const LdkOpenChannelComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <LdkOpenChannel />
+  </Suspense>
+);
+
+export const SuccessComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <Success />
+  </Suspense>
+);

navigation/LazyLoadSignVerifyStack.tsx

@@ -0,0 +1,10 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const SignVerify = lazy(() => import('../screen/wallets/signVerify'));
+
+export const SignVerifyComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <SignVerify />
+  </Suspense>
+);

navigation/SignVerifyStack.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SignVerifyComponent } from './LazyLoadSignVerifyStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const SignVerifyStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="SignVerify"
+        component={SignVerifyComponent}
+        options={navigationStyle({ closeButton: true, headerBackVisible: false, statusBarStyle: 'light', title: loc.addresses.sign_title })(
+          theme,
+        )}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default SignVerifyStackRoot;

screen/lnd/ldkOpenChannel.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { BlueLoading, BlueDismissKeyboardInputAccessory, BlueSpacing20, BlueText } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import BigNumber from 'bignumber.js';
 import AddressInput from '../../components/AddressInput';
@@ -302,19 +301,4 @@ const styles = StyleSheet.create({
   },
 });
 
-LdkOpenChannel.navigationOptions = navigationStyle(
-  {
-    closeButton: true,
-    closeButtonFunc: ({ navigation }) => navigation.getParent().pop(),
-  },
-  (options, { theme, navigation, route }) => {
-    return {
-      ...options,
-      headerTitle: loc.lnd.new_channel,
-      headerLargeTitle: true,
-      statusBarStyle: 'auto',
-    };
-  },
-);
-
 export default LdkOpenChannel;

screen/receive/aztecoRedeem.js

@@ -4,7 +4,6 @@ import { Keyboard, Text, TouchableOpacity, TouchableWithoutFeedback, View, Style
 import { Icon } from 'react-native-elements';
 
 import { BlueLoading, BlueSpacing, BlueText } from '../../BlueComponents';
-import { navigationStyleTx } from '../../components/navigationStyle';
 import loc from '../../loc';
 import Azteco from '../../class/azteco';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -184,5 +183,3 @@ AztecoRedeem.propTypes = {
     }),
   }),
 };
-
-AztecoRedeem.navigationOptions = navigationStyleTx({}, opts => ({ ...opts, title: loc.azteco.title, statusBarStyle: 'auto' }));

screen/wallets/signVerify.js

@@ -13,8 +13,7 @@ import {
 import { useRoute } from '@react-navigation/native';
 import { Icon } from 'react-native-elements';
 import Share from 'react-native-share';
-import { BlueDoneAndDismissKeyboardInputAccessory, BlueFormLabel, BlueSpacing10, BlueSpacing20 } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
+import { BlueDoneAndDismissKeyboardInputAccessory, BlueFormLabel, BlueSpacing10, BlueSpacing20, BlueSpacing40 } from '../../BlueComponents';
 import { FContainer, FButton } from '../../components/FloatButtons';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import loc from '../../loc';
@@ -174,7 +173,7 @@ const SignVerify = () => {
             onFocus={() => handleFocus(true)}
             onBlur={() => handleFocus(false)}
           />
-          <BlueSpacing10 />
+          <BlueSpacing40 />
 
           {isShareVisible && !isKeyboardVisible && (
             <>
@@ -232,11 +231,6 @@ const SignVerify = () => {
   );
 };
 
-SignVerify.navigationOptions = navigationStyle({ closeButton: true, headerBackVisible: false, statusBarStyle: 'light' }, opts => ({
-  ...opts,
-  title: loc.addresses.sign_title,
-}));
-
 export default SignVerify;
 
 const styles = StyleSheet.create({