feat(mobile): FW update changelog

trezor · Jan 23, 2025 · a66536a · a66536a
1 parent 9c48756
commit a66536a
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 1 deletion.
diff --git a/suite-common/wallet-core/src/device/deviceReducer.ts b/suite-common/wallet-core/src/device/deviceReducer.ts
@@ -1031,3 +1031,9 @@ export const selectDeviceUpdateFirmwareVersion = (state: DeviceRootState) => {
 
     return device ? getFwUpdateVersion(device) : null;
 };
+
+export const selectFirmwareChangelog = (state: DeviceRootState) => {
+    const device = selectSelectedDevice(state);
+
+    return device?.firmwareRelease?.changelog?.[0]?.changelog;
+};
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -399,6 +399,11 @@ export const en = {
                 updateButton: 'Update firmware',
                 title: 'Firmware update',
                 subtitle: 'New firmware is now available. Update your device now.',
+                changelog: {
+                    button: 'What’s new?',
+                    title: 'What’s new?',
+                    changelogUnavailable: 'No changelog available',
+                },
             },
             firmwareUpdateProgress: {
                 initializing: { title: 'Preparing your Trezor' },

diff --git a/suite-native/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareChangelog.tsx b/suite-native/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareChangelog.tsx
@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { BottomSheet, Button, Text } from '@suite-native/atoms';
+import { selectFirmwareChangelog } from '@suite-common/wallet-core';
+import { Translation } from '@suite-native/intl';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+type FirmwareChangelogProps = {
+    isVisible: boolean;
+    onClose: () => void;
+};
+
+const changelogSectionTitleTextStyle = prepareNativeStyle(utils => ({
+    ...utils.typography.highlight,
+    paddingTop: utils.spacings.sp24,
+}));
+
+const buttonContainerStyle = prepareNativeStyle(utils => ({
+    marginTop: utils.spacings.sp32,
+}));
+
+const ChangelogSectionTitle = ({ children }: { children: React.ReactNode }) => {
+    const { applyStyle } = useNativeStyles();
+
+    return <Text style={applyStyle(changelogSectionTitleTextStyle)}>{children}</Text>;
+};
+
+export const FirmwareChangelog = ({ isVisible, onClose }: FirmwareChangelogProps) => {
+    const firmwareChangelog = useSelector(selectFirmwareChangelog);
+    const { applyStyle } = useNativeStyles();
+
+    const formattedChangelog = useMemo(() => {
+        if (!firmwareChangelog) {
+            return (
+                <Text>
+                    <Translation id="moduleDeviceSettings.firmware.firmwareUpdateScreen.changelog.changelogUnavailable" />
+                </Text>
+            );
+        }
+
+        if (typeof firmwareChangelog === 'string') {
+            return <Text>{firmwareChangelog}</Text>;
+        }
+
+        return firmwareChangelog.map((text, index) => {
+            const key = text + index;
+
+            if (text.startsWith('#')) {
+                const strippedText = text.replaceAll('#', '').trim();
+
+                return <ChangelogSectionTitle key={key}>{strippedText}</ChangelogSectionTitle>;
+            }
+
+            let formattedText = text;
+
+            if (text.startsWith(' - ')) {
+                formattedText = formattedText.replace(' - ', ' • ');
+            }
+
+            return <Text key={key}>{formattedText}</Text>;
+        });
+    }, [firmwareChangelog]);
+
+    return (
+        <BottomSheet isVisible={isVisible} onClose={onClose} isScrollable isCloseDisplayed={false}>
+            <Text variant="titleSmall" color="textDefault">
+                <Translation id="moduleDeviceSettings.firmware.firmwareUpdateScreen.changelog.title" />
+            </Text>
+            {formattedChangelog}
+            <Button
+                onPress={onClose}
+                style={applyStyle(buttonContainerStyle)}
+                colorScheme="tertiaryElevation0"
+            >
+                <Translation id="generic.buttons.close" />
+            </Button>
+        </BottomSheet>
+    );
+};
diff --git a/...ative/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareChangelogButton.tsx b/...ative/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareChangelogButton.tsx
@@ -0,0 +1,46 @@
+import { TouchableOpacity } from 'react-native';
+import { useState } from 'react';
+
+import { Text } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { Icon } from '@suite-native/icons';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+import { FirmwareChangelog } from './FirmwareChangelog';
+
+const linkTextStyle = prepareNativeStyle(utils => ({
+    color: utils.colors.textSubdued,
+    textDecorationLine: 'underline',
+}));
+
+const linkContainerStyle = prepareNativeStyle(utils => ({
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 2,
+}));
+
+export const FirmwareChangelogButton = () => {
+    const { applyStyle } = useNativeStyles();
+    const [isVisible, setIsVisible] = useState(false);
+
+    const handlePress = () => {
+        setIsVisible(true);
+    };
+
+    const handleClose = () => {
+        setIsVisible(false);
+    };
+
+    return (
+        <>
+            <TouchableOpacity style={applyStyle(linkContainerStyle)} onPress={handlePress}>
+                <Icon name="question" size="medium" color="iconSubdued" />
+                <Text variant="body" color="textSubdued" style={applyStyle(linkTextStyle)}>
+                    <Translation id="moduleDeviceSettings.firmware.firmwareUpdateScreen.changelog.button" />
+                </Text>
+            </TouchableOpacity>
+            <FirmwareChangelog isVisible={isVisible} onClose={handleClose} />
+        </>
+    );
+};
diff --git a/...e-native/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareUpdateScreen.tsx b/...e-native/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareUpdateScreen.tsx
@@ -22,6 +22,7 @@ import {
 import { useAlert } from '@suite-native/alerts';
 
 import { FirmwareUpdateVersionCard } from './FirmwareVersionCard';
+import { FirmwareChangelogButton } from './FirmwareChangelogButton';
 
 const firmwareUpdateButtonStyle = prepareNativeStyle(utils => ({
     marginHorizontal: utils.spacings.sp16,
@@ -83,7 +84,8 @@ export const FirmwareUpdateScreen = () => {
                     <Translation id="moduleDeviceSettings.firmware.firmwareUpdateScreen.subtitle" />
                 </Text>
             </Box>
-            <FirmwareUpdateVersionCard marginTop="sp32" />
+            <FirmwareUpdateVersionCard marginTop="sp32" marginBottom="sp12" />
+            <FirmwareChangelogButton />
         </Screen>
     );
 };