feat: Add bluetooth debug-settings

Author: peter-sanderson

packages/suite/src/actions/suite/__fixtures__/suiteActions.ts

@@ -214,6 +214,7 @@ const initialRun = [
                 showCopyAddressModal: true,
                 showUnhideTokenModal: true,
                 enableAutoupdateOnNextRun: false,
+                isBluetoothEnabled: false,
             },
         },
     },

packages/suite/src/components/suite/PrerequisitesGuide/DeviceConnect.tsx

@@ -1,3 +1,5 @@
+import { Button } from '@trezor/components';
+
 import { Translation, TroubleshootingTips, WebUsbButton } from 'src/components/suite';
 import {
     TROUBLESHOOTING_TIP_BRIDGE_STATUS,
@@ -8,11 +10,42 @@ import {
     TROUBLESHOOTING_TIP_USB,
 } from 'src/components/suite/troubleshooting/tips';
 
+import { useSelector } from '../../../hooks/suite';
+import { selectHasTransportOfType, selectSuiteFlags } from '../../../reducers/suite/suiteReducer';
+
+const CallToActionButton = ({ onBluetoothClick }: { onBluetoothClick: () => void }) => {
+    const { isBluetoothEnabled } = useSelector(selectSuiteFlags);
+    const isWebUsbTransport = useSelector(selectHasTransportOfType('WebUsbTransport'));
+
+    if (isBluetoothEnabled) {
+        return (
+            <Button
+                variant="tertiary"
+                size="tiny"
+                onClick={e => {
+                    e.stopPropagation();
+                    onBluetoothClick();
+                }}
+            >
+                <Translation id="TR_CONNECT_BLUETOOTH_BUTTON" />
+            </Button>
+        );
+    }
+
+    if (isWebUsbTransport) {
+        return <WebUsbButton data-testid="@webusb-button" />;
+    }
+
+    return null;
+};
+
 interface DeviceConnectProps {
-    isWebUsbTransport: boolean;
+    onBluetoothClick: () => void;
 }
 
-export const DeviceConnect = ({ isWebUsbTransport }: DeviceConnectProps) => {
+export const DeviceConnect = ({ onBluetoothClick }: DeviceConnectProps) => {
+    const isWebUsbTransport = useSelector(selectHasTransportOfType('WebUsbTransport'));
+
     const items = isWebUsbTransport
         ? [
               TROUBLESHOOTING_TIP_UDEV,
@@ -32,7 +65,7 @@ export const DeviceConnect = ({ isWebUsbTransport }: DeviceConnectProps) => {
         <TroubleshootingTips
             label={<Translation id="TR_STILL_DONT_SEE_YOUR_TREZOR" />}
             items={items}
-            cta={isWebUsbTransport ? <WebUsbButton data-testid="@webusb-button" /> : undefined}
+            cta={<CallToActionButton onBluetoothClick={onBluetoothClick} />}
             data-testid="@connect-device-prompt/no-device-detected"
         />
     );

packages/suite/src/components/suite/PrerequisitesGuide/PrerequisitesGuide.tsx

@@ -1,16 +1,16 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
 import { deviceNeedsAttention, getStatus } from '@suite-common/suite-utils';
 import { selectDevices, selectSelectedDevice } from '@suite-common/wallet-core';
-import { Button, motionEasing } from '@trezor/components';
+import { Button, ElevationContext, ElevationDown, Flex, motionEasing } from '@trezor/components';
 
 import { goto } from 'src/actions/suite/routerActions';
 import { ConnectDevicePrompt, Translation } from 'src/components/suite';
 import { useDispatch, useSelector } from 'src/hooks/suite';
-import { selectHasTransportOfType, selectPrerequisite } from 'src/reducers/suite/suiteReducer';
+import { selectPrerequisite } from 'src/reducers/suite/suiteReducer';
 
 import { DeviceAcquire } from './DeviceAcquire';
 import { DeviceBootloader } from './DeviceBootloader';
@@ -43,16 +43,25 @@ const ButtonWrapper = styled.div`
     margin-top: 30px;
 `;
 
-interface PrerequisitesGuideProps {
+const Bluetooth = () => (
+    <ElevationContext baseElevation={-1}>
+        {/* Here we need to draw the inner card with elevation -1 (custom design) */}
+        <ElevationDown>
+            <Flex width={470}>Here will be the Bluetooth connection dialog</Flex>
+        </ElevationDown>
+    </ElevationContext>
+);
+
+type NonBluetoothProps = {
     allowSwitchDevice?: boolean;
-}
+    setIsBluetoothConnectOpen: (isOpen: boolean) => void;
+};
 
-export const PrerequisitesGuide = ({ allowSwitchDevice }: PrerequisitesGuideProps) => {
+const NonBluetooth = ({ allowSwitchDevice, setIsBluetoothConnectOpen }: NonBluetoothProps) => {
     const dispatch = useDispatch();
     const device = useSelector(selectSelectedDevice);
     const devices = useSelector(selectDevices);
     const connectedDevicesCount = devices.filter(d => d.connected === true).length;
-    const isWebUsbTransport = useSelector(selectHasTransportOfType('WebUsbTransport'));
     const prerequisite = useSelector(selectPrerequisite);
 
     const TipComponent = useMemo(
@@ -63,7 +72,9 @@ export const PrerequisitesGuide = ({ allowSwitchDevice }: PrerequisitesGuideProp
                 case 'device-disconnect-required':
                     return <DeviceDisconnectRequired />;
                 case 'device-disconnected':
-                    return <DeviceConnect isWebUsbTransport={isWebUsbTransport} />;
+                    return (
+                        <DeviceConnect onBluetoothClick={() => setIsBluetoothConnectOpen(true)} />
+                    );
                 case 'device-unacquired':
                     return <DeviceAcquire />;
                 case 'device-used-elsewhere':
@@ -91,14 +102,14 @@ export const PrerequisitesGuide = ({ allowSwitchDevice }: PrerequisitesGuideProp
                     return <></>;
             }
         },
-        [prerequisite, isWebUsbTransport, device],
+        [prerequisite, device, setIsBluetoothConnectOpen],
     );
 
     const handleSwitchDeviceClick = () =>
         dispatch(goto('suite-switch-device', { params: { cancelable: true } }));
 
     return (
-        <Wrapper>
+        <>
             <ConnectDevicePrompt
                 connected={!!device}
                 showWarning={
@@ -123,6 +134,27 @@ export const PrerequisitesGuide = ({ allowSwitchDevice }: PrerequisitesGuideProp
             >
                 <TipComponent />
             </TipsContainer>
+        </>
+    );
+};
+
+interface PrerequisitesGuideProps {
+    allowSwitchDevice?: boolean;
+}
+
+export const PrerequisitesGuide = ({ allowSwitchDevice }: PrerequisitesGuideProps) => {
+    const [isBluetoothConnectOpen, setIsBluetoothConnectOpen] = useState(false);
+
+    return (
+        <Wrapper>
+            {isBluetoothConnectOpen ? (
+                <Bluetooth />
+            ) : (
+                <NonBluetooth
+                    allowSwitchDevice={allowSwitchDevice}
+                    setIsBluetoothConnectOpen={setIsBluetoothConnectOpen}
+                />
+            )}
         </Wrapper>
     );
 };

packages/suite/src/reducers/suite/suiteReducer.ts

@@ -85,6 +85,7 @@ export interface Flags {
     showUnhideTokenModal: boolean;
     showCopyAddressModal: boolean;
     enableAutoupdateOnNextRun: boolean;
+    isBluetoothEnabled: boolean;
 }
 
 export interface EvmSettings {
@@ -164,6 +165,7 @@ const initialState: SuiteState = {
         showCopyAddressModal: true,
         showUnhideTokenModal: true,
         enableAutoupdateOnNextRun: false,
+        isBluetoothEnabled: false,
     },
     evmSettings: {
         confirmExplanationModalClosed: {},

packages/suite/src/support/messages.ts

@@ -9492,4 +9492,12 @@ export default defineMessages({
         id: 'TR_WALLTCONNECT_SESSIONS',
         defaultMessage: 'Sessions',
     },
+    TR_BLUETOOTH: {
+        id: 'TR_BLUETOOTH',
+        defaultMessage: 'Bluetooth',
+    },
+    TR_CONNECT_BLUETOOTH_BUTTON: {
+        id: 'TR_CONNECT_BLUETOOTH_BUTTON',
+        defaultMessage: 'Connect Safe 7 via bluetooth',
+    },
 });

packages/suite/src/views/settings/SettingsDebug/Bluetooth.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+import { Checkbox } from '@trezor/components';
+
+import { ActionColumn, SectionItem, TextColumn } from 'src/components/suite';
+import { useDispatch, useSelector } from 'src/hooks/suite';
+
+// import { initBluetoothThunk } from '../../../actions/bluetooth/initBluetoothThunk';
+import { setFlag } from '../../../actions/suite/suiteActions';
+import { selectSuiteFlags } from '../../../reducers/suite/suiteReducer';
+
+export const Bluetooth = () => {
+    const { isBluetoothEnabled } = useSelector(selectSuiteFlags);
+    const dispatch = useDispatch();
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleOnClick = () => {
+        setIsLoading(true);
+        dispatch(setFlag('isBluetoothEnabled', !isBluetoothEnabled));
+        // await dispatch(initBluetoothThunk());
+        setIsLoading(false);
+    };
+
+    return (
+        <SectionItem>
+            <TextColumn title="Bluetooth enabled" />
+            <ActionColumn>
+                <Checkbox
+                    isDisabled={isLoading}
+                    isChecked={isBluetoothEnabled}
+                    onClick={handleOnClick}
+                />
+            </ActionColumn>
+        </SectionItem>
+    );
+};

packages/suite/src/views/settings/SettingsDebug/SettingsDebug.tsx

@@ -1,10 +1,12 @@
 import { isDesktop, isWeb } from '@trezor/env-utils';
 
 import { SettingsLayout, SettingsSection } from 'src/components/settings';
+import { Translation } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { selectSuiteFlags } from 'src/reducers/suite/suiteReducer';
 
 import { Backends } from './Backends';
+import { Bluetooth } from './Bluetooth';
 import { CheckFirmwareAuthenticity } from './CheckFirmwareAuthenticity';
 import { CoinjoinApi } from './CoinjoinApi';
 import { DeviceAuthenticity } from './DeviceAuthenticity';
@@ -88,6 +90,11 @@ export const SettingsDebug = () => {
             <SettingsSection title="WalletConnect">
                 <WalletConnect />
             </SettingsSection>
+            {isDesktop() && (
+                <SettingsSection title={<Translation id="TR_BLUETOOTH" />}>
+                    <Bluetooth />
+                </SettingsSection>
+            )}
         </SettingsLayout>
     );
 };