REF: SelectWallet to TSX

NavigationService.ts

@@ -28,3 +28,9 @@ export function popToTop() {
     navigationRef.current?.dispatch(StackActions.popToTop());
   }
 }
+
+export function pop() {
+  if (navigationRef.isReady()) {
+    navigationRef.current?.dispatch(StackActions.pop());
+  }
+}

components/WalletsCarousel.js

@@ -154,7 +154,7 @@ const iStyles = StyleSheet.create({
   },
 });
 
-export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPress, isSelectedWallet, customStyle }) => {
+export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPress, isSelectedWallet, customStyle, horizontal }) => {
   const scaleValue = new Animated.Value(1.0);
   const { colors } = useTheme();
   const { walletTransactionUpdateStatus } = useStorage();
@@ -197,7 +197,7 @@ export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPres
   return (
     <Animated.View
       style={[
-        isLargeScreen ? iStyles.rootLargeDevice : customStyle ?? { ...iStyles.root, width: itemWidth },
+        isLargeScreen || !horizontal ? iStyles.rootLargeDevice : customStyle ?? { ...iStyles.root, width: itemWidth },
         { opacity, transform: [{ scale: scaleValue }] },
       ]}
     >
@@ -287,6 +287,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
           index={index}
           handleLongPress={handleLongPress}
           onPress={onPress}
+          horizontal={horizontal}
         />
       ) : (
         <NewWalletPanel onPress={onPress} />

navigation/DetailViewScreensStack.tsx

@@ -28,7 +28,7 @@ import WalletAddresses from '../screen/wallets/WalletAddresses';
 import WalletDetails from '../screen/wallets/details';
 import GenerateWord from '../screen/wallets/generateWord';
 import LdkViewLogs from '../screen/wallets/ldkViewLogs';
-import SelectWallet from '../screen/wallets/selectWallet';
+import SelectWallet from '../screen/wallets/SelectWallet';
 import WalletTransactions from '../screen/wallets/transactions';
 import WalletsList from '../screen/wallets/WalletsList';
 import { NavigationDefaultOptions, NavigationFormModalOptions, StatusBarLightOptions, DetailViewStack } from './index'; // Importing the navigator

navigation/LazyLoadAztecoRedeemStack.tsx

@@ -3,7 +3,7 @@ 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
+const SelectWallet = lazy(() => import('../screen/wallets/SelectWallet'));
 
 export const AztecoRedeemComponent = () => (
   <Suspense fallback={<LazyLoadingIndicator />}>

navigation/LazyLoadLDKOpenChannelStack.tsx

@@ -2,7 +2,7 @@ import React, { lazy, Suspense } from 'react';
 
 import { LazyLoadingIndicator } from './LazyLoadingIndicator';
 
-const SelectWallet = lazy(() => import('../screen/wallets/selectWallet'));
+const SelectWallet = lazy(() => import('../screen/wallets/SelectWallet'));
 const LdkOpenChannel = lazy(() => import('../screen/lnd/ldkOpenChannel'));
 const Success = lazy(() => import('../screen/send/success'));
 

navigation/LazyLoadLNDCreateInvoiceStack.tsx

@@ -3,7 +3,7 @@ import React, { lazy, Suspense } from 'react';
 import { LazyLoadingIndicator } from './LazyLoadingIndicator';
 
 const LNDCreateInvoice = lazy(() => import('../screen/lnd/lndCreateInvoice'));
-const SelectWallet = lazy(() => import('../screen/wallets/selectWallet'));
+const SelectWallet = lazy(() => import('../screen/wallets/SelectWallet'));
 const LNDViewInvoice = lazy(() => import('../screen/lnd/lndViewInvoice'));
 const LNDViewAdditionalInvoiceInformation = lazy(() => import('../screen/lnd/lndViewAdditionalInvoiceInformation'));
 const LNDViewAdditionalInvoicePreImage = lazy(() => import('../screen/lnd/lndViewAdditionalInvoicePreImage'));

navigation/LazyLoadScanLndInvoiceStack.tsx

@@ -4,7 +4,7 @@ import { LazyLoadingIndicator } from './LazyLoadingIndicator';
 
 // Lazy loading components for the navigation stack
 const ScanLndInvoice = lazy(() => import('../screen/lnd/scanLndInvoice'));
-const SelectWallet = lazy(() => import('../screen/wallets/selectWallet'));
+const SelectWallet = lazy(() => import('../screen/wallets/SelectWallet'));
 const Success = lazy(() => import('../screen/send/success'));
 const LnurlPay = lazy(() => import('../screen/lnd/lnurlPay'));
 const LnurlPaySuccess = lazy(() => import('../screen/lnd/lnurlPaySuccess'));

navigation/LazyLoadSendDetailsStack.tsx

@@ -9,7 +9,7 @@ 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 SelectWallet = lazy(() => import('../screen/wallets/SelectWallet'));
 const CoinControl = lazy(() => import('../screen/send/coinControl'));
 
 // Export each component with its lazy loader and optional configurations

navigation/SendDetailsStackParamList.ts

@@ -63,7 +63,6 @@ export type SendDetailsStackParamList = {
     txid?: string;
   };
   SelectWallet: {
-    onWalletSelect: (wallet: TWallet) => void;
     chainType: Chain;
   };
   CoinControl: {

screen/send/SendDetails.tsx

@@ -645,10 +645,13 @@ const SendDetails = () => {
     setIsLoading(false);
   };
 
-  const onWalletSelect = (w: TWallet) => {
-    setWallet(w);
-    navigation.dispatch(popAction);
-  };
+  useEffect(() => {
+    const newWallet = wallets.find(w => w.getID() === routeParams.walletID);
+    if (newWallet) {
+      setWallet(newWallet);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [routeParams.walletID]);
 
   /**
    * same as `importTransaction`, but opens camera instead.
@@ -1354,7 +1357,7 @@ const SendDetails = () => {
           <TouchableOpacity
             accessibilityRole="button"
             style={styles.selectTouch}
-            onPress={() => navigation.navigate('SelectWallet', { onWalletSelect, chainType: Chain.ONCHAIN })}
+            onPress={() => navigation.navigate('SelectWallet', { chainType: Chain.ONCHAIN })}
           >
             <Text style={styles.selectText}>{loc.wallets.select_wallet.toLowerCase()}</Text>
             <Icon name={I18nManager.isRTL ? 'angle-left' : 'angle-right'} size={18} type="font-awesome" color="#9aa0aa" />
@@ -1364,7 +1367,7 @@ const SendDetails = () => {
           <TouchableOpacity
             accessibilityRole="button"
             style={styles.selectTouch}
-            onPress={() => navigation.navigate('SelectWallet', { onWalletSelect, chainType: Chain.ONCHAIN })}
+            onPress={() => navigation.navigate('SelectWallet', { chainType: Chain.ONCHAIN })}
             disabled={!isEditable || isLoading}
           >
             <Text style={[styles.selectLabel, stylesHook.selectLabel]}>{wallet?.getLabel()}</Text>

screen/wallets/SelectWallet.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useNavigationState, useRoute, RouteProp } from '@react-navigation/native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
+import { BlueSpacing20, BlueText } from '../../BlueComponents';
+import SafeArea from '../../components/SafeArea';
+import { useTheme } from '../../components/themes';
+import loc from '../../loc';
+import { Chain } from '../../models/bitcoinUnits';
+import { useStorage } from '../../hooks/context/useStorage';
+import WalletsCarousel from '../../components/WalletsCarousel';
+import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
+import { TWallet } from '../../class/wallets/types';
+import { CloseButtonPosition } from '../../components/navigationStyle';
+import { pop } from '../../NavigationService';
+
+type SelectWalletRouteProp = RouteProp<
+  {
+    SelectWallet: {
+      chainType?: Chain;
+      onWalletSelect?: (wallet: TWallet, navigation: any) => void;
+      availableWallets?: TWallet[];
+      noWalletExplanationText?: string;
+      onChainRequireSend?: boolean;
+    };
+  },
+  'SelectWallet'
+>;
+
+const SelectWallet: React.FC = () => {
+  const route = useRoute<SelectWalletRouteProp>();
+  const { chainType, onWalletSelect, availableWallets, noWalletExplanationText, onChainRequireSend = false } = route.params;
+  const [isLoading, setIsLoading] = useState(true);
+  const navigation = useExtendedNavigation();
+  const { navigate, setOptions } = navigation;
+  const { wallets } = useStorage();
+  const { colors } = useTheme();
+  const isModal = useNavigationState(state => state.routes.length === 1);
+  const walletsCarousel = useRef(null);
+  const previousRouteName = useNavigationState(state => state.routes[state.routes.length - 2]?.name);
+
+  let data = !onChainRequireSend
+    ? wallets.filter(item => item.chain === Chain.ONCHAIN)
+    : chainType
+      ? wallets.filter(item => item.chain === chainType && item.allowSend())
+      : wallets.filter(item => item.allowSend());
+
+  if (availableWallets && availableWallets.length > 0) {
+    data = availableWallets;
+  }
+
+  const stylesHook = StyleSheet.create({
+    loading: {
+      backgroundColor: colors.background,
+    },
+  });
+
+  useEffect(() => {
+    console.log('SelectWallet - useEffect');
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    setOptions({
+      statusBarStyle: isLoading || data.length === 0 ? 'light' : 'auto',
+    });
+  }, [isLoading, data.length, setOptions]);
+
+  useEffect(() => {
+    if (!isModal) {
+      setOptions({ CloseButtonPosition: CloseButtonPosition.None });
+    }
+  }, [isModal, setOptions]);
+
+  const onPress = (item: TWallet) => {
+    triggerHapticFeedback(HapticFeedbackTypes.Selection);
+    if (isModal) {
+      onWalletSelect?.(item, { navigation: { pop, navigate } });
+    } else {
+      navigate(previousRouteName, { walletID: item.getID(), merge: true });
+    }
+  };
+
+  const handleLongPress = (item: TWallet) => {
+    // place holder. remove once WalletsCarousel is TSX
+  };
+
+  if (isLoading) {
+    return (
+      <View style={[styles.loading, stylesHook.loading]}>
+        <ActivityIndicator />
+      </View>
+    );
+  } else if (data.length <= 0) {
+    return (
+      <SafeArea>
+        <View style={styles.noWallets}>
+          <BlueText style={styles.center}>{loc.wallets.select_no_bitcoin}</BlueText>
+          <BlueSpacing20 />
+          <BlueText style={styles.center}>{noWalletExplanationText || loc.wallets.select_no_bitcoin_exp}</BlueText>
+        </View>
+      </SafeArea>
+    );
+  } else {
+    return (
+      <WalletsCarousel
+        // @ts-ignore: refactor later
+        data={data}
+        onPress={onPress}
+        handleLongPress={handleLongPress}
+        ref={walletsCarousel}
+        testID="WalletsList"
+        horizontal={false}
+      />
+    );
+  }
+};
+
+export default SelectWallet;
+
+const styles = StyleSheet.create({
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignContent: 'center',
+    paddingTop: 20,
+  },
+  noWallets: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 20,
+  },
+  center: {
+    textAlign: 'center',
+  },
+});

screen/wallets/selectWallet.js

@@ -1,213 +0,0 @@
-import { useNavigation, useNavigationState, useRoute } from '@react-navigation/native';
-import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, FlatList, I18nManager, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
-import { BlueSpacing20, BlueText } from '../../BlueComponents';
-import { LightningCustodianWallet, LightningLdkWallet, MultisigHDWallet } from '../../class';
-import WalletGradient from '../../class/wallet-gradient';
-import { BlurredBalanceView } from '../../components/BlurredBalanceView';
-import SafeArea from '../../components/SafeArea';
-import { useTheme } from '../../components/themes';
-import loc, { formatBalance, transactionTimeToReadable } from '../../loc';
-import { Chain } from '../../models/bitcoinUnits';
-import { useStorage } from '../../hooks/context/useStorage';
-
-const SelectWallet = () => {
-  const { chainType, onWalletSelect, availableWallets, noWalletExplanationText, onChainRequireSend = false } = useRoute().params;
-  const [isLoading, setIsLoading] = useState(true);
-  const { pop, navigate, setOptions, getParent } = useNavigation();
-  const { wallets } = useStorage();
-  const { colors, closeImage } = useTheme();
-  const isModal = useNavigationState(state => state.routes.length) === 1;
-  let data = !onChainRequireSend
-    ? wallets.filter(item => item.chain === Chain.ONCHAIN) || []
-    : chainType
-      ? wallets.filter(item => item.chain === chainType && item.allowSend())
-      : wallets.filter(item => item.allowSend()) || [];
-
-  if (availableWallets && availableWallets.length > 0) {
-    // availableWallets if provided, overrides chainType argument and `allowSend()` check
-    data = availableWallets;
-  }
-  const styles = StyleSheet.create({
-    loading: {
-      flex: 1,
-      justifyContent: 'center',
-      alignContent: 'center',
-      paddingTop: 20,
-      backgroundColor: colors.background,
-    },
-    itemRoot: {
-      backgroundColor: 'transparent',
-      padding: 10,
-      marginVertical: 17,
-    },
-    gradient: {
-      padding: 15,
-      borderRadius: 10,
-      minHeight: 164,
-      elevation: 5,
-    },
-    image: {
-      width: 99,
-      height: 94,
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-    },
-    transparentText: {
-      backgroundColor: 'transparent',
-    },
-    label: {
-      backgroundColor: 'transparent',
-      fontSize: 19,
-      color: '#fff',
-      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-    },
-
-    balance: {
-      backgroundColor: 'transparent',
-      fontWeight: 'bold',
-      fontSize: 36,
-      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-
-      color: '#fff',
-    },
-    latestTxLabel: {
-      backgroundColor: 'transparent',
-      fontSize: 13,
-      color: '#fff',
-      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-    },
-    latestTxValue: {
-      backgroundColor: 'transparent',
-      fontWeight: 'bold',
-      fontSize: 16,
-      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-
-      color: '#fff',
-    },
-    noWallets: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingTop: 20,
-    },
-    center: {
-      textAlign: 'center',
-    },
-  });
-
-  useEffect(() => {
-    console.log('SelectWallet - useEffect');
-    setIsLoading(false);
-  }, []);
-
-  useEffect(() => {
-    if (isLoading || data.length === 0) {
-      setOptions({ statusBarStyle: 'light' });
-    } else {
-      setOptions({ statusBarStyle: 'auto' });
-    }
-  }, [isLoading, data.length, setOptions]);
-
-  useEffect(() => {
-    setOptions(
-      isModal
-        ? {
-            // eslint-disable-next-line react/no-unstable-nested-components
-            headerLeft: () => (
-              <TouchableOpacity
-                accessibilityRole="button"
-                style={styles.button}
-                onPress={() => {
-                  getParent().pop();
-                }}
-                testID="NavigationCloseButton"
-              >
-                <Image source={closeImage} />
-              </TouchableOpacity>
-            ),
-          }
-        : {},
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [closeImage, isModal, styles.button]);
-
-  const renderItem = ({ item }) => {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          triggerHapticFeedback(HapticFeedbackTypes.Selection);
-          onWalletSelect(item, { navigation: { pop, navigate } });
-        }}
-        accessibilityRole="button"
-      >
-        <View shadowOpacity={40 / 100} shadowOffset={{ width: 0, height: 0 }} shadowRadius={5} style={styles.itemRoot}>
-          <LinearGradient shadowColor="#000000" colors={WalletGradient.gradientsFor(item.type)} style={styles.gradient}>
-            <Image
-              source={(() => {
-                switch (item.type) {
-                  case LightningLdkWallet.type:
-                  case LightningCustodianWallet.type:
-                    return I18nManager.isRTL ? require('../../img/lnd-shape-rtl.png') : require('../../img/lnd-shape.png');
-                  case MultisigHDWallet.type:
-                    return I18nManager.isRTL ? require('../../img/vault-shape-rtl.png') : require('../../img/vault-shape.png');
-                  default:
-                    return I18nManager.isRTL ? require('../../img/btc-shape-rtl.png') : require('../../img/btc-shape.png');
-                }
-              })()}
-              style={styles.image}
-            />
-
-            <Text style={styles.transparentText} />
-            <Text numberOfLines={1} style={styles.label}>
-              {item.getLabel()}
-            </Text>
-            {item.hideBalance ? (
-              <BlurredBalanceView />
-            ) : (
-              <Text numberOfLines={1} adjustsFontSizeToFit style={styles.balance}>
-                {formatBalance(Number(item.getBalance()), item.getPreferredBalanceUnit(), true)}
-              </Text>
-            )}
-            <Text style={styles.transparentText} />
-            <Text numberOfLines={1} style={styles.latestTxLabel}>
-              {loc.wallets.list_latest_transaction}
-            </Text>
-            <Text numberOfLines={1} style={styles.latestTxValue}>
-              {transactionTimeToReadable(item.getLatestTransactionTime())}
-            </Text>
-          </LinearGradient>
-        </View>
-      </TouchableOpacity>
-    );
-  };
-
-  if (isLoading) {
-    return (
-      <View style={styles.loading}>
-        <ActivityIndicator />
-      </View>
-    );
-  } else if (data.length <= 0) {
-    return (
-      <SafeArea>
-        <View style={styles.noWallets}>
-          <BlueText style={styles.center}>{loc.wallets.select_no_bitcoin}</BlueText>
-          <BlueSpacing20 />
-          <BlueText style={styles.center}>{noWalletExplanationText || loc.wallets.select_no_bitcoin_exp}</BlueText>
-        </View>
-      </SafeArea>
-    );
-  } else {
-    return (
-      <SafeArea>
-        <FlatList extraData={data} data={data} renderItem={renderItem} keyExtractor={(_item, index) => `${index}`} />
-      </SafeArea>
-    );
-  }
-};
-
-export default SelectWallet;