REF: Add Multisig Wallet to TSX

components/BottomModal.tsx

@@ -30,6 +30,7 @@ interface BottomModalProps {
   allowBackdropPress?: boolean;
   isVisible: boolean;
   coverScreen?: boolean;
+  propagateSwipe?: boolean;
 }
 
 const BottomModal: React.FC<BottomModalProps> = ({
@@ -43,6 +44,7 @@ const BottomModal: React.FC<BottomModalProps> = ({
   avoidKeyboard = false,
   allowBackdropPress = true,
   coverScreen = true,
+  propagateSwipe,
   ...props
 }) => {
   const { height: valueWindowHeight, width: valueWindowWidth } = useWindowDimensions();
@@ -57,6 +59,7 @@ const BottomModal: React.FC<BottomModalProps> = ({
 
   return (
     <Modal
+      propagateSwipe={propagateSwipe}
       style={styles.root}
       deviceHeight={windowHeight ?? valueWindowHeight}
       deviceWidth={windowWidth ?? valueWindowWidth}

ios/Podfile.lock

@@ -858,4 +858,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: f19eea438501edfe85fb2fa51d40ba1b57540758
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

navigation/AddWalletStack.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import navigationStyle from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
-import { AddWalletStackParamList } from '../typings/NavigationTypes';
 import {
   AddComponent,
   ImportCustomDerivationPathComponent,
@@ -20,6 +19,28 @@ import {
   WalletsAddMultisigStep2Component,
 } from './LazyLoadAddWalletStack';
 
+export type AddWalletStackParamList = {
+  AddWallet: undefined;
+  ImportWallet: undefined;
+  ImportWalletDiscovery: undefined;
+  ImportSpeed: undefined;
+  ImportCustomDerivationPath: undefined;
+  PleaseBackup: undefined;
+  PleaseBackupLNDHub: undefined;
+  PleaseBackupLdk: undefined;
+  ProvideEntropy: undefined;
+  WalletsAddMultisig: {
+    walletLabel: string;
+  };
+  WalletsAddMultisigStep2: {
+    m: number;
+    n: number;
+    walletLabel: string;
+    format: string;
+  };
+  WalletsAddMultisigHelp: undefined;
+};
+
 const Stack = createNativeStackNavigator<AddWalletStackParamList>();
 
 const AddWalletStack = () => {
@@ -80,7 +101,12 @@ const AddWalletStack = () => {
         component={ProvideEntropyComponent}
         options={navigationStyle({ title: loc.entropy.title })(theme)}
       />
-      <Stack.Screen name="WalletsAddMultisig" component={WalletsAddMultisigComponent} options={navigationStyle({ title: '' })(theme)} />
+      <Stack.Screen
+        name="WalletsAddMultisig"
+        component={WalletsAddMultisigComponent}
+        options={navigationStyle({ title: '' })(theme)}
+        initialParams={{ walletLabel: loc.multisig.default_label }}
+      />
       <Stack.Screen
         name="WalletsAddMultisigStep2"
         component={WalletsAddMultisigStep2Component}

navigation/LazyLoadAddWalletStack.tsx

@@ -12,7 +12,7 @@ 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 WalletsAddMultisig = lazy(() => import('../screen/wallets/WalletsAddMultisig'));
 const WalletsAddMultisigStep2 = lazy(() => import('../screen/wallets/addMultisigStep2'));
 const WalletsAddMultisigHelp = lazy(() => import('../screen/wallets/addMultisigHelp'));
 

screen/wallets/WalletsAddMultisig.tsx

@@ -1,9 +1,8 @@
-import { useNavigation, useRoute } from '@react-navigation/native';
-import LottieView from 'lottie-react-native';
 import React, { useEffect, useRef, useState } from 'react';
+import { useRoute, RouteProp } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
 import { Keyboard, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Icon } from '@rneui/themed';
-
 import { BlueSpacing20 } from '../../BlueComponents';
 import { MultisigHDWallet } from '../../class';
 import BottomModal from '../../components/BottomModal';
@@ -13,12 +12,18 @@ import SafeArea from '../../components/SafeArea';
 import { useTheme } from '../../components/themes';
 import loc from '../../loc';
 import { useSettings } from '../../hooks/context/useSettings';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
+import { AddWalletStackParamList } from '../../navigation/AddWalletStack';
 
-const WalletsAddMultisig = () => {
+type NavigationProps = NativeStackNavigationProp<AddWalletStackParamList, 'WalletsAddMultisig'>;
+type RouteProps = RouteProp<AddWalletStackParamList, 'WalletsAddMultisig'>;
+
+const WalletsAddMultisig: React.FC = () => {
   const { colors } = useTheme();
-  const { navigate } = useNavigation();
-  const loadingAnimation = useRef();
-  const { walletLabel } = useRoute().params;
+  const { navigate } = useExtendedNavigation<NavigationProps>();
+  const loadingAnimation = useRef<LottieView>(null);
+  const { walletLabel } = useRoute<RouteProps>().params;
   const [m, setM] = useState(2);
   const [n, setN] = useState(3);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -183,10 +188,10 @@ const WalletsAddMultisig = () => {
     setIsModalVisible(true);
   };
 
-  const getCurrentlySelectedFormat = code => {
+  const getCurrentlySelectedFormat = (code: string) => {
     switch (code) {
       case 'format':
-        return WalletsAddMultisig.getCurrentFormatReadable(format);
+        return getCurrentFormatReadable(format);
       case 'quorum':
         return loc.formatString(loc.multisig.quorum, { m, n });
       default:
@@ -326,7 +331,7 @@ const styles = StyleSheet.create({
   },
 });
 
-WalletsAddMultisig.getCurrentFormatReadable = f => {
+const getCurrentFormatReadable = (f: string) => {
   switch (f) {
     case MultisigHDWallet.FORMAT_P2WSH:
       return loc.multisig.native_segwit_title;
@@ -340,8 +345,4 @@ WalletsAddMultisig.getCurrentFormatReadable = f => {
   }
 };
 
-WalletsAddMultisig.initialParams = {
-  walletLabel: loc.multisig.default_label,
-};
-
 export default WalletsAddMultisig;

typings/NavigationTypes.ts

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