mirror of
https://github.com/trezor/trezor-suite.git
synced 2026-03-10 01:08:23 +01:00
feat(suite): Update images
This commit is contained in:
Jan Václavík
@@ -5,13 +5,6 @@ export const SVG_IMAGES = {
|
||||
UNI_SUCCESS: 'uni-success.svg',
|
||||
UNI_WARNING: 'uni-warning.svg',
|
||||
BRIDGE_CHECK_TREZOR_T2T1: 'bridge-check-trezor-t2t1.svg',
|
||||
DEVICE_CONFIRM_TREZOR_UNKNOWN: 'device_confirm_trezor_unknown.svg',
|
||||
DEVICE_CONFIRM_TREZOR_T1B1: 'device-confirm-trezor-t1b1.svg',
|
||||
DEVICE_CONFIRM_TREZOR_T2T1: 'device-confirm-trezor-t2t1.svg',
|
||||
DEVICE_CONFIRM_TREZOR_T2B1: 'device-confirm-trezor-t3b1.svg',
|
||||
DEVICE_CONFIRM_TREZOR_T3B1: 'device-confirm-trezor-t3b1.svg',
|
||||
DEVICE_CONFIRM_TREZOR_T3T1: 'device-confirm-trezor-t3t1.svg',
|
||||
DEVICE_CONFIRM_TREZOR_T3W1: 'device-confirm-trezor-t3w1.svg',
|
||||
SPINNER: 'spinner.svg',
|
||||
DEVICE_ANOTHER_SESSION: 'device-another-session.svg',
|
||||
CONNECT_DEVICE: 'connect-device.svg',
|
||||
@@ -35,6 +28,7 @@ export const SVG_IMAGES = {
|
||||
CONFIRM_EVM_EXPLANATION_ETH: 'confirm-evm-explanation-eth.svg',
|
||||
CONFIRM_EVM_EXPLANATION_OTHER: 'confirm-evm-explanation-other.svg',
|
||||
GAINS_GRAPH: 'gains-graph.svg',
|
||||
GHOST: 'ghost.svg',
|
||||
} as const;
|
||||
|
||||
export type PngImage = keyof typeof PNG_IMAGES;
|
||||
@@ -70,6 +64,12 @@ export const PNG_IMAGES = {
|
||||
FIRMWARE_2x: 'firmware@2x.png',
|
||||
FOLDER: 'folder.png',
|
||||
FOLDER_2x: 'folder@2x.png',
|
||||
HOLOGRAM_UNKNOWN: 'hologram-unknown.webp',
|
||||
HOLOGRAM_T2T1: 'hologram-t2t1.webp',
|
||||
HOLOGRAM_T2B1: 'hologram-t2tb1.webp',
|
||||
HOLOGRAM_T3B1: 'hologram-t3b1.webp',
|
||||
HOLOGRAM_T3T1: 'hologram-t3t1.webp',
|
||||
HOLOGRAM_T3W1: 'hologram-t3w1.webp',
|
||||
KEY: 'key.png',
|
||||
KEY_2x: 'key@2x.png',
|
||||
PIN: 'pin.png',
|
||||
@@ -84,23 +84,9 @@ export const PNG_IMAGES = {
|
||||
UNDERSTAND_2x: 'understand@2x.png',
|
||||
WALLET: 'wallet.png',
|
||||
WALLET_2x: 'wallet@2x.png',
|
||||
DONT_DISCONNECT_TREZOR_UNKNOWN: 'trezor-unknown.png',
|
||||
DONT_DISCONNECT_TREZOR_UNKNOWN_2x: 'trezor-unknown@2x.png',
|
||||
DONT_DISCONNECT_TREZOR_T2T1: 'dont-disconnect-trezor-t2t1.webp',
|
||||
DONT_DISCONNECT_TREZOR_T2T1_2x: 'dont-disconnect-trezor-t2t1@2x.webp',
|
||||
DONT_DISCONNECT_TREZOR_T1B1: 'dont-disconnect-trezor-t1b1.webp',
|
||||
DONT_DISCONNECT_TREZOR_T1B1_2x: 'dont-disconnect-trezor-t1b1@2x.webp',
|
||||
DONT_DISCONNECT_TREZOR_T2B1: 'dont-disconnect-trezor-t3b1.webp',
|
||||
DONT_DISCONNECT_TREZOR_T2B1_2x: 'dont-disconnect-trezor-t3b1@2x.webp',
|
||||
DONT_DISCONNECT_TREZOR_T3B1: 'dont-disconnect-trezor-t3b1.webp',
|
||||
DONT_DISCONNECT_TREZOR_T3B1_2x: 'dont-disconnect-trezor-t3b1@2x.webp',
|
||||
DONT_DISCONNECT_TREZOR_T3T1: 'dont-disconnect-trezor-t3t1.webp',
|
||||
DONT_DISCONNECT_TREZOR_T3T1_2x: 'dont-disconnect-trezor-t3t1@2x.webp',
|
||||
DONT_DISCONNECT_TREZOR_T3W1: 'dont-disconnect-trezor-t3w1.webp',
|
||||
DONT_DISCONNECT_TREZOR_T3W1_2x: 'dont-disconnect-trezor-t3w1@2x.webp',
|
||||
TEX: 'tex.webp',
|
||||
TREZOR_UNKNOWN: 'trezor-unknown.png',
|
||||
TREZOR_UNKNOWN_2x: 'trezor-unknown@2x.png',
|
||||
TREZOR_UNKNOWN: 'trezor-unknown.webp',
|
||||
TREZOR_UNKNOWN_2x: 'trezor-unknown@2x.webp',
|
||||
TREZOR_T1B1: 'trezor-t1b1.png',
|
||||
TREZOR_T1B1_2x: 'trezor-t1b1@2x.png',
|
||||
TREZOR_T2T1: 'trezor-t2t1.png',
|
||||
@@ -113,8 +99,10 @@ export const PNG_IMAGES = {
|
||||
TREZOR_T3T1_2x: 'trezor-t3t1@2x.png',
|
||||
TREZOR_T3W1: 'trezor-t3w1.png',
|
||||
TREZOR_T3W1_2x: 'trezor-t3w1@2x.png',
|
||||
TREZOR_UNKNOWN_LARGE: 'trezor-unknown.png',
|
||||
TREZOR_UNKNOWN_LARGE_2x: 'trezor-unknown@2x.png',
|
||||
TREZOR_T3W1_LARGE: 'trezor-t3w1-large.webp',
|
||||
TREZOR_T3W1_LARGE_2x: 'trezor-t3w1-large@2x.webp',
|
||||
TREZOR_T3W1_FRONTCOLOR_2_LARGE: 'trezor-t3w1-frontcolor-2-large.webp',
|
||||
TREZOR_T3W1_FRONTCOLOR_2_LARGE_2x: 'trezor-t3w1-frontcolor-2-large@2x.webp',
|
||||
TREZOR_T1B1_LARGE: 'trezor-t1b1-large.webp',
|
||||
TREZOR_T1B1_LARGE_2x: 'trezor-t1b1-large@2x.webp',
|
||||
TREZOR_T2T1_LARGE: 'trezor-t2t1-large.webp',
|
||||
@@ -125,21 +113,20 @@ export const PNG_IMAGES = {
|
||||
TREZOR_T3B1_LARGE_2x: 'trezor-t3b1-large@2x.webp',
|
||||
TREZOR_T3T1_LARGE: 'trezor-t3t1-large.webp',
|
||||
TREZOR_T3T1_LARGE_2x: 'trezor-t3t1-large@2x.webp',
|
||||
TREZOR_T3W1_LARGE: 'trezor-t3w1-large.webp',
|
||||
TREZOR_T3W1_LARGE_2x: 'trezor-t3w1-large@2x.webp',
|
||||
TREZOR_UNKNOWN_GHOST: 'trezor-unknown.png',
|
||||
TREZOR_UNKNOWN_GHOST_2x: 'trezor-unknown@2x.png',
|
||||
TREZOR_T1B1_GHOST: 'trezor-t1b1-ghost.webp',
|
||||
TREZOR_T1B1_GHOST_2x: 'trezor-t1b1-ghost@2x.webp',
|
||||
TREZOR_T2T1_GHOST: 'trezor-t2t1-ghost.webp',
|
||||
TREZOR_T2T1_GHOST_2x: 'trezor-t2t1-ghost@2x.webp',
|
||||
TREZOR_T2B1_GHOST: 'trezor-t3b1-ghost.webp',
|
||||
TREZOR_T2B1_GHOST_2x: 'trezor-t3b1-ghost@2x.webp',
|
||||
TREZOR_T3B1_GHOST: 'trezor-t3b1-ghost.webp',
|
||||
TREZOR_T3B1_GHOST_2x: 'trezor-t3b1-ghost@2x.webp',
|
||||
TREZOR_T3T1_GHOST: 'trezor-t3t1-ghost.webp',
|
||||
TREZOR_T1B1_HOLOGRAM: 'trezor-t1b1-hologram.webp',
|
||||
TREZOR_T1B1_HOLOGRAM_2x: 'trezor-t1b1-hologram@2x.webp',
|
||||
TREZOR_T2T1_HOLOGRAM: 'trezor-t2t1-hologram.webp',
|
||||
TREZOR_T2T1_HOLOGRAM_2x: 'trezor-t2t1-hologram@2x.webp',
|
||||
TREZOR_T2B1_HOLOGRAM: 'trezor-t3b1-hologram.webp',
|
||||
TREZOR_T2B1_HOLOGRAM_2x: 'trezor-t3b1-hologram@2x.webp',
|
||||
TREZOR_T3B1_HOLOGRAM: 'trezor-t3b1-hologram.webp',
|
||||
TREZOR_T3B1_HOLOGRAM_2x: 'trezor-t3b1-hologram@2x.webp',
|
||||
TREZOR_T3T1_HOLOGRAM: 'trezor-t3t1-hologram.webp',
|
||||
TREZOR_T3T1_HOLOGRAM_2x: 'trezor-t3t1-hologram@2x.webp',
|
||||
TREZOR_T3W1_HOLOGRAM: 'trezor-t3w1-hologram.webp',
|
||||
TREZOR_T3W1_HOLOGRAM_2x: 'trezor-t3w1-hologram@2x.webp',
|
||||
TREZOR_UNKNOWN_LARGE: 'trezor-unknown.webp',
|
||||
TREZOR_UNKNOWN_LARGE_2x: 'trezor-unknown@2x.webp',
|
||||
TREZOR_T3T1_ON_CONNECT: 'trezor-t3t1-on-large.webp',
|
||||
TREZOR_T3T1_GHOST_2x: 'trezor-t3t1-ghost@2x.webp',
|
||||
TREZOR_T3W1_GHOST: 'trezor-t3w1-ghost.webp',
|
||||
TREZOR_T3W1_GHOST_2x: 'trezor-t3w1-ghost@2x.webp',
|
||||
TOUCH: 'touch.webp',
|
||||
} as const;
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import { DeviceModelInternal } from './';
|
||||
|
||||
type ModelColor = string;
|
||||
type ModelFrontColor = string;
|
||||
|
||||
type ModelConfig = {
|
||||
name: string;
|
||||
colors: Record<string, string>;
|
||||
colors: Record<ModelColor, string>;
|
||||
frontColors?: Record<ModelColor, ModelFrontColor>;
|
||||
};
|
||||
|
||||
const safe3Model: ModelConfig = {
|
||||
@@ -47,7 +51,11 @@ export const models: Record<DeviceModelInternal, ModelConfig> = {
|
||||
'1': 'Fantastic Ethereum', // TODO T3W1
|
||||
'2': 'Lunatic Dogecoin', // TODO T3W1
|
||||
'3': 'Galactic Litecoin', // TODO T3W1
|
||||
'4': 'Majestic Bitcoin', // TODO T3W1
|
||||
},
|
||||
frontColors: {
|
||||
'1': '1',
|
||||
'2': '2',
|
||||
'3': '1',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Video } from './Video';
|
||||
|
||||
const INTRO_SRC = 'videos/device/trezor_t3w1_connect_bt.webm';
|
||||
const LOOP_SRC = 'videos/device/trezor_t3w1_connect_bt_loop.webm';
|
||||
|
||||
type ConnectBtAnimationProps = {
|
||||
rerenderKey: string;
|
||||
videoRef: React.Ref<HTMLVideoElement>;
|
||||
onMouseOver?: React.MouseEventHandler<HTMLVideoElement>;
|
||||
};
|
||||
|
||||
export const ConnectBtAnimation = ({
|
||||
rerenderKey,
|
||||
videoRef,
|
||||
onMouseOver,
|
||||
}: ConnectBtAnimationProps) => {
|
||||
const [showLoop, setShowLoop] = useState(false);
|
||||
|
||||
const commonProps = {
|
||||
onMouseOver,
|
||||
videoRef,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!showLoop && (
|
||||
<Video
|
||||
{...commonProps}
|
||||
src={INTRO_SRC}
|
||||
loop={false}
|
||||
rerenderKey={`${rerenderKey}_intro`}
|
||||
onEnded={() => setShowLoop(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showLoop && (
|
||||
<Video
|
||||
{...commonProps}
|
||||
src={LOOP_SRC}
|
||||
loop
|
||||
onMouseOver={onMouseOver}
|
||||
rerenderKey={`${rerenderKey}_loop`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,14 +1,15 @@
|
||||
import { CSSProperties, MouseEventHandler, forwardRef } from 'react';
|
||||
import { CSSProperties, forwardRef, MouseEventHandler } from 'react';
|
||||
|
||||
import { useTheme } from 'styled-components';
|
||||
|
||||
// TODO: suite-common imports in non-suite packages should not be allowed
|
||||
|
||||
import { DEFAULT_FLAGSHIP_MODEL } from '@suite-common/suite-constants';
|
||||
import { AnimationWrapper, Shape } from '@trezor/components';
|
||||
import { DeviceModelInternal, getNarrowedDeviceModelInternal } from '@trezor/device-utils';
|
||||
|
||||
import { ConnectBtAnimation } from './ConnectBtAnimation';
|
||||
import { Video } from './Video';
|
||||
import { getModelFrontColor } from '../../utils/getModelFrontColor';
|
||||
|
||||
export const animationDeviceTypes = [
|
||||
'BOOTLOADER', // No longer available for T3T1
|
||||
@@ -17,6 +18,8 @@ export const animationDeviceTypes = [
|
||||
'SUCCESS',
|
||||
'HOLOGRAM',
|
||||
'ROTATE',
|
||||
'CONNECT_BT',
|
||||
'CONNECT_CABLE',
|
||||
] as const;
|
||||
export type AnimationDeviceType = (typeof animationDeviceTypes)[number];
|
||||
|
||||
@@ -27,7 +30,6 @@ type DeviceAnimationProps = {
|
||||
loop?: boolean;
|
||||
shape?: Shape;
|
||||
deviceModelInternal?: DeviceModelInternal;
|
||||
isOldT2B1Packaging?: boolean;
|
||||
deviceUnitColor?: number;
|
||||
className?: string;
|
||||
sizeVariant?: 'LARGE';
|
||||
@@ -44,7 +46,6 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
|
||||
loop = false,
|
||||
shape,
|
||||
deviceModelInternal = DEFAULT_FLAGSHIP_MODEL,
|
||||
isOldT2B1Packaging,
|
||||
deviceUnitColor,
|
||||
sizeVariant,
|
||||
onVideoMouseOver: onMouseOver,
|
||||
@@ -64,19 +65,8 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
|
||||
? ''
|
||||
: `_${theme.legacy.THEME}`;
|
||||
|
||||
const deviceModelInFilename = (
|
||||
type === 'HOLOGRAM' && isOldT2B1Packaging
|
||||
? DeviceModelInternal.T2B1
|
||||
: getNarrowedDeviceModelInternal(deviceModelInternal)
|
||||
).toLowerCase();
|
||||
|
||||
const getFrontColor = () => {
|
||||
if (deviceModelInternal === DeviceModelInternal.T3W1) {
|
||||
return deviceUnitColor === 2 ? 2 : 1;
|
||||
}
|
||||
|
||||
return 1;
|
||||
};
|
||||
const deviceModelInFilename =
|
||||
getNarrowedDeviceModelInternal(deviceModelInternal).toLowerCase();
|
||||
|
||||
// Key is used to force re-render of the video element. When `src` of the inner <source> tag
|
||||
// changes, the video element does not re-render. This is a workaround.
|
||||
@@ -86,6 +76,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
|
||||
loop,
|
||||
videoRef,
|
||||
onMouseOver,
|
||||
rerenderKey,
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -93,14 +84,12 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
|
||||
{['BOOTLOADER'].includes(type) && (
|
||||
<Video
|
||||
src={`videos/device/trezor_${deviceModelInFilename}_${type.toLowerCase()}${themeSuffix}.webm`}
|
||||
rerenderKey={rerenderKey}
|
||||
{...commonProps}
|
||||
/>
|
||||
)}
|
||||
{['SUCCESS'].includes(type) && (
|
||||
<Video
|
||||
src={`videos/device/trezor_${deviceModelInFilename}_${type.toLowerCase()}${themeSuffix}_frontcolor_${getFrontColor()}.webm`}
|
||||
rerenderKey={rerenderKey}
|
||||
src={`videos/device/trezor_${deviceModelInFilename}_${type.toLowerCase()}_frontcolor_${getModelFrontColor(deviceModelInternal, deviceUnitColor)}.webm`}
|
||||
{...commonProps}
|
||||
/>
|
||||
)}
|
||||
@@ -108,14 +97,12 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
|
||||
{['BOOTLOADER_TWO_BUTTONS', 'NORMAL'].includes(type) && (
|
||||
<Video
|
||||
src={`videos/device/trezor_${DeviceModelInternal.T1B1.toLowerCase()}_${type.toLowerCase()}${themeSuffix}.webm`}
|
||||
rerenderKey={rerenderKey}
|
||||
{...commonProps}
|
||||
/>
|
||||
)}
|
||||
{type === 'HOLOGRAM' && (
|
||||
<Video
|
||||
src={`videos/device/trezor_${deviceModelInFilename}_hologram.webm`}
|
||||
rerenderKey={rerenderKey}
|
||||
{...commonProps}
|
||||
/>
|
||||
)}
|
||||
@@ -125,10 +112,19 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
|
||||
// if device unit color is not set, use first color available
|
||||
deviceUnitColor ?? 1
|
||||
}${sizeVariant ? `_${sizeVariant.toLowerCase()}` : ''}.webm`}
|
||||
rerenderKey={rerenderKey}
|
||||
{...commonProps}
|
||||
/>
|
||||
)}
|
||||
{type === 'CONNECT_CABLE' && (
|
||||
<Video src="videos/device/trezor_t3w1_connect_cable.webm" {...commonProps} />
|
||||
)}
|
||||
{type === 'CONNECT_BT' && (
|
||||
<ConnectBtAnimation
|
||||
rerenderKey={rerenderKey}
|
||||
videoRef={videoRef}
|
||||
onMouseOver={onMouseOver}
|
||||
/>
|
||||
)}
|
||||
</AnimationWrapper>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -13,16 +13,18 @@ type VideoProps = {
|
||||
loop: boolean;
|
||||
videoRef: React.Ref<HTMLVideoElement>;
|
||||
onMouseOver?: MouseEventHandler<HTMLVideoElement>;
|
||||
onEnded?: () => void;
|
||||
rerenderKey: string;
|
||||
};
|
||||
|
||||
export const Video = ({ src, loop, videoRef, onMouseOver, rerenderKey }: VideoProps) => {
|
||||
export const Video = ({ src, loop, videoRef, onMouseOver, rerenderKey, onEnded }: VideoProps) => {
|
||||
const commonProps = {
|
||||
loop,
|
||||
autoPlay: true,
|
||||
muted: true,
|
||||
ref: videoRef,
|
||||
onMouseOver,
|
||||
onEnded,
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { getFramePropsStory } from '@trezor/components';
|
||||
|
||||
import {
|
||||
DeviceWithScene as DeviceWithSceneComponent,
|
||||
type DeviceWithSceneProps,
|
||||
allowedDeviceWithSceneFrameProps,
|
||||
} from './DeviceWithScene';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'DeviceWithScene',
|
||||
component: DeviceWithSceneComponent,
|
||||
} as Meta;
|
||||
export default meta;
|
||||
|
||||
export const DeviceWithScene: StoryObj<DeviceWithSceneProps> = {
|
||||
args: {
|
||||
...getFramePropsStory(allowedDeviceWithSceneFrameProps).args,
|
||||
},
|
||||
argTypes: {
|
||||
...getFramePropsStory(allowedDeviceWithSceneFrameProps).argTypes,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,99 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { DEFAULT_FLAGSHIP_MODEL } from '@suite-common/suite-constants';
|
||||
import {
|
||||
FrameProps,
|
||||
FramePropsKeys,
|
||||
Image,
|
||||
TransientProps,
|
||||
pickAndPrepareFrameProps,
|
||||
withFrameProps,
|
||||
} from '@trezor/components';
|
||||
import { DeviceModelInternal } from '@trezor/device-utils';
|
||||
import { borders, paletteV2 } from '@trezor/theme';
|
||||
|
||||
import { getLargeModelImagePath } from '../../utils/getModelFrontColor';
|
||||
|
||||
export const allowedDeviceWithSceneFrameProps = [
|
||||
'margin',
|
||||
'width',
|
||||
'height',
|
||||
] as const satisfies FramePropsKeys[];
|
||||
type AllowedFrameProps = Pick<FrameProps, (typeof allowedDeviceWithSceneFrameProps)[number]>;
|
||||
|
||||
const Container = styled.div<TransientProps<AllowedFrameProps>>`
|
||||
position: relative;
|
||||
|
||||
${withFrameProps}
|
||||
`;
|
||||
|
||||
const TouchContainer = styled.div<{ $scale: number }>`
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 40%;
|
||||
`;
|
||||
|
||||
const GhostsContainer = styled.div``;
|
||||
|
||||
const GhostContainer = styled.div<{ $rotate: number; $x: string; $y: string }>`
|
||||
transform: rotate(${({ $rotate }) => $rotate}deg);
|
||||
background-color: ${paletteV2.lightRed600};
|
||||
border-radius: ${borders.radii.full};
|
||||
position: absolute;
|
||||
top: ${({ $y }) => $y};
|
||||
left: ${({ $x }) => $x};
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
export type DeviceWithSceneProps = AllowedFrameProps & {
|
||||
deviceModel: DeviceModelInternal;
|
||||
scene?: 'ghost' | 'confirm';
|
||||
unitColor?: number;
|
||||
};
|
||||
|
||||
const BASE_HEIGHT = 400;
|
||||
|
||||
const Ghost = ({ rotate, x, y }: { rotate: number; x: string; y: string }) => (
|
||||
<GhostContainer $rotate={rotate} $x={x} $y={y}>
|
||||
<Image image="GHOST" isFilterActive={false} width="80%" />
|
||||
</GhostContainer>
|
||||
);
|
||||
|
||||
export const DeviceWithScene = ({
|
||||
deviceModel = DEFAULT_FLAGSHIP_MODEL,
|
||||
scene,
|
||||
unitColor,
|
||||
...rest
|
||||
}: DeviceWithSceneProps) => {
|
||||
const frameProps = pickAndPrepareFrameProps(rest, allowedDeviceWithSceneFrameProps);
|
||||
const image = getLargeModelImagePath(deviceModel, unitColor);
|
||||
|
||||
return (
|
||||
<Container {...frameProps}>
|
||||
<Image image={image} width={frameProps.$width} height={frameProps.$height} />
|
||||
{scene === 'confirm' && (
|
||||
<TouchContainer
|
||||
$scale={
|
||||
frameProps.$height && typeof frameProps.$height === 'number'
|
||||
? frameProps.$height / BASE_HEIGHT
|
||||
: 1
|
||||
}
|
||||
>
|
||||
<Image image="TOUCH" />
|
||||
</TouchContainer>
|
||||
)}
|
||||
{scene === 'ghost' && (
|
||||
<GhostsContainer>
|
||||
<Ghost rotate={15} x="80%" y="8%" />
|
||||
<Ghost rotate={-30} x="-5%" y="60%" />
|
||||
</GhostsContainer>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@@ -8,6 +8,7 @@ export type RotateDeviceImageProps = {
|
||||
deviceModel?: DeviceModelInternal;
|
||||
deviceColor?: number;
|
||||
className?: string;
|
||||
loop?: boolean;
|
||||
animationHeight?: string;
|
||||
animationWidth?: string;
|
||||
};
|
||||
@@ -16,6 +17,7 @@ export const RotateDeviceImage = ({
|
||||
deviceModel,
|
||||
deviceColor,
|
||||
className,
|
||||
loop,
|
||||
animationHeight,
|
||||
animationWidth,
|
||||
}: RotateDeviceImageProps) => {
|
||||
@@ -25,6 +27,7 @@ export const RotateDeviceImage = ({
|
||||
|
||||
return (
|
||||
<DeviceAnimation
|
||||
loop={loop}
|
||||
className={className}
|
||||
type="ROTATE"
|
||||
deviceModelInternal={deviceModel}
|
||||
|
||||
@@ -25,3 +25,5 @@ export { EditableText } from './components/EditableText/EditableText';
|
||||
export { CardButton } from './components/CardButton/CardButton';
|
||||
export { FeeRate } from './components/FeeRate/FeeRate';
|
||||
export { DeviceAnimation } from './components/DeviceAnimation/DeviceAnimation';
|
||||
export { DeviceWithScene } from './components/DeviceWithScene/DeviceWithScene';
|
||||
export { getModelFrontColor, getLargeModelImagePath } from './utils/getModelFrontColor';
|
||||
|
||||
16
packages/product-components/src/utils/getModelFrontColor.tsx
Normal file
16
packages/product-components/src/utils/getModelFrontColor.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { DeviceModelInternal, models } from '@trezor/device-utils';
|
||||
import { ImageKey } from '@trezor/components';
|
||||
|
||||
export const getModelFrontColor = (
|
||||
deviceModelInternal?: DeviceModelInternal,
|
||||
deviceUnitColor?: number,
|
||||
) => (deviceModelInternal && models[deviceModelInternal].frontColors?.[`${deviceUnitColor}`]) ?? 1;
|
||||
|
||||
export const getLargeModelImagePath = (
|
||||
deviceModelInternal?: DeviceModelInternal,
|
||||
deviceUnitColor?: number,
|
||||
) => {
|
||||
const frontColor = getModelFrontColor(deviceModelInternal, deviceUnitColor);
|
||||
|
||||
return `TREZOR_${deviceModelInternal}${frontColor === 1 ? '' : `_FRONTCOLOR_${frontColor}`}_LARGE` as ImageKey;
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
BIN
packages/suite-data/files/images/png/touch.webp
Normal file
BIN
packages/suite-data/files/images/png/touch.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
BIN
packages/suite-data/files/images/png/trezor-t2b1-hologram.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-t2b1-hologram.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
BIN
packages/suite-data/files/images/png/trezor-t2t1-hologram.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-t2t1-hologram.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
BIN
packages/suite-data/files/images/png/trezor-t3b1-hologram.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-t3b1-hologram.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
BIN
packages/suite-data/files/images/png/trezor-t3t1-hologram.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-t3t1-hologram.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
BIN
packages/suite-data/files/images/png/trezor-t3w1-hologram.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-t3w1-hologram.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
packages/suite-data/files/images/png/trezor-unknown.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-unknown.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
BIN
packages/suite-data/files/images/png/trezor-unknown@2x.webp
Normal file
BIN
packages/suite-data/files/images/png/trezor-unknown@2x.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -1,40 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="280" viewBox="0 0 360 280">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#F9C447" fill-rule="nonzero" d="M243.863 116.22l12.78 2.438-.311 1.632-12.78-2.439zM103.363 89.405l12.778 2.439-.312 1.631-12.777-2.438zM193.658 28.052l1.632.311-2.439 12.778-1.631-.312zM166.844 168.551l1.631.312-2.438 12.78-1.632-.311zM217.073 158.154l7.31 10.762-1.373.933-7.31-10.762zM136.682 39.846l7.314 10.76-1.374.933-7.313-10.76zM243.916 60.309l.933 1.373-10.762 7.314-.934-1.374zM125.605 140.7l.934 1.373-10.76 7.31-.933-1.373zM233.954 140.9l10.734 7.352-.938 1.37-10.735-7.351zM115.945 60.072l10.735 7.352-.939 1.37-10.735-7.351zM223.252 40.006l1.37.939-7.351 10.735-1.37-.939zM142.424 158.015l1.37.939-7.351 10.734-1.37-.938zM192.614 168.599l2.391 12.791-1.632.305-2.392-12.791zM166.322 28l2.392 12.788-1.633.305-2.391-12.788zM256.39 89.69l.305 1.632-12.791 2.392-.305-1.633zM115.788 115.981l.305 1.633-12.788 2.391-.305-1.632z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M183.334 202.512v37.385h-6.12v-37.385z"/>
|
||||
<path fill="#BEBDC0" fill-rule="nonzero" d="M170.608 162.595h19.335v36.22h-19.335zM183.32 208.087l.017 26.896-6.12.004-.017-26.896z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M173.965 189.897h12.618v36.907h-12.618z"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M186.026 190.453v35.795h-11.504v-35.795h11.504m1.113-1.112h-13.73v38.02h13.73v-38.02z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M169.081 180.147h22.387v33.235h-22.387z"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M190.914 180.704v32.122h-21.277v-32.122h21.277m1.112-1.113h-23.502v34.348h23.502V179.59z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M186.235 210.837h2.13v-25.213a2.13 2.13 0 0 0-2.13-2.13v27.343zM179.14 225.894h6.46v-6.464a6.465 6.465 0 0 0-6.46 6.464z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M167.874 176.852a7.996 7.996 0 0 1-7.355-4.847l-8.452-19.673a54.87 54.87 0 0 1-4.482-21.781V67.442a13.156 13.156 0 0 1 10.718-12.913 113.789 113.789 0 0 1 41.889 0 13.156 13.156 0 0 1 10.718 12.913v63.15a54.894 54.894 0 0 1-4.491 21.807l-8.44 19.617a7.999 7.999 0 0 1-7.356 4.845l-22.749-.01z"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M179.247 53.17c6.99 0 13.966.648 20.837 1.935a12.551 12.551 0 0 1 10.232 12.337v63.15c0 7.42-1.512 14.76-4.444 21.576l-8.44 19.617a7.422 7.422 0 0 1-6.818 4.49h-22.74a7.425 7.425 0 0 1-6.82-4.493l-8.452-19.681a54.609 54.609 0 0 1-4.433-21.55V67.442a12.551 12.551 0 0 1 10.233-12.337 113.215 113.215 0 0 1 20.845-1.936m0-1.169c-7.062.002-14.108.656-21.05 1.956A13.741 13.741 0 0 0 147 67.442v63.109a55.435 55.435 0 0 0 4.529 22.02l8.452 19.664a8.588 8.588 0 0 0 7.893 5.202h22.749a8.58 8.58 0 0 0 7.894-5.199l8.44-19.617a55.42 55.42 0 0 0 4.54-22.038v-63.15A13.74 13.74 0 0 0 200.3 53.957 114.555 114.555 0 0 0 179.247 52z"/>
|
||||
<rect width="51.452" height="28.771" x="153.523" y="82.882" fill="#BEBDC0" fill-rule="nonzero" rx="3.041"/>
|
||||
<rect width="21.629" height="11.411" x="153.084" y="117.246" fill="#D8D9DA" fill-rule="nonzero" rx="2.389"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M172.324 117.684a1.95 1.95 0 0 1 1.95 1.95v6.625a1.95 1.95 0 0 1-1.95 1.95h-16.846a1.95 1.95 0 0 1-1.955-1.95v-6.625a1.947 1.947 0 0 1 1.955-1.95h16.846m0-.877h-16.846a2.83 2.83 0 0 0-2.827 2.827v6.625a2.83 2.83 0 0 0 2.827 2.836h16.846a2.83 2.83 0 0 0 2.827-2.836v-6.625a2.83 2.83 0 0 0-2.827-2.827z"/>
|
||||
<rect width="21.629" height="11.411" x="183.782" y="117.246" fill="#D8D9DA" fill-rule="nonzero" rx="2.389"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M203.022 117.684a1.947 1.947 0 0 1 1.95 1.95v6.625a1.95 1.95 0 0 1-1.95 1.95h-16.846a1.95 1.95 0 0 1-1.95-1.95v-6.625a1.95 1.95 0 0 1 1.95-1.95h16.852m0-.877h-16.852a2.83 2.83 0 0 0-2.827 2.827v6.625a2.83 2.83 0 0 0 2.827 2.836h16.852a2.83 2.83 0 0 0 2.827-2.827v-6.634a2.83 2.83 0 0 0-2.827-2.827z"/>
|
||||
<path fill="#000" fill-rule="nonzero" d="M201.934 82.297h-45.37a3.625 3.625 0 0 0-3.626 3.625v22.69a3.625 3.625 0 0 0 3.625 3.626h45.371a3.625 3.625 0 0 0 3.625-3.626v-22.69a3.625 3.625 0 0 0-3.625-3.625zm-45.37 1.17h45.37c1.357 0 2.456 1.1 2.456 2.455v22.69c0 1.357-1.1 2.456-2.456 2.456h-45.37a2.456 2.456 0 0 1-2.457-2.456v-22.69c0-1.356 1.1-2.455 2.456-2.455z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M151.26 62.96l4.763-4.762 2.2 2.2-4.764 4.763zM201.934 111.068v1.17H156.56v-1.17zM172.324 117.246v.877h-16.851v-.877zM203.022 117.246v.877H186.17v-.877z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M179.247 54.631c6.9.002 13.785.641 20.568 1.91a11.11 11.11 0 0 1 9.048 10.901v63.15a52.807 52.807 0 0 1-4.327 20.997l-8.437 19.62a5.96 5.96 0 0 1-5.476 3.605h-22.749a5.957 5.957 0 0 1-5.475-3.608l-8.453-19.681a52.856 52.856 0 0 1-4.315-20.974V67.442a11.11 11.11 0 0 1 9.063-10.902 112.108 112.108 0 0 1 20.553-1.909m0-1.462c-6.993 0-13.971.648-20.845 1.936a12.551 12.551 0 0 0-10.233 12.337v63.109c0 7.41 1.509 14.742 4.433 21.55l8.452 19.673a7.425 7.425 0 0 0 6.82 4.493h22.749a7.422 7.422 0 0 0 6.818-4.49l8.44-19.618a54.593 54.593 0 0 0 4.444-21.576v-63.15a12.551 12.551 0 0 0-10.233-12.337 113.208 113.208 0 0 0-20.845-1.927z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M163.43 174.79a7.406 7.406 0 0 0 4.444 1.483h22.749a7.423 7.423 0 0 0 6.818-4.49l8.44-19.618a54.593 54.593 0 0 0 4.444-21.576l-46.894 44.202z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M158.402 59.359a113.087 113.087 0 0 1 41.673 0c4.476.839 8.77 4.031 8.77 8.083h1.462a12.551 12.551 0 0 0-10.232-12.337 113.087 113.087 0 0 0-41.673 0 12.551 12.551 0 0 0-10.233 12.337h1.462c0-4.09 4.3-7.256 8.771-8.083z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M167.874 176.852a7.996 7.996 0 0 1-7.355-4.847l-8.452-19.673a54.87 54.87 0 0 1-4.482-21.781V67.442a13.156 13.156 0 0 1 10.718-12.913 113.789 113.789 0 0 1 41.889 0 13.156 13.156 0 0 1 10.718 12.913v63.15a54.894 54.894 0 0 1-4.491 21.807l-8.44 19.617a7.999 7.999 0 0 1-7.356 4.845l-22.749-.01z"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M179.247 53.17c6.99 0 13.966.648 20.837 1.935a12.551 12.551 0 0 1 10.232 12.337v63.15c0 7.42-1.512 14.76-4.444 21.576l-8.44 19.617a7.422 7.422 0 0 1-6.818 4.49h-22.74a7.425 7.425 0 0 1-6.82-4.493l-8.452-19.681a54.609 54.609 0 0 1-4.433-21.55V67.442a12.551 12.551 0 0 1 10.233-12.337 113.215 113.215 0 0 1 20.845-1.936m0-1.169c-7.062.002-14.108.656-21.05 1.956A13.741 13.741 0 0 0 147 67.442v63.109a55.435 55.435 0 0 0 4.529 22.02l8.452 19.664a8.588 8.588 0 0 0 7.893 5.202h22.749a8.58 8.58 0 0 0 7.894-5.199l8.44-19.617a55.42 55.42 0 0 0 4.54-22.038v-63.15A13.74 13.74 0 0 0 200.3 53.957 114.555 114.555 0 0 0 179.247 52z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M201.791 113.436h-45.09a3.178 3.178 0 0 1-3.178-3.18v-1.644h51.455v1.643a3.18 3.18 0 0 1-3.187 3.181z"/>
|
||||
<rect width="50.283" height="27.602" x="154.107" y="83.467" fill="#FFF" fill-rule="nonzero" rx="2.456"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M201.934 84.051a1.871 1.871 0 0 1 1.868 1.871v22.69c0 1.033-.836 1.87-1.868 1.871H156.56a1.871 1.871 0 0 1-1.868-1.87v-22.7c0-1.032.836-1.869 1.868-1.87h45.374m0-1.17H156.56a3.038 3.038 0 0 0-3.037 3.04v22.69a3.04 3.04 0 0 0 3.037 3.038h45.374a3.04 3.04 0 0 0 3.038-3.04V85.914a3.038 3.038 0 0 0-3.038-3.04z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M153.523 117.684h20.752v1.772h-20.752zM184.22 117.684h20.752v1.772H184.22z"/>
|
||||
<path fill="#7A7F80" fill-rule="nonzero" d="M172.324 117.684a1.95 1.95 0 0 1 1.95 1.95v6.625a1.95 1.95 0 0 1-1.95 1.95h-16.846a1.95 1.95 0 0 1-1.955-1.95v-6.625a1.947 1.947 0 0 1 1.955-1.95h16.846m0-.877h-16.846a2.83 2.83 0 0 0-2.827 2.827v6.625a2.83 2.83 0 0 0 2.827 2.836h16.846a2.83 2.83 0 0 0 2.827-2.836v-6.625a2.83 2.83 0 0 0-2.827-2.827zM203.022 117.684a1.947 1.947 0 0 1 1.95 1.95v6.625a1.95 1.95 0 0 1-1.95 1.95h-16.846a1.95 1.95 0 0 1-1.95-1.95v-6.625a1.95 1.95 0 0 1 1.95-1.95h16.852m0-.877h-16.852a2.83 2.83 0 0 0-2.827 2.827v6.625a2.83 2.83 0 0 0 2.827 2.836h16.852a2.83 2.83 0 0 0 2.827-2.827v-6.634a2.83 2.83 0 0 0-2.827-2.827z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M150.978 62.68l4.763-4.764 2.762 2.762-4.763 4.763z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M179.247 54.631c6.9.002 13.785.641 20.568 1.91a11.11 11.11 0 0 1 9.048 10.901v63.15a52.807 52.807 0 0 1-4.327 20.997l-8.437 19.62a5.96 5.96 0 0 1-5.476 3.605h-22.749a5.957 5.957 0 0 1-5.475-3.608l-8.453-19.681a52.856 52.856 0 0 1-4.315-20.974V67.442a11.11 11.11 0 0 1 9.063-10.902 112.108 112.108 0 0 1 20.553-1.909m0-1.462c-6.993 0-13.971.648-20.845 1.936a12.551 12.551 0 0 0-10.233 12.337v63.109c0 7.41 1.509 14.742 4.433 21.55l8.452 19.673a7.425 7.425 0 0 0 6.82 4.493h22.749a7.422 7.422 0 0 0 6.818-4.49l8.44-19.618a54.593 54.593 0 0 0 4.444-21.576v-63.15a12.551 12.551 0 0 0-10.233-12.337 113.208 113.208 0 0 0-20.845-1.927z"/>
|
||||
<path fill="#D8D9DA" fill-rule="nonzero" d="M163.43 174.79a7.406 7.406 0 0 0 4.444 1.483h22.749a7.423 7.423 0 0 0 6.818-4.49l8.44-19.618a54.593 54.593 0 0 0 4.444-21.576l-46.894 44.202z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" d="M158.402 59.359a113.087 113.087 0 0 1 41.673 0c4.476.839 8.77 4.031 8.77 8.083h1.462a12.551 12.551 0 0 0-10.232-12.337 113.087 113.087 0 0 0-41.673 0 12.551 12.551 0 0 0-10.233 12.337h1.462c0-4.09 4.3-7.256 8.771-8.083z"/>
|
||||
<circle cx="194.8" cy="126.847" r="20.73" fill="#C6E2BA" fill-rule="nonzero"/>
|
||||
<path fill="#FFF" d="M185.556 148.5c-2.667-7.667-3.834-14.667-3.5-21 .333-6.333 3.333-10.333 9-12 6-1.333 10.5 0 13.5 4s6.166 10 9.5 18c2.333 5 4.166 8.333 5.5 10 2 2.5 3 5 3.5 7.5.333 1.667 1.166 4.167 2.5 7.5 4.333 9.333 9.666 17.667 16 25 9.5 11-31 36-32.5 31s-13-47-14-50-1.5-4-3-6c-1-1.333-2.167-3.667-3.5-7l-3-7z"/>
|
||||
<path fill="#8FCB7F" fill-rule="nonzero" d="M188.493 115.037c2.916-1.308 6.782-1.688 9.82-.937 2.988.738 5.601 2.944 7.475 5.993l.427.703c1.03 1.714 1.979 3.451 3.481 6.319l1.212 2.336c.48.943.95 1.9 1.533 3.123l3.205 6.793c.311.651.585 1.216.855 1.763l.57 1.144.139.168c.412.512.85 1.13 1.314 1.848l.234.366c.46.73.939 1.544 1.432 2.427a89.491 89.491 0 0 1 1.76 3.334l.607 1.223.612 1.278.122.261.058.174 1.015 4.755.407.918.21.467c.531 1.166 1.143 2.466 1.827 3.867 1.954 4 4.097 8.001 6.361 11.731 2.936 4.837 5.851 8.848 8.666 11.75l.366.372-1.174 1.175c-3.037-3.038-6.151-7.284-9.278-12.435-2.292-3.778-4.459-7.821-6.434-11.864-.493-1.01-.95-1.97-1.366-2.865l-.589-1.286-.554-1.248-.05-.155-1.013-4.746-.2-.426a97.42 97.42 0 0 0-.479-.995l-.177-.362a91.897 91.897 0 0 0-2.148-4.114c-.48-.859-.943-1.648-1.386-2.35a22.317 22.317 0 0 0-1.453-2.078l-.162-.197-.107-.162-.517-1.033c-.305-.616-.61-1.245-.963-1.982l-3.204-6.79a124.37 124.37 0 0 0-2.077-4.178l-.84-1.61c-1.572-2.991-2.521-4.702-3.656-6.55-1.664-2.705-3.942-4.628-6.46-5.25-2.673-.66-6.16-.318-8.741.84-4.313 1.938-6.483 4.504-6.769 10.44-.287 6.103.426 11.32 2.179 16.976l.358 1.122c1.043 3.184 1.987 5.51 4.895 12.274l.351.817 4.603 7 2.44 9.058 1.98 7.284c.822 3.017 1.639 6 2.44 8.908l2.578 9.299c2.232 7.981 4.018 14.173 5.227 18.068l.345 1.1-1.582.503-.534-1.71c-1.24-4.038-3.02-10.229-5.222-18.112l-1.46-5.255-1.436-5.206c-.969-3.526-1.958-7.147-2.948-10.794l-3.363-12.453-4.494-6.834-.069-.128-1.718-4.01c-2.02-4.753-2.809-6.804-3.747-9.71-1.976-6.118-2.79-11.711-2.482-18.276.32-6.638 2.912-9.703 7.748-11.876z"/>
|
||||
<path fill="#C6E2BA" fill-rule="nonzero" d="M204.426 129.491l-.024 1.107a22.102 22.102 0 0 0-14.8 5.262c-.374.32-.564.555-.608.764l-.01.077-1.106-.048c.028-.632.364-1.086 1.005-1.635a23.21 23.21 0 0 1 15.056-5.532l.487.005z"/>
|
||||
<path fill="#8FCB7F" fill-rule="nonzero" d="M185.06 124.804a28.55 28.55 0 0 0 3.115 10.933c.234.523.576.992.947 1.332.463.32.992.53 1.567.616l.249.03c4.253.615 8.761-.475 12.555-2.96 1.392-.912 2.542-2.417 2.831-3.793l.039-.216 1.096.158c-.258 1.779-1.648 3.656-3.359 4.777-4.014 2.63-8.793 3.785-13.29 3.134a4.83 4.83 0 0 1-2.372-.88 5.153 5.153 0 0 1-1.26-1.718 29.602 29.602 0 0 1-3.167-10.705l-.054-.623 1.104-.085zM209.793 144.23l.464 1.005c-.7.323-1.328.453-2.437.544l-1.44.107-.092.009c-3.5.353-6.658 2.046-10.842 5.378l-.422.339-.696-.86c4.55-3.682 7.96-5.567 11.849-5.959l.396-.035 1.123-.08c.924-.075 1.453-.174 1.968-.392l.129-.057zM211.405 146.921l.965.543a5.2 5.2 0 0 1-2.531 2.253c-.334.148-.802.25-1.462.344l-1.248.162-.696.11-1.835.315-.542.085-.165-1.095.53-.083 1.832-.314.711-.113c.155-.023 1.015-.129 1.256-.163.562-.08.96-.167 1.183-.266a4.102 4.102 0 0 0 1.873-1.564l.13-.214z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 12 KiB |
@@ -1,25 +0,0 @@
|
||||
<svg viewBox="0 0 360 280" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
|
||||
<path d="M213.654 51.41h-67.707.001c-4.749.002-8.655 3.909-8.656 8.658v74.847c0 11.173 2.844 20.761 8.878 28.207l1.026 1.268 5.915-4.076-3.535-6.898a35.853 35.853 0 01-3.944-16.354V62.449c0-2.788 1.294-4.082 4.082-4.082h60.267c2.788 0 4.082 1.294 4.082 4.082v74.575h1c.001 5.709-2.362 11.336-4.975 16.412l-3.551 6.9 5.868 4.052.141-.175c2.756-3.448 5.349-7.534 7.02-12.106 1.938-5.305 2.738-11.238 2.738-17.193V60.068c.001-4.747-3.903-8.655-8.65-8.658z" fill="#ebebeb" fill-rule="nonzero"/>
|
||||
<path d="M243.863 116.22l12.78 2.438-.311 1.632-12.78-2.439.311-1.631zm-140.5-26.815l12.778 2.439-.312 1.631-12.777-2.438.311-1.632zm90.295-61.353l1.632.311-2.439 12.778-1.631-.312 2.438-12.777zm-26.814 140.499l1.631.312-2.438 12.78-1.632-.311 2.439-12.781zm50.229-10.397l7.31 10.762-1.373.933-7.31-10.762 1.373-.933zM136.682 39.846l7.314 10.76-1.374.933-7.313-10.76 1.373-.933zm107.234 20.463l.933 1.373-10.762 7.314-.934-1.374 10.763-7.313zM125.605 140.7l.934 1.373-10.76 7.31-.933-1.373 10.759-7.31zm108.349.2l10.734 7.352-.938 1.37-10.735-7.351.939-1.371zM115.945 60.072l10.735 7.352-.939 1.37-10.735-7.351.939-1.371zm107.307-20.066l1.37.939-7.351 10.735-1.37-.939 7.351-10.735zm-80.828 118.009l1.37.939-7.351 10.734-1.37-.938 7.351-10.735zm50.19 10.584l2.391 12.791-1.632.305-2.392-12.791 1.633-.305zM166.322 28l2.392 12.788-1.633.305-2.391-12.788 1.632-.305zm90.068 61.69l.305 1.632-12.791 2.392-.305-1.633 12.791-2.391zm-140.602 26.291l.305 1.633-12.788 2.391-.305-1.632 12.788-2.392z" fill="#f9c447" fill-rule="nonzero"/>
|
||||
<path fill="#d8d9da" fill-rule="nonzero" d="M176.755 212.576h6.09v37.203h-6.09z"/>
|
||||
<path d="M170.179 172.854h19.241v36.043h-19.241v-36.043zm12.652 45.272l.017 26.762-6.09.004-.016-26.762 6.089-.004z" fill="#bebdc0" fill-rule="nonzero"/>
|
||||
<path fill="#d8d9da" fill-rule="nonzero" d="M173.522 200.025h12.556v36.727h-12.556z"/>
|
||||
<path d="M185.525 200.579v35.62h-11.449v-35.62h11.449m1.107-1.108h-13.663v37.835h13.663V199.47v.001z" fill="#7a7f80" fill-rule="nonzero"/>
|
||||
<path fill="#d8d9da" fill-rule="nonzero" d="M168.662 190.32h22.278v33.073h-22.278z"/>
|
||||
<path d="M190.386 190.874v31.966h-21.17v-31.966h21.17m1.107-1.107h-23.385v34.18h23.385v-34.18z" fill="#7a7f80" fill-rule="nonzero"/>
|
||||
<path d="M185.721 220.86h2.12v-25.09a2.128 2.128 0 00-2.118-2.117h-.002v27.207zm-7.053 14.984h6.433v-6.43c-3.528 0-6.431 2.902-6.433 6.43z" fill="#fff" fill-rule="nonzero"/>
|
||||
<path d="M213.654 50.302h-67.707c-5.356 0-9.763 4.407-9.763 9.763v74.849c0 11.41 2.916 21.243 9.125 28.904l18.712 23.108c.467.58 1.173.917 1.917.917h27.725c.745 0 1.45-.338 1.918-.918l18.71-23.107c6.209-7.668 9.12-17.492 9.12-28.904V60.068c.002-5.39-4.366-9.762-9.757-9.766zm-67.707 1.108h67.707c4.747.003 8.651 3.911 8.65 8.658v74.846c0 11.175-2.839 20.754-8.873 28.207L194.72 186.23c-.258.32-.646.507-1.056.507h-27.725c-.41 0-.798-.186-1.055-.505l-18.714-23.11c-6.034-7.446-8.878-17.034-8.878-28.207V60.068c.001-4.749 3.907-8.656 8.656-8.658h-.001z" fill="#7a7f80" fill-rule="nonzero"/>
|
||||
<path d="M215.063 137.024V62.452v-.003c0-2.788-2.294-5.082-5.082-5.082h-60.267c-2.788 0-5.082 2.294-5.082 5.082v74.613a35.853 35.853 0 003.944 16.354l3.535 6.898-5.342 4.43 17.682 21.834c.363.449.91.711 1.487.711h27.725c.577 0 1.123-.262 1.486-.711l17.683-21.835-5.295-4.407 3.551-6.9a35.845 35.845 0 003.975-16.412z" fill="#d8d9da" fill-rule="nonzero"/>
|
||||
<path d="M148.302 64.234a2.895 2.895 0 01-1.876-.686l-5.34-4.518a2.907 2.907 0 01-1.118-2.29 2.918 2.918 0 012.904-2.904c.727 0 1.428.273 1.964.765l5.343 4.515a2.91 2.91 0 011.031 2.22 2.92 2.92 0 01-2.906 2.906h-.002v-.008z" fill="#d8d9da" fill-rule="nonzero"/>
|
||||
<path d="M210.477 74.318a3.559 3.559 0 00-3.557-3.557h-54.238a3.559 3.559 0 00-3.557 3.557v54.238a3.559 3.559 0 003.557 3.557h54.238a3.559 3.559 0 003.557-3.557V74.318z" fill="#7a7f80"/>
|
||||
<path d="M210.477 80.63a3.559 3.559 0 00-3.557-3.557h-54.238a3.559 3.559 0 00-3.557 3.557v54.238a3.559 3.559 0 003.557 3.557h54.238a3.559 3.559 0 003.557-3.557V80.63z" fill="#fff"/>
|
||||
<path d="M209.922 77.728a3.005 3.005 0 00-3.003-3.003h-54.238a3.005 3.005 0 00-3.003 3.003v54.238a3.005 3.005 0 003.003 3.003h54.238a3.005 3.005 0 003.003-3.003V77.728z" fill="#fff"/>
|
||||
<path d="M206.92 75.279a2.465 2.465 0 012.449 2.45v54.237a2.466 2.466 0 01-2.45 2.45h-54.238a2.466 2.466 0 01-2.45-2.45V77.73a2.466 2.466 0 012.45-2.45h54.238m0-1.107h-54.238a3.574 3.574 0 00-3.556 3.557v54.237a3.574 3.574 0 003.556 3.557h54.238a3.574 3.574 0 003.557-3.557V77.73a3.574 3.574 0 00-3.557-3.557z" fill="#7a7f80" fill-rule="nonzero"/>
|
||||
<path d="M213.654 50.302h-67.707c-5.356 0-9.763 4.407-9.763 9.763v74.849c0 11.41 2.916 21.243 9.125 28.904l18.712 23.108c.467.58 1.173.917 1.917.917h27.725c.745 0 1.45-.338 1.918-.918l18.71-23.107c6.209-7.668 9.12-17.492 9.12-28.904V60.068c.002-5.39-4.366-9.762-9.757-9.766zm-67.707 1.108h67.707c4.747.003 8.651 3.911 8.65 8.658v74.846c0 11.175-2.839 20.754-8.873 28.207L194.72 186.23c-.258.32-.646.507-1.056.507h-27.725c-.41 0-.798-.186-1.055-.505l-18.714-23.11c-6.034-7.446-8.878-17.034-8.878-28.207V60.068c.001-4.749 3.907-8.656 8.656-8.658h-.001z" fill="#7a7f80" fill-rule="nonzero"/>
|
||||
<circle cx="179.8" cy="104.847" r="20.73" fill="#c6e2ba"/>
|
||||
<circle cx="179.8" cy="104.847" r="21" fill="#c6e2ba" stroke="#c6e2ba" stroke-width="2"/>
|
||||
<path d="M170.556 126.5c-2.667-7.667-3.834-14.667-3.5-21 .333-6.333 3.333-10.333 9-12 6-1.333 10.5 0 13.5 4s6.166 10 9.5 18c2.333 5 4.166 8.333 5.5 10 2 2.5 3 5 3.5 7.5.333 1.667 1.166 4.167 2.5 7.5 4.333 9.333 9.666 17.667 16 25 9.5 11-31 36-32.5 31s-13-47-14-50-1.5-4-3-6c-1-1.333-2.167-3.667-3.5-7l-3-7z" fill="#fff"/>
|
||||
<path d="M173.493 93.037c2.916-1.308 6.782-1.688 9.82-.937 2.988.738 5.601 2.944 7.475 5.993l.427.703c1.03 1.714 1.979 3.451 3.481 6.319l1.212 2.336c.48.943.95 1.9 1.533 3.123l3.205 6.793c.311.651.585 1.216.855 1.763l.57 1.144.139.168c.412.512.85 1.13 1.314 1.848l.234.366c.46.73.939 1.544 1.432 2.427a89.006 89.006 0 011.76 3.334l.607 1.223.612 1.278.122.261.058.174 1.015 4.755.407.918.21.467a160.291 160.291 0 001.827 3.867c1.954 4 4.097 8.001 6.361 11.731 2.936 4.837 5.851 8.848 8.666 11.75l.366.372-1.174 1.175c-3.037-3.038-6.151-7.284-9.278-12.435-2.292-3.778-4.459-7.821-6.434-11.864-.493-1.01-.95-1.97-1.366-2.865l-.589-1.286-.554-1.248-.05-.155-1.013-4.746-.2-.426a90.905 90.905 0 00-.479-.995l-.177-.362a91.227 91.227 0 00-2.148-4.114 51.728 51.728 0 00-1.386-2.35c-.445-.72-.93-1.413-1.453-2.078l-.162-.197-.107-.162-.517-1.033c-.305-.616-.61-1.245-.963-1.982l-3.204-6.79a124.827 124.827 0 00-2.077-4.178l-.84-1.61c-1.572-2.991-2.521-4.702-3.656-6.55-1.664-2.705-3.942-4.628-6.46-5.25-2.673-.66-6.16-.318-8.741.84-4.313 1.938-6.483 4.504-6.769 10.44-.287 6.103.426 11.32 2.179 16.976l.358 1.122c1.043 3.184 1.987 5.51 4.895 12.274l.351.817 4.603 7 2.44 9.058 1.98 7.284c.822 3.017 1.639 6 2.44 8.908l2.578 9.299c2.232 7.981 4.018 14.173 5.227 18.068l.345 1.1-1.582.503-.534-1.71c-1.24-4.038-3.02-10.229-5.222-18.112l-1.46-5.255-1.436-5.206c-.969-3.526-1.958-7.147-2.948-10.794l-3.363-12.453-4.494-6.834-.069-.128-1.718-4.01c-2.02-4.753-2.809-6.804-3.747-9.71-1.976-6.118-2.79-11.711-2.482-18.276.32-6.638 2.912-9.703 7.748-11.876z" fill="#8fcb7f" fill-rule="nonzero"/>
|
||||
<path d="M189.426 107.491l-.024 1.107a22.108 22.108 0 00-14.8 5.262c-.374.32-.564.555-.608.764l-.01.077-1.106-.048c.028-.632.364-1.086 1.005-1.635a23.215 23.215 0 0115.056-5.532l.487.005z" fill="#c6e2ba" fill-rule="nonzero"/>
|
||||
<path d="M170.06 102.804a28.55 28.55 0 003.115 10.933c.234.523.576.992.947 1.332a3.7 3.7 0 001.567.616l.249.03c4.253.615 8.761-.475 12.555-2.96 1.392-.912 2.542-2.417 2.831-3.793l.039-.216 1.096.158c-.258 1.779-1.648 3.656-3.359 4.777-4.014 2.63-8.793 3.785-13.29 3.134a4.823 4.823 0 01-2.372-.88 5.163 5.163 0 01-1.26-1.718 29.598 29.598 0 01-3.167-10.705l-.054-.623 1.104-.085h-.001zm24.733 19.426l.464 1.005c-.7.323-1.328.453-2.437.544l-1.44.107-.092.009c-3.5.353-6.658 2.046-10.842 5.378l-.422.339-.696-.86c4.55-3.682 7.96-5.567 11.849-5.959l.396-.035 1.123-.08c.924-.075 1.453-.174 1.968-.392l.129-.057v.001zm1.612 2.691l.965.543a5.201 5.201 0 01-2.531 2.253c-.334.148-.802.25-1.462.344l-1.248.162-.696.11-1.835.315-.542.085-.165-1.095.53-.083 1.832-.314.711-.113c.155-.023 1.015-.129 1.256-.163.562-.08.96-.167 1.183-.266a4.103 4.103 0 001.873-1.564l.13-.214h-.001z" fill="#8fcb7f" fill-rule="nonzero"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.2 KiB |
@@ -1,40 +0,0 @@
|
||||
<svg width="360" height="280" viewBox="0 0 360 280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M243.863 116.22L256.643 118.658L256.332 120.29L243.552 117.851L243.863 116.22ZM103.363 89.405L116.141 91.844L115.829 93.475L103.052 91.037L103.363 89.405ZM193.658 28.052L195.29 28.363L192.851 41.141L191.22 40.829L193.658 28.052ZM166.844 168.551L168.475 168.863L166.037 181.643L164.405 181.332L166.844 168.551ZM217.073 158.154L224.383 168.916L223.01 169.849L215.7 159.087L217.073 158.154ZM136.682 39.846L143.996 50.606L142.622 51.539L135.309 40.779L136.682 39.846ZM243.916 60.309L244.849 61.682L234.087 68.996L233.153 67.622L243.916 60.309ZM125.605 140.7L126.539 142.073L115.779 149.383L114.846 148.01L125.605 140.7ZM233.954 140.9L244.688 148.252L243.75 149.622L233.015 142.271L233.954 140.9ZM115.945 60.072L126.68 67.424L125.741 68.794L115.006 61.443L115.945 60.072ZM223.252 40.006L224.622 40.945L217.271 51.68L215.901 50.741L223.252 40.006ZM142.424 158.015L143.794 158.954L136.443 169.688L135.073 168.75L142.424 158.015ZM192.614 168.599L195.005 181.39L193.373 181.695L190.981 168.904L192.614 168.599ZM166.322 28L168.714 40.788L167.081 41.093L164.69 28.305L166.322 28ZM256.39 89.69L256.695 91.322L243.904 93.714L243.599 92.081L256.39 89.69ZM115.788 115.981L116.093 117.614L103.305 120.005L103 118.373L115.788 115.981Z" fill="#F9C447"/>
|
||||
<path d="M183.334 202.512V239.897H177.214V202.512H183.334Z" fill="#D8D9DA"/>
|
||||
<path d="M170.608 162.595H189.943V198.815H170.608V162.595ZM183.32 208.087L183.337 234.983L177.217 234.987L177.2 208.091L183.32 208.087Z" fill="#BEBDC0"/>
|
||||
<path d="M173.965 189.897H186.583V226.804H173.965V189.897Z" fill="#D8D9DA"/>
|
||||
<path d="M186.026 190.453V226.248H174.522V190.453H186.026ZM187.139 189.341H173.409V227.361H187.139V189.341Z" fill="#7A7F80"/>
|
||||
<path d="M169.081 180.147H191.468V213.382H169.081V180.147Z" fill="#D8D9DA"/>
|
||||
<path d="M190.914 180.704V212.826H169.637V180.704H190.914ZM192.026 179.591H168.524V213.939H192.026V179.59V179.591Z" fill="#7A7F80"/>
|
||||
<path d="M186.235 210.837H188.365V185.624C188.365 185.059 188.14 184.517 187.741 184.118C187.341 183.719 186.8 183.494 186.235 183.494V210.837ZM179.14 225.894H185.6V219.43C183.886 219.431 182.243 220.113 181.032 221.325C179.82 222.537 179.14 224.181 179.14 225.894Z" fill="white"/>
|
||||
<path d="M167.874 176.852C166.308 176.853 164.776 176.394 163.469 175.533C162.161 174.671 161.136 173.444 160.519 172.005L152.067 152.332C149.102 145.454 147.577 138.041 147.585 130.551V67.4421C147.589 64.3785 148.661 61.4122 150.618 59.0548C152.574 56.6975 155.292 55.0969 158.303 54.5291C172.146 51.9369 186.349 51.9369 200.192 54.5291C203.203 55.0969 205.921 56.6975 207.877 59.0548C209.834 61.4122 210.906 64.3785 210.91 67.4421V130.592C210.918 138.092 209.39 145.513 206.419 152.399L197.979 172.016C197.362 173.455 196.336 174.681 195.028 175.542C193.72 176.404 192.189 176.862 190.623 176.861L167.874 176.851V176.852Z" fill="#D8D9DA"/>
|
||||
<path d="M179.247 53.17C186.237 53.17 193.213 53.818 200.084 55.105C202.96 55.6458 205.557 57.1748 207.426 59.4275C209.294 61.6803 210.317 64.5152 210.316 67.442V130.592C210.316 138.012 208.804 145.352 205.872 152.168L197.432 171.785C196.859 173.118 195.908 174.254 194.696 175.052C193.484 175.85 192.065 176.275 190.614 176.275H167.874C166.423 176.275 165.003 175.849 163.791 175.05C162.579 174.252 161.627 173.116 161.054 171.782L152.602 152.101C149.678 145.293 148.169 137.961 148.169 130.551V67.442C148.169 64.5151 149.191 61.6801 151.06 59.4273C152.928 57.1745 155.525 55.6456 158.402 55.105C165.276 53.8173 172.254 53.1702 179.247 53.17ZM179.247 52C172.185 52.002 165.139 52.656 158.197 53.956C155.052 54.5484 152.213 56.2198 150.169 58.6818C148.125 61.1438 147.004 64.242 147 67.442V130.551C146.99 138.123 148.531 145.617 151.529 152.571L159.981 172.235C160.644 173.779 161.744 175.095 163.147 176.02C164.55 176.944 166.194 177.437 167.874 177.437H190.623C192.303 177.439 193.947 176.947 195.351 176.023C196.754 175.098 197.855 173.782 198.517 172.238L206.957 152.621C209.961 145.663 211.507 138.162 211.497 130.583V67.433C211.491 64.2347 210.369 61.1387 208.325 58.6788C206.281 56.2188 203.443 54.5489 200.3 53.957C193.358 52.657 186.31 52.0019 179.247 52Z" fill="#7A7F80"/>
|
||||
<path d="M201.934 82.8818H156.564C154.885 82.8818 153.523 84.2433 153.523 85.9228V108.612C153.523 110.291 154.885 111.653 156.564 111.653H201.934C203.614 111.653 204.975 110.291 204.975 108.612V85.9228C204.975 84.2433 203.614 82.8818 201.934 82.8818Z" fill="#BEBDC0"/>
|
||||
<path d="M172.324 117.246H155.473C154.154 117.246 153.084 118.316 153.084 119.635V126.268C153.084 127.587 154.154 128.657 155.473 128.657H172.324C173.643 128.657 174.713 127.587 174.713 126.268V119.635C174.713 118.316 173.643 117.246 172.324 117.246Z" fill="#D8D9DA"/>
|
||||
<path d="M172.324 117.684C172.842 117.684 173.338 117.89 173.703 118.255C174.069 118.621 174.274 119.117 174.274 119.634V126.259C174.274 126.776 174.069 127.272 173.703 127.638C173.338 128.004 172.842 128.209 172.324 128.209H155.478C155.222 128.21 154.968 128.16 154.731 128.062C154.493 127.964 154.278 127.821 154.096 127.64C153.915 127.459 153.771 127.243 153.672 127.007C153.574 126.77 153.523 126.516 153.523 126.259V119.634C153.523 119.378 153.573 119.123 153.671 118.886C153.77 118.649 153.914 118.434 154.095 118.253C154.277 118.071 154.493 117.928 154.73 117.83C154.967 117.733 155.222 117.683 155.478 117.684H172.324ZM172.324 116.807H155.478C154.729 116.808 154.01 117.106 153.48 117.636C152.95 118.166 152.652 118.885 152.651 119.634V126.259C152.651 126.631 152.723 126.999 152.865 127.343C153.006 127.687 153.215 128 153.477 128.263C153.74 128.526 154.052 128.736 154.395 128.878C154.738 129.021 155.106 129.095 155.478 129.095H172.324C172.696 129.095 173.064 129.021 173.408 128.878C173.751 128.736 174.063 128.526 174.326 128.263C174.588 128 174.796 127.687 174.938 127.343C175.08 126.999 175.152 126.631 175.151 126.259V119.634C175.151 118.885 174.852 118.166 174.322 117.636C173.792 117.106 173.074 116.808 172.324 116.807Z" fill="#7A7F80"/>
|
||||
<path d="M203.022 117.246H186.171C184.852 117.246 183.782 118.316 183.782 119.635V126.268C183.782 127.587 184.852 128.657 186.171 128.657H203.022C204.342 128.657 205.411 127.587 205.411 126.268V119.635C205.411 118.316 204.342 117.246 203.022 117.246Z" fill="#D8D9DA"/>
|
||||
<path d="M203.022 117.684C203.278 117.684 203.532 117.734 203.768 117.832C204.005 117.93 204.22 118.073 204.401 118.254C204.583 118.436 204.726 118.651 204.824 118.887C204.922 119.124 204.972 119.378 204.972 119.634V126.259C204.972 126.776 204.766 127.272 204.401 127.638C204.035 128.004 203.539 128.209 203.022 128.209H186.176C185.658 128.209 185.162 128.004 184.797 127.638C184.431 127.272 184.226 126.776 184.226 126.259V119.634C184.226 119.117 184.431 118.621 184.797 118.255C185.162 117.89 185.658 117.684 186.176 117.684H203.028M203.028 116.807H186.176C185.426 116.808 184.708 117.106 184.178 117.636C183.648 118.166 183.349 118.885 183.349 119.634V126.259C183.348 126.631 183.42 126.999 183.562 127.343C183.704 127.687 183.912 128 184.174 128.263C184.437 128.526 184.749 128.736 185.092 128.878C185.436 129.021 185.804 129.095 186.176 129.095H203.028C203.777 129.094 204.496 128.796 205.026 128.266C205.556 127.736 205.854 127.018 205.855 126.268V119.634C205.854 118.885 205.556 118.166 205.026 117.636C204.496 117.106 203.777 116.808 203.028 116.807Z" fill="#7A7F80"/>
|
||||
<path d="M201.934 82.2969H156.564C156.088 82.2967 155.617 82.3904 155.177 82.5725C154.737 82.7546 154.337 83.0216 154.001 83.3583C153.664 83.6949 153.397 84.0945 153.215 84.5344C153.032 84.9743 152.938 85.4457 152.938 85.9219V108.612C152.938 109.088 153.032 109.559 153.214 109.999C153.396 110.439 153.663 110.839 154 111.176C154.336 111.513 154.736 111.78 155.176 111.962C155.616 112.144 156.087 112.238 156.563 112.238H201.934C202.411 112.238 202.882 112.144 203.322 111.962C203.762 111.78 204.161 111.513 204.498 111.176C204.835 110.839 205.102 110.439 205.284 109.999C205.466 109.559 205.56 109.088 205.559 108.612V85.9219C205.559 84.9605 205.178 84.0384 204.498 83.3586C203.818 82.6788 202.896 82.2969 201.934 82.2969ZM156.564 83.4669H201.934C203.291 83.4669 204.39 84.5669 204.39 85.9219V108.612C204.39 109.969 203.29 111.068 201.934 111.068H156.564C156.242 111.068 155.922 111.005 155.624 110.881C155.326 110.758 155.055 110.577 154.827 110.349C154.599 110.121 154.418 109.85 154.295 109.552C154.171 109.254 154.107 108.934 154.107 108.612V85.9219C154.107 84.5659 155.208 83.4669 156.564 83.4669Z" fill="black"/>
|
||||
<path d="M151.26 62.9602L156.023 58.1982L158.223 60.3982L153.459 65.1612L151.26 62.9602ZM201.934 111.068V112.238H156.56V111.068H201.934ZM172.324 117.246V118.123H155.473V117.246H172.324ZM203.022 117.246V118.123H186.17V117.246H203.022Z" fill="white"/>
|
||||
<path d="M179.247 54.631C186.147 54.633 193.032 55.272 199.815 56.541C202.356 57.0209 204.65 58.3723 206.302 60.3622C207.953 62.3521 208.859 64.8559 208.863 67.442V130.592C208.871 137.813 207.399 144.959 204.536 151.589L196.099 171.209C195.639 172.279 194.874 173.191 193.901 173.832C192.928 174.473 191.788 174.814 190.623 174.814H167.874C166.708 174.814 165.569 174.472 164.595 173.831C163.622 173.19 162.859 172.277 162.399 171.206L153.946 151.525C151.092 144.901 149.623 137.763 149.631 130.551V67.442C149.635 64.8536 150.543 62.3479 152.198 60.3575C153.852 58.3671 156.15 57.0169 158.694 56.54C165.472 55.2729 172.352 54.6339 179.247 54.631ZM179.247 53.169C172.254 53.169 165.276 53.817 158.402 55.105C155.525 55.6455 152.928 57.1744 151.06 59.4272C149.191 61.68 148.169 64.5151 148.169 67.442V130.551C148.169 137.961 149.678 145.293 152.602 152.101L161.054 171.774C161.627 173.108 162.579 174.244 163.791 175.042C165.003 175.841 166.422 176.267 167.874 176.267H190.623C192.074 176.267 193.493 175.842 194.705 175.044C195.916 174.246 196.868 173.11 197.441 171.777L205.881 152.159C208.813 145.344 210.325 138.002 210.325 130.583V67.433C210.325 64.506 209.303 61.671 207.434 59.4182C205.566 57.1654 202.968 55.6365 200.092 55.096C193.218 53.8112 186.24 53.1661 179.247 53.169Z" fill="white"/>
|
||||
<path d="M163.43 174.79C164.712 175.752 166.271 176.272 167.874 176.273H190.623C192.074 176.273 193.493 175.847 194.704 175.049C195.916 174.251 196.867 173.116 197.441 171.783L205.881 152.165C208.813 145.35 210.325 138.008 210.325 130.589L163.431 174.791L163.43 174.79Z" fill="#D8D9DA"/>
|
||||
<path d="M158.402 59.3591C172.173 56.7776 186.304 56.7776 200.075 59.3591C204.551 60.1981 208.845 63.3901 208.845 67.4421H210.307C210.307 64.5153 209.285 61.6804 207.417 59.4276C205.548 57.1749 202.951 55.6459 200.075 55.1051C186.304 52.5236 172.173 52.5236 158.402 55.1051C155.525 55.6457 152.928 57.1746 151.06 59.4274C149.191 61.6802 148.169 64.5152 148.169 67.4421H149.631C149.631 63.3521 153.931 60.1861 158.402 59.3591Z" fill="white"/>
|
||||
<path d="M167.874 176.852C166.308 176.853 164.776 176.394 163.469 175.533C162.161 174.671 161.136 173.444 160.519 172.005L152.067 152.332C149.102 145.454 147.577 138.041 147.585 130.551V67.4421C147.589 64.3785 148.661 61.4122 150.618 59.0548C152.574 56.6975 155.292 55.0969 158.303 54.5291C172.146 51.9369 186.349 51.9369 200.192 54.5291C203.203 55.0969 205.921 56.6975 207.877 59.0548C209.834 61.4122 210.906 64.3785 210.91 67.4421V130.592C210.918 138.092 209.39 145.513 206.419 152.399L197.979 172.016C197.362 173.455 196.336 174.681 195.028 175.542C193.72 176.404 192.189 176.862 190.623 176.861L167.874 176.851V176.852Z" fill="#D8D9DA"/>
|
||||
<path d="M179.247 53.17C186.237 53.17 193.213 53.818 200.084 55.105C202.96 55.6458 205.557 57.1748 207.426 59.4275C209.294 61.6803 210.317 64.5152 210.316 67.442V130.592C210.316 138.012 208.804 145.352 205.872 152.168L197.432 171.785C196.859 173.118 195.908 174.254 194.696 175.052C193.484 175.85 192.065 176.275 190.614 176.275H167.874C166.423 176.275 165.003 175.849 163.791 175.05C162.579 174.252 161.627 173.116 161.054 171.782L152.602 152.101C149.678 145.293 148.169 137.961 148.169 130.551V67.442C148.169 64.5151 149.191 61.6801 151.06 59.4273C152.928 57.1745 155.525 55.6456 158.402 55.105C165.276 53.8173 172.254 53.1702 179.247 53.17ZM179.247 52C172.185 52.002 165.139 52.656 158.197 53.956C155.052 54.5484 152.213 56.2198 150.169 58.6818C148.125 61.1438 147.004 64.242 147 67.442V130.551C146.99 138.123 148.531 145.617 151.529 152.571L159.981 172.235C160.644 173.779 161.744 175.095 163.147 176.02C164.55 176.944 166.194 177.437 167.874 177.437H190.623C192.303 177.439 193.947 176.947 195.351 176.023C196.754 175.098 197.855 173.782 198.517 172.238L206.957 152.621C209.961 145.663 211.507 138.162 211.497 130.583V67.433C211.491 64.2347 210.369 61.1387 208.325 58.6788C206.281 56.2188 203.443 54.5489 200.3 53.957C193.358 52.657 186.31 52.0019 179.247 52Z" fill="#7A7F80"/>
|
||||
<path d="M206.222 109H152.768C152.273 109 151.782 109.068 151.325 109.201C150.868 109.333 150.453 109.528 150.103 109.772C149.753 110.017 149.475 110.308 149.286 110.628C149.097 110.948 149 111.291 149 111.637V113H210V111.638C210 111.291 209.902 110.947 209.713 110.627C209.523 110.307 209.244 110.016 208.893 109.771C208.542 109.526 208.126 109.331 207.667 109.199C207.209 109.067 206.718 108.999 206.222 109Z" fill="white"/>
|
||||
<path d="M155.5 118.96L157.185 117.684H190.275V120.456H154.5L155.5 118.96ZM184.22 117.684H204.972V120.456H184.22V117.684Z" fill="white"/>
|
||||
<rect x="153" y="118" width="46" height="11" rx="5.5" stroke="#7A7F80"/>
|
||||
<path d="M178.5 117.5V128.5" stroke="#7A7F80"/>
|
||||
<path d="M150.978 62.68L155.741 57.916L158.503 60.678L153.74 65.441L150.978 62.68Z" fill="white"/>
|
||||
<path d="M179.247 54.631C186.147 54.633 193.032 55.272 199.815 56.541C202.356 57.0209 204.65 58.3723 206.302 60.3622C207.953 62.3521 208.859 64.8559 208.863 67.442V130.592C208.871 137.813 207.399 144.959 204.536 151.589L196.099 171.209C195.639 172.279 194.874 173.191 193.901 173.832C192.928 174.473 191.788 174.814 190.623 174.814H167.874C166.708 174.814 165.569 174.472 164.595 173.831C163.622 173.19 162.859 172.277 162.399 171.206L153.946 151.525C151.092 144.901 149.623 137.763 149.631 130.551V67.442C149.635 64.8536 150.543 62.3479 152.198 60.3575C153.852 58.3671 156.15 57.0169 158.694 56.54C165.472 55.2729 172.352 54.6339 179.247 54.631ZM179.247 53.169C172.254 53.169 165.276 53.817 158.402 55.105C155.525 55.6455 152.928 57.1744 151.06 59.4272C149.191 61.68 148.169 64.5151 148.169 67.442V130.551C148.169 137.961 149.678 145.293 152.602 152.101L161.054 171.774C161.627 173.108 162.579 174.244 163.791 175.042C165.003 175.841 166.422 176.267 167.874 176.267H190.623C192.074 176.267 193.493 175.842 194.705 175.044C195.916 174.246 196.868 173.11 197.441 171.777L205.881 152.159C208.813 145.344 210.325 138.002 210.325 130.583V67.433C210.325 64.506 209.303 61.671 207.434 59.4182C205.566 57.1654 202.968 55.6365 200.092 55.096C193.218 53.8112 186.24 53.1661 179.247 53.169Z" fill="white"/>
|
||||
<path d="M210 110.5H149V71V62.5L157 57.5L200.5 56L210 64.5V110.5Z" fill="white"/>
|
||||
<path d="M163.43 174.79C164.712 175.752 166.271 176.272 167.874 176.273H190.623C192.074 176.273 193.493 175.847 194.704 175.049C195.916 174.251 196.867 173.116 197.441 171.783L205.881 152.165C208.813 145.35 210.325 138.008 210.325 130.589L163.431 174.791L163.43 174.79Z" fill="#D8D9DA"/>
|
||||
<path d="M158.402 59.3591C172.173 56.7776 186.304 56.7776 200.075 59.3591C204.551 60.1981 208.845 63.3901 208.845 67.4421H210.307C210.307 64.5153 209.285 61.6804 207.417 59.4276C205.548 57.1749 202.951 55.6459 200.075 55.1051C186.304 52.5236 172.173 52.5236 158.402 55.1051C155.525 55.6457 152.928 57.1746 151.06 59.4274C149.191 61.6802 148.169 64.5152 148.169 67.4421H149.631C149.631 63.3521 153.931 60.1861 158.402 59.3591Z" fill="white"/>
|
||||
<path d="M148 111H211" stroke="#7A7F80"/>
|
||||
<path d="M194.8 147.577C206.249 147.577 215.53 138.296 215.53 126.847C215.53 115.398 206.249 106.117 194.8 106.117C183.351 106.117 174.07 115.398 174.07 126.847C174.07 138.296 183.351 147.577 194.8 147.577Z" fill="#C6E2BA"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M185.556 148.5C182.889 140.833 181.722 133.833 182.056 127.5C182.389 121.167 185.389 117.167 191.056 115.5C197.056 114.167 201.556 115.5 204.556 119.5C207.556 123.5 210.722 129.5 214.056 137.5C216.389 142.5 218.222 145.833 219.556 147.5C221.556 150 222.556 152.5 223.056 155C223.389 156.667 224.222 159.167 225.556 162.5C229.889 171.833 235.222 180.167 241.556 187.5C251.056 198.5 210.556 223.5 209.056 218.5C207.556 213.5 196.056 171.5 195.056 168.5C194.056 165.5 193.556 164.5 192.056 162.5C191.056 161.167 189.889 158.833 188.556 155.5L185.556 148.5Z" fill="white"/>
|
||||
<path d="M188.493 115.037C191.409 113.729 195.275 113.349 198.313 114.1C201.301 114.838 203.914 117.044 205.788 120.093L206.215 120.796C207.245 122.51 208.194 124.247 209.696 127.115L210.908 129.451C211.388 130.394 211.858 131.351 212.441 132.574L215.646 139.367C215.957 140.018 216.231 140.583 216.501 141.13L217.071 142.274L217.21 142.442C217.622 142.954 218.06 143.572 218.524 144.29L218.758 144.656C219.218 145.386 219.697 146.2 220.19 147.083C220.8 148.182 221.387 149.293 221.95 150.417L222.557 151.64L223.169 152.918L223.291 153.179L223.349 153.353L224.364 158.108L224.771 159.026L224.981 159.493C225.512 160.659 226.124 161.959 226.808 163.36C228.762 167.36 230.905 171.361 233.169 175.091C236.105 179.928 239.02 183.939 241.835 186.841L242.201 187.213L241.027 188.388C237.99 185.35 234.876 181.104 231.749 175.953C229.457 172.175 227.29 168.132 225.315 164.089C224.822 163.079 224.365 162.119 223.949 161.224L223.36 159.938L222.806 158.69L222.756 158.535L221.743 153.789L221.543 153.363C221.385 153.03 221.225 152.699 221.064 152.368L220.887 152.006C220.206 150.617 219.489 149.245 218.739 147.892C218.259 147.033 217.796 146.244 217.353 145.542C216.908 144.822 216.423 144.129 215.9 143.464L215.738 143.267L215.631 143.105L215.114 142.072C214.809 141.456 214.504 140.827 214.151 140.09L210.947 133.3C210.281 131.895 209.588 130.502 208.87 129.122L208.03 127.512C206.458 124.521 205.509 122.81 204.374 120.962C202.71 118.257 200.432 116.334 197.914 115.712C195.241 115.052 191.754 115.394 189.173 116.552C184.86 118.49 182.69 121.056 182.404 126.992C182.117 133.095 182.83 138.312 184.583 143.968L184.941 145.09C185.984 148.274 186.928 150.6 189.836 157.364L190.187 158.181L194.79 165.181L197.23 174.239L199.21 181.523C200.032 184.54 200.849 187.523 201.65 190.431L204.228 199.73C206.46 207.711 208.246 213.903 209.455 217.798L209.8 218.898L208.218 219.401L207.684 217.691C206.444 213.653 204.664 207.462 202.462 199.579L201.002 194.324L199.566 189.118C198.597 185.592 197.608 181.971 196.618 178.324L193.255 165.871L188.761 159.037L188.692 158.909L186.974 154.899C184.954 150.146 184.165 148.095 183.227 145.189C181.251 139.071 180.437 133.478 180.745 126.913C181.065 120.275 183.657 117.21 188.493 115.037Z" fill="#8FCB7F"/>
|
||||
<path d="M204.426 129.491L204.402 130.598C198.991 130.481 193.725 132.353 189.602 135.86C189.228 136.18 189.038 136.415 188.994 136.624L188.984 136.701L187.878 136.653C187.906 136.021 188.242 135.567 188.883 135.018C193.085 131.443 198.422 129.482 203.939 129.486L204.426 129.491Z" fill="#C6E2BA"/>
|
||||
<path d="M185.06 124.804C185.355 128.62 186.414 132.339 188.175 135.737C188.409 136.26 188.751 136.729 189.122 137.069C189.585 137.389 190.114 137.599 190.689 137.685L190.938 137.715C195.191 138.33 199.699 137.24 203.493 134.755C204.885 133.843 206.035 132.338 206.324 130.962L206.363 130.746L207.459 130.904C207.201 132.683 205.811 134.56 204.1 135.681C200.086 138.311 195.307 139.466 190.81 138.815C189.955 138.738 189.136 138.434 188.438 137.935C187.903 137.457 187.474 136.871 187.178 136.217C185.453 132.882 184.378 129.249 184.011 125.512L183.957 124.889L185.061 124.804H185.06ZM209.793 144.23L210.257 145.235C209.557 145.558 208.929 145.688 207.82 145.779L206.38 145.886L206.288 145.895C202.788 146.248 199.63 147.941 195.446 151.273L195.024 151.612L194.328 150.752C198.878 147.07 202.288 145.185 206.177 144.793L206.573 144.758L207.696 144.678C208.62 144.603 209.149 144.504 209.664 144.286L209.793 144.23ZM211.405 146.921L212.37 147.464C211.802 148.477 210.911 149.27 209.839 149.717C209.505 149.865 209.037 149.967 208.377 150.061L207.129 150.223L206.433 150.333L204.598 150.648L204.056 150.733L203.891 149.638L204.421 149.555L206.253 149.241L206.964 149.128C207.119 149.105 207.979 148.999 208.22 148.965C208.782 148.885 209.18 148.798 209.403 148.699C210.172 148.38 210.825 147.834 211.276 147.135L211.406 146.921H211.405Z" fill="#8FCB7F"/>
|
||||
<path d="M149 114.532L149.734 112L151.5 113.5L149.734 116L149 114.532Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 25 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 25 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 25 KiB |
1
packages/suite-data/files/images/svg/ghost.svg
Normal file
1
packages/suite-data/files/images/svg/ghost.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="98" viewBox="0 0 99 98" width="99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h79.9711v79.9711h-79.9711z"/></clipPath><g clip-path="url(#a)"><path d="m40.9773 46.7384c1.9998.5359 4.0553-.6509 4.5912-2.6507.5358-1.9998-.6509-4.0553-2.6507-4.5911-1.9998-.5359-4.0553.6509-4.5911 2.6507-.5359 1.9998.6509 4.0553 2.6506 4.5911z" fill="#fff"/><path d="m57.8758 51.2662c1.9998.5359 4.0553-.6509 4.5911-2.6506.5359-1.9998-.6509-4.0553-2.6507-4.5912-1.9997-.5358-4.0553.6509-4.5911 2.6507s.6509 4.0553 2.6507 4.5911z" fill="#fff"/><path d="m68.8628 82.6707-6.9097-9.6132-10.7935 4.8697-6.9097-9.6132-10.7906 4.8704-6.9126-9.614-10.7906 4.8704 7.7618-28.9673c1.887-7.0424 6.4943-13.0467 12.8083-16.6921s13.8176-4.6333 20.86-2.7463 13.0467 6.4943 16.6921 12.8084c3.6454 6.314 4.6333 13.8175 2.7463 20.8599z" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.69316"/></g></svg>
|
||||
|
After Width: | Height: | Size: 983 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -220,10 +220,7 @@ export const ConnectDeviceGlobalModal = ({ onCancel }: { onCancel: () => void })
|
||||
<Translation id="TR_STILL_DONT_SEE_YOUR_TREZOR" />
|
||||
</Button>
|
||||
</Box>
|
||||
<Modal.ModalBase
|
||||
size="tiny"
|
||||
onCancel={onCancel}
|
||||
heading={<Translation id="TR_CONNECT_UNLOCK_YOUR_DEVICE" />}
|
||||
<Modal.ModalBase size="tiny" onCancel={onCancel}heading={<Translation id="TR_CONNECT_UNLOCK_YOUR_DEVICE" />}
|
||||
>
|
||||
<Column
|
||||
alignItems="center"
|
||||
|
||||
@@ -1,28 +1,5 @@
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
import { Box, Column } from '@trezor/components';
|
||||
|
||||
import { ConnectorImage } from './ConnectorImage';
|
||||
import { DEFAULT_CONNECT_DEVICE_NAME, DeviceImage } from './DeviceImage';
|
||||
|
||||
const slideUp = keyframes`
|
||||
0% {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
const CableWrapper = styled.div`
|
||||
animation: ${slideUp} 1.2s ease-out 0.3s both;
|
||||
animation-delay: 2s;
|
||||
`;
|
||||
import { Card } from '@trezor/components';
|
||||
import { DeviceAnimation } from '@trezor/product-components';
|
||||
|
||||
type CableConnectionAnimationProps = {
|
||||
isBluetoothMode: boolean;
|
||||
@@ -31,16 +8,7 @@ type CableConnectionAnimationProps = {
|
||||
export const CableConnectionAnimation = ({
|
||||
isBluetoothMode: isBluetooth,
|
||||
}: CableConnectionAnimationProps) => (
|
||||
<Column alignItems="center" position={{ type: 'relative' }}>
|
||||
<Box zIndex={2}>
|
||||
<DeviceImage size="large" deviceModel={DEFAULT_CONNECT_DEVICE_NAME} />
|
||||
</Box>
|
||||
{!isBluetooth && (
|
||||
<Box zIndex={1} margin={{ top: -20 }}>
|
||||
<CableWrapper>
|
||||
<ConnectorImage />
|
||||
</CableWrapper>
|
||||
</Box>
|
||||
)}
|
||||
</Column>
|
||||
<Card paddingType="none">
|
||||
<DeviceAnimation type={isBluetooth ? 'CONNECT_BT' : 'CONNECT_CABLE'} />
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -10,9 +10,7 @@ type SupportedDeviceModels = DeviceModelInternal.T3W1;
|
||||
|
||||
const deviceImageMap: Record<SupportedDeviceModels | typeof DEFAULT_CONNECT_DEVICE_NAME, string> = {
|
||||
[DeviceModelInternal.T3W1]: resolveStaticPath(`${PNG_PATH}/${PNG_IMAGES.TREZOR_T3W1_LARGE_2x}`),
|
||||
[DEFAULT_CONNECT_DEVICE_NAME]: resolveStaticPath(
|
||||
`${PNG_PATH}/${PNG_IMAGES.TREZOR_T3T1_ON_CONNECT}`,
|
||||
),
|
||||
[DEFAULT_CONNECT_DEVICE_NAME]: resolveStaticPath(`${PNG_PATH}/${PNG_IMAGES.TREZOR_T3W1_LARGE}`),
|
||||
};
|
||||
|
||||
type DeviceImageSize = 'small' | 'normal' | 'large';
|
||||
|
||||
@@ -2,9 +2,10 @@ import { useRef } from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { DEFAULT_FLAGSHIP_MODEL } from '@suite-common/suite-constants';
|
||||
import { getPackagingUrl } from '@suite-common/suite-utils';
|
||||
import { selectSelectedDevice } from '@suite-common/wallet-core';
|
||||
import { Banner, variables } from '@trezor/components';
|
||||
import { Banner, Image, Row, variables } from '@trezor/components';
|
||||
import { DeviceModelInternal } from '@trezor/device-utils';
|
||||
import { DeviceAnimation } from '@trezor/product-components';
|
||||
import { typography } from '@trezor/theme';
|
||||
@@ -38,9 +39,19 @@ export const Hologram = () => {
|
||||
const hologramRef = useRef<HTMLVideoElement>(null);
|
||||
|
||||
const packagingUrl = getPackagingUrl(device);
|
||||
const deviceModelInternal = device?.features?.internal_model;
|
||||
const isOldT2B1Packaging =
|
||||
device?.features?.internal_model === DeviceModelInternal.T2B1 &&
|
||||
(device.features.unit_packaging === undefined || device.features.unit_packaging === 0);
|
||||
deviceModelInternal === DeviceModelInternal.T2B1 &&
|
||||
(device?.features?.unit_packaging === undefined || device?.features?.unit_packaging === 0);
|
||||
|
||||
const isT1B1 = deviceModelInternal === DeviceModelInternal.T1B1;
|
||||
|
||||
const getDeviceModel = () => {
|
||||
if (!deviceModelInternal || deviceModelInternal === DeviceModelInternal.UNKNOWN)
|
||||
return DEFAULT_FLAGSHIP_MODEL;
|
||||
|
||||
return deviceModelInternal;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -54,22 +65,27 @@ export const Hologram = () => {
|
||||
)}
|
||||
</HologramSubHeading>
|
||||
|
||||
<AnimationWrapper>
|
||||
<DeviceAnimation
|
||||
type="HOLOGRAM"
|
||||
shape="ROUNDED-SMALL"
|
||||
loop
|
||||
width="100%"
|
||||
deviceModelInternal={device?.features?.internal_model}
|
||||
onVideoMouseOver={() => {
|
||||
// If the video is placed in tooltip it stops playing after tooltip minimizes and won't start again
|
||||
// As a quick workaround user can hover a mouse to play it again
|
||||
hologramRef.current?.play();
|
||||
}}
|
||||
ref={hologramRef}
|
||||
isOldT2B1Packaging={isOldT2B1Packaging}
|
||||
/>
|
||||
</AnimationWrapper>
|
||||
{isT1B1 ? (
|
||||
<AnimationWrapper>
|
||||
<DeviceAnimation
|
||||
type="HOLOGRAM"
|
||||
shape="ROUNDED-SMALL"
|
||||
loop
|
||||
width="100%"
|
||||
deviceModelInternal={DeviceModelInternal.T1B1}
|
||||
onVideoMouseOver={() => {
|
||||
// If the video is placed in tooltip it stops playing after tooltip minimizes and won't start again
|
||||
// As a quick workaround user can hover a mouse to play it again
|
||||
hologramRef.current?.play();
|
||||
}}
|
||||
ref={hologramRef}
|
||||
/>
|
||||
</AnimationWrapper>
|
||||
) : (
|
||||
<Row justifyContent="center" margin={{ top: 20, bottom: 40 }}>
|
||||
<Image isFilterActive={false} image={`TREZOR_${getDeviceModel()}_HOLOGRAM`} />
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<StyledWarning>
|
||||
<Translation
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user