fix(suite): normalize the color of the unacquired device to 1 if undefined as well as acquired device

packages/connect/src/device/Device.ts

@@ -873,11 +873,6 @@ export class Device extends TypedEmitter<DeviceEvents> {
         };
 
         this.name = deviceInfo.name;
-        // NOTE: TS7 test devices do not have color specified, they are all defined unit_color=0
-        // fallback this color the existing ones to 1
-        if (feat?.internal_model === DeviceModelInternal.T3W1 && (feat?.unit_color ?? 0) === 0) {
-            feat.unit_color = 1;
-        }
 
         // todo: move to 553
         if (feat?.unit_color) {

packages/device-utils/src/deviceColorUtils.ts

@@ -0,0 +1,10 @@
+// NOTE: when a device eg. a testing unit, doesnt have a color variant (0 | null | undefined), we default to 1
+export const normalizeDeviceColorVariant = (colorVariant?: number): number => colorVariant || 1;
+
+export const getDeviceColorVariant = (device: {
+    features?: { unit_color?: number };
+    thp?: { properties?: { model_variant?: number } };
+}): number =>
+    normalizeDeviceColorVariant(
+        device.features?.unit_color ?? device.thp?.properties?.model_variant,
+    );

packages/device-utils/src/index.ts

@@ -5,3 +5,4 @@ export * from './types';
 export * from './deviceModelInternal';
 export * from './deviceModelInternalUtils';
 export * from './models';
+export * from './deviceColorUtils';

packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DeviceModelInternal } from '@trezor/device-utils';
+import { DeviceModelInternal, normalizeDeviceColorVariant } from '@trezor/device-utils';
 
 import { DeviceAnimation } from '../DeviceAnimation/DeviceAnimation';
 
@@ -31,7 +31,7 @@ export const RotateDeviceImage = ({
             className={className}
             type="ROTATE"
             deviceModelInternal={deviceModel}
-            deviceUnitColor={deviceColor}
+            deviceUnitColor={normalizeDeviceColorVariant(deviceColor)}
             height={animationHeight}
             width={animationWidth}
         />

packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx

@@ -1,9 +1,8 @@
 import { MouseEventHandler } from 'react';
 
-import { getDeviceColorVariant } from '@suite-common/suite-utils';
 import { selectDeviceLabelOrNameById } from '@suite-common/wallet-core';
 import { Row, Tooltip } from '@trezor/components';
-import { DeviceModelInternal } from '@trezor/device-utils';
+import { DeviceModelInternal, getDeviceColorVariant } from '@trezor/device-utils';
 import { RotateDeviceImage } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 

packages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
 
-import { getDeviceColorVariant, getDeviceInternalModel } from '@suite-common/suite-utils';
+import { getDeviceInternalModel } from '@suite-common/suite-utils';
 import { notificationsActions } from '@suite-common/toast-notifications';
 import { getDisplaySymbol } from '@suite-common/wallet-config';
 import { selectSelectedDevice, selectSelectedDeviceLabelOrName } from '@suite-common/wallet-core';
@@ -21,6 +21,7 @@ import {
     Paragraph,
     Row,
 } from '@trezor/components';
+import { getDeviceColorVariant } from '@trezor/device-utils';
 import { copyToClipboard } from '@trezor/dom-utils';
 import { CoinLogo, ConfirmOnDevice } from '@trezor/product-components';
 import { EventType, analytics } from '@trezor/suite-analytics';

packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmActionModal.tsx

@@ -1,9 +1,10 @@
 import { useIntl } from 'react-intl';
 
 import { TranslationKey } from '@suite-common/intl-types';
-import { getDeviceColorVariant, getDeviceInternalModel } from '@suite-common/suite-utils';
+import { getDeviceInternalModel } from '@suite-common/suite-utils';
 import { Column, H2, Modal } from '@trezor/components';
 import TrezorConnect from '@trezor/connect';
+import { getDeviceColorVariant } from '@trezor/device-utils';
 import { ConfirmOnDevice } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 

packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/ConfirmFingerprintModal.tsx

@@ -1,5 +1,6 @@
-import { getDeviceColorVariant, getDeviceInternalModel } from '@suite-common/suite-utils';
+import { getDeviceInternalModel } from '@suite-common/suite-utils';
 import { Card, Modal } from '@trezor/components';
+import { getDeviceColorVariant } from '@trezor/device-utils';
 import { ConfirmOnDevice } from '@trezor/product-components';
 
 import { Fingerprint } from 'src/components/firmware';

packages/suite/src/views/firmware/FirmwareModal.tsx

@@ -2,11 +2,12 @@ import { ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { useFirmwareInstallation } from '@suite-common/firmware';
-import { getDeviceColorVariant, getDeviceInternalModel } from '@suite-common/suite-utils';
+import { getDeviceInternalModel } from '@suite-common/suite-utils';
 import { selectThpStep } from '@suite-common/thp';
 import { acquireDevice, selectSelectedDevice } from '@suite-common/wallet-core';
 import { Modal } from '@trezor/components';
 import TrezorConnect from '@trezor/connect';
+import { getDeviceColorVariant } from '@trezor/device-utils';
 import { ConfirmOnDevice } from '@trezor/product-components';
 import { exhaustive } from '@trezor/type-utils';
 

suite-common/suite-utils/src/device.ts

@@ -456,10 +456,6 @@ export const getDeviceInternalModel = (
     (device?.thp?.properties?.internal_model as DeviceModelInternal) ??
     DeviceModelInternal.UNKNOWN;
 
-export const getDeviceColorVariant = (
-    device: Pick<Device, 'features' | 'thp'>,
-): number | undefined => device.features?.unit_color ?? device.thp?.properties?.model_variant ?? 1;
-
 export const isThpDevice = <T extends Device | TrezorDevice>(
     device: T,
 ): device is T & { thp: ThpStateSerialized } => device.thp !== undefined;