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; }; @@ -46,6 +47,7 @@ export const DeviceAnimation = forwardRef 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/DeviceAuthenticationExplainer.tsx b/packages/suite/src/components/suite/DeviceAuthenticationExplainer.tsx index 0064216452cd..123b2faeca48 100644 --- a/packages/suite/src/components/suite/DeviceAuthenticationExplainer.tsx +++ b/packages/suite/src/components/suite/DeviceAuthenticationExplainer.tsx @@ -43,7 +43,7 @@ interface DeviceAuthenticationExplainerProps { horizontal?: boolean; } -export const DeviceAuthenticationExplainer = ({ +export const DeviceAuthenticationExplainer = ({ horizontal, }: DeviceAuthenticationExplainerProps) => ( 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 ( {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}