frontend/bb02-settings: add item to enable/disable Bluetooth

Author: benma

backend/devices/bitbox02/handlers/handlers.go

@@ -55,6 +55,7 @@ type BitBox02 interface {
 	GotoStartupSettings() error
 	RootFingerprint() ([]byte, error)
 	BIP85AppBip39() error
+	BluetoothToggleEnabled() error
 }
 
 // Handlers provides a web API to the Bitbox.
@@ -92,6 +93,7 @@ func NewHandlers(
 	handleFunc("/goto-startup-settings", handlers.postGotoStartupSettings).Methods("POST")
 	handleFunc("/root-fingerprint", handlers.getRootFingerprint).Methods("GET")
 	handleFunc("/invoke-bip85", handlers.postInvokeBIP85Handler).Methods("POST")
+	handleFunc("/bluetooth/toggle-enabled", handlers.postBluetoothToggleEnabled).Methods("POST")
 	return handlers
 }
 
@@ -381,3 +383,11 @@ func (handlers *Handlers) postInvokeBIP85Handler(_ *http.Request) interface{} {
 	}
 	return map[string]interface{}{"success": true}
 }
+
+func (handlers *Handlers) postBluetoothToggleEnabled(_ *http.Request) interface{} {
+	err := handlers.device.BluetoothToggleEnabled()
+	if err != nil {
+		return maybeBB02Err(err, handlers.log)
+	}
+	return map[string]interface{}{"success": true}
+}

frontends/web/src/api/bitbox02.ts

@@ -226,3 +226,7 @@ export const attestationCheckDone = (
 ): TUnsubscribe => {
   return subscribeEndpoint(`devices/bitbox02/${deviceID}/attestationCheckDone`, cb);
 };
+
+export const bluetoothToggleEnabled = (deviceID: string): Promise<SuccessResponse | FailResponse> => {
+  return apiPost(`devices/bitbox02/${deviceID}/bluetooth/toggle-enabled`);
+};

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

@@ -191,6 +191,13 @@
     "followInstructionsMnemonicTitle": "Restore from recovery words"
   },
   "bitbox02Settings": {
+    "bluetoothToggleEnabled": {
+      "alertDisabled": "Bluetooth is now disabled on your BitBox. If you want to connect with iPhones on the future, you will need to re-enable it.",
+      "alertEnabled": "Bluetooth is now enabled.",
+      "description": "Bluetooth is used for connecting with iPhone.",
+      "titleDisabled": "Enable Bluetooth",
+      "titleEnabled": "Disable Bluetooth"
+    },
     "deviceName": {
       "current": "Current device name",
       "error": "Device name could not be set",

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

@@ -31,6 +31,7 @@ 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 { BluetoothToggleEnabledSetting } from './components/device-settings/bluetooth-toggle-enabled-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';
@@ -158,14 +159,14 @@ const Content = ({ deviceID }: TProps) => {
 
       {/*"Bluetooth" section*/}
       { deviceInfo && deviceInfo.bluetooth ? (
-        <>
-          <div className={styles.section}>
-            <SubTitle className={styles.withMobilePadding}>Bluetooth</SubTitle>
-            <BluetoothFirmwareSetting
-              firmwareVersion={deviceInfo.bluetooth.firmwareVersion}
-            />
-          </div>
-        </>
+        <div className={styles.section}>
+          <SubTitle className={styles.withMobilePadding}>Bluetooth</SubTitle>
+          <BluetoothToggleEnabledSetting
+            deviceID={deviceID} />
+          <BluetoothFirmwareSetting
+            firmwareVersion={deviceInfo.bluetooth.firmwareVersion}
+          />
+        </div>
       ) : null }
 
       {/*"Expert settings" section*/}

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

@@ -0,0 +1,107 @@
+/**
+ * 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 { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PointToBitBox02 } from '@/components/icon';
+import { bluetoothToggleEnabled, getDeviceInfo } from '@/api/bitbox02';
+import { alertUser } from '@/components/alert/Alert';
+import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
+import { WaitDialog } from '@/components/wait-dialog/wait-dialog';
+import { StyledSkeleton } from '@/routes/settings/bb02-settings';
+
+type TBluetoothToggleEnabledSettingProps = {
+  deviceID: string;
+}
+
+type TToggleEnabledWaitDialogProps = {
+  show: boolean;
+  enabled: boolean;
+}
+
+const ToggleEnabledWaitDialog = ({ show, enabled }: TToggleEnabledWaitDialogProps) => {
+  const { t } = useTranslation();
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <WaitDialog
+      title={enabled ? t('bitbox02Settings.bluetoothToggleEnabled.titleEnabled') : t('bitbox02Settings.bluetoothToggleEnabled.titleDisabled')} >
+      <p>{t('bitbox02Interact.followInstructions')}</p>
+      <PointToBitBox02 />
+    </WaitDialog>
+  );
+};
+
+const BluetoothToggleEnabledSetting = ({ deviceID }: TBluetoothToggleEnabledSettingProps) => {
+  const { t } = useTranslation();
+  const [show, setShow] = useState(false);
+  const [enabled, setEnabled] = useState<undefined | boolean>(undefined);
+
+  const updateEnabled = useCallback(async () => {
+    const deviceInfoResult = await getDeviceInfo(deviceID);
+    if (!deviceInfoResult.success) {
+      console.error(deviceInfoResult.message);
+      alertUser(deviceInfoResult.message || t('genericError'));
+      return;
+    }
+    const bluetooth = deviceInfoResult.deviceInfo.bluetooth;
+    if (!bluetooth) {
+      return;
+    }
+    setEnabled(bluetooth.enabled);
+    return bluetooth.enabled;
+  }, [deviceID, t]);
+
+  useEffect(() => {
+    updateEnabled();
+  }, [updateEnabled]);
+
+  const handleBluetoothToggleEnabled = async () => {
+    setShow(true);
+    const result = await bluetoothToggleEnabled(deviceID);
+    if (!result.success) {
+      setShow(false);
+      console.error(result.message);
+      alertUser(result.message || t('genericError'));
+      return;
+    }
+    setShow(false);
+    const enabled = await updateEnabled();
+    if (enabled === true) {
+      alertUser(t('bitbox02Settings.bluetoothToggleEnabled.alertEnabled'));
+    } else if (enabled === false) {
+      alertUser(t('bitbox02Settings.bluetoothToggleEnabled.alertDisabled'));
+    }
+  };
+  if (enabled === undefined) {
+    return <StyledSkeleton />;
+  }
+  return (
+    <>
+      <SettingsItem
+        settingName={enabled ? t('bitbox02Settings.bluetoothToggleEnabled.titleEnabled') : t('bitbox02Settings.bluetoothToggleEnabled.titleDisabled')}
+        secondaryText={t('bitbox02Settings.bluetoothToggleEnabled.description')}
+        onClick={handleBluetoothToggleEnabled}
+      />
+      <ToggleEnabledWaitDialog show={show} enabled={enabled} />
+    </>
+  );
+};
+
+export { BluetoothToggleEnabledSetting };