Add the rotating version of the image to the security check onboardin…

…g screen (#16571)

* feat(suite): add model color name to the device name in onboarding - security check

* feat(suite): add device rotation animation

* feat(suite): apply device rotation animations on onboarding

* feat(suite): update the animation of t1b1 with the highlighted buttons

* feat(suite): update the t1b1 images used in app as per new animation

packages/components/src/components/animations/DeviceAnimation.tsx

@@ -32,6 +32,8 @@ type DeviceAnimationProps = {
     isOldT2B1Packaging?: boolean;
     deviceUnitColor?: number;
     className?: string;
+    sizeVariant?: 'LARGE';
+
     onVideoMouseOver?: MouseEventHandler<HTMLVideoElement>;
 };
 
@@ -46,6 +48,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
             deviceModelInternal = DEFAULT_FLAGSHIP_MODEL,
             isOldT2B1Packaging,
             deviceUnitColor,
+            sizeVariant,
             onVideoMouseOver,
             ...props
         },
@@ -141,7 +144,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
                                 `videos/device/trezor_${deviceModelInFilename}_rotate_color_${
                                     // if device unit color is not set, use first color available
                                     deviceUnitColor ?? 1
-                                }.webm`,
+                                }${sizeVariant ? `_${sizeVariant.toLowerCase()}` : ''}.webm`,
                             )}
                             type="video/webm"
                         />

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

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 import { selectSelectedDevice } from '@suite-common/wallet-core';
-import { Image, variables } from '@trezor/components';
+import { DeviceAnimation, Image, variables } from '@trezor/components';
+import { DeviceModelInternal } from '@trezor/connect';
 
 import { useSelector } from 'src/hooks/suite';
 
@@ -45,19 +46,44 @@ const Content = styled.div`
 interface SecurityCheckLayoutProps {
     isFailed?: boolean;
     children: React.ReactNode;
+    imageMode?: 'ROTATE' | 'STATIC';
 }
 
-export const SecurityCheckLayout = ({ isFailed, children }: SecurityCheckLayoutProps) => {
+export const SecurityCheckLayout = ({
+    isFailed,
+    children,
+    imageMode,
+}: SecurityCheckLayoutProps) => {
     const device = useSelector(selectSelectedDevice);
 
     const deviceModelInternal = device?.features?.internal_model;
     const imageVariant = isFailed ? 'GHOST' : 'LARGE';
+    const isDeviceImageRotating =
+        imageMode === 'ROTATE' &&
+        deviceModelInternal &&
+        [
+            DeviceModelInternal.T1B1,
+            DeviceModelInternal.T2T1,
+            DeviceModelInternal.T2B1,
+            DeviceModelInternal.T3B1,
+            DeviceModelInternal.T3T1,
+        ].includes(deviceModelInternal);
 
     return (
         <Wrapper>
             {deviceModelInternal && (
                 <ImageWrapper>
-                    <StyledImage image={`TREZOR_${deviceModelInternal}_${imageVariant}`} />
+                    {isDeviceImageRotating ? (
+                        <DeviceAnimation
+                            type="ROTATE"
+                            deviceModelInternal={deviceModelInternal}
+                            deviceUnitColor={device.features?.unit_color}
+                            height="300px" // NOTE: fill out the fixed height, we know that the video is 2x
+                            sizeVariant="LARGE"
+                        />
+                    ) : (
+                        <StyledImage image={`TREZOR_${deviceModelInternal}_${imageVariant}`} />
+                    )}
                 </ImageWrapper>
             )}
             <Content>{children}</Content>

packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import styled, { useTheme } from 'styled-components';
 
@@ -7,6 +7,7 @@ import { AcquiredDevice } from '@suite-common/suite-types';
 import { getConnectedDeviceStatus } from '@suite-common/suite-utils';
 import { deviceActions, selectDevices, selectSelectedDevice } from '@suite-common/wallet-core';
 import { Button, Column, Divider, H2, Icon, Text, Tooltip } from '@trezor/components';
+import { models } from '@trezor/connect/src/data/models';
 import { spacings, spacingsPx, typography } from '@trezor/theme';
 import {
     TREZOR_RESELLERS_URL,
@@ -209,6 +210,14 @@ const SecurityCheckContent = ({
         }
     }, [initialized, isRecoveryInProgress, updateAnalytics]);
 
+    const humanizedModelColor = useMemo(
+        () =>
+            device?.features?.internal_model && device?.features?.unit_color
+                ? models[device?.features?.internal_model]?.colors?.[device?.features?.unit_color]
+                : null,
+        [device],
+    );
+
     return isFailed ? (
         <SecurityCheckFail
             goBack={toggleView}
@@ -217,13 +226,17 @@ const SecurityCheckContent = ({
             supportUrl={supportUrl}
         />
     ) : (
-        <SecurityCheckLayout>
+        <SecurityCheckLayout imageMode="ROTATE">
             <Column alignItems="flex-start">
                 <DeviceNameSection>
                     <Text variant="tertiary">
                         <Translation id="TR_YOU_HAVE_CONNECTED" />
                     </Text>
-                    <DeviceName>{device?.name}</DeviceName>
+                    <DeviceName>
+                        {device?.name}
+                        {humanizedModelColor && <Text> {humanizedModelColor}</Text>}
+                    </DeviceName>
+
                     <OnboardingButtonSkip onClick={toggleView}>
                         <Translation id="TR_CONNECTED_DIFFERENT_DEVICE" />
                     </OnboardingButtonSkip>