fix(suite): Fix types

packages/device-utils/src/deviceColorUtils.ts

@@ -1,10 +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: {
+export const getDeviceColorVariant = (device?: {
     features?: { unit_color?: number };
     thp?: { properties?: { model_variant?: number } };
 }): number =>
     normalizeDeviceColorVariant(
-        device.features?.unit_color ?? device.thp?.properties?.model_variant,
+        device?.features?.unit_color ?? device?.thp?.properties?.model_variant,
     );

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

@@ -17,7 +17,7 @@ export const DEVICE_ANIMATION_TYPES = {
     ROTATE: 'ROTATE',
     BOOTLOADER: 'BOOTLOADER',
     BOOTLOADER_TWO_BUTTONS: 'BOOTLOADER_TWO_BUTTONS',
-    NORMAL: 'NORMAL',
+    NORMAL: 'NORMAL', // rename to RECONNECT
     HOLOGRAM: 'HOLOGRAM',
     CONNECT_CABLE: 'CONNECT_CABLE',
     CONNECT_BT_INTRO: 'CONNECT_BT_INTRO',
@@ -83,7 +83,7 @@ type SizePropFor<M extends ModelWithRotate> = M extends keyof typeof MODEL_ROTAT
     ? { sizeVariant?: 'LARGE' }
     : {};
 
-type RotateProps = {
+export type RotateProps = {
     [M in ModelWithRotate]: Base & {
         type: typeof DEVICE_ANIMATION_TYPES.ROTATE;
         deviceModelInternal: M;
@@ -164,7 +164,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
         const content = (() => {
             switch (type) {
                 case DEVICE_ANIMATION_TYPES.BOOTLOADER: {
-                    // T3B1 má "bootloader.webm", ostatní "bootloader_dark|light.webm"
+                    // T3B1 has "bootloader.webm", others have "bootloader_dark|light.webm"
                     const file =
                         model === DeviceModelInternal.T3B1
                             ? 'bootloader.webm'

packages/product-components/src/index.ts

@@ -25,6 +25,12 @@ export { InputWithOptions } from './components/InputWithOptions/InputWithOptions
 export { EditableText } from './components/EditableText/EditableText';
 export { CardButton } from './components/CardButton/CardButton';
 export { FeeRate } from './components/FeeRate/FeeRate';
-export { DeviceAnimation } from './components/DeviceAnimation/DeviceAnimation';
+export {
+    DeviceAnimation,
+    type ModelWithRotate,
+    type RotateProps,
+    type ColorsOf,
+    type DeviceAnimationProps,
+} from './components/DeviceAnimation/DeviceAnimation';
 export { DeviceWithScene } from './components/DeviceWithScene/DeviceWithScene';
 export { getModelFrontColor, getLargeModelImagePath } from './utils/getModelFrontColor';

packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx

@@ -6,7 +6,11 @@ import { selectSelectedDeviceLabelOrName } from '@suite-common/wallet-core';
 import { BulletList, Column, H2, Modal, Paragraph, Row } from '@trezor/components';
 import { Device } from '@trezor/connect';
 import { DeviceModelInternal, getFirmwareVersion } from '@trezor/device-utils';
-import { ConfirmOnDevicePill, DeviceAnimation } from '@trezor/product-components';
+import {
+    ConfirmOnDevicePill,
+    DeviceAnimation,
+    DeviceAnimationProps,
+} from '@trezor/product-components';
 import { usePreviousDefined } from '@trezor/react-utils';
 import { spacings } from '@trezor/theme';
 
@@ -30,10 +34,21 @@ const RebootDeviceGraphics = ({
 
     const deviceModelInternal = device?.features?.internal_model;
 
+    const getModelForBootloader = () => {
+        switch (deviceModelInternal) {
+            case DeviceModelInternal.T1B1:
+                return DeviceModelInternal.T1B1;
+            case DeviceModelInternal.T2T1:
+                return DeviceModelInternal.T2T1;
+            default:
+                return DeviceModelInternal.T3B1;
+        }
+    };
+
     const getRebootType = () => {
         // Used during intermediary update on T1B1.
         if (device?.mode === 'bootloader') {
-            return 'NORMAL';
+            return { type: 'NORMAL', deviceModelInternal: DeviceModelInternal.T1B1 };
         }
         // T1B1 bootloader before firmware version 1.8.0 can only be invoked by holding both buttons.
         const deviceFwVersion = device?.features ? getFirmwareVersion(device) : '';
@@ -42,19 +57,23 @@ const RebootDeviceGraphics = ({
             semver.valid(deviceFwVersion) &&
             semver.satisfies(deviceFwVersion, '<1.8.0')
         ) {
-            return 'BOOTLOADER_TWO_BUTTONS';
+            return {
+                type: 'BOOTLOADER_TWO_BUTTONS',
+                deviceModelInternal: DeviceModelInternal.T1B1,
+            };
         }
 
-        return 'BOOTLOADER';
+        return { type: 'BOOTLOADER', deviceModelInternal: getModelForBootloader() };
     };
 
+    const deviceAnimationProps = getRebootType();
+
     return (
         <DeviceAnimation
-            type={getRebootType()}
+            {...(deviceAnimationProps as DeviceAnimationProps)}
             height="220px"
             width="220px"
             shape="ROUNDED"
-            deviceModelInternal={deviceModelInternal || DeviceModelInternal.T1B1}
             loop
         />
     );

packages/suite/src/components/suite/SecurityCheck/SecurityCheckLayout.tsx

@@ -1,8 +1,12 @@
 import { selectSelectedDevice } from '@suite-common/wallet-core';
 import { Box, Column, Grid, Image } from '@trezor/components';
+import { DeviceModelInternal, getDeviceColorVariant } from '@trezor/device-utils';
 import {
+    ColorsOf,
     DeviceAnimation,
     DeviceWithScene,
+    ModelWithRotate,
+    RotateProps,
     getLargeModelImagePath,
 } from '@trezor/product-components';
 import { borders, spacings } from '@trezor/theme';
@@ -26,7 +30,7 @@ export const SecurityCheckLayout = ({
     const deviceModelInternal = device?.features?.internal_model;
     const isDeviceImageRotating = imageMode === 'ROTATE' && deviceModelInternal;
 
-    const deviceUnitColor = device?.features?.unit_color;
+    const deviceUnitColor = getDeviceColorVariant(device) as ColorsOf<ModelWithRotate>;
 
     const image = getLargeModelImagePath(deviceModelInternal, deviceUnitColor);
 
@@ -45,6 +49,16 @@ export const SecurityCheckLayout = ({
         return <Image maxHeight={300} isFilterActive={false} image={image} />;
     };
 
+    const getDeviceModel = () => {
+        switch (deviceModelInternal) {
+            case undefined:
+            case DeviceModelInternal.UNKNOWN:
+                return DeviceModelInternal.T3W1;
+            default:
+                return deviceModelInternal as ModelWithRotate;
+        }
+    };
+
     return (
         <Grid columns={isBelowTablet ? '1fr' : '260px 1fr'} gap={spacings.xl} width="100%">
             {deviceModelInternal && (
@@ -52,11 +66,13 @@ export const SecurityCheckLayout = ({
                     <Column height="100%" justifyContent="center" alignItems="center">
                         {isDeviceImageRotating ? (
                             <DeviceAnimation
-                                type="ROTATE"
-                                deviceModelInternal={deviceModelInternal}
-                                deviceUnitColor={deviceUnitColor}
-                                height="300px" // NOTE: fill out the fixed height, we know that the video is 2x
-                                sizeVariant="LARGE"
+                                {...({
+                                    type: 'ROTATE',
+                                    deviceModelInternal: getDeviceModel(),
+                                    deviceUnitColor,
+                                    height: '300px',
+                                    sizeVariant: 'LARGE',
+                                } as RotateProps)}
                             />
                         ) : (
                             getDeviceImage()