WIP: Add the rotating version of the image to the security check onboarding screen #16571
Conversation
vojtatranta
force-pushed
the
feat/animated-onboarding-illustrations
branch
from
cd3c7b4 to
280c14a
Compare
| <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. |
There was a problem hiding this comment.
@jvaclavik How do we do this right? Basically, there's a "Layout" component that is used everywhere and just automatically uses the "fixed" images.
A simple boolean prop indicating that we want a rotating version of the illustration image may be enough.
|
|
||
| return ( | ||
| // @ts-expect-error: this code doesn't throw but must be deleted as it is for debugging | ||
| const searchParams = new URLSearchParams(location.search); |
There was a problem hiding this comment.
I marked this as a fake TS error to ensure that this must be deleted
| @@ -32,6 +32,7 @@ type DeviceAnimationProps = { | |||
| isOldT2B1Packaging?: boolean; | |||
| deviceUnitColor?: number; | |||
| className?: string; | |||
| sizeVariant?: 'LARGE'; | |||
There was a problem hiding this comment.
I would rename it and wrote the type so that only if you pass rotate=true you could also set rotationSizeVariant to LARGE or leave it undefined.
There was a problem hiding this comment.
Rather, we put here imageMode: "STATIC" | "ROTATIONAL"
| @@ -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( | |||
There was a problem hiding this comment.
I am not sure if this should be here. The rotation images aren't available for all.
It shouldn't be here , it should be specified somewhere else and reused in DeviceStatus (where such list is also local)
vojtatranta
force-pushed
the
feat/animated-onboarding-illustrations
branch
from
280c14a to
fc5ccec
Compare
| deviceModelInternal={deviceModelInternal} | ||
| deviceUnitColor={paramColor ? Number(paramColor) : device.features?.unit_color} | ||
| height="300px" | ||
| sizeVariant={[DeviceModelInternal.T3T1, DeviceModelInternal.T2B1, DeviceModelInternal.T3B1].includes(deviceModelInternal) && [device.features?.unit_color, paramColor].map(Number).includes(4) ? 'EXTRA_LARGE' : 'LARGE'} |
There was a problem hiding this comment.
DEMO: display 2x vertical video (600px) for TS3,5 color 4.
addresses: #16509
A draft PR that validates the way of how we want to properly replace those images.
ADD
Description
Related Issue
Resolve
Screenshots: