Merge branch 'cedwies/restructure-manage-device-tab' into HEAD

Author: cedwies

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Android: make the UI work with responsive font sizes and adhere to OS font size settings
 - Add "Change device password" functionality (in Settings)
 - Add icons for CTA and action buttons in account page
+- Restructure "Manage device" tab in settings
 
 ## v4.49.0
 - Bundle BitBox02 Nova firmware version v9.24.0

frontends/web/src/locales/en/app.json

@@ -716,6 +716,9 @@
       },
       "title": "Backups"
     },
+    "bluetoothFirmware": {
+      "title": "Bluetooth firmware"
+    },
     "deviceInformation": {
       "attestation": {
         "description": "The BitBoxApp checks if your device is authentic."
@@ -731,6 +734,9 @@
       },
       "title": "Device information"
     },
+    "deviceSettings": {
+      "title": "Device settings"
+    },
     "expert": {
       "bip85": {
         "description": "Generate child keys from your BitBox wallet.",
@@ -767,11 +773,11 @@
       }
     },
     "firmware": {
-      "firmwareVersion": "Firmware Version",
+      "firmwareVersion": "Firmware version",
       "newVersion": {
         "label": "Available version"
       },
-      "title": "Firmware",
+      "title": "Device firmware",
       "upToDate": "Your device is up to date",
       "upgradeAvailable": "New upgrade available",
       "version": {

frontends/web/src/routes/settings/bb02-settings.tsx

@@ -123,9 +123,9 @@ const Content = ({ deviceID }: TProps) => {
         <ShowRecoveryWordsSetting deviceID={deviceID} />
       </div>
 
-      {/*"Device information" section*/}
+      {/*"Device settings" section*/}
       <div className={styles.section}>
-        <SubTitle className={styles.withMobilePadding}>{t('deviceSettings.deviceInformation.title')}</SubTitle>
+        <SubTitle className={styles.withMobilePadding}>{t('deviceSettings.deviceSettings.title')}</SubTitle>
         {deviceInfo ? (
           <DeviceNameSetting
             deviceName={deviceInfo.name}
@@ -134,7 +134,25 @@ const Content = ({ deviceID }: TProps) => {
         ) :
           <StyledSkeleton />
         }
-        <AttestationCheckSetting deviceID={deviceID} />
+        { deviceInfo && deviceInfo.bluetooth && !runningInIOS()
+          ? <BluetoothToggleEnabledSetting deviceID={deviceID} />
+          : null
+        }
+        {
+          versionInfo ? (
+            <ChangeDevicePasswordSetting
+              deviceID={deviceID}
+              canChangePassword={versionInfo.canChangePassword}
+            />
+          ) : (
+            <StyledSkeleton />
+          )
+        }
+      </div>
+
+      {/*"Device information" section*/}
+      <div className={styles.section}>
+        <SubTitle className={styles.withMobilePadding}>{t('deviceSettings.deviceInformation.title')}</SubTitle>
         {
           versionInfo ? (
             <FirmwareSetting
@@ -145,30 +163,27 @@ const Content = ({ deviceID }: TProps) => {
             <StyledSkeleton />
         }
         {
-          deviceInfo && deviceInfo.securechipModel !== '' ?
-            <SecureChipSetting secureChipModel={deviceInfo.securechipModel} />
-            :
-            <StyledSkeleton />
+          deviceInfo && deviceInfo.bluetooth ? (
+            <BluetoothFirmwareSetting
+              firmwareVersion={deviceInfo.bluetooth.firmwareVersion}
+            />
+          ) : null
         }
+        <AttestationCheckSetting deviceID={deviceID} />
         {
           rootFingerprintResult && rootFingerprintResult.success ?
             <RootFingerprintSetting rootFingerprint={rootFingerprintResult.rootFingerprint} />
             :
             <StyledSkeleton />
         }
+        {
+          deviceInfo && deviceInfo.securechipModel !== '' ?
+            <SecureChipSetting secureChipModel={deviceInfo.securechipModel} />
+            :
+            <StyledSkeleton />
+        }
       </div>
 
-      {/*"Bluetooth" section*/}
-      { deviceInfo && deviceInfo.bluetooth ? (
-        <div className={styles.section}>
-          <SubTitle className={styles.withMobilePadding}>Bluetooth</SubTitle>
-          { !runningInIOS() ? <BluetoothToggleEnabledSetting deviceID={deviceID} /> : null }
-          <BluetoothFirmwareSetting
-            firmwareVersion={deviceInfo.bluetooth.firmwareVersion}
-          />
-        </div>
-      ) : null }
-
       {/*"Expert settings" section*/}
       <div className={styles.section}>
         <SubTitle className={styles.withMobilePadding}>{t('settings.expert.title')}</SubTitle>
@@ -194,16 +209,6 @@ const Content = ({ deviceID }: TProps) => {
         }
         <GoToStartupSettings deviceID={deviceID} />
         <FactoryResetSetting deviceID={deviceID} />
-        {
-          versionInfo ? (
-            <ChangeDevicePasswordSetting
-              deviceID={deviceID}
-              canChangePassword={versionInfo.canChangePassword}
-            />
-          ) : (
-            <StyledSkeleton />
-          )
-        }
       </div>
     </>
   );

frontends/web/src/routes/settings/components/device-settings/bluetooth-firmware-setting.tsx

@@ -34,7 +34,7 @@ export const BluetoothFirmwareSetting = ({ firmwareVersion }: TProps) => {
   return (
     <>
       <SettingsItem
-        settingName={t('deviceSettings.firmware.title')}
+        settingName={t('deviceSettings.bluetoothFirmware.title')}
         secondaryText={secondaryText}
         displayedValue={firmwareVersion}
         extraComponent={extraComponent}