From 959ba17fd51d76bed3a10520c83c957500200c40 Mon Sep 17 00:00:00 2001 From: Marcos Rodriguez Velez Date: Sat, 8 Jun 2024 12:01:56 -0400 Subject: [PATCH] REF: SelectWallet to TSX --- NavigationService.ts | 6 + components/WalletsCarousel.js | 5 +- navigation/DetailViewScreensStack.tsx | 2 +- navigation/LazyLoadAztecoRedeemStack.tsx | 2 +- navigation/LazyLoadLDKOpenChannelStack.tsx | 2 +- navigation/LazyLoadLNDCreateInvoiceStack.tsx | 2 +- navigation/LazyLoadScanLndInvoiceStack.tsx | 2 +- navigation/LazyLoadSendDetailsStack.tsx | 2 +- navigation/SendDetailsStackParamList.ts | 1 - screen/send/SendDetails.tsx | 15 +- screen/wallets/SelectWallet.tsx | 137 ++++++++++++ screen/wallets/selectWallet.js | 213 ------------------- 12 files changed, 161 insertions(+), 228 deletions(-) create mode 100644 screen/wallets/SelectWallet.tsx delete mode 100644 screen/wallets/selectWallet.js diff --git a/NavigationService.ts b/NavigationService.ts index 838b6a083..9d9a0d791 100644 --- a/NavigationService.ts +++ b/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()); + } +} diff --git a/components/WalletsCarousel.js b/components/WalletsCarousel.js index a8dda48a9..ae08cfc10 100644 --- a/components/WalletsCarousel.js +++ b/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 ( @@ -287,6 +287,7 @@ const WalletsCarousel = forwardRef((props, ref) => { index={index} handleLongPress={handleLongPress} onPress={onPress} + horizontal={horizontal} /> ) : ( diff --git a/navigation/DetailViewScreensStack.tsx b/navigation/DetailViewScreensStack.tsx index 4cfff6e7d..cef31d438 100644 --- a/navigation/DetailViewScreensStack.tsx +++ b/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 diff --git a/navigation/LazyLoadAztecoRedeemStack.tsx b/navigation/LazyLoadAztecoRedeemStack.tsx index 2db322642..c91074598 100644 --- a/navigation/LazyLoadAztecoRedeemStack.tsx +++ b/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 = () => ( }> diff --git a/navigation/LazyLoadLDKOpenChannelStack.tsx b/navigation/LazyLoadLDKOpenChannelStack.tsx index a66bad51a..c3425fe8e 100644 --- a/navigation/LazyLoadLDKOpenChannelStack.tsx +++ b/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')); diff --git a/navigation/LazyLoadLNDCreateInvoiceStack.tsx b/navigation/LazyLoadLNDCreateInvoiceStack.tsx index 109e91f3e..90a58d27c 100644 --- a/navigation/LazyLoadLNDCreateInvoiceStack.tsx +++ b/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')); diff --git a/navigation/LazyLoadScanLndInvoiceStack.tsx b/navigation/LazyLoadScanLndInvoiceStack.tsx index f1ef85224..fcdacd8b4 100644 --- a/navigation/LazyLoadScanLndInvoiceStack.tsx +++ b/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')); diff --git a/navigation/LazyLoadSendDetailsStack.tsx b/navigation/LazyLoadSendDetailsStack.tsx index e26984306..df62bcbe6 100644 --- a/navigation/LazyLoadSendDetailsStack.tsx +++ b/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 diff --git a/navigation/SendDetailsStackParamList.ts b/navigation/SendDetailsStackParamList.ts index d387b9f76..75d24575b 100644 --- a/navigation/SendDetailsStackParamList.ts +++ b/navigation/SendDetailsStackParamList.ts @@ -63,7 +63,6 @@ export type SendDetailsStackParamList = { txid?: string; }; SelectWallet: { - onWalletSelect: (wallet: TWallet) => void; chainType: Chain; }; CoinControl: { diff --git a/screen/send/SendDetails.tsx b/screen/send/SendDetails.tsx index 5f79b9407..b1619f2ee 100644 --- a/screen/send/SendDetails.tsx +++ b/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 = () => { navigation.navigate('SelectWallet', { onWalletSelect, chainType: Chain.ONCHAIN })} + onPress={() => navigation.navigate('SelectWallet', { chainType: Chain.ONCHAIN })} > {loc.wallets.select_wallet.toLowerCase()} @@ -1364,7 +1367,7 @@ const SendDetails = () => { navigation.navigate('SelectWallet', { onWalletSelect, chainType: Chain.ONCHAIN })} + onPress={() => navigation.navigate('SelectWallet', { chainType: Chain.ONCHAIN })} disabled={!isEditable || isLoading} > {wallet?.getLabel()} diff --git a/screen/wallets/SelectWallet.tsx b/screen/wallets/SelectWallet.tsx new file mode 100644 index 000000000..0cdab8552 --- /dev/null +++ b/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(); + 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 ( + + + + ); + } else if (data.length <= 0) { + return ( + + + {loc.wallets.select_no_bitcoin} + + {noWalletExplanationText || loc.wallets.select_no_bitcoin_exp} + + + ); + } else { + return ( + + ); + } +}; + +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', + }, +}); diff --git a/screen/wallets/selectWallet.js b/screen/wallets/selectWallet.js deleted file mode 100644 index 78f67358a..000000000 --- a/screen/wallets/selectWallet.js +++ /dev/null @@ -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: () => ( - { - getParent().pop(); - }} - testID="NavigationCloseButton" - > - - - ), - } - : {}, - ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [closeImage, isModal, styles.button]); - - const renderItem = ({ item }) => { - return ( - { - triggerHapticFeedback(HapticFeedbackTypes.Selection); - onWalletSelect(item, { navigation: { pop, navigate } }); - }} - accessibilityRole="button" - > - - - { - 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} - /> - - - - {item.getLabel()} - - {item.hideBalance ? ( - - ) : ( - - {formatBalance(Number(item.getBalance()), item.getPreferredBalanceUnit(), true)} - - )} - - - {loc.wallets.list_latest_transaction} - - - {transactionTimeToReadable(item.getLatestTransactionTime())} - - - - - ); - }; - - if (isLoading) { - return ( - - - - ); - } else if (data.length <= 0) { - return ( - - - {loc.wallets.select_no_bitcoin} - - {noWalletExplanationText || loc.wallets.select_no_bitcoin_exp} - - - ); - } else { - return ( - - `${index}`} /> - - ); - } -}; - -export default SelectWallet;