chore(suite): rework DeviceWarning component

packages/suite/src/views/suite/SwitchDevice/CardWithDevice.tsx

@@ -4,9 +4,13 @@ import { AnimatePresence, motion } from 'framer-motion';
 import styled from 'styled-components';
 
 import * as deviceUtils from '@suite-common/suite-utils';
-import { Card, IconName, motionAnimation, useElevation } from '@trezor/components';
+import { acquireDevice, selectDeviceThunk } from '@suite-common/wallet-core';
+import { Banner, Card, IconName, motionAnimation, useElevation } from '@trezor/components';
 import { Elevation, mapElevationToBorder, spacingsPx } from '@trezor/theme';
 
+import { redirectAfterWalletSelectedThunk } from 'src/actions/wallet/addWalletThunk';
+import { Translation } from 'src/components/suite';
+import { useDevice, useDispatch } from 'src/hooks/suite';
 import type { ForegroundAppProps, TrezorDevice } from 'src/types/suite';
 
 import { DeviceHeader } from './DeviceItem/DeviceHeader';
@@ -39,7 +43,6 @@ const DeviceWrapper = styled.div`
 
 interface CardWithDeviceProps {
     children: ReactNode;
-    deviceWarning?: ReactNode;
     onCancel?: ForegroundAppProps['onCancel'];
     device: TrezorDevice;
     isFullHeaderVisible?: boolean;
@@ -52,7 +55,6 @@ export const CardWithDevice = ({
     children,
     onCancel,
     device,
-    deviceWarning,
     isFullHeaderVisible = false,
     onBackButtonClick,
     isFindTrezorVisible,
@@ -64,6 +66,24 @@ export const CardWithDevice = ({
     const isUnknown = device.type !== 'acquired';
     const { elevation } = useElevation();
 
+    const deviceStatusMessage = deviceUtils.getDeviceNeedsAttentionMessage(deviceStatus);
+    const isLocked = useDevice().isLocked(true);
+    const dispatch = useDispatch();
+
+    const onSolveIssueClick = () => {
+        const needsAcquire =
+            device.type === 'unacquired' ||
+            deviceStatus === 'used-in-other-window' ||
+            deviceStatus === 'was-used-in-other-window';
+        if (needsAcquire) {
+            dispatch(acquireDevice(device));
+        } else {
+            dispatch(selectDeviceThunk({ device }));
+            dispatch(redirectAfterWalletSelectedThunk());
+            onCancel?.(false);
+        }
+    };
+
     return (
         <Card paddingType="small">
             <DeviceWrapper>
@@ -77,7 +97,22 @@ export const CardWithDevice = ({
                     icon={icon}
                 />
 
-                {deviceWarning}
+                {needsAttention && (
+                    <Banner
+                        variant="warning"
+                        rightContent={
+                            <Banner.Button
+                                onClick={onSolveIssueClick}
+                                data-testid="@switch-device/solve-issue-button"
+                                isDisabled={isLocked}
+                            >
+                                <Translation id="TR_SOLVE_ISSUE" />
+                            </Banner.Button>
+                        }
+                    >
+                        {deviceStatusMessage && <Translation id={deviceStatusMessage} />}
+                    </Banner>
+                )}
 
                 {!needsAttention && (
                     <AnimatePresence initial={false}>

packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceItem.tsx

@@ -1,18 +1,16 @@
 import styled from 'styled-components';
 
 import * as deviceUtils from '@suite-common/suite-utils';
-import { acquireDevice, selectDeviceThunk, selectSelectedDevice } from '@suite-common/wallet-core';
+import { selectSelectedDevice } from '@suite-common/wallet-core';
 import { Column, variables } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
-import { redirectAfterWalletSelectedThunk } from 'src/actions/wallet/addWalletThunk';
-import { useDispatch, useSelector } from 'src/hooks/suite';
+import { useSelector } from 'src/hooks/suite';
 import type { AcquiredDevice, ForegroundAppProps, TrezorDevice } from 'src/types/suite';
 
 import { AddWalletButton } from './AddWalletButton';
 import { WalletInstance } from './WalletInstance';
 import { CardWithDevice } from '../CardWithDevice';
-import { DeviceWarning } from './DeviceWarning';
 
 const WalletsWrapper = styled.div<{ $enabled: boolean }>`
     opacity: ${({ $enabled }) => ($enabled ? 1 : 0.5)};
@@ -38,34 +36,11 @@ export const DeviceItem = ({
     isFullHeaderVisible,
 }: DeviceItemProps) => {
     const selectedDevice = useSelector(selectSelectedDevice);
-    const dispatch = useDispatch();
-    const deviceStatus = deviceUtils.getStatus(device);
-    const needsAttention = deviceUtils.deviceNeedsAttention(deviceStatus);
-    const instancesWithState = instances.filter(i => i.state);
 
-    const onSolveIssueClick = () => {
-        const needsAcquire =
-            device.type === 'unacquired' ||
-            deviceStatus === 'used-in-other-window' ||
-            deviceStatus === 'was-used-in-other-window';
-        if (needsAcquire) {
-            dispatch(acquireDevice(device));
-        } else {
-            dispatch(selectDeviceThunk({ device }));
-            dispatch(redirectAfterWalletSelectedThunk());
-            onCancel(false);
-        }
-    };
+    const instancesWithState = instances.filter(i => i.state);
 
     return (
         <CardWithDevice
-            deviceWarning={
-                <DeviceWarning
-                    needsAttention={needsAttention}
-                    device={device}
-                    onSolveIssueClick={onSolveIssueClick}
-                />
-            }
             isFindTrezorVisible
             onCancel={onCancel}
             device={device}