diff --git a/packages/components/src/components/animations/DeviceAnimation.tsx b/packages/components/src/components/animations/DeviceAnimation.tsx index 2ae7f80af6d3..058f5190dfc1 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?: 'EXTRA_LARGE'; onVideoMouseOver?: MouseEventHandler; }; @@ -46,6 +47,7 @@ export const DeviceAnimation = forwardRef diff --git a/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1_extra_large.webm new file mode 100644 index 000000000000..ed5cb75909a1 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1_extra_large.webm differ 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_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1_extra_large.webm new file mode 100644 index 000000000000..c869b643276e Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1_extra_large.webm new file mode 100644 index 000000000000..7237415737cf Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2_extra_large.webm new file mode 100644 index 000000000000..59fbac334539 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3_extra_large.webm new file mode 100644 index 000000000000..1eadc9efa3d3 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4_extra_large.webm new file mode 100644 index 000000000000..d1b5cb74f655 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5_extra_large.webm new file mode 100644 index 000000000000..73b4ec6560ec Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1_extra_large.webm new file mode 100644 index 000000000000..b91f58f6acdc Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2_extra_large.webm new file mode 100644 index 000000000000..23724619844b Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3_extra_large.webm new file mode 100644 index 000000000000..cb48e48833cc Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4_extra_large.webm new file mode 100644 index 000000000000..b7da2ffe9202 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4_extra_large.webm differ diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5_extra_large.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5_extra_large.webm new file mode 100644 index 000000000000..fe6d6b7f3332 Binary files /dev/null and b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5_extra_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..12bf9d8cfd7d 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,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 ( {deviceModelInternal && ( - + {isDeviceImageRotating ? ( + // @ts-expect-error: this cannot be here as SecurityCheckLayout is used in multiple places a different API must be made for it. + + ) : ( + + )} )} {children}