wip

trezor · Jan 23, 2025 · 280c14a · 280c14a
1 parent 551157e
commit 280c14a
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 4 deletions.
diff --git a/packages/components/src/components/animations/DeviceAnimation.tsx b/packages/components/src/components/animations/DeviceAnimation.tsx
@@ -32,6 +32,7 @@ type DeviceAnimationProps = {
     isOldT2B1Packaging?: boolean;
     deviceUnitColor?: number;
     className?: string;
+    sizeVariant?: 'LARGE';
     onVideoMouseOver?: MouseEventHandler<HTMLVideoElement>;
 };
 
@@ -46,6 +47,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
             deviceModelInternal = DEFAULT_FLAGSHIP_MODEL,
             isOldT2B1Packaging,
             deviceUnitColor,
+            sizeVariant,
             onVideoMouseOver,
             ...props
         },
@@ -141,7 +143,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"
                         />

diff --git a/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1_large.webm b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1_large.webm b/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4_large.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5_large.webm
diff --git a/packages/suite/src/components/suite/SecurityCheck/SecurityCheckLayout.tsx b/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,31 @@ 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,
+        );
 
-    return (
+    // @ts-expect-error: this code doesn't throw but must be deleted as it is for debugging
+    const searchParams = new URLSearchParams(location.search);
+
+    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={searchParams.get('color') ? Number(searchParams.get('color')) : undefined}
+                            height="300px"
+                            sizeVariant='LARGE'
+                        />
+                    ) : (
+                        <StyledImage image={`TREZOR_${deviceModelInternal}_${imageVariant}`} />
+                    )}
                 </ImageWrapper>
             )}
             <Content>{children}</Content>