-
Notifications
You must be signed in to change notification settings - Fork 294
/
DeviceIllustration.tsx
103 lines (91 loc) · 2.73 KB
/
DeviceIllustration.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React from "react";
import styled, { DefaultTheme, StyledComponent, ThemeProps } from "styled-components";
import stax from "~/renderer/images/stax.svg";
import staxDark from "~/renderer/images/staxDark.svg";
import nanoX from "~/renderer/images/nanoX.v3.svg";
import nanoS from "~/renderer/images/nanoS.v3.svg";
import nanoS2 from "~/renderer/images/nanoS2.v3.svg";
import nanoXDark from "~/renderer/images/nanoXDark.v3.svg";
import nanoSDark from "~/renderer/images/nanoSDark.v3.svg";
import nanoS2Dark from "~/renderer/images/nanoS2Dark.v3.svg";
import { registerAssets } from "~/renderer/components/Onboarding/preloadAssets";
import { DeviceModelId } from "@ledgerhq/devices";
registerAssets([nanoX, nanoS, nanoS2, nanoXDark, nanoSDark, nanoS2Dark, stax, staxDark]);
const makeAssetSelector = (lightAsset: any, darkAsset: any) => (p: ThemeProps<DefaultTheme>) =>
p.theme.colors.palette.type === "light" ? lightAsset : darkAsset;
const NanoS = styled.div`
// TODO: rendering issue in the SVG in the "hole"
background: url('${p => makeAssetSelector(nanoS, nanoSDark)(p)}') no-repeat center;
`;
const NanoSP = styled.div`
// TODO: rendering issue in the SVG in the "hole"
background: url('${p => makeAssetSelector(nanoS2, nanoS2Dark)(p)}') no-repeat center;
`;
const NanoX = styled.div`
background: url('${p => makeAssetSelector(nanoX, nanoXDark)(p)}') no-repeat center;
`;
const Stax = styled.div`
background: url('${p => makeAssetSelector(stax, staxDark)(p)}') no-repeat center;
`;
type Illustration = {
Illustration: StyledComponent<"div", DefaultTheme, Record<string, unknown>, never>;
width: number;
height: number;
};
const illustrations: { [key in DeviceModelId]: Illustration } = {
nanoS: {
Illustration: NanoS,
width: 49.2,
height: 250.1,
},
nanoSP: {
Illustration: NanoSP,
width: 49.93,
height: 250.33,
},
nanoX: {
Illustration: NanoX,
width: 53.83,
height: 250.87,
},
stax: {
Illustration: Stax,
width: 240,
height: 240,
},
blue: {
Illustration: NanoS,
width: 49.2,
height: 250.1,
},
};
type DeviceIllustrationProps = {
deviceId: DeviceModelId;
size?: number;
height?: number;
width?: number;
};
const DeviceIllustration = ({
deviceId = DeviceModelId.nanoS,
size,
height,
width,
...props
}: DeviceIllustrationProps) => {
const illus = illustrations[deviceId];
if (!illus) return null;
const { Illustration, width: iW, height: iH } = illus;
const sH = `${height || size || iH}px`;
const sW = `${width || (size ? (size / iH) * iW : iW)}px`;
return (
<Illustration
style={{
height: sH,
width: sW,
backgroundSize: "contain",
}}
{...props}
/>
);
};
export default DeviceIllustration;