feat(suite-native): modify OfflineBanner to also display FW revision offline error

Author: Lemonexe

suite-native/connection-status/package.json

@@ -12,6 +12,7 @@
     "dependencies": {
         "@react-native-community/netinfo": "^11.4.1",
         "@suite-native/atoms": "workspace:*",
+        "@suite-native/device": "workspace:*",
         "@suite-native/icons": "workspace:*",
         "@suite-native/intl": "workspace:*",
         "@suite-native/settings": "workspace:*",

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

@@ -1,23 +1,23 @@
 import { View } from 'react-native';
 
-import { HStack, Text } from '@suite-native/atoms';
+import { HStack, Text, VStack } from '@suite-native/atoms';
 import { Icon } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
+import { useIsFwRevisionCheckOfflineError } from './useIsFwRevisionCheckOfflineError';
 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.sp8,
-        paddingBottom: utils.spacings.sp12,
-        alignItems: 'center',
+        paddingBottom: utils.spacings.sp16,
+        paddingHorizontal: utils.spacings.sp16,
     }),
 );
 
@@ -27,19 +27,31 @@ export const OfflineBanner = ({ topSafeAreaInset }: OfflineBannerProps) => {
     const { applyStyle } = useNativeStyles();
 
     const isOfflineBannerVisible = useIsOfflineBannerVisible();
+    const isFwRevisionCheckOfflineError = useIsFwRevisionCheckOfflineError();
 
     if (!isOfflineBannerVisible) {
         return null;
     }
 
     return (
         <View style={applyStyle(containerStyle)}>
-            <HStack style={applyStyle(contentStyle, { topSafeAreaInset })}>
-                <Icon name="wifiSlash" size="mediumLarge" />
-                <Text>
-                    <Translation id="generic.banners.offline.title" />
-                </Text>
-            </HStack>
+            <VStack
+                spacing="sp2"
+                alignItems="center"
+                style={applyStyle(contentStyle, { topSafeAreaInset })}
+            >
+                <HStack alignItems="center">
+                    <Icon name="wifiSlash" size="mediumLarge" />
+                    <Text variant="highlight">
+                        <Translation id="generic.banners.offline.title" />
+                    </Text>
+                </HStack>
+                {isFwRevisionCheckOfflineError && (
+                    <Text textAlign="center">
+                        <Translation id="generic.banners.offline.fwRevisionCheckOfflineError" />
+                    </Text>
+                )}
+            </VStack>
         </View>
     );
 };

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

@@ -0,0 +1,9 @@
+import { useSelector } from 'react-redux';
+
+import { selectFirmwareRevisionCheckErrorIfEnabled } from '@suite-native/device';
+
+export const useIsFwRevisionCheckOfflineError = () => {
+    const firmwareRevisionCheckError = useSelector(selectFirmwareRevisionCheckErrorIfEnabled);
+
+    return firmwareRevisionCheckError === 'cannot-perform-check-offline';
+};

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

@@ -4,11 +4,13 @@ import { useNetInfo } from '@react-native-community/netinfo';
 
 import { selectIsOnboardingFinished } from '@suite-native/settings';
 
+import { useIsFwRevisionCheckOfflineError } from './useIsFwRevisionCheckOfflineError';
+
 export const useIsOfflineBannerVisible = () => {
     const isOnboardingFinished = useSelector(selectIsOnboardingFinished);
     const { isInternetReachable } = useNetInfo();
-
     const isReachable = isInternetReachable ?? true;
+    const isFwRevisionCheckOfflineError = useIsFwRevisionCheckOfflineError();
 
-    return !isReachable && isOnboardingFinished;
+    return (!isReachable || isFwRevisionCheckOfflineError) && isOnboardingFinished;
 };

suite-native/connection-status/tsconfig.json

@@ -3,6 +3,7 @@
     "compilerOptions": { "outDir": "libDev" },
     "references": [
         { "path": "../atoms" },
+        { "path": "../device" },
         { "path": "../icons" },
         { "path": "../intl" },
         { "path": "../settings" },

suite-native/intl/src/en.ts

@@ -30,6 +30,8 @@ export const en = {
         banners: {
             offline: {
                 title: "You're offline.",
+                fwRevisionCheckOfflineError:
+                    "Firmware authenticity check couldn't be performed.\nGo online to verify your firmware version.",
             },
             deviceCompromised: {
                 title: 'Unofficial firmware detected',

suite-native/module-authenticity-checks/src/components/DeviceCompromisedBanner.tsx

@@ -13,6 +13,8 @@ import { deviceCompromisedBannerAtom } from '../DeviceCompromisedBannerAtoms';
 
 const containerStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundAlertRedSubtleOnElevation0,
+    // MessageSystemBanner critical variant has the same bgColor, so the margin serves to separate them visually
+    marginBottom: utils.spacings.sp1,
 }));
 
 const contentStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(

yarn.lock

@@ -11038,6 +11038,7 @@ __metadata:
   dependencies:
     "@react-native-community/netinfo": "npm:^11.4.1"
     "@suite-native/atoms": "workspace:*"
+    "@suite-native/device": "workspace:*"
     "@suite-native/icons": "workspace:*"
     "@suite-native/intl": "workspace:*"
     "@suite-native/settings": "workspace:*"