diff --git a/packages/components/src/components/animations/DeviceAnimation.tsx b/packages/components/src/components/animations/DeviceAnimation.tsx index 8af5844ee09d..b5116cf7544c 100644 --- 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 new file mode 100644 index 000000000000..4ee015d66337 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1_large.webm differ 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 new file mode 100644 index 000000000000..992e4d3efdc4 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1_large.webm differ 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 new file mode 100644 index 000000000000..0a898bf14d77 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1_large.webm differ 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 new file mode 100644 index 000000000000..7e779cf10973 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2_large.webm differ 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 new file mode 100644 index 000000000000..257451c9058a Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3_large.webm differ 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 new file mode 100644 index 000000000000..98811d2c7e72 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4_large.webm differ 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 new file mode 100644 index 000000000000..aa85cf0acdb2 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5_large.webm differ 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 new file mode 100644 index 000000000000..fa7d719c798e Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1_large.webm differ 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 new file mode 100644 index 000000000000..6393b8e67b46 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2_large.webm differ 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 new file mode 100644 index 000000000000..ac364573a1ef Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3_large.webm differ 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 new file mode 100644 index 000000000000..c9f6f7fbb39b Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4_large.webm differ 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 new file mode 100644 index 000000000000..1fb85fa09c60 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5_large.webm differ diff --git a/packages/suite/src/components/suite/SecurityCheck/SecurityCheckLayout.tsx b/packages/suite/src/components/suite/SecurityCheck/SecurityCheckLayout.tsx index 7314f178b55d..4c3ec4774925 100644 --- 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>