feat(suite-native): offline header shows that app is offline

suite-common/icons/src/icons.ts

@@ -117,6 +117,7 @@ export const icons = {
     warningOctagon: require('../assets/icons/warningOctagon.svg'),
     warningTriangle: require('../assets/icons/warningTriangle.svg'),
     warningTriangleLight: require('../assets/icons/warningTriangleLight.svg'),
+    wifiSlash: require('../assets/icons/wifiSlash.svg'),
 } as const;
 export type IconName = keyof typeof icons;
 

suite-native/app/e2e/utils.ts

@@ -4,7 +4,7 @@ import { expect as detoxExpect } from 'detox';
 const APP_LAUNCH_ARGS = {
     // Do not synchronize communication with the trezor bridge and metro server running on localhost. Since the trezor
     // bridge is exchanging messages with the app all the time, the test runner would wait forever otherwise.
-    detoxURLBlacklistRegex: '\\("^.*127.0.0.1.*",".*localhost.*"\\)',
+    detoxURLBlacklistRegex: '\\("^.*127.0.0.1.*",".*localhost.*","^*clients3\\.google\\.com*"\\)',
 };
 
 const platform = device.getPlatform();

suite-native/app/package.json

@@ -20,6 +20,7 @@
         "reverse-ports": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:21325 tcp:21325 && adb reverse tcp:19121 tcp:19121"
     },
     "dependencies": {
+        "@react-native-community/netinfo": "11.3.2",
         "@react-native/metro-config": "0.74.83",
         "@react-navigation/bottom-tabs": "6.5.20",
         "@react-navigation/native": "6.1.17",
@@ -44,6 +45,7 @@
         "@suite-native/biometrics": "workspace:*",
         "@suite-native/coin-enabling": "workspace:*",
         "@suite-native/config": "workspace:*",
+        "@suite-native/connection-status": "workspace:*",
         "@suite-native/device": "workspace:*",
         "@suite-native/device-authorization": "workspace:*",
         "@suite-native/feature-flags": "workspace:*",

suite-native/app/src/App.tsx

@@ -10,6 +10,7 @@ import { selectIsAppReady, selectIsConnectInitialized, StoreProvider } from '@su
 import { FormatterProvider } from '@suite-common/formatters';
 import { NavigationContainerWithAnalytics } from '@suite-native/navigation';
 import { FeatureMessageScreen, MessageSystemBannerRenderer } from '@suite-native/message-system';
+import { OfflineBanner } from '@suite-native/connection-status';
 import { IntlProvider } from '@suite-native/intl';
 import { isDebugEnv } from '@suite-native/config';
 
@@ -57,6 +58,7 @@ const AppComponent = () => {
 
     return (
         <FormatterProvider config={formattersConfig}>
+            <OfflineBanner />
             <MessageSystemBannerRenderer />
             <RootStackNavigator />
             <ModalsRenderer />

suite-native/app/tsconfig.json

@@ -34,6 +34,7 @@
         { "path": "../biometrics" },
         { "path": "../coin-enabling" },
         { "path": "../config" },
+        { "path": "../connection-status" },
         { "path": "../device" },
         { "path": "../device-authorization" },
         { "path": "../feature-flags" },

suite-native/connection-status/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@suite-native/connection-status",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
+        "depcheck": "yarn g:depcheck",
+        "type-check": "yarn g:tsc --build"
+    },
+    "dependencies": {
+        "@react-native-community/netinfo": "11.3.2",
+        "@suite-common/icons": "workspace:*",
+        "@suite-native/atoms": "workspace:*",
+        "@suite-native/intl": "workspace:*",
+        "@suite-native/settings": "workspace:*",
+        "@trezor/styles": "workspace:*",
+        "react": "18.2.0",
+        "react-native": "0.74.1",
+        "react-native-safe-area-context": "4.10.3",
+        "react-redux": "8.0.7"
+    }
+}

suite-native/connection-status/src/OfflineBanner.tsx

@@ -0,0 +1,45 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { View } from 'react-native';
+
+import { Icon } from '@suite-common/icons';
+import { Text, HStack } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+import { useIsOfflineBannerVisible } from './useIsOfflineBannerVisible';
+
+const containerStyle = prepareNativeStyle(utils => ({
+    backgroundColor: utils.colors.backgroundAlertYellowBold,
+    alignItems: 'center',
+}));
+
+const contentStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
+    (utils, { topSafeAreaInset }) => ({
+        marginTop: topSafeAreaInset,
+        paddingTop: utils.spacings.small,
+        paddingBottom: 12,
+        alignItems: 'center',
+    }),
+);
+
+export const OfflineBanner = () => {
+    const { applyStyle } = useNativeStyles();
+    const { top: topSafeAreaInset } = useSafeAreaInsets();
+
+    const isOfflineBannerVisible = useIsOfflineBannerVisible();
+
+    if (!isOfflineBannerVisible) {
+        return null;
+    }
+
+    return (
+        <View style={applyStyle(containerStyle)}>
+            <HStack style={applyStyle(contentStyle, { topSafeAreaInset })}>
+                <Icon name="wifiSlash" size="mediumLarge" />
+                <Text>
+                    <Translation id="generic.offline" />
+                </Text>
+            </HStack>
+        </View>
+    );
+};

suite-native/connection-status/src/index.ts

@@ -0,0 +1,3 @@
+export * from './OfflineBanner';
+export * from './useOfflineBannerAwareSafeAreaInsets';
+export * from './useIsOfflineBannerVisible';

suite-native/connection-status/src/useIsOfflineBannerVisible.tsx

@@ -0,0 +1,12 @@
+import { useSelector } from 'react-redux';
+
+import { useNetInfo } from '@react-native-community/netinfo';
+
+import { selectIsOnboardingFinished } from '@suite-native/settings';
+
+export const useIsOfflineBannerVisible = () => {
+    const isOnboardingFinished = useSelector(selectIsOnboardingFinished);
+    const { isConnected } = useNetInfo();
+
+    return !isConnected && isOnboardingFinished;
+};

suite-native/connection-status/src/useOfflineBannerAwareSafeAreaInsets.tsx

@@ -0,0 +1,12 @@
+import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useIsOfflineBannerVisible } from './useIsOfflineBannerVisible';
+
+// If offline banner is visible, return 0 for top inset, otherwise return the top inset from safe area insets
+// this is because the offline banner is displayed on top of the screen and we don't want to add any top padding
+export const useOfflineBannerAwareSafeAreaInsets = () => {
+    const { top, ...rest } = useSafeAreaInsets();
+    const isOfflineBannerVisible = useIsOfflineBannerVisible();
+
+    return { top: isOfflineBannerVisible ? 0 : top, ...rest } as EdgeInsets;
+};

suite-native/connection-status/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": [
+        { "path": "../../suite-common/icons" },
+        { "path": "../atoms" },
+        { "path": "../intl" },
+        { "path": "../settings" },
+        { "path": "../../packages/styles" }
+    ],
+    "include": [".", "**/*.json"]
+}

suite-native/intl/src/en.ts

@@ -19,6 +19,7 @@ export const en = {
         unknownError: 'Something went wrong',
         default: 'Default',
         orSeparator: 'OR',
+        offline: "You're offline.",
     },
     messageSystem: {
         killswitch: {

suite-native/message-system/package.json

@@ -19,14 +19,14 @@
         "@suite-common/suite-types": "workspace:*",
         "@suite-common/wallet-core": "workspace:*",
         "@suite-native/atoms": "workspace:*",
+        "@suite-native/connection-status": "workspace:*",
         "@suite-native/intl": "workspace:*",
         "@suite-native/link": "workspace:*",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
         "react": "18.2.0",
         "react-native": "0.74.1",
         "react-native-reanimated": "3.11.0",
-        "react-native-safe-area-context": "4.10.3",
         "react-redux": "8.0.7"
     }
 }

suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx

@@ -1,11 +1,11 @@
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import { A } from '@mobily/ts-belt';
 
 import { VStack } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { selectActiveBannerMessages } from '@suite-common/message-system';
+import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 
 import { MessageBanner } from './MessageBanner';
 
@@ -17,7 +17,7 @@ const messageBannerContainerStyle = prepareNativeStyle<{ topSafeAreaInset: numbe
 
 export const MessageSystemBannerRenderer = () => {
     const { applyStyle } = useNativeStyles();
-    const { top: topSafeAreaInset } = useSafeAreaInsets();
+    const { top: topSafeAreaInset } = useOfflineBannerAwareSafeAreaInsets();
 
     const activeBannerMessages = useSelector(selectActiveBannerMessages);
     const topInset = A.isNotEmpty(activeBannerMessages) ? topSafeAreaInset : 0;

suite-native/message-system/tsconfig.json

@@ -16,6 +16,7 @@
             "path": "../../suite-common/wallet-core"
         },
         { "path": "../atoms" },
+        { "path": "../connection-status" },
         { "path": "../intl" },
         { "path": "../link" },
         { "path": "../../packages/styles" },

suite-native/module-add-accounts/package.json

@@ -22,6 +22,7 @@
         "@suite-native/accounts": "workspace:*",
         "@suite-native/alerts": "workspace:*",
         "@suite-native/atoms": "workspace:*",
+        "@suite-native/connection-status": "workspace:*",
         "@suite-native/discovery": "workspace:*",
         "@suite-native/intl": "workspace:*",
         "@suite-native/link": "workspace:*",

suite-native/module-add-accounts/src/screens/SelectAccountTypeScreen.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { View } from 'react-native';
 
 import { LinearGradient } from 'expo-linear-gradient';
@@ -24,6 +23,7 @@ import {
 } from '@suite-native/atoms';
 import { useTranslate, Translation, TxKeyPath } from '@suite-native/intl';
 import { useOpenLink } from '@suite-native/link';
+import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 
 import { useAddCoinAccount, accountTypeTranslationKeys } from '../hooks/useAddCoinAccount';
 
@@ -89,7 +89,7 @@ export const SelectAccountTypeScreen = ({
     const { accountType: defaultType, networkSymbol, flowType } = route.params;
     const { translate } = useTranslate();
     const openLink = useOpenLink();
-    const insets = useSafeAreaInsets();
+    const insets = useOfflineBannerAwareSafeAreaInsets();
     const { applyStyle, utils } = useNativeStyles();
 
     const { getAvailableAccountTypesForNetworkSymbol, addCoinAccount } = useAddCoinAccount();

suite-native/module-add-accounts/tsconfig.json

@@ -17,6 +17,7 @@
         { "path": "../accounts" },
         { "path": "../alerts" },
         { "path": "../atoms" },
+        { "path": "../connection-status" },
         { "path": "../discovery" },
         { "path": "../intl" },
         { "path": "../link" },

suite-native/navigation/package.json

@@ -22,6 +22,7 @@
         "@suite-common/wallet-types": "workspace:*",
         "@suite-native/analytics": "workspace:*",
         "@suite-native/atoms": "workspace:*",
+        "@suite-native/connection-status": "workspace:*",
         "@trezor/connect": "workspace:*",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",

suite-native/navigation/src/components/Screen.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useContext, ReactNode } from 'react';
 import { Platform, ScrollViewProps, StatusBar, View } from 'react-native';
-import { useSafeAreaInsets, EdgeInsets } from 'react-native-safe-area-context';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import * as SystemUI from 'expo-system-ui';
 import * as NavigationBar from 'expo-navigation-bar';
 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
 import { useRoute } from '@react-navigation/native';
 
+import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Color, nativeSpacings } from '@trezor/theme';
 import { selectIsAnyBannerMessageActive } from '@suite-common/message-system';
@@ -114,7 +115,7 @@ export const Screen = ({
     } = useNativeStyles();
 
     const hasPaddingBottom = !useContext(BottomTabBarHeightContext) && hasBottomInset;
-    const insets = useSafeAreaInsets();
+    const insets = useOfflineBannerAwareSafeAreaInsets();
     const backgroundCSSColor = colors[backgroundColor];
     const barStyle = isDarkColor(backgroundCSSColor) ? 'light-content' : 'dark-content';
 

suite-native/navigation/tsconfig.json

@@ -14,6 +14,7 @@
         },
         { "path": "../analytics" },
         { "path": "../atoms" },
+        { "path": "../connection-status" },
         { "path": "../../packages/connect" },
         { "path": "../../packages/styles" },
         { "path": "../../packages/theme" }

suite-native/notifications/package.json

@@ -18,6 +18,7 @@
         "@suite-common/wallet-core": "workspace:*",
         "@suite-common/wallet-types": "workspace:*",
         "@suite-native/atoms": "workspace:*",
+        "@suite-native/connection-status": "workspace:*",
         "@suite-native/formatters": "workspace:*",
         "@suite-native/navigation": "workspace:*",
         "@suite-native/theme": "workspace:*",
@@ -27,7 +28,6 @@
         "react-native": "0.74.1",
         "react-native-gesture-handler": "2.16.2",
         "react-native-reanimated": "3.11.0",
-        "react-native-safe-area-context": "4.10.3",
         "react-redux": "8.0.7"
     }
 }

suite-native/notifications/src/components/NotificationRenderer.tsx

@@ -1,9 +1,9 @@
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import { Box, VStack } from '@suite-native/atoms';
 import { selectOpenedTransactionNotifications } from '@suite-common/toast-notifications';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 
 import { TransactionNotification } from './TransactionNotification';
 
@@ -19,7 +19,7 @@ const notificationContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number
 
 export const NotificationRenderer = () => {
     const { applyStyle } = useNativeStyles();
-    const { top: topSafeAreaInset } = useSafeAreaInsets();
+    const { top: topSafeAreaInset } = useOfflineBannerAwareSafeAreaInsets();
     const transactionNotifications = useSelector(selectOpenedTransactionNotifications);
 
     return (

suite-native/notifications/tsconfig.json

@@ -16,6 +16,7 @@
             "path": "../../suite-common/wallet-types"
         },
         { "path": "../atoms" },
+        { "path": "../connection-status" },
         { "path": "../formatters" },
         { "path": "../navigation" },
         { "path": "../theme" },

suite-native/toasts/package.json

@@ -14,11 +14,11 @@
         "@mobily/ts-belt": "^3.13.1",
         "@suite-common/icons": "workspace:*",
         "@suite-native/atoms": "workspace:*",
+        "@suite-native/connection-status": "workspace:*",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
         "jotai": "1.9.1",
         "react": "18.2.0",
-        "react-native-reanimated": "3.11.0",
-        "react-native-safe-area-context": "4.10.3"
+        "react-native-reanimated": "3.11.0"
     }
 }

suite-native/toasts/src/components/ToastRenderer.tsx

@@ -1,7 +1,6 @@
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
 import { useAtomValue } from 'jotai';
 
+import { useOfflineBannerAwareSafeAreaInsets } from '@suite-native/connection-status';
 import { Box, VStack } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -20,7 +19,7 @@ const toastsContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
 
 export const ToastRenderer = () => {
     const { applyStyle } = useNativeStyles();
-    const { top: topSafeAreaInset } = useSafeAreaInsets();
+    const { top: topSafeAreaInset } = useOfflineBannerAwareSafeAreaInsets();
     const toasts = useAtomValue(toastsAtom);
 
     return (

suite-native/toasts/tsconfig.json

@@ -4,6 +4,7 @@
     "references": [
         { "path": "../../suite-common/icons" },
         { "path": "../atoms" },
+        { "path": "../connection-status" },
         { "path": "../../packages/styles" },
         { "path": "../../packages/theme" }
     ]