feat(suite): added bluetooth adapter status modal and no trezor found modal

Author: OriginalEveres

packages/suite/src/components/suite/modals/ReduxModal/ConnectDeviceModal/BluetoothAdapterStatusModal.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+
+import { TranslationKey } from '@suite-common/intl-types';
+import { Button, Flex, Modal, Text } from '@trezor/components';
+import { desktopApi } from '@trezor/suite-desktop-api';
+import { spacings } from '@trezor/theme';
+
+import { Translation } from 'src/components/suite/Translation';
+
+type BluetoothAdapterStatusModalProps = {
+    bluetoothAdapterStatus: 'disabled' | 'permission-denied' | 'not-compatible';
+    onCancel: () => void;
+};
+
+type AdapterIssueSolution = {
+    title: TranslationKey;
+    description: TranslationKey;
+    ctaText?: TranslationKey;
+    onCtaClick?: () => void;
+    deeplinkFailed?: TranslationKey;
+};
+
+export const BluetoothAdapterStatusModal = ({
+    bluetoothAdapterStatus,
+    onCancel,
+}: BluetoothAdapterStatusModalProps) => {
+    const [hasDeeplinkFailed, setHasDeeplinkFailed] = useState(false);
+
+    const openBluetoothSettings = async (settingsPage: 'bluetooth' | 'bluetooth-permissions') => {
+        const opened = await desktopApi.openSystemSettings(settingsPage);
+        if (!opened.success) {
+            setHasDeeplinkFailed(true);
+        }
+    };
+    const openBluetoothEnableSettings = () => {
+        openBluetoothSettings('bluetooth');
+    };
+    const openBluetoothSecuritySettings = () => {
+        openBluetoothSettings('bluetooth-permissions');
+    };
+
+    const statuses: Record<string, AdapterIssueSolution> = {
+        disabled: {
+            title: 'TR_BLUETOOTH_TURNED_OFF',
+            description: 'TR_BLUETOOTH_TURNED_OFF_TEXT',
+            ctaText: 'TR_BLUETOOTH_SETTINGS',
+            onCtaClick: openBluetoothEnableSettings,
+            deeplinkFailed: 'TR_BLUETOOTH_CANNOT_OPEN_BLUETOOTH_SETTINGS',
+        },
+        'permission-denied': {
+            title: 'TR_BLUETOOTH_ALLOW_BLUETOOTH_PERMISSIONS',
+            description: 'TR_BLUETOOTH_OR_CONNECT_VIA_CABLE',
+            ctaText: 'TR_BLUETOOTH_SETTINGS',
+            onCtaClick: openBluetoothSecuritySettings,
+            deeplinkFailed: 'TR_BLUETOOTH_CANNOT_OPEN_BLUETOOTH_SETTINGS_PERMISSIONS',
+        },
+        'not-compatible': {
+            title: 'TR_BLUETOOTH_VERSION_NOT_COMPATIBLE_LINE1',
+            description: 'TR_BLUETOOTH_VERSION_NOT_COMPATIBLE_LINE2',
+        },
+    };
+
+    const status = statuses[bluetoothAdapterStatus];
+
+    return (
+        <Modal
+            heading={<Translation id={status.title} />}
+            onCancel={onCancel}
+            bottomContent={
+                <>
+                    {status.ctaText && (
+                        <Button isDisabled={hasDeeplinkFailed} onClick={status.onCtaClick}>
+                            <Translation id={status.ctaText} />
+                        </Button>
+                    )}
+                    <Button onClick={onCancel} variant="tertiary">
+                        <Translation id="TR_CANCEL" />
+                    </Button>
+                </>
+            }
+        >
+            <Flex gap={spacings.md} direction="column">
+                <Text>
+                    <Translation id={status.description}></Translation>
+                </Text>
+
+                {hasDeeplinkFailed && status.deeplinkFailed && (
+                    <Text variant="warning">
+                        <Translation id={status.deeplinkFailed} />
+                    </Text>
+                )}
+            </Flex>
+        </Modal>
+    );
+};

packages/suite/src/components/suite/modals/ReduxModal/ConnectDeviceModal/DontSeeYourTrezorModal.tsx

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+
+import { Button, Modal } from '@trezor/components';
+import { isDesktop } from '@trezor/env-utils';
+import { TREZOR_SUPPORT_URL } from '@trezor/urls';
+
+import { Translation } from 'src/components/suite/Translation';
+import { TroubleshootingTipsItem } from 'src/components/suite/troubleshooting/TroubleshootingTips';
+import { TroubleshootingTipsList } from 'src/components/suite/troubleshooting/TroubleshootingTipsList';
+import {
+    TROUBLESHOOTING_ALL_BLUETOOTH_TIPS,
+    TROUBLESHOOTING_TIP_BRIDGE_STATUS,
+    TROUBLESHOOTING_TIP_CABLE,
+    TROUBLESHOOTING_TIP_DIFFERENT_COMPUTER,
+    TROUBLESHOOTING_TIP_SUITE_DESKTOP,
+    TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE,
+    TROUBLESHOOTING_TIP_UDEV,
+    TROUBLESHOOTING_TIP_USB,
+} from 'src/components/suite/troubleshooting/tips';
+import { useSelector } from 'src/hooks/suite';
+import { useBridgeDesktopApi } from 'src/hooks/suite/useBridgeDesktopApi';
+import { selectHasTransportOfType } from 'src/selectors/suite/suiteSelectors';
+
+type DontSeeYourTrezorModalProps = {
+    isBluetoothMode: boolean;
+    onGoBack?: () => void;
+};
+
+const commonCableTips = [
+    TROUBLESHOOTING_TIP_UDEV,
+    TROUBLESHOOTING_TIP_CABLE,
+    TROUBLESHOOTING_TIP_USB,
+];
+
+export const DontSeeYourTrezorModal = ({
+    onGoBack,
+    isBluetoothMode,
+}: DontSeeYourTrezorModalProps) => {
+    const isWebUsbTransport = useSelector(selectHasTransportOfType('WebUsbTransport'));
+
+    const bridgeDesktopApi = useBridgeDesktopApi();
+
+    const openTrezorSupport = () => {
+        window.open(TREZOR_SUPPORT_URL, '_blank');
+        onGoBack?.();
+    };
+
+    const cableItem: TroubleshootingTipsItem[] = useMemo(() => {
+        const items = isWebUsbTransport
+            ? [...commonCableTips, TROUBLESHOOTING_TIP_SUITE_DESKTOP]
+            : [
+                  TROUBLESHOOTING_TIP_BRIDGE_STATUS,
+                  ...commonCableTips,
+                  TROUBLESHOOTING_TIP_DIFFERENT_COMPUTER,
+              ];
+
+        if (bridgeDesktopApi?.bridgeProcess?.process) {
+            items.push(TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE);
+        } else {
+            // TODO: here we are going to put instruction to uninstall standalone bridge
+        }
+
+        return items;
+    }, [isWebUsbTransport, bridgeDesktopApi]);
+
+    const tipItems = useMemo(() => {
+        if (isBluetoothMode && isDesktop()) {
+            return TROUBLESHOOTING_ALL_BLUETOOTH_TIPS;
+        }
+
+        return cableItem;
+    }, [isBluetoothMode, cableItem]);
+
+    return (
+        <Modal
+            bottomContent={
+                <>
+                    <Button onClick={onGoBack} variant="info">
+                        <Translation
+                            id={isBluetoothMode ? 'TR_BLUETOOTH_SCAN_AGAIN' : 'TR_GOT_IT'}
+                        />
+                    </Button>
+                    <Button
+                        variant="tertiary"
+                        onClick={isBluetoothMode ? onGoBack : openTrezorSupport}
+                    >
+                        <Translation
+                            id={isBluetoothMode ? 'TR_CANCEL' : 'TR_CONTACT_TREZOR_SUPPORT'}
+                        />
+                    </Button>
+                </>
+            }
+            heading={<Translation id="TR_STILL_DONT_SEE_YOUR_TREZOR" />}
+            onCancel={onGoBack}
+        >
+            <TroubleshootingTipsList items={tipItems} />
+        </Modal>
+    );
+};