From f73e17196b282f421985fb30924604a6affe672f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Wed, 21 Feb 2024 13:30:46 +0100
Subject: [PATCH] style(suite): Chain icon fix (#11248)

(cherry picked from commit a663cc54dc6308cfc5331e06abcf3d1006bc6aa3)
---
 .../SuiteLayout/DeviceSelector/DeviceSelector.tsx        | 2 +-
 packages/suite/src/components/suite/index.tsx            | 9 ++++++++-
 .../src/components/suite/labeling/WalletLabeling.tsx     | 7 ++++++-
 packages/suite/src/components/suite/labeling/index.tsx   | 2 +-
 .../suite/SwitchDevice/DeviceItem/DeviceStatusText.tsx   | 7 ++++---
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/suite/src/components/suite/Preloader/SuiteLayout/DeviceSelector/DeviceSelector.tsx b/packages/suite/src/components/suite/Preloader/SuiteLayout/DeviceSelector/DeviceSelector.tsx
index e1707c49a03..3db214def94 100644
--- a/packages/suite/src/components/suite/Preloader/SuiteLayout/DeviceSelector/DeviceSelector.tsx
+++ b/packages/suite/src/components/suite/Preloader/SuiteLayout/DeviceSelector/DeviceSelector.tsx
@@ -81,7 +81,7 @@ const DeviceDetail = styled.div`
     flex: 1;
     flex-direction: column;
     overflow: hidden;
-    align-self: baseline;
+    align-self: center;
 `;
 
 const needsRefresh = (device?: TrezorDevice) => {
diff --git a/packages/suite/src/components/suite/index.tsx b/packages/suite/src/components/suite/index.tsx
index aad49aecc9d..0298d628b3d 100644
--- a/packages/suite/src/components/suite/index.tsx
+++ b/packages/suite/src/components/suite/index.tsx
@@ -19,7 +19,13 @@ import { Ticker } from './Ticker/Ticker';
 import { TrendTicker } from './Ticker/TrendTicker';
 import { PriceTicker } from './Ticker/PriceTicker';
 import { Translation } from './Translation';
-import { AccountLabeling, AddressLabeling, WalletLabeling, MetadataLabeling } from './labeling';
+import {
+    AccountLabeling,
+    AddressLabeling,
+    WalletLabeling,
+    MetadataLabeling,
+    useGetWalletLabel,
+} from './labeling';
 import { FormattedCryptoAmount } from './FormattedCryptoAmount';
 import { FormattedNftAmount } from './FormattedNftAmount';
 import { Sign } from './Sign';
@@ -70,6 +76,7 @@ export {
     AccountLabeling,
     AddressLabeling,
     WalletLabeling,
+    useGetWalletLabel,
     MetadataLabeling,
     QuestionTooltip,
     AppNavigationPanel,
diff --git a/packages/suite/src/components/suite/labeling/WalletLabeling.tsx b/packages/suite/src/components/suite/labeling/WalletLabeling.tsx
index 5105233b2d0..d29d557b156 100644
--- a/packages/suite/src/components/suite/labeling/WalletLabeling.tsx
+++ b/packages/suite/src/components/suite/labeling/WalletLabeling.tsx
@@ -30,7 +30,7 @@ export const useWalletLabeling = () => {
     };
 };
 
-export const WalletLabeling = ({ device, shouldUseDeviceLabel }: WalletLabellingProps) => {
+export const useGetWalletLabel = ({ device, shouldUseDeviceLabel }: WalletLabellingProps) => {
     const { defaultAccountLabelString } = useWalletLabeling();
     const { walletLabel } = useSelector(state => selectLabelingDataForWallet(state, device.state));
 
@@ -46,6 +46,11 @@ export const WalletLabeling = ({ device, shouldUseDeviceLabel }: WalletLabelling
     }
 
     if (!label) return null;
+    return label;
+};
+
+export const WalletLabeling = ({ device, shouldUseDeviceLabel }: WalletLabellingProps) => {
+    const label = useGetWalletLabel({ device, shouldUseDeviceLabel });
 
     return <Container>{label}</Container>;
 };
diff --git a/packages/suite/src/components/suite/labeling/index.tsx b/packages/suite/src/components/suite/labeling/index.tsx
index 72cab70e639..27a5e80c308 100644
--- a/packages/suite/src/components/suite/labeling/index.tsx
+++ b/packages/suite/src/components/suite/labeling/index.tsx
@@ -1,6 +1,6 @@
 // "Internal labeling components"
 export { AccountLabeling } from './AccountLabeling';
 export { AddressLabeling } from './AddressLabeling';
-export { WalletLabeling } from './WalletLabeling';
+export { WalletLabeling, useGetWalletLabel } from './WalletLabeling';
 // "User defined labeling"
 export { MetadataLabeling } from './MetadataLabeling/MetadataLabeling';
diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText.tsx
index 66701f7bd8d..34a66aff0cb 100644
--- a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText.tsx
+++ b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/DeviceStatusText.tsx
@@ -4,7 +4,7 @@ import * as deviceUtils from '@suite-common/suite-utils';
 import { Icon, TOOLTIP_DELAY_LONG, TruncateWithTooltip } from '@trezor/components';
 import { spacingsPx, typography } from '@trezor/theme';
 import React, { MouseEventHandler } from 'react';
-import { Translation, WalletLabeling } from 'src/components/suite';
+import { Translation, WalletLabeling, useGetWalletLabel } from 'src/components/suite';
 
 const Container = styled.span<{ color: string; isAction?: boolean }>`
     ${typography.label}
@@ -39,6 +39,7 @@ export const DeviceStatusText = ({
     const { connected } = device;
     const deviceStatus = deviceUtils.getStatus(device);
     const needsAttention = deviceUtils.deviceNeedsAttention(deviceStatus);
+    const isDeviceStatusVisible = Boolean(useGetWalletLabel({ device }));
 
     if (connected && needsAttention && onRefreshClick) {
         return (
@@ -51,7 +52,7 @@ export const DeviceStatusText = ({
         );
     }
 
-    return (
+    return isDeviceStatusVisible ? (
         <Container
             color={connected ? theme.textPrimaryDefault : theme.textSubdued}
             data-test={connected ? '@deviceStatus-connected' : '@deviceStatus-disconnected'}
@@ -71,5 +72,5 @@ export const DeviceStatusText = ({
                 )}
             </TextRow>
         </Container>
-    );
+    ) : null;
 };