x600

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

@@ -32,6 +32,7 @@ type DeviceAnimationProps = {
     isOldT2B1Packaging?: boolean;
     deviceUnitColor?: number;
     className?: string;
+    sizeVariant?: 'EXTRA_LARGE';
     onVideoMouseOver?: MouseEventHandler<HTMLVideoElement>;
 };
 
@@ -46,6 +47,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
             deviceModelInternal = DEFAULT_FLAGSHIP_MODEL,
             isOldT2B1Packaging,
             deviceUnitColor,
+            sizeVariant,
             onVideoMouseOver,
             ...props
         },
@@ -143,7 +145,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 { Image, variables } from '@trezor/components';
+import { DeviceAnimation, Image, variables } from '@trezor/components';
 import { selectSelectedDevice } from '@suite-common/wallet-core';
+import { DeviceModelInternal } from '@trezor/connect';
 
 import { useSelector } from 'src/hooks/suite';
 
@@ -52,12 +53,40 @@ export const SecurityCheckLayout = ({ isFailed, children }: SecurityCheckLayoutP
 
     const deviceModelInternal = device?.features?.internal_model;
     const imageVariant = isFailed ? 'GHOST' : 'LARGE';
+    const isDeviceImageRotating =
+        deviceModelInternal &&
+        [
+            DeviceModelInternal.T1B1,
+            DeviceModelInternal.T3B1,
+            DeviceModelInternal.T3T1,
+            DeviceModelInternal.T2T1,
+            DeviceModelInternal.T2B1,
+        ].includes(deviceModelInternal);
+
+    // @ts-expect-error: this code doesn't throw but must be deleted as it is for debugging
+    const searchParams = new URLSearchParams(location.search);
+    const paramColor = searchParams.get('color');
+
+    console.log('deviceModelInternal', deviceModelInternal);
 
     return (
         <Wrapper>
             {deviceModelInternal && (
                 <ImageWrapper>
-                    <StyledImage image={`TREZOR_${deviceModelInternal}_${imageVariant}`} />
+                    {isDeviceImageRotating ? (
+                        // @ts-expect-error: this cannot be here as SecurityCheckLayout is used in multiple places a different API must be made for it.
+                        <DeviceAnimation
+                            type="ROTATE"
+                            deviceModelInternal={deviceModelInternal}
+                            deviceUnitColor={
+                                paramColor ? Number(paramColor) : device.features?.unit_color
+                            }
+                            height="300px"
+                            sizeVariant="EXTRA_LARGE"
+                        />
+                    ) : (
+                        <StyledImage image={`TREZOR_${deviceModelInternal}_${imageVariant}`} />
+                    )}
                 </ImageWrapper>
             )}
             <Content>{children}</Content>