diff --git a/loc/en.json b/loc/en.json index 621477ff7..2ce50c93f 100644 --- a/loc/en.json +++ b/loc/en.json @@ -462,7 +462,8 @@ "warning_do_not_disclose": "Warning! Do not disclose.", "add_ln_wallet_first": "You must first add a Lightning wallet.", "identity_pubkey": "Identity Pubkey", - "xpub_title": "Wallet XPUB" + "xpub_title": "Wallet XPUB", + "search_wallets": "Search Wallets" }, "multisig": { "multisig_vault": "Vault", diff --git a/react-native.config.js b/react-native.config.js index 6eb5d3d93..fb8a00eff 100644 --- a/react-native.config.js +++ b/react-native.config.js @@ -9,4 +9,3 @@ module.exports = { }, }, }; - diff --git a/screen/wallets/list.js b/screen/wallets/list.js index 69d975c78..80ae07a55 100644 --- a/screen/wallets/list.js +++ b/screen/wallets/list.js @@ -51,6 +51,13 @@ const WalletsList = () => { const walletsCount = useRef(wallets.length); const walletActionButtonsRef = useRef(); + // Header Search Bar for Wallets + const [searchTerm, setSearchTerm] = useState(''); + const filteredWallets = wallets.filter(wallet => wallet.getLabel().toLowerCase().includes(searchTerm.trim().toLowerCase())); + // + + const carouselData = searchTerm.trim().length > 0 ? filteredWallets : wallets.concat(false); + const stylesHook = StyleSheet.create({ walletsListWrapper: { backgroundColor: colors.brandingColor, @@ -88,10 +95,19 @@ const WalletsList = () => { } }; + const navigateToSettings = useCallback(() => { + navigate('Settings'); + }, [navigate]); + useLayoutEffect(() => { + const headerSearchBarOptions = + Platform.OS === 'android' + ? null + : { placeholder: loc.wallets.search_wallets, onChangeText: event => setSearchTerm(event.nativeEvent.text) }; setOptions({ navigationBarColor: colors.navigationBarColor, headerShown: !isDesktop, + headerSearchBarOptions, headerStyle: { backgroundColor: colors.customHeader, }, @@ -122,12 +138,7 @@ const WalletsList = () => { ) : null, }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [colors]); - - const navigateToSettings = () => { - navigate('Settings'); - }; + }, [colors, navigateToSettings, setOptions, searchTerm]); /** * Forcefully fetches TXs and balance for ALL wallets. @@ -192,6 +203,11 @@ const WalletsList = () => { } }; + const onNewWalletPress = () => { + setSearchTerm(''); + navigate('AddWalletRoot'); + }; + const renderTransactionListsRow = data => { return ( @@ -203,8 +219,8 @@ const WalletsList = () => { const renderWalletsCarousel = () => { return ( { const renderSectionHeader = section => { switch (section.section.key) { case WalletsListSections.CAROUSEL: - return isLargeScreen ? null : ( - navigate('AddWalletRoot')} /> - ); + return isLargeScreen ? null : ; case WalletsListSections.TRANSACTIONS: return renderListHeaderComponent(); default: