chore(suite): rework UnreadableDevice troubleshooting

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

@@ -4,11 +4,11 @@ import { desktopApi } from '@trezor/suite-desktop-api';
 import { isDesktop, isLinux } from '@trezor/env-utils';
 import { Translation, TroubleshootingTips, UdevDownload } from 'src/components/suite';
 import {
-    TROUBLESHOOTING_TIP_BRIDGE_STATUS,
     TROUBLESHOOTING_TIP_SUITE_DESKTOP,
-    TROUBLESHOOTING_TIP_CABLE,
-    TROUBLESHOOTING_TIP_USB,
     TROUBLESHOOTING_TIP_DIFFERENT_COMPUTER,
+    TROUBLESHOOTING_TIP_UNREADABLE_HID,
+    TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE,
+    TROUBLESHOOTING_TIP_RECONNECT,
 } from 'src/components/suite/troubleshooting/tips';
 import { useDispatch } from 'src/hooks/suite';
 import { notificationsActions } from '@suite-common/toast-notifications';
@@ -102,20 +102,10 @@ interface DeviceUnreadableProps {
     isWebUsbTransport: boolean;
 }
 
-// We don't really know what happened, show some generic help and provide link to contact a support
+/**
+ * Device was detected but App can't communicate with it.
+ */
 export const DeviceUnreadable = ({ device, isWebUsbTransport }: DeviceUnreadableProps) => {
-    if (isWebUsbTransport) {
-        // only install bridge will help (webusb + HID device)
-        return (
-            <TroubleshootingTips
-                label={<Translation id="TR_TROUBLESHOOTING_UNREADABLE_WEBUSB" />}
-                items={[TROUBLESHOOTING_TIP_BRIDGE_STATUS, TROUBLESHOOTING_TIP_SUITE_DESKTOP]}
-                offerWebUsb
-                data-testid="@connect-device-prompt/unreadable-hid"
-            />
-        );
-    }
-
     // this error is dispatched by trezord when udev rules are missing
     if (isLinux() && device?.error === 'LIBUSB_ERROR_ACCESS') {
         return <> {isDesktop() ? <UdevDesktop /> : <UdevWeb />}</>;
@@ -130,8 +120,18 @@ export const DeviceUnreadable = ({ device, isWebUsbTransport }: DeviceUnreadable
                 />
             }
             items={[
-                TROUBLESHOOTING_TIP_CABLE,
-                TROUBLESHOOTING_TIP_USB,
+                // closing other apps and reloading should be the first step. Either we might have made a bug and let two apps to talk
+                // to device at the same time or there might be another application in the wild not really playing according to our rules
+                TROUBLESHOOTING_TIP_RECONNECT,
+                // if on web - try installing desktop. this takes you to using bridge which should be more powerful than WebUSB
+                TROUBLESHOOTING_TIP_SUITE_DESKTOP,
+                // you might have a very old device which is no longer supported current bridge
+                // if on desktop - try toggling between the 2 bridges we have available
+                TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE,
+                // If even this did not work, go to support or knowledge base
+                TROUBLESHOOTING_TIP_UNREADABLE_HID,
+                // unfortunately we have seen reports that even old bridge might not be enough for some Windows users. So the only chance
+                // is using another computer, or maybe it would be better to say another OS
                 TROUBLESHOOTING_TIP_DIFFERENT_COMPUTER,
             ]}
             offerWebUsb={isWebUsbTransport}

packages/suite/src/components/suite/troubleshooting/tips/BridgeTip.tsx

@@ -5,8 +5,10 @@ import { typography } from '@trezor/theme';
 import { TrezorLink } from 'src/components/suite';
 import { Translation } from 'src/components/suite/Translation';
 import { useOpenSuiteDesktop } from 'src/hooks/suite/useOpenSuiteDesktop';
+import { useBridgeDesktopApi } from 'src/hooks/suite/useBridgeDesktopApi';
+import { useSelector } from 'src/hooks/suite';
 
-const Wrapper = styled.div`
+export const Wrapper = styled.div`
     a {
         ${typography.hint};
     }
@@ -45,3 +47,34 @@ export const BridgeStatus = () => (
         />
     </Wrapper>
 );
+
+export const BridgeToggle = () => {
+    const { changeBridgeSettings, bridgeSettings } = useBridgeDesktopApi();
+    const transport = useSelector(state => state.suite.transport);
+
+    if (!bridgeSettings) return null;
+
+    return (
+        <Wrapper>
+            <Translation
+                id="TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE_DESCRIPTION"
+                values={{
+                    currentVersion: transport?.version,
+                    a: chunks => (
+                        <TrezorLink
+                            variant="underline"
+                            onClick={() => {
+                                changeBridgeSettings({
+                                    ...bridgeSettings,
+                                    legacy: !bridgeSettings?.legacy,
+                                });
+                            }}
+                        >
+                            {chunks}
+                        </TrezorLink>
+                    ),
+                }}
+            />
+        </Wrapper>
+    );
+};

packages/suite/src/components/suite/troubleshooting/tips/index.tsx

@@ -1,9 +1,11 @@
 import { isWeb, isDesktop, isLinux, isAndroid } from '@trezor/env-utils';
+import { OLD_FW_UPDATE_URL } from '@trezor/urls';
 
+import { TrezorLink } from 'src/components/suite';
 import { Translation } from 'src/components/suite/Translation';
 import { isWebUsb } from 'src/utils/suite/transport';
 
-import { BridgeStatus, BridgeInstall } from './BridgeTip';
+import { BridgeStatus, BridgeInstall, BridgeToggle, Wrapper } from './BridgeTip';
 import { UdevDescription } from './UdevDescription';
 
 export const TROUBLESHOOTING_TIP_BRIDGE_STATUS = {
@@ -20,13 +22,39 @@ export const TROUBLESHOOTING_TIP_WEBUSB_ENVIRONMENT = {
     hide: isWebUsb() || !isWeb(),
 };
 
+export const TROUBLESHOOTING_TIP_UNREADABLE_HID = {
+    key: 'unreadable-hid',
+    heading: <Translation id="TR_TROUBLESHOOTING_TIP_UNREADABLE_HID_TITLE" />,
+    description: (
+        <Wrapper>
+            <Translation
+                id="TR_TROUBLESHOOTING_TIP_UNREADABLE_HID_DESCRIPTION"
+                values={{
+                    a: chunks => (
+                        <TrezorLink variant="underline" href={OLD_FW_UPDATE_URL}>
+                            {chunks}
+                        </TrezorLink>
+                    ),
+                }}
+            />
+        </Wrapper>
+    ),
+};
+
 export const TROUBLESHOOTING_TIP_SUITE_DESKTOP = {
     key: 'suite-desktop',
     heading: <Translation id="TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TITLE" />,
     description: <BridgeInstall />,
     hide: !isWeb(),
 };
 
+export const TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE = {
+    key: 'suite-desktop',
+    heading: <Translation id="TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE_TITLE" />,
+    description: <BridgeToggle />,
+    hide: isWebUsb() || isWeb() || isAndroid(),
+};
+
 export const TROUBLESHOOTING_TIP_CABLE = {
     key: 'cable',
     heading: <Translation id="TR_TROUBLESHOOTING_TIP_CABLE_TITLE" />,

packages/suite/src/support/messages.ts

@@ -7197,6 +7197,15 @@ export default defineMessages({
             'Only Chromium-based browsers currently allow direct communication with USB devices',
         id: 'TR_TROUBLESHOOTING_TIP_BROWSER_WEBUSB_DESCRIPTION',
     },
+    TR_TROUBLESHOOTING_TIP_UNREADABLE_HID_TITLE: {
+        defaultMessage: 'You may be using a very old Trezor model',
+        id: 'TR_TROUBLESHOOTING_TIP_BROWSER_WEBUSB_TITLE',
+    },
+    TR_TROUBLESHOOTING_TIP_UNREADABLE_HID_DESCRIPTION: {
+        defaultMessage:
+            'If the last time you updated your device firmware was in 2019 and earlier please follow instructions in <a>the knowledge base</a>',
+        id: 'TR_TROUBLESHOOTING_TIP_BROWSER_WEBUSB_DESCRIPTION',
+    },
     TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TITLE: {
         id: 'TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TITLE',
         defaultMessage: 'Use the Trezor Suite desktop app',
@@ -7205,6 +7214,15 @@ export default defineMessages({
         id: 'TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_DESCRIPTION',
         defaultMessage: 'Run the  <a>Trezor Suite</a> desktop app',
     },
+    TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE_TITLE: {
+        id: 'TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE_TITLE',
+        defaultMessage: 'Use another version of Trezor Bridge',
+    },
+    TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE_DESCRIPTION: {
+        id: 'TR_TROUBLESHOOTING_TIP_SUITE_DESKTOP_TOGGLE_BRIDGE_DESCRIPTION',
+        defaultMessage:
+            '<a>Click to toggle</a> an alternative bridge implementation. Current version: ({currentVersion})',
+    },
     TR_TROUBLESHOOTING_TIP_UDEV_INSTALL_DESCRIPTION: {
         id: 'TR_TROUBLESHOOTING_TIP_UDEV_INSTALL_DESCRIPTION',
         defaultMessage:
@@ -7223,6 +7241,7 @@ export default defineMessages({
             'After closing other browser tabs and windows, try quitting and reopening Trezor Suite.',
         id: 'TR_TROUBLESHOOTING_CLOSE_TABS_DESCRIPTION_DESKTOP',
     },
+
     TR_TROUBLESHOOTING_TIP_CABLE_TITLE: {
         id: 'TR_TROUBLESHOOTING_TIP_CABLE_TITLE',
         defaultMessage: 'Try a different cable',
@@ -7257,11 +7276,6 @@ export default defineMessages({
         id: 'TR_TROUBLESHOOTING_TIP_RESTART_COMPUTER_DESCRIPTION',
         defaultMessage: 'Just in case',
     },
-    TR_TROUBLESHOOTING_UNREADABLE_WEBUSB: {
-        id: 'TR_TROUBLESHOOTING_UNREADABLE_WEBUSB',
-        defaultMessage:
-            "Your device is connected properly, but your browser can't communicate with it at the moment. You need to install Trezor Bridge.",
-    },
     TR_TROUBLESHOOTING_UNREADABLE_UDEV: {
         id: 'TR_TROUBLESHOOTING_UNREADABLE_UDEV',
         defaultMessage: 'Missing udev rules',