frontend: display Bluetooth section with firmware version info

Author: benma

frontends/web/src/api/bitbox02.ts

@@ -23,15 +23,19 @@ import { TSubscriptionCallback, subscribeEndpoint } from './subscribe';
 export const errUserAbort = 104;
 
 export type DeviceInfo = {
-    initialized: boolean;
-    mnemonicPassphraseEnabled: boolean;
-    name: string;
-    securechipModel: string;
-    version: string;
+  initialized: boolean;
+  mnemonicPassphraseEnabled: boolean;
+  name: string;
+  securechipModel: string;
+  version: string;
+  bluetooth: null | {
+    firmwareVersion: string;
+    enabled: boolean;
+  };
 }
 
 type DeviceInfoResponse = SuccessResponse & {
-    deviceInfo: DeviceInfo;
+  deviceInfo: DeviceInfo;
 };
 
 export const resetDevice = (deviceID: string): Promise<SuccessResponse | FailResponse> => {

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

@@ -30,6 +30,7 @@ import { alertUser } from '@/components/alert/Alert';
 import { Skeleton } from '@/components/skeleton/skeleton';
 import { AttestationCheckSetting } from './components/device-settings/attestation-check-setting';
 import { FirmwareSetting } from './components/device-settings/firmware-setting';
+import { BluetoothFirmwareSetting } from './components/device-settings/bluetooth-firmware-setting';
 import { SecureChipSetting } from './components/device-settings/secure-chip-setting';
 import { DeviceNameSetting } from './components/device-settings/device-name-setting';
 import { FactoryResetSetting } from './components/device-settings/factory-reset-setting';
@@ -106,6 +107,7 @@ const Content = ({ deviceID }: TProps) => {
           return;
         }
         setDeviceInfo(result.deviceInfo);
+        console.log('LOL', result);
       })
       .catch(console.error);
   }, [deviceID, t]);
@@ -154,6 +156,18 @@ const Content = ({ deviceID }: TProps) => {
         }
       </div>
 
+      {/*"Bluetooth" section*/}
+      { deviceInfo && deviceInfo.bluetooth ? (
+        <>
+          <div className={styles.section}>
+            <SubTitle className={styles.withMobilePadding}>Bluetooth</SubTitle>
+            <BluetoothFirmwareSetting
+              firmwareVersion={deviceInfo.bluetooth.firmwareVersion}
+            />
+          </div>
+        </>
+      ) : null }
+
       {/*"Expert settings" section*/}
       <div className={styles.section}>
         <SubTitle className={styles.withMobilePadding}>{t('settings.expert.title')}</SubTitle>

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Checked, RedDot } from '@/components/icon';
+import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
+
+export type TProps = {
+  firmwareVersion: string;
+}
+
+export const BluetoothFirmwareSetting = ({ firmwareVersion }: TProps) => {
+  const { t } = useTranslation();
+
+  // So far there is only one BLE firmware version. This can be adjusted once there is an upgrade
+  // available.
+  const canUpgrade = false;
+  const secondaryText = canUpgrade ? t('deviceSettings.firmware.upgradeAvailable') : t('deviceSettings.firmware.upToDate');
+  const extraComponent = canUpgrade ? <RedDot width={8} height={8}/> : <Checked />;
+
+  return (
+    <>
+      <SettingsItem
+        settingName={t('deviceSettings.firmware.title')}
+        secondaryText={secondaryText}
+        displayedValue={firmwareVersion}
+        extraComponent={extraComponent}
+      />
+    </>
+  );
+};