feat(suite): Disable switch wallet on discovery (#15984)

* feat(suite): Disable switch wallet on discovery * fix(e2e): Fixed waiting for discovery in metadata lifecycle test --------- Co-authored-by: Ondrej Hajek <[email protected]>
trezor · Dec 16, 2024 · 44ad7bc · 44ad7bc
1 parent 7bb7901
commit 44ad7bc
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 28 deletions.
diff --git a/packages/suite-web/e2e/tests/metadata/metadata-lifecycle.test.ts b/packages/suite-web/e2e/tests/metadata/metadata-lifecycle.test.ts
@@ -54,11 +54,11 @@ describe('Metadata - cancel metadata on device', () => {
         cy.task('pressNo');
 
         // set wallet to remembered
+        cy.discoveryShouldFinish();
         cy.getTestElement('@menu/switch-device').click();
         cy.getTestElement('@viewOnlyStatus/disabled').click();
         cy.getTestElement('@viewOnly/radios/enabled').click();
         cy.safeReload();
-        cy.discoveryShouldFinish(); // no dialogue, metadata keys survive together with remembered wallet!
 
         // but when user tries to add another wallet, there is enable labeling dialogue again
         cy.getTestElement('@menu/switch-device').click();

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx
@@ -6,16 +6,17 @@ import { selectDevicesCount, selectSelectedDevice } from '@suite-common/wallet-c
 import type { TimerId } from '@trezor/type-utils';
 import { borders, spacingsPx } from '@trezor/theme';
 import { focusStyleTransition, getFocusShadowStyle } from '@trezor/components/src/utils/utils';
-import { Icon } from '@trezor/components';
+import { Icon, Tooltip } from '@trezor/components';
 
 import { SHAKE } from 'src/support/suite/styles/animations';
 import { goto } from 'src/actions/suite/routerActions';
-import { useDispatch, useSelector } from 'src/hooks/suite';
+import { useDiscovery, useDispatch, useSelector } from 'src/hooks/suite';
 import { ViewOnlyTooltip } from 'src/views/view-only/ViewOnlyTooltip';
 
 import { SidebarDeviceStatus } from './SidebarDeviceStatus';
 import { ExpandedSidebarOnly } from '../Sidebar/ExpandedSidebarOnly';
 import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
+import { Translation } from '../../../Translation';
 
 const CaretContainer = styled.div`
     background: transparent;
@@ -57,22 +58,26 @@ const Wrapper = styled.div<{ $isAnimationTriggered?: boolean; $isSidebarCollapse
         `}
 `;
 
-const InnerContainer = styled.div`
+const InnerContainer = styled.div<{ $isDisabled?: boolean }>`
     position: relative;
     width: 100%;
     display: flex;
     align-items: center;
-    cursor: pointer;
     gap: ${spacingsPx.md};
     min-height: 42px;
     -webkit-app-region: no-drag;
+
+    cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
 `;
 
 export const DeviceSelector = () => {
     const selectedDevice = useSelector(selectSelectedDevice);
 
     const deviceCount = useSelector(selectDevicesCount);
     const dispatch = useDispatch();
+    const { getDiscoveryStatus } = useDiscovery();
+    const discoveryStatus = getDiscoveryStatus();
+    const discoveryInProgress = discoveryStatus && discoveryStatus.status === 'loading';
 
     const [localCount, setLocalCount] = useState<number | null>(null);
     const [isAnimationTriggered, setIsAnimationTriggered] = useState(false);
@@ -108,14 +113,17 @@ export const DeviceSelector = () => {
         }
     }, [countChanged]);
 
-    const handleSwitchDeviceClick = () =>
-        dispatch(
-            goto('suite-switch-device', {
-                params: {
-                    cancelable: true,
-                },
-            }),
-        );
+    const handleSwitchDeviceClick = () => {
+        if (!discoveryInProgress) {
+            dispatch(
+                goto('suite-switch-device', {
+                    params: {
+                        cancelable: true,
+                    },
+                }),
+            );
+        }
+    };
 
     const { isSidebarCollapsed } = useResponsiveContext();
 
@@ -125,21 +133,30 @@ export const DeviceSelector = () => {
             $isSidebarCollapsed={isSidebarCollapsed}
         >
             <ViewOnlyTooltip>
-                <InnerContainer
-                    onClick={handleSwitchDeviceClick}
-                    tabIndex={0}
-                    data-testid="@menu/switch-device"
+                <Tooltip
+                    content={
+                        discoveryInProgress ? (
+                            <Translation id="TR_UNAVAILABLE_WHILE_LOADING" />
+                        ) : undefined
+                    }
                 >
-                    <SidebarDeviceStatus />
-
-                    <ExpandedSidebarOnly>
-                        {selectedDevice && selectedDevice.state && (
-                            <CaretContainer>
-                                <Icon size={20} name="caretCircleDown" />
-                            </CaretContainer>
-                        )}
-                    </ExpandedSidebarOnly>
-                </InnerContainer>
+                    <InnerContainer
+                        onClick={handleSwitchDeviceClick}
+                        $isDisabled={discoveryInProgress}
+                        tabIndex={0}
+                        data-testid="@menu/switch-device"
+                    >
+                        <SidebarDeviceStatus />
+
+                        <ExpandedSidebarOnly>
+                            {selectedDevice && selectedDevice.state && (
+                                <CaretContainer>
+                                    <Icon size={20} name="caretCircleDown" />
+                                </CaretContainer>
+                            )}
+                        </ExpandedSidebarOnly>
+                    </InnerContainer>
+                </Tooltip>
             </ViewOnlyTooltip>
         </Wrapper>
     );

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx
@@ -67,7 +67,7 @@ export const DeviceStatus = ({
                     {content}
                 </>
             ) : (
-                <Tooltip hasArrow cursor="pointer" placement="right" content={content}>
+                <Tooltip hasArrow cursor="inherit" placement="right" content={content}>
                     {image}
                 </Tooltip>
             )}