REF: Multisig stacks lazy

Navigation.tsx

@@ -23,13 +23,11 @@ import ReleaseNotes from './screen/settings/releasenotes';
 import Tools from './screen/settings/tools';
 import WalletAddresses from './screen/wallets/addresses';
 import WalletDetails from './screen/wallets/details';
-import ExportMultisigCoordinationSetup from './screen/wallets/ExportMultisigCoordinationSetup';
 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 ViewEditMultisigCosigners from './screen/wallets/ViewEditMultisigCosigners';
 
 import CPFP from './screen/transactions/CPFP';
 import RBFBumpFee from './screen/transactions/RBFBumpFee';
@@ -73,6 +71,8 @@ import { useExtendedNavigation } from './hooks/useExtendedNavigation';
 import ReorderWalletsStackRoot from './navigation/ReorderWalletsStack';
 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 = () => {
@@ -361,13 +361,14 @@ const DetailViewStackScreensStack = () => {
           />
           <DetailViewRoot.Screen
             name="ExportMultisigCoordinationSetupRoot"
-            component={ExportMultisigCoordinationSetupRoot}
+            component={ExportMultisigCoordinationSetupStackRoot}
             options={NavigationDefaultOptions}
           />
           <DetailViewRoot.Screen
             name="ViewEditMultisigCosignersRoot"
-            component={ViewEditMultisigCosignersRoot}
+            component={ViewEditMultisigCosignersStackRoot}
             options={{ ...NavigationDefaultOptions, ...StatusBarLightOptions, gestureEnabled: false, fullScreenGestureEnabled: false }}
+            initialParams={{ walletID: undefined, cosigners: undefined }}
           />
           <DetailViewRoot.Screen
             name="WalletXpubRoot"
@@ -421,53 +422,6 @@ const DetailViewStackScreensStack = () => {
   );
 };
 
-export type ViewEditMultisigCosignersStackParamsList = {
-  ViewEditMultisigCosigners: { walletID: string };
-};
-
-const ViewEditMultisigCosignersStack = createNativeStackNavigator<ViewEditMultisigCosignersStackParamsList>();
-const ViewEditMultisigCosignersRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <ViewEditMultisigCosignersStack.Navigator
-      id="ViewEditMultisigCosignersRoot"
-      initialRouteName="ViewEditMultisigCosigners"
-      screenOptions={{ headerShadowVisible: false, statusBarStyle: 'light' }}
-    >
-      <ViewEditMultisigCosignersStack.Screen
-        name="ViewEditMultisigCosigners"
-        component={ViewEditMultisigCosigners}
-        options={ViewEditMultisigCosigners.navigationOptions(theme)}
-      />
-    </ViewEditMultisigCosignersStack.Navigator>
-  );
-};
-
-const ExportMultisigCoordinationSetupStack = createNativeStackNavigator();
-const ExportMultisigCoordinationSetupRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <ExportMultisigCoordinationSetupStack.Navigator
-      id="ExportMultisigCoordinationSetupRoot"
-      initialRouteName="ExportMultisigCoordinationSetup"
-      screenOptions={{ headerShadowVisible: false, statusBarStyle: 'light' }}
-    >
-      <ExportMultisigCoordinationSetupStack.Screen
-        name="ExportMultisigCoordinationSetup"
-        component={ExportMultisigCoordinationSetup}
-        options={navigationStyle({
-          closeButton: true,
-          headerBackVisible: false,
-          statusBarStyle: 'light',
-          title: loc.multisig.export_coordination_setup,
-        })(theme)}
-      />
-    </ExportMultisigCoordinationSetupStack.Navigator>
-  );
-};
-
 export type PaymentCodeStackParamList = {
   PaymentCode: { paymentCode: string };
   PaymentCodesList: { walletID: string };

components/WalletsCarousel.js

@@ -277,7 +277,7 @@ const ListHeaderComponent = () => <View style={cStyles.separatorStyle} />;
 
 const WalletsCarousel = forwardRef((props, ref) => {
   const { preferredFiatCurrency, language } = useSettings();
-  const { horizontal, data, handleLongPress, onPress, selectedWallet } = props;
+  const { horizontal, data, handleLongPress, onPress, selectedWallet, scrollEnabled } = props;
   const renderItem = useCallback(
     ({ item, index }) =>
       item ? (
@@ -338,6 +338,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
       directionalLockEnabled
       showsHorizontalScrollIndicator={false}
       initialNumToRender={10}
+      scrollEnabled={scrollEnabled}
       ListHeaderComponent={ListHeaderComponent}
       style={{ minHeight: sliderHeight + 12 }}
       onScrollToIndexFailed={onScrollToIndexFailed}

navigation/ExportMultisigCoordinationSetupStack.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { ExportMultisigCoordinationSetupComponent } from './LazyLoadExportMultisigCoordinationSetupStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const ExportMultisigCoordinationSetupStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="ExportMultisigCoordinationSetup"
+        component={ExportMultisigCoordinationSetupComponent}
+        options={navigationStyle({
+          closeButton: true,
+          headerBackVisible: false,
+          statusBarStyle: 'light',
+          title: loc.multisig.export_coordination_setup,
+        })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default ExportMultisigCoordinationSetupStackRoot;

navigation/LazyLoadExportMultisigCoordinationSetupStack.tsx

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

navigation/LazyLoadViewEditMultisigCosignersStack.tsx

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

navigation/ViewEditMultisigCosignersStack.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { ViewEditMultisigCosignersComponent } from './LazyLoadViewEditMultisigCosignersStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+export type ViewEditMultisigCosignersStackParamList = {
+  ViewEditMultisigCosigners: {
+    walletID: string;
+  };
+};
+
+const Stack = createNativeStackNavigator<ViewEditMultisigCosignersStackParamList>();
+
+const ViewEditMultisigCosignersStackRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="ViewEditMultisigCosigners"
+        component={ViewEditMultisigCosignersComponent}
+        options={navigationStyle({
+          closeButton: true,
+          headerBackVisible: false,
+          title: loc.multisig.manage_keys,
+        })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default ViewEditMultisigCosignersStackRoot;

screen/wallets/ExportMultisigCoordinationSetup.tsx

@@ -115,7 +115,7 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
         disableBlur();
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [wallet]),
+    }, [walletID]),
   );
 
   const exportTxtFileBeforeOnPress = async () => {

screen/wallets/ViewEditMultisigCosigners.tsx

@@ -1,6 +1,4 @@
-import { useFocusEffect } from '@react-navigation/native';
+import React, { useCallback, useRef, useState } from 'react';
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import React, { useCallback, useContext, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Alert,
@@ -17,8 +15,8 @@ import {
   View,
   findNodeHandle,
 } from 'react-native';
+import { useFocusEffect, useRoute } from '@react-navigation/native';
 import { Badge, Icon } from 'react-native-elements';
-
 import {
   BlueButtonLink,
   BlueFormMultiInput,
@@ -29,9 +27,8 @@ import {
   BlueText,
   BlueTextCentered,
 } from '../../BlueComponents';
-import { ViewEditMultisigCosignersStackParamsList } from '../../Navigation';
 import * as NavigationService from '../../NavigationService';
-import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useStorage } from '../../blue_modules/storage-context';
 import { encodeUR } from '../../blue_modules/ur';
 import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../class';
 import Biometric from '../../class/biometrics';
@@ -45,7 +42,6 @@ import MultipleStepsListItem, {
 import QRCodeComponent from '../../components/QRCodeComponent';
 import { SquareButton } from '../../components/SquareButton';
 import SquareEnumeratedWords, { SquareEnumeratedWordsContentAlign } from '../../components/SquareEnumeratedWords';
-import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import { scanQrHelper } from '../../helpers/scan-qr';
 import usePrivacy from '../../hooks/usePrivacy';
@@ -57,16 +53,15 @@ import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import prompt from '../../helpers/prompt';
 import { useSettings } from '../../components/Context/SettingsContext';
 
-type Props = NativeStackScreenProps<ViewEditMultisigCosignersStackParamsList, 'ViewEditMultisigCosigners'>;
+const ViewEditMultisigCosigners: React.FC = () => {
-
-const ViewEditMultisigCosigners = ({ route }: Props) => {
   const hasLoaded = useRef(false);
   const { colors } = useTheme();
-  const { wallets, setWalletsWithNewOrder, isElectrumDisabled } = useContext(BlueStorageContext);
+  const { wallets, setWalletsWithNewOrder, isElectrumDisabled } = useStorage();
   const { isAdvancedModeEnabled } = useSettings();
   const { navigate, dispatch, addListener } = useExtendedNavigation();
   const openScannerButtonRef = useRef();
-  const { walletID } = route.params;
+  const route = useRoute();
+  const { walletID } = route.params as { walletID: string };
   const w = useRef(wallets.find(wallet => wallet.getID() === walletID));
   const tempWallet = useRef(new MultisigHDWallet());
   const [wallet, setWallet] = useState<MultisigHDWallet>();
@@ -122,7 +117,7 @@ const ViewEditMultisigCosigners = ({ route }: Props) => {
   });
   useFocusEffect(
     useCallback(() => {
-      const unsubscribe = addListener('beforeRemove', e => {
+      const unsubscribe = addListener('beforeRemove', (e: { preventDefault: () => void; data: { action: any } }) => {
         // Check if there are unsaved changes
         if (isSaveButtonDisabled) {
           // If there are no unsaved changes, let the user leave the screen
@@ -729,12 +724,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ViewEditMultisigCosigners.navigationOptions = navigationStyle(
-  {
-    closeButton: true,
-    headerBackVisible: false,
-  },
-  opts => ({ ...opts, headerTitle: loc.multisig.manage_keys }),
-);
-
 export default ViewEditMultisigCosigners;