Merge branch 'master' into renovate/react-native-svg-13.x

App.tsx

@@ -9,22 +9,25 @@ import { NavigationProvider } from './components/NavigationProvider';
 import { BlueStorageProvider } from './blue_modules/storage-context';
 import MasterView from './MasterView';
 import { SettingsProvider } from './components/Context/SettingsContext';
+import { LargeScreenProvider } from './components/Context/LargeScreenProvider';
 
 const App = () => {
   const colorScheme = useColorScheme();
 
   return (
-    <NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
+    <LargeScreenProvider>
-      <NavigationProvider>
+      <NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
-        <SafeAreaProvider>
+        <NavigationProvider>
-          <BlueStorageProvider>
+          <SafeAreaProvider>
-            <SettingsProvider>
+            <BlueStorageProvider>
-              <MasterView />
+              <SettingsProvider>
-            </SettingsProvider>
+                <MasterView />
-          </BlueStorageProvider>
+              </SettingsProvider>
-        </SafeAreaProvider>
+            </BlueStorageProvider>
-      </NavigationProvider>
+          </SafeAreaProvider>
-    </NavigationContainer>
+        </NavigationProvider>
+      </NavigationContainer>
+    </LargeScreenProvider>
   );
 };
 

blue_modules/environment.ts

@@ -1,6 +1,7 @@
-import { isTablet, getDeviceType } from 'react-native-device-info';
+import { isTablet as checkIsTablet, getDeviceType } from 'react-native-device-info';
 
+const isTablet: boolean = checkIsTablet();
 const isDesktop: boolean = getDeviceType() === 'Desktop';
+const isHandset: boolean = getDeviceType() === 'Handset';
 
-export const isHandset: boolean = getDeviceType() === 'Handset';
+export { isDesktop, isTablet, isHandset };
-export { isDesktop, isTablet };

components/Context/LargeScreenProvider.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useState, useEffect, useMemo, ReactNode } from 'react';
+import { Dimensions } from 'react-native';
+import { isDesktop, isTablet } from '../../blue_modules/environment';
+
+interface ILargeScreenContext {
+  isLargeScreen: boolean;
+}
+
+export const LargeScreenContext = createContext<ILargeScreenContext | undefined>(undefined);
+
+interface LargeScreenProviderProps {
+  children: ReactNode;
+}
+
+export const LargeScreenProvider: React.FC<LargeScreenProviderProps> = ({ children }) => {
+  const [windowWidth, setWindowWidth] = useState<number>(Dimensions.get('window').width);
+  const screenWidth: number = useMemo(() => Dimensions.get('screen').width, []);
+
+  useEffect(() => {
+    const updateScreenUsage = (): void => {
+      const newWindowWidth = Dimensions.get('window').width;
+      if (newWindowWidth !== windowWidth) {
+        setWindowWidth(newWindowWidth);
+      }
+    };
+
+    const subscription = Dimensions.addEventListener('change', updateScreenUsage);
+    return () => subscription.remove();
+  }, [windowWidth]);
+
+  const isLargeScreen: boolean = useMemo(() => {
+    const halfScreenWidth = windowWidth >= screenWidth / 2;
+    const condition = (isTablet && halfScreenWidth) || isDesktop;
+    console.debug(
+      `LargeScreenProvider.isLargeScreen: width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
+    );
+    return condition;
+  }, [windowWidth, screenWidth]);
+
+  return <LargeScreenContext.Provider value={{ isLargeScreen }}>{children}</LargeScreenContext.Provider>;
+};

components/WalletsCarousel.js

@@ -154,7 +154,7 @@ const iStyles = StyleSheet.create({
   },
 });
 
-export const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelectedWallet, customStyle }) => {
+export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPress, isSelectedWallet, customStyle }) => {
   const scaleValue = new Animated.Value(1.0);
   const { colors } = useTheme();
   const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
@@ -251,7 +251,7 @@ export const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelect
       </Pressable>
     </Animated.View>
   );
-};
+});
 
 WalletCarouselItem.propTypes = {
   item: PropTypes.any,
@@ -292,7 +292,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
         <NewWalletPanel onPress={onPress} />
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [horizontal, selectedWallet, handleLongPress, onPress, preferredFiatCurrency, language],
+    [horizontal, selectedWallet, preferredFiatCurrency, language],
   );
   const flatListRef = useRef();
 

hooks/useIsLargeScreen.ts

@@ -1,41 +1,10 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useContext } from 'react';
-import { Dimensions } from 'react-native';
+import { LargeScreenContext } from '../components/Context/LargeScreenProvider';
-import { isTablet } from 'react-native-device-info';
-import { isDesktop } from '../blue_modules/environment';
 
-// Custom hook to determine if the screen is large
+export const useIsLargeScreen = (): boolean => {
-export const useIsLargeScreen = () => {
+  const context = useContext(LargeScreenContext);
-  const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
+  if (context === undefined) {
-  const screenWidth = useMemo(() => Dimensions.get('screen').width, []);
+    throw new Error('useIsLargeScreen must be used within a LargeScreenProvider');
-
+  }
-  useEffect(() => {
+  return context.isLargeScreen;
-    const updateScreenUsage = () => {
-      const newWindowWidth = Dimensions.get('window').width;
-      if (newWindowWidth !== windowWidth) {
-        console.debug(`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(() => {
-    const isRunningOnTablet = isTablet();
-    const halfScreenWidth = windowWidth >= screenWidth / 2;
-    const condition = (isRunningOnTablet && halfScreenWidth) || isDesktop;
-    console.debug(
-      `Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet()}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
-    );
-    return condition;
-  }, [windowWidth, screenWidth]);
-
-  return isLargeScreen;
 };

navigation/LazyLoadReorderWalletsStack.tsx

@@ -1,10 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-import { LazyLoadingIndicator } from './LazyLoadingIndicator';
-
-const ReorderWallets = lazy(() => import('../screen/wallets/reorderWallets'));
-
-export const ReorderWalletsComponent = () => (
-  <Suspense fallback={<LazyLoadingIndicator />}>
-    <ReorderWallets />
-  </Suspense>
-);

navigation/ReorderWalletsStack.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { ReorderWalletsComponent } from './LazyLoadReorderWalletsStack';
 import { useTheme } from '../components/themes';
 import navigationStyle from '../components/navigationStyle';
 import loc from '../loc';
+import ReorderWallets from '../screen/wallets/reorderWallets';
 
 const Stack = createNativeStackNavigator();
 
@@ -14,7 +14,7 @@ const ReorderWalletsStackRoot = () => {
     <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
       <Stack.Screen
         name="ReorderWalletsScreen"
-        component={ReorderWalletsComponent}
+        component={ReorderWallets}
         options={navigationStyle({
           headerBackVisible: false,
           headerLargeTitle: true,

package-lock.json

@@ -63,7 +63,7 @@
         "react-native-camera-kit": "13.0.0",
         "react-native-crypto": "2.2.0",
         "react-native-default-preference": "1.4.4",
-        "react-native-device-info": "10.13.2",
+        "react-native-device-info": "10.14.0",
         "react-native-document-picker": "https://github.com/BlueWallet/react-native-document-picker#6033c4e1b0dd0a6760b5f5a5a2c3b2e5d07f2ae4",
         "react-native-draggable-flatlist": "github:BlueWallet/react-native-draggable-flatlist#ebfddc4",
         "react-native-elements": "3.4.3",
@@ -99,7 +99,7 @@
         "react-native-watch-connectivity": "1.1.0",
         "react-native-widget-center": "https://github.com/BlueWallet/react-native-widget-center#a128c38",
         "readable-stream": "3.6.2",
-        "realm": "12.8.0",
+        "realm": "12.8.1",
         "rn-ldk": "github:BlueWallet/rn-ldk#v0.8.4",
         "rn-nodeify": "10.3.0",
         "scryptsy": "2.1.0",
@@ -19388,9 +19388,10 @@
       }
     },
     "node_modules/react-native-device-info": {
-      "version": "10.13.2",
+      "version": "10.14.0",
-      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.13.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.14.0.tgz",
-      "integrity": "sha512-5EAls7uvGdZkVfp1KWHsR5BfJJHp/ux64+ZPj1865IcaUyrNQIWYFmrTHwTH8L/NGJUTBrzv+y6WODnN17LSbw==",
+      "integrity": "sha512-9NnTGfhEU4UgQtz4p6COk2Gbqly0dpSWrJtp+dw5rNAi96KtYbaNnO5yoOHDlJ1SVIzh8+hFu3WxVbnWkFU9gA==",
+      "license": "MIT",
       "peerDependencies": {
         "react-native": "*"
       }
@@ -20113,10 +20114,11 @@
       "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
     },
     "node_modules/realm": {
-      "version": "12.8.0",
+      "version": "12.8.1",
-      "resolved": "https://registry.npmjs.org/realm/-/realm-12.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/realm/-/realm-12.8.1.tgz",
-      "integrity": "sha512-U1w5+ncyURQFQTrshoGn3KV+pzR1rQlPT7s3Sw6HPIPVBH80EWU3mirwvqp6RQ+Qi32ctRrBMTNeGd5mzAyiSw==",
+      "integrity": "sha512-+zj2bvU0EACXvPBdvRsp2TybHPqPtftciTXsAlhrTWMiaoqC8FO6lriPbUs/JwsXz1w9otJXl5kXRBghPQHgLQ==",
       "hasInstallScript": true,
+      "license": "apache-2.0",
       "dependencies": {
         "@realm/fetch": "^0.1.1",
         "bson": "^4.7.2",
@@ -37103,9 +37105,9 @@
       "integrity": "sha512-h0vtgiSKws3UmMRJykXAVM4ne1SgfoocUcoBD19ewRpQd6wqurE0HJRQGrSxcHK5LdKE7QPSIB1VX3YGIVS8Jg=="
     },
     "react-native-device-info": {
-      "version": "10.13.2",
+      "version": "10.14.0",
-      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.13.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.14.0.tgz",
-      "integrity": "sha512-5EAls7uvGdZkVfp1KWHsR5BfJJHp/ux64+ZPj1865IcaUyrNQIWYFmrTHwTH8L/NGJUTBrzv+y6WODnN17LSbw=="
+      "integrity": "sha512-9NnTGfhEU4UgQtz4p6COk2Gbqly0dpSWrJtp+dw5rNAi96KtYbaNnO5yoOHDlJ1SVIzh8+hFu3WxVbnWkFU9gA=="
     },
     "react-native-document-picker": {
       "version": "git+ssh://git@github.com/BlueWallet/react-native-document-picker.git#6033c4e1b0dd0a6760b5f5a5a2c3b2e5d07f2ae4",
@@ -37520,9 +37522,9 @@
       "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
     },
     "realm": {
-      "version": "12.8.0",
+      "version": "12.8.1",
-      "resolved": "https://registry.npmjs.org/realm/-/realm-12.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/realm/-/realm-12.8.1.tgz",
-      "integrity": "sha512-U1w5+ncyURQFQTrshoGn3KV+pzR1rQlPT7s3Sw6HPIPVBH80EWU3mirwvqp6RQ+Qi32ctRrBMTNeGd5mzAyiSw==",
+      "integrity": "sha512-+zj2bvU0EACXvPBdvRsp2TybHPqPtftciTXsAlhrTWMiaoqC8FO6lriPbUs/JwsXz1w9otJXl5kXRBghPQHgLQ==",
       "requires": {
         "@realm/fetch": "^0.1.1",
         "bson": "^4.7.2",

package.json

@@ -148,7 +148,7 @@
     "react-native-camera-kit": "13.0.0",
     "react-native-crypto": "2.2.0",
     "react-native-default-preference": "1.4.4",
-    "react-native-device-info": "10.13.2",
+    "react-native-device-info": "10.14.0",
     "react-native-document-picker": "https://github.com/BlueWallet/react-native-document-picker#6033c4e1b0dd0a6760b5f5a5a2c3b2e5d07f2ae4",
     "react-native-draggable-flatlist": "github:BlueWallet/react-native-draggable-flatlist#ebfddc4",
     "react-native-elements": "3.4.3",
@@ -184,7 +184,7 @@
     "react-native-watch-connectivity": "1.1.0",
     "react-native-widget-center": "https://github.com/BlueWallet/react-native-widget-center#a128c38",
     "readable-stream": "3.6.2",
-    "realm": "12.8.0",
+    "realm": "12.8.1",
     "rn-ldk": "github:BlueWallet/rn-ldk#v0.8.4",
     "rn-nodeify": "10.3.0",
     "scryptsy": "2.1.0",

screen/send/Broadcast.tsx

@@ -21,7 +21,7 @@ import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/h
 import SafeArea from '../../components/SafeArea';
 import presentAlert from '../../components/Alert';
 import { scanQrHelper } from '../../helpers/scan-qr';
-import { isTablet } from 'react-native-device-info';
+import { isTablet } from '../../blue_modules/environment';
 
 const BROADCAST_RESULT = Object.freeze({
   none: 'Input transaction hex',
@@ -117,7 +117,7 @@ const Broadcast: React.FC = () => {
 
   return (
     <SafeArea>
-      <KeyboardAvoidingView enabled={!isTablet()} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
+      <KeyboardAvoidingView enabled={!isTablet} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
         <View style={styles.wrapper} testID="BroadcastView">
           {BROADCAST_RESULT.success !== broadcastResult && (
             <BlueCard style={styles.mainCard}>

tests/setup.js

@@ -59,6 +59,7 @@ jest.mock('react-native-device-info', () => {
     getDeviceType: jest.fn().mockReturnValue(false),
     hasGmsSync: jest.fn().mockReturnValue(true),
     hasHmsSync: jest.fn().mockReturnValue(false),
+    isTablet: jest.fn().mockReturnValue(false),
   };
 });