Merge pull request BlueWallet#6413 from BlueWallet/listtsx

REF: WalletsList TSX

Navigation.tsx

@@ -1,7 +1,7 @@
 import { DrawerNavigationOptions, createDrawerNavigator } from '@react-navigation/drawer';
 import { NativeStackNavigationOptions, createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useContext, useMemo } from 'react';
-import { Dimensions, I18nManager, Platform, useWindowDimensions } from 'react-native';
+import { I18nManager, Platform } from 'react-native';
 
 import PlausibleDeniability from './screen/PlausibleDeniability';
 import Selftest from './screen/selftest';
@@ -33,7 +33,7 @@ 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/list';
+import WalletsList from './screen/wallets/WalletsList';
 import PleaseBackup from './screen/wallets/pleaseBackup';
 import PleaseBackupLNDHub from './screen/wallets/pleaseBackupLNDHub';
 import PleaseBackupLdk from './screen/wallets/pleaseBackupLdk';
@@ -67,7 +67,7 @@ import PsbtWithHardwareWallet from './screen/send/psbtWithHardwareWallet';
 import Success from './screen/send/success';
 
 import UnlockWith from './screen/UnlockWith';
-import { isDesktop, isHandset, isTablet } from './blue_modules/environment';
+import { isDesktop, isHandset } from './blue_modules/environment';
 import navigationStyle from './components/navigationStyle';
 import { useTheme } from './components/themes';
 import loc from './loc';
@@ -88,6 +88,7 @@ import LdkViewLogs from './screen/wallets/ldkViewLogs';
 import PaymentCode from './screen/wallets/paymentCode';
 import PaymentCodesList from './screen/wallets/paymentCodesList';
 import { BlueStorageContext } from './blue_modules/storage-context';
+import { useIsLargeScreen } from './hooks/useIsLargeScreen';
 
 const WalletsStack = createNativeStackNavigator();
 
@@ -96,7 +97,11 @@ const WalletsRoot = () => {
 
   return (
     <WalletsStack.Navigator screenOptions={{ headerShadowVisible: false }}>
-      <WalletsStack.Screen name="WalletsList" component={WalletsList} options={WalletsList.navigationOptions(theme)} />
+      <WalletsStack.Screen
+        name="WalletsList"
+        component={WalletsList}
+        options={navigationStyle({ title: '', headerBackTitle: loc.wallets.list_title })(theme)}
+      />
       <WalletsStack.Screen name="WalletTransactions" component={WalletTransactions} options={WalletTransactions.navigationOptions(theme)} />
       <WalletsStack.Screen name="LdkOpenChannel" component={LdkOpenChannel} options={LdkOpenChannel.navigationOptions(theme)} />
       <WalletsStack.Screen name="LdkInfo" component={LdkInfo} options={LdkInfo.navigationOptions(theme)} />
@@ -403,10 +408,7 @@ const DrawerListContent = (props: any) => {
 
 const Drawer = createDrawerNavigator();
 const DrawerRoot = () => {
-  const dimensions = useWindowDimensions();
-  const isLargeScreen = useMemo(() => {
-    return Platform.OS === 'android' ? isTablet() : (dimensions.width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
-  }, [dimensions.width]);
+  const isLargeScreen = useIsLargeScreen();
 
   const drawerStyle: DrawerNavigationOptions = useMemo(
     () => ({

components/FloatButtons.tsx

@@ -128,6 +128,8 @@ interface FButtonProps {
   first?: boolean;
   last?: boolean;
   disabled?: boolean;
+  onPress: () => void;
+  onLongPress: () => void;
 }
 
 export const FButton = ({ text, icon, width, first, last, ...props }: FButtonProps) => {

components/WalletsCarousel.js

@@ -10,7 +10,6 @@ import {
   TouchableOpacity,
   useWindowDimensions,
   View,
-  Dimensions,
   FlatList,
   Pressable,
 } from 'react-native';
@@ -21,9 +20,9 @@ import { LightningCustodianWallet, LightningLdkWallet, MultisigHDWallet } from '
 import WalletGradient from '../class/wallet-gradient';
 import { BlueSpacing10 } from '../BlueComponents';
 import { BlueStorageContext, WalletTransactionsStatus } from '../blue_modules/storage-context';
-import { isTablet, isDesktop } from '../blue_modules/environment';
 import { useTheme } from './themes';
 import { BlurredBalanceView } from './BlurredBalanceView';
+import { useIsLargeScreen } from '../hooks/useIsLargeScreen';
 import { useSettings } from './Context/SettingsContext';
 
 const nStyles = StyleSheet.create({
@@ -57,7 +56,7 @@ const NewWalletPanel = ({ onPress }) => {
   const { colors } = useTheme();
   const { width } = useWindowDimensions();
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
-  const isLargeScreen = Platform.OS === 'android' ? isTablet() : (width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
+  const isLargeScreen = useIsLargeScreen();
   const nStylesHooks = StyleSheet.create({
     container: isLargeScreen
       ? {
@@ -161,7 +160,7 @@ export const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelect
   const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
   const { width } = useWindowDimensions();
   const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82;
-  const isLargeScreen = Platform.OS === 'android' ? isTablet() : (width >= Dimensions.get('screen').width / 2 && isTablet()) || isDesktop;
+  const isLargeScreen = useIsLargeScreen();
   const onPressedIn = () => {
     Animated.spring(scaleValue, { duration: 50, useNativeDriver: true, toValue: 0.9 }).start();
   };

hooks/useIsLargeScreen.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Dimensions } from 'react-native';
+import { isTablet } from 'react-native-device-info';
+
+// Custom hook to determine if the screen is large
+export const useIsLargeScreen = () => {
+  const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
+  const screenWidth = useMemo(() => Dimensions.get('screen').width, []);
+
+  useEffect(() => {
+    const updateScreenUsage = () => {
+      const newWindowWidth = Dimensions.get('window').width;
+      if (newWindowWidth !== windowWidth) {
+        console.log(`Window width changed: ${newWindowWidth}`);
+        setWindowWidth(newWindowWidth);
+      }
+    };
+
+    // Add event listener for dimension changes
+    const subscription = Dimensions.addEventListener('change', updateScreenUsage);
+
+    // Cleanup function to remove the event listener
+    return () => {
+      subscription.remove();
+    };
+  }, [windowWidth]);
+
+  // Determine if the window width is at least half of the screen width
+  const isLargeScreen = useMemo(() => {
+    // we dont want to return true on phones. only on tablets for now
+    const isRunningOnTablet = isTablet();
+    const halfScreenWidth = windowWidth >= screenWidth / 2;
+    const condition = isRunningOnTablet && halfScreenWidth;
+    console.log(
+      `Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet or desktop: ${isRunningOnTablet}, Is large screen: ${condition}`,
+    );
+    return condition;
+  }, [windowWidth, screenWidth]);
+
+  return isLargeScreen;
+};