From 794445f08a6cf2ba0f4b977669aabdc4691a18e7 Mon Sep 17 00:00:00 2001
From: yanas <yanas@yanas.cz>
Date: Tue, 8 Oct 2024 11:39:33 +0200
Subject: [PATCH] feat(suite-native): rework layout of the Device info screen

---
 packages/theme/src/borders.ts                 |   1 +
 suite-native/atoms/src/AlertBox.tsx           |  13 +-
 suite-native/atoms/src/index.ts               |   1 +
 suite-native/atoms/src/utils.ts               |   7 ++
 suite-native/device/package.json              |   2 +
 .../src/components/DeviceFirmwareCard.tsx     | 110 +++++++++++++++++
 .../src/screens/DeviceInfoModalScreen.tsx     | 113 +++---------------
 suite-native/device/tsconfig.json             |   6 +
 suite-native/intl/src/en.ts                   |  12 ++
 .../navigation/src/components/Screen.tsx      |  18 +--
 .../src/components/ScreenSubHeader.tsx        |  17 ++-
 yarn.lock                                     |   2 +
 12 files changed, 185 insertions(+), 117 deletions(-)
 create mode 100644 suite-native/atoms/src/utils.ts
 create mode 100644 suite-native/device/src/components/DeviceFirmwareCard.tsx

diff --git a/packages/theme/src/borders.ts b/packages/theme/src/borders.ts
index ec86d988e23..fde3c68c1b3 100644
--- a/packages/theme/src/borders.ts
+++ b/packages/theme/src/borders.ts
@@ -36,3 +36,4 @@ export const nativeBorders = {
 } as const;
 
 export type NativeBorders = typeof nativeBorders;
+export type NativeRadius = keyof typeof nativeBorders.radii;
diff --git a/suite-native/atoms/src/AlertBox.tsx b/suite-native/atoms/src/AlertBox.tsx
index 18d77c13409..676c31cf199 100644
--- a/suite-native/atoms/src/AlertBox.tsx
+++ b/suite-native/atoms/src/AlertBox.tsx
@@ -2,11 +2,12 @@ import { ReactNode } from 'react';
 import { ActivityIndicator } from 'react-native';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import { Color, nativeBorders } from '@trezor/theme';
+import { Color, NativeRadius } from '@trezor/theme';
 import { Icon, IconName } from '@suite-common/icons-deprecated';
 
 import { Box } from './Box';
 import { Text } from './Text';
+import { nativeRadiusToNumber } from './utils';
 
 export type AlertBoxVariant = 'info' | 'success' | 'warning' | 'loading' | 'error';
 
@@ -80,7 +81,7 @@ const variantToIconName = {
 export type AlertBoxProps = {
     variant: AlertBoxVariant;
     title: ReactNode;
-    borderRadius?: number;
+    borderRadius?: NativeRadius | number;
 };
 
 const AlertSpinner = ({ color }: { color: Color }) => {
@@ -91,18 +92,14 @@ const AlertSpinner = ({ color }: { color: Color }) => {
     return <ActivityIndicator size={16} color={colors[color]} />;
 };
 
-export const AlertBox = ({
-    title,
-    variant = 'info',
-    borderRadius = nativeBorders.radii.r16,
-}: AlertBoxProps) => {
+export const AlertBox = ({ title, variant = 'info', borderRadius = 'r16' }: AlertBoxProps) => {
     const { applyStyle } = useNativeStyles();
     const { contentColor, backgroundColor, borderColor } = variantToColorMap[variant];
 
     return (
         <Box
             style={applyStyle(alertWrapperStyle, {
-                borderRadius,
+                borderRadius: nativeRadiusToNumber(borderRadius),
                 borderColor,
                 backgroundColor,
             })}
diff --git a/suite-native/atoms/src/index.ts b/suite-native/atoms/src/index.ts
index db4f099d8c0..238c5a61e19 100644
--- a/suite-native/atoms/src/index.ts
+++ b/suite-native/atoms/src/index.ts
@@ -50,5 +50,6 @@ export * from './Skeleton/ListItemSkeleton';
 export * from './BulletListItem';
 export * from './SelectableItem';
 export * from './constants';
+export * from './utils';
 
 export { useDebugView } from './DebugView';
diff --git a/suite-native/atoms/src/utils.ts b/suite-native/atoms/src/utils.ts
new file mode 100644
index 00000000000..c9725803595
--- /dev/null
+++ b/suite-native/atoms/src/utils.ts
@@ -0,0 +1,7 @@
+import { nativeBorders, NativeRadius, NativeSpacing, nativeSpacings } from '@trezor/theme';
+
+export const nativeSpacingToNumber = (value: NativeSpacing | number) =>
+    typeof value === 'number' ? value : nativeSpacings[value];
+
+export const nativeRadiusToNumber = (value: NativeRadius | number) =>
+    typeof value === 'number' ? value : nativeBorders.radii[value];
diff --git a/suite-native/device/package.json b/suite-native/device/package.json
index 1073b149938..e4cee8a2bbc 100644
--- a/suite-native/device/package.json
+++ b/suite-native/device/package.json
@@ -15,7 +15,9 @@
         "@react-navigation/native": "6.1.18",
         "@reduxjs/toolkit": "1.9.5",
         "@sentry/react-native": "5.33.0",
+        "@suite-common/icons-deprecated": "workspace:*",
         "@suite-common/redux-utils": "workspace:*",
+        "@suite-common/suite-utils": "workspace:*",
         "@suite-common/wallet-core": "workspace:*",
         "@suite-common/wallet-utils": "workspace:*",
         "@suite-native/alerts": "workspace:*",
diff --git a/suite-native/device/src/components/DeviceFirmwareCard.tsx b/suite-native/device/src/components/DeviceFirmwareCard.tsx
new file mode 100644
index 00000000000..4929eb7eae3
--- /dev/null
+++ b/suite-native/device/src/components/DeviceFirmwareCard.tsx
@@ -0,0 +1,110 @@
+import { ReactNode } from 'react';
+import { useSelector } from 'react-redux';
+
+import { G } from '@mobily/ts-belt';
+
+import { getFwUpdateVersion } from '@suite-common/suite-utils';
+import { DeviceModelIcon } from '@suite-common/icons-deprecated';
+import {
+    selectDevice,
+    selectDeviceModel,
+    selectDeviceReleaseInfo,
+} from '@suite-common/wallet-core';
+import { AlertBox, Box, Card, HStack, Text, VStack } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { getFirmwareVersion, hasBitcoinOnlyFirmware } from '@trezor/device-utils';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+const vStackStyle = prepareNativeStyle(() => ({
+    flexGrow: 1,
+}));
+
+type DeviceInfoProps = {
+    label: ReactNode;
+    value: ReactNode;
+};
+
+const FirmwareInfo = ({ label, value }: DeviceInfoProps) => {
+    const { applyStyle } = useNativeStyles();
+
+    return (
+        <VStack spacing="sp2" style={applyStyle(vStackStyle)}>
+            <Text variant="hint" color="textSubdued">
+                {label}
+            </Text>
+            <Text variant="callout">{value}</Text>
+        </VStack>
+    );
+};
+
+export const DeviceFirmwareCard = () => {
+    const { applyStyle } = useNativeStyles();
+
+    const device = useSelector(selectDevice);
+    const deviceModel = useSelector(selectDeviceModel);
+    const deviceReleaseInfo = useSelector(selectDeviceReleaseInfo);
+
+    if (!device || !deviceModel) {
+        return null;
+    }
+
+    const firmwareVersion = getFirmwareVersion(device);
+    const firmwareTypeTranslationId = hasBitcoinOnlyFirmware(device)
+        ? 'deviceSettings.firmware.typeBitcoinOnly'
+        : 'deviceSettings.firmware.typeUniversal';
+
+    const firmwareUpdateProps = (() => {
+        if (G.isNotNullable(deviceReleaseInfo)) {
+            const isUpgradable = deviceReleaseInfo.isNewer ?? false;
+
+            if (isUpgradable) {
+                return {
+                    title: (
+                        <Translation
+                            id="deviceSettings.firmware.newVersionAvailable"
+                            values={{ version: getFwUpdateVersion(device) }}
+                        />
+                    ),
+                    variant: 'info',
+                } as const;
+            }
+
+            return {
+                title: <Translation id="deviceSettings.firmware.upToDate" />,
+                variant: 'success',
+            } as const;
+        }
+
+        return undefined;
+    })();
+
+    return (
+        <Card noPadding>
+            <HStack margin="sp16" spacing="sp12">
+                <Box marginVertical="sp2">
+                    <DeviceModelIcon deviceModel={deviceModel} size="mediumLarge" />
+                </Box>
+                <VStack spacing="sp12" style={applyStyle(vStackStyle)}>
+                    <Text variant="highlight">
+                        <Translation id="deviceSettings.firmware.title" />
+                    </Text>
+                    <HStack spacing="sp2">
+                        <FirmwareInfo
+                            label={<Translation id="deviceSettings.firmware.version" />}
+                            value={firmwareVersion}
+                        />
+                        <FirmwareInfo
+                            label={<Translation id="deviceSettings.firmware.type" />}
+                            value={<Translation id={firmwareTypeTranslationId} />}
+                        />
+                    </HStack>
+                </VStack>
+            </HStack>
+            {firmwareUpdateProps && (
+                <Box margin="sp4">
+                    <AlertBox {...firmwareUpdateProps} borderRadius="r12" />
+                </Box>
+            )}
+        </Card>
+    );
+};
diff --git a/suite-native/device/src/screens/DeviceInfoModalScreen.tsx b/suite-native/device/src/screens/DeviceInfoModalScreen.tsx
index 7e0fe21f01a..7486f528aa9 100644
--- a/suite-native/device/src/screens/DeviceInfoModalScreen.tsx
+++ b/suite-native/device/src/screens/DeviceInfoModalScreen.tsx
@@ -1,41 +1,28 @@
 import { useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
 
-import { G } from '@mobily/ts-belt';
 import { useNavigation } from '@react-navigation/native';
 
 import { DeviceModelInternal } from '@trezor/connect';
-import {
-    Image,
-    Box,
-    Card,
-    HStack,
-    VStack,
-    Button,
-    IconButton,
-    ScreenHeaderWrapper,
-    Text,
-} from '@suite-native/atoms';
+import { Image, VStack, Button, Text } from '@suite-native/atoms';
 import {
     AppTabsRoutes,
     HomeStackRoutes,
     RootStackParamList,
     RootStackRoutes,
     Screen,
+    ScreenSubHeader,
     StackNavigationProps,
 } from '@suite-native/navigation';
 import {
     selectDevice,
-    selectDeviceLabel,
     selectDeviceModel,
     selectDeviceReleaseInfo,
     selectIsPortfolioTrackerDevice,
 } from '@suite-common/wallet-core';
-import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Translation, useTranslate } from '@suite-native/intl';
-import { getFirmwareVersion } from '@trezor/device-utils';
-import { useOpenLink } from '@suite-native/link';
 
+import { DeviceFirmwareCard } from '../components/DeviceFirmwareCard';
 import { HowToUpdateBottomSheet } from '../components/HowToUpdateBottomSheet';
 
 const deviceImageMap: Record<DeviceModelInternal, string> = {
@@ -46,51 +33,21 @@ const deviceImageMap: Record<DeviceModelInternal, string> = {
     [DeviceModelInternal.T3T1]: require('../assets/t3t1.png'),
 };
 
-const emptyBoxStyle = prepareNativeStyle(() => ({
-    width: 48,
-}));
-
-const contentStyle = prepareNativeStyle(() => ({
-    flexGrow: 1,
-}));
-
 type NavigationProp = StackNavigationProps<RootStackParamList, RootStackRoutes.DeviceInfo>;
 
 export const DeviceInfoModalScreen = () => {
     const navigation = useNavigation<NavigationProp>();
     const { translate } = useTranslate();
-    const openLink = useOpenLink();
 
-    const deviceModel = useSelector(selectDeviceModel);
-    const deviceLabel = useSelector(selectDeviceLabel);
     const device = useSelector(selectDevice);
+    const deviceModel = useSelector(selectDeviceModel);
     const isPortfolioTrackerDevice = useSelector(selectIsPortfolioTrackerDevice);
     const deviceReleaseInfo = useSelector(selectDeviceReleaseInfo);
-    const { applyStyle } = useNativeStyles();
 
     const [isUpdateSheetOpen, setIsUpdateSheetOpen] = useState<boolean>(false);
 
     const isUpgradable = deviceReleaseInfo?.isNewer ?? false;
 
-    const getCardAlertProps = () => {
-        if (G.isNotNullable(deviceReleaseInfo)) {
-            if (isUpgradable) {
-                return {
-                    alertTitle: <Translation id="deviceInfo.outdatedFw" />,
-                    alertVariant: 'warning',
-                } as const;
-            }
-
-            return {
-                alertTitle: <Translation id="deviceInfo.upToDateFw" />,
-                alertVariant: 'success',
-            } as const;
-        }
-
-        return { alertTitle: undefined, alertVariant: undefined } as const;
-    };
-    const cardAlertProps = getCardAlertProps();
-
     useEffect(() => {
         if (isPortfolioTrackerDevice) {
             navigation.navigate(RootStackRoutes.AppTabs, {
@@ -102,61 +59,29 @@ export const DeviceInfoModalScreen = () => {
         }
     }, [isPortfolioTrackerDevice, navigation]);
 
-    if (!deviceModel) return null;
-
-    const currentFwVersion = getFirmwareVersion(device);
-
-    const handleGoBack = () => {
-        navigation.goBack();
-    };
-
-    const handleAccessoriesClick = () => {
-        openLink('https://trezor.io/accessories');
-    };
+    if (!device || !deviceModel) {
+        return null;
+    }
 
     const handleUpdateClick = () => setIsUpdateSheetOpen(true);
 
     return (
         <Screen
             screenHeader={
-                // TODO once https://github.com/trezor/trezor-suite/issues/9856 is done, this should be removed
-                <ScreenHeaderWrapper>
-                    <IconButton
-                        iconName="close"
-                        colorScheme="tertiaryElevation0"
-                        onPress={handleGoBack}
-                    />
-                    <Text>Device info</Text>
-                    <Box style={applyStyle(emptyBoxStyle)} />
-                </ScreenHeaderWrapper>
+                <ScreenSubHeader
+                    customHorizontalPadding="sp16"
+                    content={translate('deviceSettings.title')}
+                    closeActionType="close"
+                />
             }
+            customHorizontalPadding="sp16"
         >
-            <Box style={applyStyle(contentStyle)}>
-                <Card {...cardAlertProps}>
-                    <HStack spacing="sp24">
-                        <Image width={92} height={151} source={deviceImageMap[deviceModel]} />
-                        <VStack spacing="sp4" justifyContent="center">
-                            {deviceLabel && <Text variant="titleSmall">{deviceLabel}</Text>}
-                            <Text variant="label" color="textSubdued">
-                                {device?.name}
-                            </Text>
-                            <Text variant="hint">
-                                {translate('deviceInfo.installedFw', {
-                                    version: currentFwVersion,
-                                })}
-                            </Text>
-                        </VStack>
-                    </HStack>
-                </Card>
-            </Box>
-            <VStack spacing="sp16">
-                <Button
-                    colorScheme="tertiaryElevation0"
-                    onPress={handleAccessoriesClick}
-                    viewRight="arrowUpRight"
-                >
-                    <Translation id="deviceInfo.goToAccessories" />
-                </Button>
+            <VStack marginVertical="sp32" spacing="sp24" alignItems="center">
+                <Image width={92} height={151} source={deviceImageMap[deviceModel]} />
+                <Text variant="titleMedium">{device.name}</Text>
+            </VStack>
+            <VStack spacing="sp24">
+                <DeviceFirmwareCard />
                 {isUpgradable && (
                     <Button colorScheme="primary" onPress={handleUpdateClick}>
                         <Translation id="deviceInfo.updateHowTo.title" />
diff --git a/suite-native/device/tsconfig.json b/suite-native/device/tsconfig.json
index 541e79e1dd3..d169c827b27 100644
--- a/suite-native/device/tsconfig.json
+++ b/suite-native/device/tsconfig.json
@@ -2,9 +2,15 @@
     "extends": "../../tsconfig.base.json",
     "compilerOptions": { "outDir": "libDev" },
     "references": [
+        {
+            "path": "../../suite-common/icons-deprecated"
+        },
         {
             "path": "../../suite-common/redux-utils"
         },
+        {
+            "path": "../../suite-common/suite-utils"
+        },
         {
             "path": "../../suite-common/wallet-core"
         },
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
index 505001b46fe..845586915d4 100644
--- a/suite-native/intl/src/en.ts
+++ b/suite-native/intl/src/en.ts
@@ -767,6 +767,18 @@ export const en = {
             button: 'Learn more @ Trezor.io',
         },
     },
+    deviceSettings: {
+        title: 'Device info', // TODO: Change to "Device settings" once something may be changed
+        firmware: {
+            title: 'Firmware',
+            version: 'Version',
+            type: 'Type',
+            typeUniversal: 'Universal',
+            typeBitcoinOnly: 'Bitcoin-only',
+            upToDate: 'You’re all up to date',
+            newVersionAvailable: 'New version available ({version})',
+        },
+    },
     qrCode: {
         addressCopied: 'Address copied',
         copyButton: 'Copy',
diff --git a/suite-native/navigation/src/components/Screen.tsx b/suite-native/navigation/src/components/Screen.tsx
index e4edccfc768..4cf22efc93e 100644
--- a/suite-native/navigation/src/components/Screen.tsx
+++ b/suite-native/navigation/src/components/Screen.tsx
@@ -10,9 +10,9 @@ 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 { Color, NativeSpacing } from '@trezor/theme';
 import { selectIsAnyBannerMessageActive } from '@suite-common/message-system';
-import { Box } from '@suite-native/atoms';
+import { Box, nativeSpacingToNumber } from '@suite-native/atoms';
 
 import { ScreenContentWrapper } from './ScreenContentWrapper';
 
@@ -24,8 +24,8 @@ type ScreenProps = {
     hasStatusBar?: boolean;
     isScrollable?: boolean;
     backgroundColor?: Color;
-    customVerticalPadding?: number;
-    customHorizontalPadding?: number;
+    customVerticalPadding?: NativeSpacing | number;
+    customHorizontalPadding?: NativeSpacing | number;
     extraKeyboardAvoidingViewHeight?: number;
     hasBottomInset?: boolean;
     refreshControl?: ScrollViewProps['refreshControl'];
@@ -106,8 +106,8 @@ export const Screen = ({
     isScrollable = true,
     hasStatusBar = true,
     backgroundColor = 'backgroundSurfaceElevation0',
-    customVerticalPadding = nativeSpacings.sp8,
-    customHorizontalPadding = nativeSpacings.sp8,
+    customVerticalPadding = 'sp8',
+    customHorizontalPadding = 'sp8',
     extraKeyboardAvoidingViewHeight = 0,
     hasBottomInset = true,
 }: ScreenProps) => {
@@ -139,7 +139,7 @@ export const Screen = ({
         <View
             style={applyStyle(screenContainerStyle, {
                 backgroundColor,
-                customVerticalPadding,
+                customVerticalPadding: nativeSpacingToNumber(customVerticalPadding),
                 insets,
                 hasPaddingBottom,
                 isMessageBannerDisplayed,
@@ -163,8 +163,8 @@ export const Screen = ({
                 <Box
                     style={applyStyle(screenContentBaseStyle, {
                         insets,
-                        customHorizontalPadding,
-                        customVerticalPadding,
+                        customHorizontalPadding: nativeSpacingToNumber(customHorizontalPadding),
+                        customVerticalPadding: nativeSpacingToNumber(customVerticalPadding),
                         isScrollable,
                     })}
                 >
diff --git a/suite-native/navigation/src/components/ScreenSubHeader.tsx b/suite-native/navigation/src/components/ScreenSubHeader.tsx
index b5e4c701156..88a17166061 100644
--- a/suite-native/navigation/src/components/ScreenSubHeader.tsx
+++ b/suite-native/navigation/src/components/ScreenSubHeader.tsx
@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 
 import { RequireOneOrNone } from 'type-fest';
 
-import { Box, Text } from '@suite-native/atoms';
+import { Box, nativeSpacingToNumber, Text } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { NativeSpacing } from '@trezor/theme';
 
 import { GoBackIcon } from './GoBackIcon';
 import { CloseActionType } from '../navigators';
@@ -14,19 +15,19 @@ export type ScreenSubHeaderProps = RequireOneOrNone<
         rightIcon?: ReactNode;
         leftIcon?: ReactNode;
         closeActionType?: CloseActionType;
-        customHorizontalPadding?: number;
+        customHorizontalPadding?: NativeSpacing | number;
     },
     'leftIcon' | 'closeActionType'
 >;
 
 const ICON_SIZE = 48;
 
-const headerStyle = prepareNativeStyle<{ customHorizontalPadding?: number }>(
+const headerStyle = prepareNativeStyle<{ customHorizontalPadding: number }>(
     (utils, { customHorizontalPadding }) => ({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        padding: customHorizontalPadding || utils.spacings.sp8,
+        padding: customHorizontalPadding,
         backgroundColor: utils.colors.backgroundSurfaceElevation0,
         height: ICON_SIZE + 2 * utils.spacings.sp8,
     }),
@@ -42,12 +43,16 @@ export const ScreenSubHeader = ({
     rightIcon,
     leftIcon,
     closeActionType,
-    customHorizontalPadding,
+    customHorizontalPadding = 'sp8',
 }: ScreenSubHeaderProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
-        <Box style={applyStyle(headerStyle, { customHorizontalPadding })}>
+        <Box
+            style={applyStyle(headerStyle, {
+                customHorizontalPadding: nativeSpacingToNumber(customHorizontalPadding),
+            })}
+        >
             <Box style={applyStyle(iconWrapperStyle)}>
                 {leftIcon || <GoBackIcon closeActionType={closeActionType} />}
             </Box>
diff --git a/yarn.lock b/yarn.lock
index c399d4233d0..f13b65f8594 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9854,7 +9854,9 @@ __metadata:
     "@react-navigation/native": "npm:6.1.18"
     "@reduxjs/toolkit": "npm:1.9.5"
     "@sentry/react-native": "npm:5.33.0"
+    "@suite-common/icons-deprecated": "workspace:*"
     "@suite-common/redux-utils": "workspace:*"
+    "@suite-common/suite-utils": "workspace:*"
     "@suite-common/wallet-core": "workspace:*"
     "@suite-common/wallet-utils": "workspace:*"
     "@suite-native/alerts": "workspace:*"