From 65a8499db01e2226de44c748e725e0bf976b3ee5 Mon Sep 17 00:00:00 2001
From: yanas <yanas@yanas.cz>
Date: Thu, 10 Oct 2024 15:12:04 +0200
Subject: [PATCH] refactor(suite-native): extract layout component for device
 settings card

---
 .../src/components/DeviceModelIcon.tsx        |  4 +-
 .../src/components/DeviceFirmwareCard.tsx     | 53 ++++++++-----------
 .../src/components/DeviceSettingsCard.tsx     | 44 +++++++++++++++
 3 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 suite-native/device/src/components/DeviceSettingsCard.tsx

diff --git a/suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx b/suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx
index f1f1986cf96..9600d98c3eb 100644
--- a/suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx
+++ b/suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx
@@ -17,6 +17,8 @@ const icons = {
     T3T1: 'trezorT3T1',
 } as const satisfies Record<DeviceModelInternal, IconName>;
 
+export const deviceModelToIconName = (deviceModel: DeviceModelInternal) => icons[deviceModel];
+
 export const DeviceModelIcon = ({ deviceModel, size }: DeviceModelIconProps) => (
-    <Icon name={icons[deviceModel]} size={size} />
+    <Icon name={deviceModelToIconName(deviceModel)} size={size} />
 );
diff --git a/suite-native/device/src/components/DeviceFirmwareCard.tsx b/suite-native/device/src/components/DeviceFirmwareCard.tsx
index 4929eb7eae3..5cccefcbd00 100644
--- a/suite-native/device/src/components/DeviceFirmwareCard.tsx
+++ b/suite-native/device/src/components/DeviceFirmwareCard.tsx
@@ -4,18 +4,20 @@ 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 { deviceModelToIconName } 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 { 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(() => ({
+import { DeviceSettingsCard } from './DeviceSettingsCard';
+
+const firmwareInfoStyle = prepareNativeStyle(() => ({
     flexGrow: 1,
 }));
 
@@ -28,7 +30,7 @@ const FirmwareInfo = ({ label, value }: DeviceInfoProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
-        <VStack spacing="sp2" style={applyStyle(vStackStyle)}>
+        <VStack spacing="sp2" style={applyStyle(firmwareInfoStyle)}>
             <Text variant="hint" color="textSubdued">
                 {label}
             </Text>
@@ -38,8 +40,6 @@ const FirmwareInfo = ({ label, value }: DeviceInfoProps) => {
 };
 
 export const DeviceFirmwareCard = () => {
-    const { applyStyle } = useNativeStyles();
-
     const device = useSelector(selectDevice);
     const deviceModel = useSelector(selectDeviceModel);
     const deviceReleaseInfo = useSelector(selectDeviceReleaseInfo);
@@ -79,32 +79,21 @@ export const DeviceFirmwareCard = () => {
     })();
 
     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>
+        <DeviceSettingsCard
+            icon={deviceModelToIconName(deviceModel)}
+            title={<Translation id="deviceSettings.firmware.title" />}
+            alertBoxProps={firmwareUpdateProps}
+        >
+            <HStack marginTop="sp12" spacing="sp2">
+                <FirmwareInfo
+                    label={<Translation id="deviceSettings.firmware.version" />}
+                    value={firmwareVersion}
+                />
+                <FirmwareInfo
+                    label={<Translation id="deviceSettings.firmware.type" />}
+                    value={<Translation id={firmwareTypeTranslationId} />}
+                />
             </HStack>
-            {firmwareUpdateProps && (
-                <Box margin="sp4">
-                    <AlertBox {...firmwareUpdateProps} borderRadius="r12" />
-                </Box>
-            )}
-        </Card>
+        </DeviceSettingsCard>
     );
 };
diff --git a/suite-native/device/src/components/DeviceSettingsCard.tsx b/suite-native/device/src/components/DeviceSettingsCard.tsx
new file mode 100644
index 00000000000..21f28e1e3f0
--- /dev/null
+++ b/suite-native/device/src/components/DeviceSettingsCard.tsx
@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+import { Icon, IconName } from '@suite-common/icons-deprecated';
+import { AlertBox, AlertBoxProps, Box, Card, HStack, Text, VStack } from '@suite-native/atoms';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+const contentStyle = prepareNativeStyle(() => ({
+    flexGrow: 1,
+}));
+
+export type DeviceSettingsCardProps = {
+    icon: IconName;
+    title: ReactNode;
+    children: ReactNode;
+    alertBoxProps?: Omit<AlertBoxProps, 'borderRadius'>;
+};
+
+export const DeviceSettingsCard = ({
+    icon,
+    title,
+    children,
+    alertBoxProps,
+}: DeviceSettingsCardProps) => {
+    const { applyStyle } = useNativeStyles();
+
+    return (
+        <Card noPadding>
+            <HStack margin="sp16" spacing="sp12">
+                <Box marginVertical="sp2">
+                    <Icon name={icon} size="mediumLarge" />
+                </Box>
+                <VStack spacing={0} style={applyStyle(contentStyle)}>
+                    <Text variant="highlight">{title}</Text>
+                    {children}
+                </VStack>
+            </HStack>
+            {alertBoxProps && (
+                <Box margin="sp4">
+                    <AlertBox {...alertBoxProps} borderRadius="r12" />
+                </Box>
+            )}
+        </Card>
+    );
+};