style(suite): Chain icon fix (#11248)

(cherry picked from commit a663cc5)
trezor · Feb 23, 2024 · f73e171 · f73e171
1 parent b863900
commit f73e171
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 };