REF: Lazy Load Add Wallet

This commit is contained in:
Marcos Rodriguez Velez 2024-05-05 16:33:06 -04:00
parent 1384c8453f
commit 105997a1f0
No known key found for this signature in database
GPG Key ID: 6030B2F48CCE86D7
20 changed files with 240 additions and 132 deletions

View File

@ -2,6 +2,7 @@ import { DrawerNavigationOptions, createDrawerNavigator } from '@react-navigatio
import { NativeStackNavigationOptions, createNativeStackNavigator } from '@react-navigation/native-stack';
import React, { useContext, useMemo } from 'react';
import { I18nManager, Platform } from 'react-native';
import AddWalletStack from './navigation/AddWalletStack';
import PlausibleDeniability from './screen/PlausibleDeniability';
import Selftest from './screen/selftest';
@ -19,25 +20,12 @@ import LightningSettings from './screen/settings/lightningSettings';
import NotificationSettings from './screen/settings/notificationSettings';
import ReleaseNotes from './screen/settings/releasenotes';
import Tools from './screen/settings/tools';
import AddWallet from './screen/wallets/Add';
import WalletsAddMultisig from './screen/wallets/addMultisig';
import WalletsAddMultisigHelp, { WalletAddMultisigHelpNavigationOptions } from './screen/wallets/addMultisigHelp';
import WalletsAddMultisigStep2 from './screen/wallets/addMultisigStep2';
import WalletAddresses from './screen/wallets/addresses';
import WalletDetails from './screen/wallets/details';
import WalletExport from './screen/wallets/export';
import ExportMultisigCoordinationSetup from './screen/wallets/ExportMultisigCoordinationSetup';
import GenerateWord from './screen/wallets/generateWord';
import ImportWallet from './screen/wallets/import';
import ImportCustomDerivationPath from './screen/wallets/importCustomDerivationPath';
import ImportWalletDiscovery from './screen/wallets/importDiscovery';
import ImportSpeed from './screen/wallets/importSpeed';
import WalletsList from './screen/wallets/WalletsList';
import PleaseBackup from './screen/wallets/PleaseBackup';
import PleaseBackupLNDHub from './screen/wallets/pleaseBackupLNDHub';
import PleaseBackupLdk from './screen/wallets/pleaseBackupLdk';
import ProvideEntropy from './screen/wallets/provideEntropy';
import ReorderWallets from './screen/wallets/reorderWallets';
import SelectWallet from './screen/wallets/selectWallet';
import SignVerify from './screen/wallets/signVerify';
@ -89,69 +77,6 @@ import PaymentCodesList from './screen/wallets/paymentCodesList';
import { BlueStorageContext } from './blue_modules/storage-context';
import { useIsLargeScreen } from './hooks/useIsLargeScreen';
const AddWalletStack = createNativeStackNavigator();
const AddWalletRoot = () => {
const theme = useTheme();
return (
<AddWalletStack.Navigator screenOptions={{ headerShadowVisible: false }}>
<AddWalletStack.Screen
name="AddWallet"
component={AddWallet}
options={navigationStyle({
closeButton: true,
headerBackVisible: false,
title: loc.wallets.add_title,
})(theme)}
/>
<AddWalletStack.Screen name="ImportWallet" component={ImportWallet} options={ImportWallet.navigationOptions(theme)} />
<AddWalletStack.Screen
name="ImportWalletDiscovery"
component={ImportWalletDiscovery}
options={ImportWalletDiscovery.navigationOptions(theme)}
/>
<AddWalletStack.Screen
name="ImportCustomDerivationPath"
component={ImportCustomDerivationPath}
options={ImportCustomDerivationPath.navigationOptions(theme)}
/>
<AddWalletStack.Screen name="ImportSpeed" component={ImportSpeed} options={ImportSpeed.navigationOptions(theme)} />
<AddWalletStack.Screen
name="PleaseBackup"
component={PleaseBackup}
options={navigationStyle({
gestureEnabled: false,
headerBackVisible: false,
title: loc.pleasebackup.title,
})(theme)}
/>
<AddWalletStack.Screen
name="PleaseBackupLNDHub"
component={PleaseBackupLNDHub}
options={PleaseBackupLNDHub.navigationOptions(theme)}
/>
<AddWalletStack.Screen name="PleaseBackupLdk" component={PleaseBackupLdk} options={PleaseBackupLdk.navigationOptions(theme)} />
<AddWalletStack.Screen name="ProvideEntropy" component={ProvideEntropy} options={ProvideEntropy.navigationOptions(theme)} />
<AddWalletStack.Screen
name="WalletsAddMultisig"
component={WalletsAddMultisig}
options={WalletsAddMultisig.navigationOptions(theme)}
initialParams={WalletsAddMultisig.initialParams}
/>
<AddWalletStack.Screen
name="WalletsAddMultisigStep2"
component={WalletsAddMultisigStep2}
options={WalletsAddMultisigStep2.navigationOptions(theme)}
/>
<AddWalletStack.Screen
name="WalletsAddMultisigHelp"
component={WalletsAddMultisigHelp}
options={WalletAddMultisigHelpNavigationOptions}
/>
</AddWalletStack.Navigator>
);
};
// CreateTransactionStackNavigator === SendDetailsStack
const SendDetailsStack = createNativeStackNavigator();
const SendDetailsRoot = () => {
@ -524,7 +449,7 @@ const DetailViewStackScreensStack = () => {
/>
<DetailViewRoot.Screen name="WalletAddresses" component={WalletAddresses} options={WalletAddresses.navigationOptions(theme)} />
<DetailViewRoot.Screen name="AddWalletRoot" component={AddWalletRoot} options={NavigationFormModalOptions} />
<DetailViewRoot.Screen name="AddWalletRoot" component={AddWalletStack} options={NavigationFormModalOptions} />
<DetailViewRoot.Screen
name="SendDetailsRoot"
component={SendDetailsRoot}

View File

@ -14,4 +14,15 @@
<natures>
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
</natures>
<filteredResources>
<filter>
<id>1714941148979</id>
<name></name>
<type>30</type>
<matcher>
<id>org.eclipse.core.resources.regexFilterMatcher</id>
<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>

View File

@ -1,2 +1,13 @@
arguments=--init-script /var/folders/wp/mctylz615p727_90j3yv0vnc0000gn/T/d146c9752a26f79b52047fb6dc6ed385d064e120494f96f08ca63a317c41f94c.gradle --init-script /var/folders/wp/mctylz615p727_90j3yv0vnc0000gn/T/52cde0cfcf3e28b8b7510e992210d9614505e0911af0c190bd590d7158574963.gradle
auto.sync=false
build.scans.enabled=false
connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
connection.project.dir=
eclipse.preferences.version=1
gradle.user.home=
java.home=/Library/Java/JavaVirtualMachines/temurin-21.jdk/Contents/Home
jvm.arguments=
offline.mode=false
override.workspace.settings=true
show.console.view=true
show.executions.view=true

View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<classpath>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-21/"/>
<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
<classpathentry kind="output" path="bin/default"/>
</classpath>

View File

@ -20,4 +20,15 @@
<nature>org.eclipse.jdt.core.javanature</nature>
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
</natures>
<filteredResources>
<filter>
<id>1714941148981</id>
<name></name>
<type>30</type>
<matcher>
<id>org.eclipse.core.resources.regexFilterMatcher</id>
<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>

View File

@ -0,0 +1,4 @@
eclipse.preferences.version=1
org.eclipse.jdt.core.compiler.codegen.targetPlatform=21
org.eclipse.jdt.core.compiler.compliance=21
org.eclipse.jdt.core.compiler.source=21

View File

@ -0,0 +1,94 @@
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {
AddComponent,
ImportCustomDerivationPathComponent,
ImportSpeedComponent,
PleaseBackupComponent,
PleaseBackupLNDHubComponent,
PleaseBackupLdkComponent,
ProvideEntropyComponent,
WalletsAddMultisigComponent,
WalletsAddMultisigStep2Component,
WalletsAddMultisigHelpComponent,
} from './LazyLoadAddWalletStack';
import { AddWalletStackParamList } from '../typings/NavigationTypes';
import navigationStyle from '../components/navigationStyle';
import { useTheme } from '../components/themes';
import loc from '../loc';
const Stack = createNativeStackNavigator<AddWalletStackParamList>();
const AddWalletStack = () => {
const theme = useTheme();
return (
<Stack.Navigator initialRouteName="AddWallet">
<Stack.Screen
name="AddWallet"
component={AddComponent}
options={navigationStyle({
closeButton: true,
headerBackVisible: false,
title: loc.wallets.add_title,
})(theme)}
/>
<Stack.Screen name="ImportCustomDerivationPath" component={ImportCustomDerivationPathComponent} />
<Stack.Screen
name="ImportSpeed"
component={ImportSpeedComponent}
options={navigationStyle({ title: loc.wallets.import_title })(theme)}
/>
<Stack.Screen
name="PleaseBackup"
component={PleaseBackupComponent}
options={navigationStyle({
gestureEnabled: false,
headerBackVisible: false,
title: loc.pleasebackup.title,
})(theme)}
/>
<Stack.Screen
name="PleaseBackupLNDHub"
component={PleaseBackupLNDHubComponent}
options={navigationStyle({ gestureEnabled: false, headerBackVisible: false, title: loc.pleasebackup.title })(theme)}
/>
<Stack.Screen
name="PleaseBackupLdk"
component={PleaseBackupLdkComponent}
options={navigationStyle({
title: loc.pleasebackup.title,
gestureEnabled: false,
headerBackVisible: false,
})(theme)}
/>
<Stack.Screen
name="ProvideEntropy"
component={ProvideEntropyComponent}
options={navigationStyle({ title: loc.entropy.title })(theme)}
/>
<Stack.Screen name="WalletsAddMultisig" component={WalletsAddMultisigComponent} options={navigationStyle({ title: '' })(theme)} />
<Stack.Screen
name="WalletsAddMultisigStep2"
component={WalletsAddMultisigStep2Component}
options={navigationStyle({ title: '', gestureEnabled: false })(theme)}
/>
<Stack.Screen
name="WalletsAddMultisigHelp"
component={WalletsAddMultisigHelpComponent}
options={navigationStyle({
title: '',
gestureEnabled: false,
headerStyle: {
backgroundColor: '#0070FF',
},
headerTintColor: '#FFFFFF',
headerBackTitleVisible: false,
statusBarStyle: 'light',
headerShadowVisible: false,
})(theme)}
/>
</Stack.Navigator>
);
};
export default AddWalletStack;

View File

@ -0,0 +1,84 @@
import React, { lazy, Suspense } from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
// Define lazy imports
const WalletsAdd = lazy(() => import('../screen/wallets/Add'));
const ImportCustomDerivationPath = lazy(() => import('../screen/wallets/importCustomDerivationPath'));
const ImportSpeed = lazy(() => import('../screen/wallets/import'));
const PleaseBackup = lazy(() => import('../screen/wallets/PleaseBackup'));
const PleaseBackupLNDHub = lazy(() => import('../screen/wallets/pleaseBackupLNDHub'));
const PleaseBackupLdk = lazy(() => import('../screen/wallets/pleaseBackupLdk'));
const ProvideEntropy = lazy(() => import('../screen/wallets/provideEntropy'));
const WalletsAddMultisig = lazy(() => import('../screen/wallets/addMultisig'));
const WalletsAddMultisigStep2 = lazy(() => import('../screen/wallets/addMultisigStep2'));
const WalletsAddMultisigHelp = lazy(() => import('../screen/wallets/addMultisigHelp'));
const LoadingIndicator = () => (
<View style={styles.root}>
<ActivityIndicator size="large" />
</View>
);
export const AddComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<WalletsAdd />
</Suspense>
);
export const ImportCustomDerivationPathComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<ImportCustomDerivationPath />
</Suspense>
);
export const ImportSpeedComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<ImportSpeed />
</Suspense>
);
export const PleaseBackupComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<PleaseBackup />
</Suspense>
);
export const PleaseBackupLNDHubComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<PleaseBackupLNDHub />
</Suspense>
);
export const PleaseBackupLdkComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<PleaseBackupLdk />
</Suspense>
);
export const ProvideEntropyComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<ProvideEntropy />
</Suspense>
);
export const WalletsAddMultisigComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<WalletsAddMultisig />
</Suspense>
);
export const WalletsAddMultisigStep2Component = () => (
<Suspense fallback={<LoadingIndicator />}>
<WalletsAddMultisigStep2 />
</Suspense>
);
export const WalletsAddMultisigHelpComponent = () => (
<Suspense fallback={<LoadingIndicator />}>
<WalletsAddMultisigHelp />
</Suspense>
);
const styles = StyleSheet.create({
root: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

View File

@ -65,7 +65,7 @@
"e2e:release-build": "detox build -c android.release",
"e2e:release-test": "detox test -c android.release",
"tslint": "tsc",
"lint": " npm run tslint && node scripts/find-unused-loc.js && eslint --ext .js,.ts,.tsx '*.@(js|ts|tsx)' screen 'blue_modules/*.@(js|ts|tsx)' class models loc tests components",
"lint": " npm run tslint && node scripts/find-unused-loc.js && eslint --ext .js,.ts,.tsx '*.@(js|ts|tsx)' screen 'blue_modules/*.@(js|ts|tsx)' class models loc tests components navigation",
"lint:fix": "npm run lint -- --fix",
"lint:quickfix": "git status --porcelain | grep -v '\\.json' | grep -E '\\.js|\\.ts' --color=never | awk '{print $2}' | xargs eslint --fix; exit 0",
"unit": "jest -b -i tests/unit/*"

View File

@ -68,7 +68,7 @@ const PleaseBackup: React.FC = () => {
return (
<ScrollView
style={styles.flex}
style={styles.root}
contentContainerStyle={[styles.flex, stylesHook.flex]}
testID="PleaseBackupScrollView"
automaticallyAdjustContentInsets
@ -88,6 +88,9 @@ const PleaseBackup: React.FC = () => {
};
const styles = StyleSheet.create({
root: {
flex: 1,
},
flex: {
flex: 1,
justifyContent: 'space-around',

View File

@ -4,7 +4,6 @@ import LottieView from 'lottie-react-native';
import { Icon } from 'react-native-elements';
import { useNavigation, useRoute } from '@react-navigation/native';
import { BlueSpacing20 } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import BottomModal from '../../components/BottomModal';
import { MultisigHDWallet } from '../../class';
import loc from '../../loc';
@ -340,10 +339,6 @@ WalletsAddMultisig.getCurrentFormatReadable = f => {
}
};
WalletsAddMultisig.navigationOptions = navigationStyle({
title: '',
});
WalletsAddMultisig.initialParams = {
walletLabel: loc.multisig.default_label,
};

View File

@ -1,7 +1,5 @@
import React from 'react';
import { Image, View, Text, ScrollView, StyleSheet } from 'react-native';
import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
import loc from '../../loc';
import { useTheme } from '../../components/themes';
import SafeArea from '../../components/SafeArea';
@ -107,16 +105,4 @@ const styles = StyleSheet.create({
},
});
export const WalletAddMultisigHelpNavigationOptions: NativeStackNavigationOptions = {
title: '',
gestureEnabled: false,
headerStyle: {
backgroundColor: '#0070FF',
},
headerTintColor: '#FFFFFF',
headerBackTitleVisible: false,
statusBarStyle: 'light',
headerShadowVisible: false,
};
export default WalletsAddMultisigHelp;

View File

@ -17,7 +17,6 @@ import {
import { Icon } from 'react-native-elements';
import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
import { BlueButtonLink, BlueFormMultiInput, BlueSpacing10, BlueSpacing20, BlueText, BlueTextCentered } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../class';
import loc from '../../loc';
import { SquareButton } from '../../components/SquareButton';
@ -812,10 +811,4 @@ const styles = StyleSheet.create({
},
});
WalletsAddMultisigStep2.navigationOptions = navigationStyle({
title: null,
gestureEnabled: false,
swipeEnabled: false,
});
export default WalletsAddMultisigStep2;

View File

@ -9,7 +9,6 @@ import {
BlueSpacing20,
BlueText,
} from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import loc from '../../loc';
import { requestCameraAuthorization } from '../../helpers/scan-qr';
import { useTheme } from '../../components/themes';
@ -189,6 +188,4 @@ const WalletsImport = () => {
);
};
WalletsImport.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.wallets.import_title }));
export default WalletsImport;

View File

@ -3,7 +3,6 @@ import { useNavigation, useRoute } from '@react-navigation/native';
import { View, StyleSheet, ScrollView, BackHandler } from 'react-native';
import { BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import QRCodeComponent from '../../components/QRCodeComponent';
@ -72,13 +71,4 @@ const PleaseBackupLNDHub = () => {
);
};
PleaseBackupLNDHub.navigationOptions = navigationStyle(
{
gestureEnabled: false,
swipeEnabled: false,
headerBackVisible: false,
},
opts => ({ ...opts, headerTitle: loc.pleasebackup.title }),
);
export default PleaseBackupLNDHub;

View File

@ -3,7 +3,6 @@ import { useNavigation, useRoute } from '@react-navigation/native';
import { View, useWindowDimensions, StyleSheet, BackHandler, ScrollView } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import loc from '../../loc';
import { BlueStorageContext } from '../../blue_modules/storage-context';
import { useTheme } from '../../components/themes';
@ -80,11 +79,4 @@ const PleaseBackupLdk = () => {
);
};
PleaseBackupLdk.navigationOptions = navigationStyle({
title: loc.pleasebackup.title,
gestureEnabled: false,
swipeEnabled: false,
headerBackVisible: false,
});
export default PleaseBackupLdk;

View File

@ -9,7 +9,6 @@ import loc from '../../loc';
import { BlueCurrentTheme, useTheme } from '../../components/themes';
import { FContainer, FButton } from '../../components/FloatButtons';
import { BlueSpacing20 } from '../../BlueComponents';
import navigationStyle from '../../components/navigationStyle';
import SafeArea from '../../components/SafeArea';
import { Tabs } from '../../components/Tabs';
@ -273,8 +272,6 @@ const Entropy = () => {
);
};
Entropy.navigationOptions = navigationStyle({}, opts => ({ ...opts, headerTitle: loc.entropy.title }));
const styles = StyleSheet.create({
entropy: {
padding: 5,

View File

@ -2,7 +2,7 @@ const fs = require('fs');
const path = require('path');
const mainLocFile = './loc/en.json';
const dirsToInterate = ['components', 'screen', 'blue_modules', 'class', 'hooks', 'helpers'];
const dirsToInterate = ['components', 'screen', 'blue_modules', 'class', 'hooks', 'helpers', 'navigation'];
const addFiles = ['BlueComponents.js', 'App.js', 'Navigation.tsx'];
const allowedLocPrefixes = ['loc.lnurl_auth', 'loc.units'];

View File

@ -11,7 +11,8 @@
"strict": true,
"target": "esnext",
"skipLibCheck": true,
"resolveJsonModule": true
"resolveJsonModule": true,
"module": "esnext",
},
"extends": "@tsconfig/react-native/tsconfig.json",
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js", "components/react-native-draggable-flatlist", "scripts/maccatalystpatches"],

View File

@ -0,0 +1,14 @@
export type AddWalletStackParamList = {
AddWallet: undefined;
ImportWallet: undefined;
ImportWalletDiscovery: undefined;
ImportCustomDerivationPath: undefined;
ImportSpeed: undefined;
PleaseBackup: undefined;
PleaseBackupLNDHub: undefined;
PleaseBackupLdk: undefined;
ProvideEntropy: undefined;
WalletsAddMultisig: undefined;
WalletsAddMultisigStep2: undefined;
WalletsAddMultisigHelp: undefined;
};