mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-22 15:04:50 +01:00
Merge branch 'master' into renovate/react-native-svg-13.x
This commit is contained in:
commit
efb0ad3132
11 changed files with 93 additions and 86 deletions
25
App.tsx
25
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}>
|
||||
<NavigationProvider>
|
||||
<SafeAreaProvider>
|
||||
<BlueStorageProvider>
|
||||
<SettingsProvider>
|
||||
<MasterView />
|
||||
</SettingsProvider>
|
||||
</BlueStorageProvider>
|
||||
</SafeAreaProvider>
|
||||
</NavigationProvider>
|
||||
</NavigationContainer>
|
||||
<LargeScreenProvider>
|
||||
<NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
|
||||
<NavigationProvider>
|
||||
<SafeAreaProvider>
|
||||
<BlueStorageProvider>
|
||||
<SettingsProvider>
|
||||
<MasterView />
|
||||
</SettingsProvider>
|
||||
</BlueStorageProvider>
|
||||
</SafeAreaProvider>
|
||||
</NavigationProvider>
|
||||
</NavigationContainer>
|
||||
</LargeScreenProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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 };
|
||||
export { isDesktop, isTablet, isHandset };
|
||||
|
|
41
components/Context/LargeScreenProvider.tsx
Normal file
41
components/Context/LargeScreenProvider.tsx
Normal file
|
@ -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>;
|
||||
};
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -1,41 +1,10 @@
|
|||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { Dimensions } from 'react-native';
|
||||
import { isTablet } from 'react-native-device-info';
|
||||
import { isDesktop } from '../blue_modules/environment';
|
||||
import { useContext } from 'react';
|
||||
import { LargeScreenContext } from '../components/Context/LargeScreenProvider';
|
||||
|
||||
// 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.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;
|
||||
export const useIsLargeScreen = (): boolean => {
|
||||
const context = useContext(LargeScreenContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useIsLargeScreen must be used within a LargeScreenProvider');
|
||||
}
|
||||
return context.isLargeScreen;
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
|
@ -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,
|
||||
|
|
30
package-lock.json
generated
30
package-lock.json
generated
|
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.13.2.tgz",
|
||||
"integrity": "sha512-5EAls7uvGdZkVfp1KWHsR5BfJJHp/ux64+ZPj1865IcaUyrNQIWYFmrTHwTH8L/NGJUTBrzv+y6WODnN17LSbw==",
|
||||
"version": "10.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.14.0.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.0.tgz",
|
||||
"integrity": "sha512-U1w5+ncyURQFQTrshoGn3KV+pzR1rQlPT7s3Sw6HPIPVBH80EWU3mirwvqp6RQ+Qi32ctRrBMTNeGd5mzAyiSw==",
|
||||
"version": "12.8.1",
|
||||
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.1.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.13.2.tgz",
|
||||
"integrity": "sha512-5EAls7uvGdZkVfp1KWHsR5BfJJHp/ux64+ZPj1865IcaUyrNQIWYFmrTHwTH8L/NGJUTBrzv+y6WODnN17LSbw=="
|
||||
"version": "10.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.14.0.tgz",
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.0.tgz",
|
||||
"integrity": "sha512-U1w5+ncyURQFQTrshoGn3KV+pzR1rQlPT7s3Sw6HPIPVBH80EWU3mirwvqp6RQ+Qi32ctRrBMTNeGd5mzAyiSw==",
|
||||
"version": "12.8.1",
|
||||
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.1.tgz",
|
||||
"integrity": "sha512-+zj2bvU0EACXvPBdvRsp2TybHPqPtftciTXsAlhrTWMiaoqC8FO6lriPbUs/JwsXz1w9otJXl5kXRBghPQHgLQ==",
|
||||
"requires": {
|
||||
"@realm/fetch": "^0.1.1",
|
||||
"bson": "^4.7.2",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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),
|
||||
};
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue