diff --git a/packages/components/src/components/animations/DeviceAnimation.tsx b/packages/components/src/components/animations/DeviceAnimation.tsx index 8af5844ee09..8a084c64aa9 100644 --- a/packages/components/src/components/animations/DeviceAnimation.tsx +++ b/packages/components/src/components/animations/DeviceAnimation.tsx @@ -32,6 +32,8 @@ type DeviceAnimationProps = { isOldT2B1Packaging?: boolean; deviceUnitColor?: number; className?: string; + sizeVariant?: 'LARGE'; + onVideoMouseOver?: MouseEventHandler; }; @@ -46,6 +48,7 @@ export const DeviceAnimation = forwardRef diff --git a/packages/suite-data/files/images/png/trezor-t1b1-large.png b/packages/suite-data/files/images/png/trezor-t1b1-large.png index ea628a4dc9c..d924a7d3e13 100644 Binary files a/packages/suite-data/files/images/png/trezor-t1b1-large.png and b/packages/suite-data/files/images/png/trezor-t1b1-large.png differ diff --git a/packages/suite-data/files/images/png/trezor-t1b1-large@2x.png b/packages/suite-data/files/images/png/trezor-t1b1-large@2x.png index 968284134fd..30b24894f94 100644 Binary files a/packages/suite-data/files/images/png/trezor-t1b1-large@2x.png and b/packages/suite-data/files/images/png/trezor-t1b1-large@2x.png differ diff --git a/packages/suite-data/files/images/png/trezor-t1b1.png b/packages/suite-data/files/images/png/trezor-t1b1.png index 7e38a7a29db..dca276dc559 100644 Binary files a/packages/suite-data/files/images/png/trezor-t1b1.png and b/packages/suite-data/files/images/png/trezor-t1b1.png differ diff --git a/packages/suite-data/files/images/png/trezor-t1b1@2x.png b/packages/suite-data/files/images/png/trezor-t1b1@2x.png index 0450e32f393..f5660d83a11 100644 Binary files a/packages/suite-data/files/images/png/trezor-t1b1@2x.png and b/packages/suite-data/files/images/png/trezor-t1b1@2x.png differ diff --git a/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1.webm b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1.webm index 31ad3fa9244..de8d57fc98f 100644 Binary files a/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1.webm and b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1.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 00000000000..3d2a2abcc66 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 00000000000..c869b643276 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 00000000000..7237415737c 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 00000000000..59fbac33453 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 00000000000..1eadc9efa3d 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 00000000000..d1b5cb74f65 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 00000000000..73b4ec6560e 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 00000000000..b91f58f6acd 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 00000000000..23724619844 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 00000000000..cb48e48833c 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 00000000000..b7da2ffe920 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 00000000000..fe6d6b7f333 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 8d48e130c23..0d3daacc071 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 { selectSelectedDevice } from '@suite-common/wallet-core'; -import { Image, variables } from '@trezor/components'; +import { DeviceAnimation, Image, variables } from '@trezor/components'; +import { DeviceModelInternal } from '@trezor/connect'; import { useSelector } from 'src/hooks/suite'; @@ -45,19 +46,44 @@ const Content = styled.div` interface SecurityCheckLayoutProps { isFailed?: boolean; children: React.ReactNode; + imageMode?: 'ROTATE' | 'STATIC'; } -export const SecurityCheckLayout = ({ isFailed, children }: SecurityCheckLayoutProps) => { +export const SecurityCheckLayout = ({ + isFailed, + children, + imageMode, +}: SecurityCheckLayoutProps) => { const device = useSelector(selectSelectedDevice); const deviceModelInternal = device?.features?.internal_model; const imageVariant = isFailed ? 'GHOST' : 'LARGE'; + const isDeviceImageRotating = + imageMode === 'ROTATE' && + deviceModelInternal && + [ + DeviceModelInternal.T1B1, + DeviceModelInternal.T2T1, + DeviceModelInternal.T2B1, + DeviceModelInternal.T3B1, + DeviceModelInternal.T3T1, + ].includes(deviceModelInternal); return ( {deviceModelInternal && ( - + {isDeviceImageRotating ? ( + + ) : ( + + )} )} {children} diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx b/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx index 840f7b5aedf..a343d715406 100644 --- a/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx +++ b/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import styled, { useTheme } from 'styled-components'; @@ -7,6 +7,7 @@ import { AcquiredDevice } from '@suite-common/suite-types'; import { getConnectedDeviceStatus } from '@suite-common/suite-utils'; import { deviceActions, selectDevices, selectSelectedDevice } from '@suite-common/wallet-core'; import { Button, Column, Divider, H2, Icon, Text, Tooltip } from '@trezor/components'; +import { models } from '@trezor/connect/src/data/models'; import { spacings, spacingsPx, typography } from '@trezor/theme'; import { TREZOR_RESELLERS_URL, @@ -209,6 +210,14 @@ const SecurityCheckContent = ({ } }, [initialized, isRecoveryInProgress, updateAnalytics]); + const humanizedModelColor = useMemo( + () => + device?.features?.internal_model && device?.features?.unit_color + ? models[device?.features?.internal_model]?.colors?.[device?.features?.unit_color] + : null, + [device], + ); + return isFailed ? ( ) : ( - + - {device?.name} + + {device?.name} + {humanizedModelColor && {humanizedModelColor}} + +