fix(suite): add missing 'use device here' button in the device settings

trezor · Jan 29, 2025 · 967fc34 · 967fc34
1 parent 3a6d0c1
commit 967fc34
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 30 deletions.
diff --git a/packages/suite-desktop-core/e2e/tests/suite/multiple-sessions.test.ts b/packages/suite-desktop-core/e2e/tests/suite/multiple-sessions.test.ts
@@ -96,4 +96,7 @@ test.describe('Multiple sessions', { tag: ['@group=suite'] }, () => {
             await expect(dashboardPage.deviceStatus).toHaveText('Refresh');
         },
     );
+
+    // todo: test what happens if you steal session and navigate directly to device settings (web)
+    // todo: test the same for other routes as well (/recovery, /backup, etc..)
 });
diff --git a/packages/suite/src/components/settings/DeviceBanner.tsx b/packages/suite/src/components/settings/DeviceBanner.tsx
@@ -2,27 +2,26 @@ import { ReactNode } from 'react';
 
 import styled from 'styled-components';
 
-import { Card, LottieAnimation, Paragraph, Row, variables, Text } from '@trezor/components';
+import { Card, Column, LottieAnimation, Paragraph, Row, variables, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { useDevice, useSelector } from 'src/hooks/suite';
 import { WebUsbButton } from 'src/components/suite/WebUsbButton';
 import { selectHasTransportOfType } from 'src/reducers/suite/suiteReducer';
 
+import { AcquireDeviceButton } from '../suite/AcquireDeviceButton';
+
+const StyledAcquireDeviceButton = styled(AcquireDeviceButton)`
+    margin-left: auto;
+`;
+
 // eslint-disable-next-line local-rules/no-override-ds-component
 const StyledLottieAnimation = styled(LottieAnimation)`
     margin: 8px 16px 8px 0;
     min-width: 64px;
     background: ${({ theme }) => theme.legacy.BG_GREY};
 `;
 
-const Column = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-`;
-
 // eslint-disable-next-line local-rules/no-override-ds-component
 const Title = styled(Paragraph)`
     display: flex;
@@ -38,10 +37,10 @@ const Title = styled(Paragraph)`
     }
 `;
 
-interface DeviceBannerProps {
+type DeviceBannerProps = {
     title: ReactNode;
     description?: ReactNode;
-}
+};
 
 export const DeviceBanner = ({ title, description }: DeviceBannerProps) => {
     const { device } = useDevice();
@@ -69,6 +68,8 @@ export const DeviceBanner = ({ title, description }: DeviceBannerProps) => {
                     </Row>
                     {description && <Text color="textSubdued">{description}</Text>}
                 </Column>
+
+                {!device?.features && <StyledAcquireDeviceButton />}
             </Row>
         </Card>
     );

diff --git a/packages/suite/src/components/suite/AcquireDeviceButton.tsx b/packages/suite/src/components/suite/AcquireDeviceButton.tsx
@@ -0,0 +1,36 @@
+import { MouseEventHandler } from 'react';
+
+import { acquireDevice } from '@suite-common/wallet-core';
+import { Button } from '@trezor/components';
+
+import { useDevice, useDispatch } from 'src/hooks/suite';
+
+import { Translation } from './Translation';
+
+type AcquireButtonProps = {
+    className?: string;
+    onClick?: MouseEventHandler;
+};
+
+export const AcquireDeviceButton = ({ className, onClick }: AcquireButtonProps) => {
+    const { isLocked } = useDevice();
+    const dispatch = useDispatch();
+
+    const isDeviceLocked = isLocked();
+
+    const handleClick: MouseEventHandler = e => {
+        onClick?.(e);
+        dispatch(acquireDevice());
+    };
+
+    return (
+        <Button
+            isLoading={isDeviceLocked}
+            textWrap={false}
+            onClick={handleClick}
+            className={className}
+        >
+            <Translation id="TR_ACQUIRE_DEVICE" />
+        </Button>
+    );
+};
diff --git a/packages/suite/src/components/suite/PrerequisitesGuide/DeviceUsedElsewhere.tsx b/packages/suite/src/components/suite/PrerequisitesGuide/DeviceUsedElsewhere.tsx
@@ -1,36 +1,21 @@
 import { MouseEventHandler } from 'react';
 
-import { acquireDevice } from '@suite-common/wallet-core';
-import { Button } from '@trezor/components';
-
 import { Translation, TroubleshootingTips } from 'src/components/suite';
-import { useDevice, useDispatch } from 'src/hooks/suite';
+import { useDevice } from 'src/hooks/suite';
 import {
     TROUBLESHOOTING_TIP_RECONNECT,
     TROUBLESHOOTING_TIP_CLOSE_ALL_TABS,
 } from 'src/components/suite/troubleshooting/tips';
 
-export const DeviceUsedElsewhere = () => {
-    const { isLocked, device } = useDevice();
-    const dispatch = useDispatch();
+import { AcquireDeviceButton } from '../AcquireDeviceButton';
 
-    const isDeviceLocked = isLocked();
+export const DeviceUsedElsewhere = () => {
+    const { device } = useDevice();
 
     const handleClick: MouseEventHandler = e => {
         e.stopPropagation();
-        dispatch(acquireDevice());
     };
 
-    const ctaButton = (
-        <Button
-            data-testid="@device-used-elsewhere"
-            isLoading={isDeviceLocked}
-            onClick={handleClick}
-        >
-            <Translation id="TR_ACQUIRE_DEVICE" />
-        </Button>
-    );
-
     const tips = [
         {
             key: 'device-used-elsewhere',
@@ -51,7 +36,7 @@ export const DeviceUsedElsewhere = () => {
     return (
         <TroubleshootingTips
             label={<Translation id="TR_ACQUIRE_DEVICE_TITLE" />}
-            cta={ctaButton}
+            cta={<AcquireDeviceButton onClick={handleClick} />}
             items={tips}
         />
     );