@wise/art 0.0.0-experimental-e58f5bb → 0.0.0-experimental-718543f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Illustration.css +1 -1
- package/dist/illustrations3d/Illustration3D.d.ts +1 -1
- package/dist/illustrations3d/Illustration3D.d.ts.map +1 -1
- package/dist/index.esm.js +336 -5
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +336 -13
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/illustrations3d/Illustration3D.css +3 -0
- package/src/illustrations3d/Illustration3D.stories.tsx +10 -22
- package/src/illustrations3d/Illustration3D.tsx +55 -73
- package/src/index.css +1 -0
- package/dist/CheckMark-BPrdh9Yt.js +0 -40
- package/dist/CheckMark-BPrdh9Yt.js.map +0 -1
- package/dist/CheckMark-rvEWLRq0.esm.js +0 -38
- package/dist/CheckMark-rvEWLRq0.esm.js.map +0 -1
- package/dist/Confetti-BCZWydPM.js +0 -37
- package/dist/Confetti-BCZWydPM.js.map +0 -1
- package/dist/Confetti-BF1v0OJk.esm.js +0 -35
- package/dist/Confetti-BF1v0OJk.esm.js.map +0 -1
- package/dist/Flower-4xUqkfW9.js +0 -30
- package/dist/Flower-4xUqkfW9.js.map +0 -1
- package/dist/Flower-BS56WNvp.esm.js +0 -28
- package/dist/Flower-BS56WNvp.esm.js.map +0 -1
- package/dist/Globe-B0GciImK.js +0 -46
- package/dist/Globe-B0GciImK.js.map +0 -1
- package/dist/Globe-DkoSAfVS.esm.js +0 -44
- package/dist/Globe-DkoSAfVS.esm.js.map +0 -1
- package/dist/Graph-BpBqjCfO.js +0 -34
- package/dist/Graph-BpBqjCfO.js.map +0 -1
- package/dist/Graph-C6HemiNj.esm.js +0 -32
- package/dist/Graph-C6HemiNj.esm.js.map +0 -1
- package/dist/Interest-ajjCA2ag.esm.js +0 -51
- package/dist/Interest-ajjCA2ag.esm.js.map +0 -1
- package/dist/Interest-bo-lZHQD.js +0 -53
- package/dist/Interest-bo-lZHQD.js.map +0 -1
- package/dist/Jars-BqCMK3LX.js +0 -53
- package/dist/Jars-BqCMK3LX.js.map +0 -1
- package/dist/Jars-Da1dK6qP.esm.js +0 -51
- package/dist/Jars-Da1dK6qP.esm.js.map +0 -1
- package/dist/Lock-CmQJK3R6.js +0 -44
- package/dist/Lock-CmQJK3R6.js.map +0 -1
- package/dist/Lock-dn_E6gBX.esm.js +0 -42
- package/dist/Lock-dn_E6gBX.esm.js.map +0 -1
- package/dist/MagnifyingGlass-BK2gAjPL.js +0 -33
- package/dist/MagnifyingGlass-BK2gAjPL.js.map +0 -1
- package/dist/MagnifyingGlass-CjkQ4cPC.esm.js +0 -31
- package/dist/MagnifyingGlass-CjkQ4cPC.esm.js.map +0 -1
- package/dist/Marble-FuB5ppSN.esm.js +0 -43
- package/dist/Marble-FuB5ppSN.esm.js.map +0 -1
- package/dist/Marble-c63Wodn4.js +0 -45
- package/dist/Marble-c63Wodn4.js.map +0 -1
- package/dist/MarbleCard-CZoh2t6z.esm.js +0 -46
- package/dist/MarbleCard-CZoh2t6z.esm.js.map +0 -1
- package/dist/MarbleCard-DJz4FeXq.js +0 -48
- package/dist/MarbleCard-DJz4FeXq.js.map +0 -1
- package/dist/MultiCurrency-CCkYpe4r.esm.js +0 -62
- package/dist/MultiCurrency-CCkYpe4r.esm.js.map +0 -1
- package/dist/MultiCurrency-CjBfwvd5.js +0 -64
- package/dist/MultiCurrency-CjBfwvd5.js.map +0 -1
- package/dist/Plane-B5wEFkN3.esm.js +0 -38
- package/dist/Plane-B5wEFkN3.esm.js.map +0 -1
- package/dist/Plane-CFix2lAc.js +0 -40
- package/dist/Plane-CFix2lAc.js.map +0 -1
- package/dist/Scene-BbWfekxg.js +0 -56
- package/dist/Scene-BbWfekxg.js.map +0 -1
- package/dist/Scene-de3i_19x.esm.js +0 -54
- package/dist/Scene-de3i_19x.esm.js.map +0 -1
- package/dist/index-BDrfcpm_.esm.js +0 -389
- package/dist/index-BDrfcpm_.esm.js.map +0 -1
- package/dist/index-CikWxxNh.js +0 -395
- package/dist/index-CikWxxNh.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,23 +1,346 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
6
|
var common = require('./common-H4L6Hbbh.js');
|
|
5
|
-
require('clsx');
|
|
6
|
-
require('react');
|
|
7
|
-
require('react/jsx-runtime');
|
|
8
7
|
|
|
8
|
+
/*
|
|
9
|
+
*
|
|
10
|
+
* DON'T MODIFY THIS FILE IT'S AUTO GENERATED
|
|
11
|
+
* See: `scripts/generate-flags-metadata.mjs`
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
14
|
+
const DETAILED_FLAG_CODES = ['zm', 'va', 'uy', 'us', 'ug', 'tw', 'tv', 'tm', 'sv', 'sm', 'si', 'sg', 'py', 'pt', 'ph', 'pe', 'pa', 'om', 'nz', 'np', 'ni', 'mz', 'my', 'mx', 'mt', 'mh', 'md', 'ls', 'lk', 'li', 'ki', 'ke', 'je', 'in', 'im', 'hr', 'hn', 'hm', 'hk', 'gt', 'gi', 'gg', 'fj', 'eur', 'es', 'eg', 'do', 'cn', 'by', 'br', 'bn', 'bf', 'ba', 'az', 'au', 'ar', 'an', 'am', 'al', 'ad'];
|
|
9
15
|
|
|
16
|
+
const unknownFlagName = 'wise';
|
|
17
|
+
const Flag = ({
|
|
18
|
+
code,
|
|
19
|
+
intrinsicSize = 64,
|
|
20
|
+
className = undefined,
|
|
21
|
+
loading = 'lazy'
|
|
22
|
+
}) => {
|
|
23
|
+
const [fallback, setFallback] = react.useState(null);
|
|
24
|
+
react.useEffect(() => {
|
|
25
|
+
setFallback(null);
|
|
26
|
+
}, [code]);
|
|
27
|
+
const detailed = intrinsicSize >= 150;
|
|
28
|
+
// Only get detailed svg if we know it exists, to avoid the performance hit of failing requests
|
|
29
|
+
const name = fallback !== 'unknown' ? `${code.toLowerCase()}${fallback == null && detailed && DETAILED_FLAG_CODES.includes(code.toLowerCase()) ? '-detailed' : ''}` : unknownFlagName;
|
|
30
|
+
return /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
31
|
+
className: clsx.clsx(`wds-flag wds-flag-${name}`, className),
|
|
32
|
+
src: process.env.NODE_ENV === 'web-art-dev' ? `${name}.svg` : `https://wise.com/web-art/assets/flags/${name}.svg`,
|
|
33
|
+
loading: loading,
|
|
34
|
+
alt: "",
|
|
35
|
+
width: intrinsicSize,
|
|
36
|
+
height: intrinsicSize,
|
|
37
|
+
onError: () => {
|
|
38
|
+
setFallback(prev => prev == null && detailed ? 'simple' : 'unknown');
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
};
|
|
10
42
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
43
|
+
const imageSizes = {
|
|
44
|
+
[common.Sizes.SMALL]: 200,
|
|
45
|
+
[common.Sizes.MEDIUM]: 300,
|
|
46
|
+
[common.Sizes.LARGE]: 500
|
|
47
|
+
};
|
|
48
|
+
const Illustration = /*#__PURE__*/react.forwardRef(({
|
|
49
|
+
id,
|
|
50
|
+
name,
|
|
51
|
+
alt = '',
|
|
52
|
+
loading = 'eager',
|
|
53
|
+
className,
|
|
54
|
+
size = common.Sizes.MEDIUM,
|
|
55
|
+
disablePadding = false
|
|
56
|
+
}, ref) => {
|
|
57
|
+
const {
|
|
58
|
+
SMALL,
|
|
59
|
+
MEDIUM
|
|
60
|
+
} = common.Sizes;
|
|
61
|
+
return name ? /*#__PURE__*/jsxRuntime.jsxs("picture", {
|
|
62
|
+
children: [size === common.Sizes.LARGE || size === common.Sizes.MEDIUM ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
63
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("source", {
|
|
64
|
+
width: imageSizes[SMALL],
|
|
65
|
+
height: imageSizes[SMALL],
|
|
66
|
+
media: "(max-width: 575px)",
|
|
67
|
+
srcSet: `${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`
|
|
68
|
+
}), size !== common.Sizes.MEDIUM ? /*#__PURE__*/jsxRuntime.jsx("source", {
|
|
69
|
+
width: imageSizes[MEDIUM],
|
|
70
|
+
height: imageSizes[MEDIUM],
|
|
71
|
+
media: "(max-width: 992px)",
|
|
72
|
+
srcSet: `${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`
|
|
73
|
+
}) : null]
|
|
74
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
75
|
+
id: id,
|
|
76
|
+
ref: ref,
|
|
77
|
+
alt: alt,
|
|
78
|
+
"data-testid": `wds-${name}-illustration`,
|
|
79
|
+
className: clsx.clsx(`wds-illustration wds-illustration-${name}`, className, !disablePadding && 'wds-illustration-padding'),
|
|
80
|
+
loading: loading,
|
|
81
|
+
src: defineSrc(name, size, '1x'),
|
|
82
|
+
srcSet: `${defineSrc(name, size, '2x')} 2x`,
|
|
83
|
+
width: imageSizes[size],
|
|
84
|
+
height: imageSizes[size]
|
|
85
|
+
})]
|
|
86
|
+
}) : null;
|
|
14
87
|
});
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
88
|
+
function defineSrc(illustration, size, descriptor) {
|
|
89
|
+
return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/*
|
|
93
|
+
*
|
|
94
|
+
* DON'T MODIFY THIS FILE IT'S AUTO GENERATED
|
|
95
|
+
* See: `scripts/generate-i10s-metadata.mjs`
|
|
96
|
+
*
|
|
97
|
+
*/
|
|
98
|
+
exports.Assets = void 0;
|
|
99
|
+
(function (Assets) {
|
|
100
|
+
Assets["WALLET"] = "wallet";
|
|
101
|
+
Assets["TWO_INVITE_LETTERS_OPENED"] = "two-invite-letters-opened";
|
|
102
|
+
Assets["TOOL"] = "tool";
|
|
103
|
+
Assets["TARGET_PLATFORM"] = "target-platform";
|
|
104
|
+
Assets["STOPWATCH_PLATFORM"] = "stopwatch-platform";
|
|
105
|
+
Assets["SPEECH_BUBBLE"] = "speech-bubble";
|
|
106
|
+
Assets["SKIP_AUTHENTICATION"] = "skip-authentication";
|
|
107
|
+
Assets["SHOPPING_BAG"] = "shopping-bag";
|
|
108
|
+
Assets["SATELLITE_PLATFORM"] = "satellite-platform";
|
|
109
|
+
Assets["SAND_TIMER_BUSINESS"] = "sand-timer-business";
|
|
110
|
+
Assets["SAND_TIMER"] = "sand-timer";
|
|
111
|
+
Assets["REMINDER_LETTER"] = "reminder-letter";
|
|
112
|
+
Assets["RED_PACKET"] = "red-packet";
|
|
113
|
+
Assets["RECEIVE_BUSINESS"] = "receive-business";
|
|
114
|
+
Assets["RECEIVE"] = "receive";
|
|
115
|
+
Assets["QUESTION_MARK_BUSINESS"] = "question-mark-business";
|
|
116
|
+
Assets["QUESTION_MARK"] = "question-mark";
|
|
117
|
+
Assets["PUZZLE_PIECES_BUSINESS"] = "puzzle-pieces-business";
|
|
118
|
+
Assets["PUZZLE_PIECES"] = "puzzle-pieces";
|
|
119
|
+
Assets["PLANE_BUSINESS"] = "plane-business";
|
|
120
|
+
Assets["PLANE_2"] = "plane-2";
|
|
121
|
+
Assets["PLANE"] = "plane";
|
|
122
|
+
Assets["PIE_CHART_BUSINESS"] = "pie-chart-business";
|
|
123
|
+
Assets["PIE_CHART"] = "pie-chart";
|
|
124
|
+
Assets["PHONES"] = "phones";
|
|
125
|
+
Assets["PERSONAL_CARD"] = "personal-card";
|
|
126
|
+
Assets["PERCENTAGE_BUSINESS"] = "percentage-business";
|
|
127
|
+
Assets["PERCENTAGE"] = "percentage";
|
|
128
|
+
Assets["PASSKEY"] = "passkey";
|
|
129
|
+
Assets["PALM_TREE"] = "palm-tree";
|
|
130
|
+
Assets["ONE_INVITE_LETTER_OPENED"] = "one-invite-letter-opened";
|
|
131
|
+
Assets["MULTI_CURRENCY_BUSINESS"] = "multi-currency-business";
|
|
132
|
+
Assets["MULTI_CURRENCY"] = "multi-currency";
|
|
133
|
+
Assets["MEGAPHONE"] = "megaphone";
|
|
134
|
+
Assets["MARBLE_CARD_FLAG_ONLY_BUSINESS"] = "marble-card-flag-only-business";
|
|
135
|
+
Assets["MARBLE_CARD_FLAG_ONLY"] = "marble-card-flag-only";
|
|
136
|
+
Assets["MARBLE_CARD_BUSINESS_FLAG_ONLY"] = "marble-card-business-flag-only";
|
|
137
|
+
Assets["MARBLE_CARD_BUSINESS"] = "marble-card-business";
|
|
138
|
+
Assets["MARBLE_CARD"] = "marble-card";
|
|
139
|
+
Assets["MARBLE_BUSINESS"] = "marble-business";
|
|
140
|
+
Assets["MARBLE"] = "marble";
|
|
141
|
+
Assets["MAP"] = "map";
|
|
142
|
+
Assets["MAGNIFYING_GLASS_BUSINESS"] = "magnifying-glass-business";
|
|
143
|
+
Assets["MAGNIFYING_GLASS"] = "magnifying-glass";
|
|
144
|
+
Assets["LOCK_PLATFORM"] = "lock-platform";
|
|
145
|
+
Assets["LOCK_BUSINESS"] = "lock-business";
|
|
146
|
+
Assets["LOCK"] = "lock";
|
|
147
|
+
Assets["LIGHT_BULB_BUSINESS"] = "light-bulb-business";
|
|
148
|
+
Assets["LIGHT_BULB"] = "light-bulb";
|
|
149
|
+
Assets["KEY_BUSINESS"] = "key-business";
|
|
150
|
+
Assets["KEY"] = "key";
|
|
151
|
+
Assets["JARS"] = "jars";
|
|
152
|
+
Assets["INVITE_LETTER"] = "invite-letter";
|
|
153
|
+
Assets["INTEREST"] = "interest";
|
|
154
|
+
Assets["INFINITE"] = "infinite";
|
|
155
|
+
Assets["ID_CARD"] = "id-card";
|
|
156
|
+
Assets["HOUSE"] = "house";
|
|
157
|
+
Assets["HEART_5"] = "heart-5";
|
|
158
|
+
Assets["HEART_4"] = "heart-4";
|
|
159
|
+
Assets["HEART_3"] = "heart-3";
|
|
160
|
+
Assets["HEART_2"] = "heart-2";
|
|
161
|
+
Assets["HEART"] = "heart";
|
|
162
|
+
Assets["HEADSET_BUSINESS"] = "headset-business";
|
|
163
|
+
Assets["HEADSET"] = "headset";
|
|
164
|
+
Assets["GRAPH_BUSINESS"] = "graph-business";
|
|
165
|
+
Assets["GRAPH"] = "graph";
|
|
166
|
+
Assets["GLOBE"] = "globe";
|
|
167
|
+
Assets["GIFT_BOX"] = "gift-box";
|
|
168
|
+
Assets["GET_PAID_WITH_CARD_BUSINESS"] = "get-paid-with-card-business";
|
|
169
|
+
Assets["GEAR_BUSINESS"] = "gear-business";
|
|
170
|
+
Assets["GEAR"] = "gear";
|
|
171
|
+
Assets["FLOWER"] = "flower";
|
|
172
|
+
Assets["FLAG"] = "flag";
|
|
173
|
+
Assets["EXCLAMATION_MARK_BUSINESS"] = "exclamation-mark-business";
|
|
174
|
+
Assets["EXCLAMATION_MARK"] = "exclamation-mark";
|
|
175
|
+
Assets["EMAIL_SUCCESS_BUSINESS"] = "email-success-business";
|
|
176
|
+
Assets["EMAIL_SUCCESS"] = "email-success";
|
|
177
|
+
Assets["EMAIL"] = "email";
|
|
178
|
+
Assets["ELECTRIC_PLUG"] = "electric-plug";
|
|
179
|
+
Assets["ECO_CARD"] = "eco-card";
|
|
180
|
+
Assets["DOOR"] = "door";
|
|
181
|
+
Assets["DOCUMENTS_FOLDER_BUSINESS"] = "documents-folder-business";
|
|
182
|
+
Assets["DOCUMENTS"] = "documents";
|
|
183
|
+
Assets["DIGITAL_CARD_BUSINESS"] = "digital-card-business";
|
|
184
|
+
Assets["DIGITAL_CARD_2"] = "digital-card-2";
|
|
185
|
+
Assets["DIGITAL_CARD"] = "digital-card";
|
|
186
|
+
Assets["COOKIE"] = "cookie";
|
|
187
|
+
Assets["CONVERT_BUSINESS"] = "convert-business";
|
|
188
|
+
Assets["CONVERT"] = "convert";
|
|
189
|
+
Assets["CONSTRUCTION_FENCE"] = "construction-fence";
|
|
190
|
+
Assets["CONFETTI_BUSINESS"] = "confetti-business";
|
|
191
|
+
Assets["CONFETTI"] = "confetti";
|
|
192
|
+
Assets["COIN_PILE_UP_BUSINESS"] = "coin-pile-up-business";
|
|
193
|
+
Assets["COIN_PILE_UP"] = "coin-pile-up";
|
|
194
|
+
Assets["COIN_PILE_DOWN_BUSINESS"] = "coin-pile-down-business";
|
|
195
|
+
Assets["COIN_PILE_DOWN"] = "coin-pile-down";
|
|
196
|
+
Assets["CLOSED_WINDOW"] = "closed-window";
|
|
197
|
+
Assets["CHECK_MARK_BUSINESS"] = "check-mark-business";
|
|
198
|
+
Assets["CHECK_MARK"] = "check-mark";
|
|
199
|
+
Assets["CALENDAR_BUSINESS"] = "calendar-business";
|
|
200
|
+
Assets["CALENDAR"] = "calendar";
|
|
201
|
+
Assets["CALCULATOR_BUSINESS"] = "calculator-business";
|
|
202
|
+
Assets["BUSINESS_CARD_BUSINESS"] = "business-card-business";
|
|
203
|
+
Assets["BUSINESS_CARD"] = "business-card";
|
|
204
|
+
Assets["BRIEFCASE_BUSINESS"] = "briefcase-business";
|
|
205
|
+
Assets["BRIEFCASE"] = "briefcase";
|
|
206
|
+
Assets["BELL_BUSINESS"] = "bell-business";
|
|
207
|
+
Assets["BELL"] = "bell";
|
|
208
|
+
Assets["BATCH_PAYMENTS_BUSINESS"] = "batch-payments-business";
|
|
209
|
+
Assets["BACKPACK"] = "backpack";
|
|
210
|
+
Assets["APP_MARKETPLACE_BUSINESS"] = "app-marketplace-business";
|
|
211
|
+
Assets["API_INTEGRATIONS_BUSINESS"] = "api-integrations-business";
|
|
212
|
+
})(exports.Assets || (exports.Assets = {}));
|
|
213
|
+
|
|
214
|
+
function useBattery() {
|
|
215
|
+
const [batteryData, setBatteryData] = react.useState({
|
|
216
|
+
level: 1.0
|
|
217
|
+
});
|
|
218
|
+
react.useEffect(() => {
|
|
219
|
+
const getBatteryData = async () => {
|
|
220
|
+
// @ts-expect-error .getBattery exists in Navigator interface
|
|
221
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
|
222
|
+
const battery = await navigator.getBattery();
|
|
223
|
+
setBatteryData({
|
|
224
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
225
|
+
level: battery?.level
|
|
226
|
+
});
|
|
227
|
+
};
|
|
228
|
+
// Check if the browser supports the Battery API
|
|
229
|
+
if ('getBattery' in navigator && navigator.getBattery !== undefined && typeof navigator.getBattery === 'function') {
|
|
230
|
+
void getBatteryData();
|
|
231
|
+
}
|
|
232
|
+
}, []);
|
|
233
|
+
return batteryData;
|
|
234
|
+
}
|
|
235
|
+
function isBatteryLow(batteryLevel) {
|
|
236
|
+
return batteryLevel < 0.2;
|
|
237
|
+
}
|
|
238
|
+
const isWebGL2Available = () => {
|
|
239
|
+
try {
|
|
240
|
+
const canvas = document.createElement('canvas');
|
|
241
|
+
return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'));
|
|
242
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
243
|
+
} catch (e) {
|
|
244
|
+
return false;
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
function isConnectionSlow() {
|
|
248
|
+
// @ts-expect-error .connection prop exists in Navigator interface
|
|
249
|
+
const {
|
|
250
|
+
connection
|
|
251
|
+
} = window.navigator;
|
|
252
|
+
if (connection === undefined) {
|
|
253
|
+
return false;
|
|
254
|
+
}
|
|
255
|
+
return (
|
|
256
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
257
|
+
['slow-2g', '2g'].includes(connection?.effectiveType) ||
|
|
258
|
+
// @ts-expect-error Property 'connection' does exist on type 'Navigator'
|
|
259
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
260
|
+
navigator?.connection?.saveData === true
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
const illustration3DNames = ['lock', 'globe', 'confetti', 'check-mark', 'flower', 'graph', 'jars', 'magnifying-glass', 'marble', 'marble-card', 'multi-currency', 'plane', 'interest'];
|
|
264
|
+
function isIllustrationSupport3D(asset) {
|
|
265
|
+
return illustration3DNames.includes(asset);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
const mapFileToName = {
|
|
269
|
+
'check-mark': 'checkMark',
|
|
270
|
+
'marble-card': 'marbleWithCard',
|
|
271
|
+
'digital-card': 'digitalCard'
|
|
272
|
+
};
|
|
273
|
+
var RenderMode;
|
|
274
|
+
(function (RenderMode) {
|
|
275
|
+
RenderMode[RenderMode["INIT"] = 0] = "INIT";
|
|
276
|
+
RenderMode[RenderMode["FALLBACK"] = 1] = "FALLBACK";
|
|
277
|
+
RenderMode[RenderMode["ASSET_3D"] = 2] = "ASSET_3D";
|
|
278
|
+
})(RenderMode || (RenderMode = {}));
|
|
279
|
+
const Illustration3D = ({
|
|
280
|
+
name,
|
|
281
|
+
size = common.Sizes.MEDIUM,
|
|
282
|
+
className
|
|
283
|
+
}) => {
|
|
284
|
+
const [renderMode, setRenderMode] = react.useState(RenderMode.INIT);
|
|
285
|
+
const [inintrinsicSize, setInintrinsicSize] = react.useState(size);
|
|
286
|
+
const batteryData = useBattery();
|
|
287
|
+
const iframeRef = react.useRef(null);
|
|
288
|
+
const mouseRef = react.useRef(null);
|
|
289
|
+
react.useEffect(() => {
|
|
290
|
+
setRenderMode(isConnectionSlow() || isBatteryLow(batteryData.level) || !isWebGL2Available() ? RenderMode.FALLBACK : RenderMode.ASSET_3D);
|
|
291
|
+
const isMobile = (typeof window !== undefined && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;
|
|
292
|
+
if (isMobile) {
|
|
293
|
+
setInintrinsicSize(common.Sizes.SMALL);
|
|
294
|
+
}
|
|
295
|
+
}, [batteryData]);
|
|
296
|
+
react.useEffect(() => {
|
|
297
|
+
const handleMouseMove = event => {
|
|
298
|
+
mouseRef.current = {
|
|
299
|
+
x: event.pageX,
|
|
300
|
+
y: event.pageY
|
|
301
|
+
};
|
|
302
|
+
};
|
|
303
|
+
window.addEventListener('mousemove', handleMouseMove);
|
|
304
|
+
let animationFrameId;
|
|
305
|
+
(function rotationModalOnMouseMove() {
|
|
306
|
+
animationFrameId = window.requestAnimationFrame(rotationModalOnMouseMove);
|
|
307
|
+
const mouse = mouseRef.current;
|
|
308
|
+
if (!mouse) return;
|
|
309
|
+
const dx = mouse.x / window.innerWidth - 0.5;
|
|
310
|
+
const dy = mouse.y / window.innerHeight - 0.5;
|
|
311
|
+
const iframeWindow = iframeRef.current?.contentWindow;
|
|
312
|
+
if (iframeWindow?.setRotation) {
|
|
313
|
+
iframeWindow.setRotation(dy, dx, 0);
|
|
314
|
+
}
|
|
315
|
+
})();
|
|
316
|
+
return () => {
|
|
317
|
+
window.removeEventListener('mousemove', handleMouseMove);
|
|
318
|
+
window.cancelAnimationFrame(animationFrameId);
|
|
319
|
+
};
|
|
320
|
+
}, []);
|
|
321
|
+
const modelSrc = `scenes/${mapFileToName[name] || name}.html`;
|
|
322
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
323
|
+
className: clsx.clsx(`wds-illustration-3d wds-illustration-3d-${name} wds-illustration-3d-${inintrinsicSize}`, className),
|
|
324
|
+
"aria-hidden": true,
|
|
325
|
+
children: renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? /*#__PURE__*/jsxRuntime.jsx("iframe", {
|
|
326
|
+
ref: iframeRef,
|
|
327
|
+
height: common.ImageSizes[inintrinsicSize],
|
|
328
|
+
width: common.ImageSizes[inintrinsicSize],
|
|
329
|
+
src: modelSrc
|
|
330
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(Illustration, {
|
|
331
|
+
name: name,
|
|
332
|
+
size: size,
|
|
333
|
+
alt: ""
|
|
334
|
+
})
|
|
335
|
+
});
|
|
336
|
+
};
|
|
337
|
+
|
|
19
338
|
Object.defineProperty(exports, "Sizes", {
|
|
20
|
-
|
|
21
|
-
|
|
339
|
+
enumerable: true,
|
|
340
|
+
get: function () { return common.Sizes; }
|
|
22
341
|
});
|
|
342
|
+
exports.Flag = Flag;
|
|
343
|
+
exports.Illustration = Illustration;
|
|
344
|
+
exports.Illustration3D = Illustration3D;
|
|
345
|
+
exports.isIllustrationSupport3D = isIllustrationSupport3D;
|
|
23
346
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/flags/metadata.ts","../src/flags/Flag.tsx","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/illustrations3d/utils.ts","../src/illustrations3d/Illustration3D.tsx"],"sourcesContent":["/*\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-flags-metadata.mjs`\n *\n */\n\n\n export const DETAILED_FLAG_CODES = ['zm', 'va', 'uy', 'us', 'ug', 'tw', 'tv', 'tm', 'sv', 'sm', 'si', 'sg', 'py', 'pt', 'ph', 'pe', 'pa', 'om', 'nz', 'np', 'ni', 'mz', 'my', 'mx', 'mt', 'mh', 'md', 'ls', 'lk', 'li', 'ki', 'ke', 'je', 'in', 'im', 'hr', 'hn', 'hm', 'hk', 'gt', 'gi', 'gg', 'fj', 'eur', 'es', 'eg', 'do', 'cn', 'by', 'br', 'bn', 'bf', 'ba', 'az', 'au', 'ar', 'an', 'am', 'al', 'ad'];","import { clsx } from 'clsx';\nimport { useEffect, useState } from 'react';\n\nimport { DETAILED_FLAG_CODES } from './metadata';\n\nexport interface FlagProps {\n /**\n * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).\n */\n code: string;\n\n /**\n * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.\n */\n intrinsicSize?: number;\n className?: string;\n loading?: 'lazy' | 'eager';\n}\n\nconst unknownFlagName = 'wise';\n\nexport const Flag = ({\n code,\n intrinsicSize = 64,\n className = undefined,\n loading = 'lazy',\n}: FlagProps) => {\n const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);\n useEffect(() => {\n setFallback(null);\n }, [code]);\n\n const detailed = intrinsicSize >= 150;\n // Only get detailed svg if we know it exists, to avoid the performance hit of failing requests\n const name =\n fallback !== 'unknown'\n ? `${code.toLowerCase()}${\n fallback == null &&\n detailed &&\n DETAILED_FLAG_CODES.includes(code.toLowerCase())\n ? '-detailed'\n : ''\n }`\n : unknownFlagName;\n\n return (\n <img\n className={clsx('wds-flag', `wds-flag-${name}`, className)}\n src={\n process.env.NODE_ENV === 'web-art-dev'\n ? `${name}.svg`\n : `https://wise.com/web-art/assets/flags/${name}.svg`\n }\n loading={loading}\n alt=\"\"\n width={intrinsicSize}\n height={intrinsicSize}\n onError={() => {\n setFallback((prev) =>\n prev == null && detailed ? 'simple' : 'unknown',\n );\n }}\n />\n );\n};\n","import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport {\n type LargeSize,\n type MediumSize,\n type SmallSize,\n type Descriptors,\n Sizes,\n} from './../common';\nimport type { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt?: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n disablePadding?: boolean;\n} & ImgProps;\n\nconst imageSizes = {\n [Sizes.SMALL]: 200,\n [Sizes.MEDIUM]: 300,\n [Sizes.LARGE]: 500,\n};\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n (\n {\n id,\n name,\n alt = '',\n loading = 'eager',\n className,\n size = Sizes.MEDIUM,\n disablePadding = false,\n }: Props,\n ref,\n ) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\n <>\n <source\n width={imageSizes[SMALL]}\n height={imageSizes[SMALL]}\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {size !== Sizes.MEDIUM ? (\n <source\n width={imageSizes[MEDIUM]}\n height={imageSizes[MEDIUM]}\n media=\"(max-width: 992px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n data-testid={`wds-${name}-illustration`}\n className={clsx(\n 'wds-illustration',\n `wds-illustration-${name}`,\n { 'wds-illustration-padding': !disablePadding },\n className,\n )}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, size, '2x')} 2x`}\n width={imageSizes[size]}\n height={imageSizes[size]}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/*\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n \n \n export enum Assets {\n WALLET = 'wallet',TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',TOOL = 'tool',TARGET_PLATFORM = 'target-platform',STOPWATCH_PLATFORM = 'stopwatch-platform',SPEECH_BUBBLE = 'speech-bubble',SKIP_AUTHENTICATION = 'skip-authentication',SHOPPING_BAG = 'shopping-bag',SATELLITE_PLATFORM = 'satellite-platform',SAND_TIMER_BUSINESS = 'sand-timer-business',SAND_TIMER = 'sand-timer',REMINDER_LETTER = 'reminder-letter',RED_PACKET = 'red-packet',RECEIVE_BUSINESS = 'receive-business',RECEIVE = 'receive',QUESTION_MARK_BUSINESS = 'question-mark-business',QUESTION_MARK = 'question-mark',PUZZLE_PIECES_BUSINESS = 'puzzle-pieces-business',PUZZLE_PIECES = 'puzzle-pieces',PLANE_BUSINESS = 'plane-business',PLANE_2 = 'plane-2',PLANE = 'plane',PIE_CHART_BUSINESS = 'pie-chart-business',PIE_CHART = 'pie-chart',PHONES = 'phones',PERSONAL_CARD = 'personal-card',PERCENTAGE_BUSINESS = 'percentage-business',PERCENTAGE = 'percentage',PASSKEY = 'passkey',PALM_TREE = 'palm-tree',ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',MULTI_CURRENCY_BUSINESS = 'multi-currency-business',MULTI_CURRENCY = 'multi-currency',MEGAPHONE = 'megaphone',MARBLE_CARD_FLAG_ONLY_BUSINESS = 'marble-card-flag-only-business',MARBLE_CARD_FLAG_ONLY = 'marble-card-flag-only',MARBLE_CARD_BUSINESS_FLAG_ONLY = 'marble-card-business-flag-only',MARBLE_CARD_BUSINESS = 'marble-card-business',MARBLE_CARD = 'marble-card',MARBLE_BUSINESS = 'marble-business',MARBLE = 'marble',MAP = 'map',MAGNIFYING_GLASS_BUSINESS = 'magnifying-glass-business',MAGNIFYING_GLASS = 'magnifying-glass',LOCK_PLATFORM = 'lock-platform',LOCK_BUSINESS = 'lock-business',LOCK = 'lock',LIGHT_BULB_BUSINESS = 'light-bulb-business',LIGHT_BULB = 'light-bulb',KEY_BUSINESS = 'key-business',KEY = 'key',JARS = 'jars',INVITE_LETTER = 'invite-letter',INTEREST = 'interest',INFINITE = 'infinite',ID_CARD = 'id-card',HOUSE = 'house',HEART_5 = 'heart-5',HEART_4 = 'heart-4',HEART_3 = 'heart-3',HEART_2 = 'heart-2',HEART = 'heart',HEADSET_BUSINESS = 'headset-business',HEADSET = 'headset',GRAPH_BUSINESS = 'graph-business',GRAPH = 'graph',GLOBE = 'globe',GIFT_BOX = 'gift-box',GET_PAID_WITH_CARD_BUSINESS = 'get-paid-with-card-business',GEAR_BUSINESS = 'gear-business',GEAR = 'gear',FLOWER = 'flower',FLAG = 'flag',EXCLAMATION_MARK_BUSINESS = 'exclamation-mark-business',EXCLAMATION_MARK = 'exclamation-mark',EMAIL_SUCCESS_BUSINESS = 'email-success-business',EMAIL_SUCCESS = 'email-success',EMAIL = 'email',ELECTRIC_PLUG = 'electric-plug',ECO_CARD = 'eco-card',DOOR = 'door',DOCUMENTS_FOLDER_BUSINESS = 'documents-folder-business',DOCUMENTS = 'documents',DIGITAL_CARD_BUSINESS = 'digital-card-business',DIGITAL_CARD_2 = 'digital-card-2',DIGITAL_CARD = 'digital-card',COOKIE = 'cookie',CONVERT_BUSINESS = 'convert-business',CONVERT = 'convert',CONSTRUCTION_FENCE = 'construction-fence',CONFETTI_BUSINESS = 'confetti-business',CONFETTI = 'confetti',COIN_PILE_UP_BUSINESS = 'coin-pile-up-business',COIN_PILE_UP = 'coin-pile-up',COIN_PILE_DOWN_BUSINESS = 'coin-pile-down-business',COIN_PILE_DOWN = 'coin-pile-down',CLOSED_WINDOW = 'closed-window',CHECK_MARK_BUSINESS = 'check-mark-business',CHECK_MARK = 'check-mark',CALENDAR_BUSINESS = 'calendar-business',CALENDAR = 'calendar',CALCULATOR_BUSINESS = 'calculator-business',BUSINESS_CARD_BUSINESS = 'business-card-business',BUSINESS_CARD = 'business-card',BRIEFCASE_BUSINESS = 'briefcase-business',BRIEFCASE = 'briefcase',BELL_BUSINESS = 'bell-business',BELL = 'bell',BATCH_PAYMENTS_BUSINESS = 'batch-payments-business',BACKPACK = 'backpack',APP_MARKETPLACE_BUSINESS = 'app-marketplace-business',API_INTEGRATIONS_BUSINESS = 'api-integrations-business'\n }\n \n export type IllustrationNames = 'wallet' | 'two-invite-letters-opened' | 'tool' | 'target-platform' | 'stopwatch-platform' | 'speech-bubble' | 'skip-authentication' | 'shopping-bag' | 'satellite-platform' | 'sand-timer-business' | 'sand-timer' | 'reminder-letter' | 'red-packet' | 'receive-business' | 'receive' | 'question-mark-business' | 'question-mark' | 'puzzle-pieces-business' | 'puzzle-pieces' | 'plane-business' | 'plane-2' | 'plane' | 'pie-chart-business' | 'pie-chart' | 'phones' | 'personal-card' | 'percentage-business' | 'percentage' | 'passkey' | 'palm-tree' | 'one-invite-letter-opened' | 'multi-currency-business' | 'multi-currency' | 'megaphone' | 'marble-card-flag-only-business' | 'marble-card-flag-only' | 'marble-card-business-flag-only' | 'marble-card-business' | 'marble-card' | 'marble-business' | 'marble' | 'map' | 'magnifying-glass-business' | 'magnifying-glass' | 'lock-platform' | 'lock-business' | 'lock' | 'light-bulb-business' | 'light-bulb' | 'key-business' | 'key' | 'jars' | 'invite-letter' | 'interest' | 'infinite' | 'id-card' | 'house' | 'heart-5' | 'heart-4' | 'heart-3' | 'heart-2' | 'heart' | 'headset-business' | 'headset' | 'graph-business' | 'graph' | 'globe' | 'gift-box' | 'get-paid-with-card-business' | 'gear-business' | 'gear' | 'flower' | 'flag' | 'exclamation-mark-business' | 'exclamation-mark' | 'email-success-business' | 'email-success' | 'email' | 'electric-plug' | 'eco-card' | 'door' | 'documents-folder-business' | 'documents' | 'digital-card-business' | 'digital-card-2' | 'digital-card' | 'cookie' | 'convert-business' | 'convert' | 'construction-fence' | 'confetti-business' | 'confetti' | 'coin-pile-up-business' | 'coin-pile-up' | 'coin-pile-down-business' | 'coin-pile-down' | 'closed-window' | 'check-mark-business' | 'check-mark' | 'calendar-business' | 'calendar' | 'calculator-business' | 'business-card-business' | 'business-card' | 'briefcase-business' | 'briefcase' | 'bell-business' | 'bell' | 'batch-payments-business' | 'backpack' | 'app-marketplace-business' | 'api-integrations-business'","import { useState, useEffect } from 'react';\n\nimport type { IllustrationNames } from '../illustrations/metadata';\n\nexport function useBattery() {\n const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });\n\n useEffect(() => {\n const getBatteryData = async () => {\n // @ts-expect-error .getBattery exists in Navigator interface\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n const battery = await navigator.getBattery();\n\n setBatteryData({\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n level: battery?.level,\n });\n };\n // Check if the browser supports the Battery API\n if (\n 'getBattery' in navigator &&\n navigator.getBattery !== undefined &&\n typeof navigator.getBattery === 'function'\n ) {\n void getBatteryData();\n }\n }, []);\n\n return batteryData;\n}\n\nexport function isBatteryLow(batteryLevel: number): boolean {\n return batteryLevel < 0.2;\n}\n\nexport const isWebGL2Available = () => {\n try {\n const canvas = document.createElement('canvas');\n return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'));\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (e) {\n return false;\n }\n};\n\nexport function isConnectionSlow(): boolean {\n // @ts-expect-error .connection prop exists in Navigator interface\n const { connection } = window.navigator;\n if (connection === undefined) {\n return false;\n }\n return (\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||\n // @ts-expect-error Property 'connection' does exist on type 'Navigator'\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n navigator?.connection?.saveData === true\n );\n}\n\nexport function defineSrc(asset: string): string {\n return `https://wise.com/web-art/assets/illustrations3d/${asset}`;\n}\n\nconst illustration3DNames = [\n 'lock',\n 'globe',\n 'confetti',\n 'check-mark',\n 'flower',\n 'graph',\n 'jars',\n 'magnifying-glass',\n 'marble',\n 'marble-card',\n 'multi-currency',\n 'plane',\n 'interest',\n];\n\nexport function isIllustrationSupport3D(asset: IllustrationNames): boolean {\n return illustration3DNames.includes(asset);\n}\n","import { clsx } from 'clsx';\nimport {\n useEffect,\n useState,\n useRef,\n} from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, Sizes, ImageSizes } from '../common';\nimport Illustration, { Assets } from '../illustrations';\n\nimport { useBattery, isConnectionSlow, isBatteryLow, isWebGL2Available } from './utils';\n\nexport type Illustration3DNames =\n | 'lock'\n | 'globe'\n | 'confetti'\n | 'check-mark'\n | 'digital-card'\n | 'graph'\n | 'jars'\n | 'marble-card'\n | 'plane'\n | 'interest';\n\nconst mapFileToName: Record<Illustration3DNames, string> = {\n 'check-mark': 'checkMark',\n 'marble-card': 'marbleWithCard',\n 'digital-card': 'digitalCard',\n};\n\nexport type Props = {\n name: Illustration3DNames;\n size?: SmallSize | MediumSize | LargeSize;\n className?: string;\n};\n\nenum RenderMode {\n INIT,\n FALLBACK,\n ASSET_3D,\n}\n\nconst Illustration3D = ({ name, size = Sizes.MEDIUM, className }: Props) => {\n const [renderMode, setRenderMode] = useState<RenderMode>(RenderMode.INIT);\n const [inintrinsicSize, setInintrinsicSize] = useState<Props['size']>(size);\n const batteryData = useBattery();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const mouseRef = useRef<{ x: number; y: number } | null>(null);\n\n useEffect(() => {\n setRenderMode(\n isConnectionSlow() || isBatteryLow(batteryData.level) || !isWebGL2Available()\n ? RenderMode.FALLBACK\n : RenderMode.ASSET_3D,\n );\n const isMobile: boolean =\n (typeof window !== undefined && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;\n if (isMobile) {\n setInintrinsicSize(Sizes.SMALL);\n }\n }, [batteryData]);\n\n useEffect(() => {\n const handleMouseMove = (event: MouseEvent) => {\n mouseRef.current = { x: event.pageX, y: event.pageY };\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n\n let animationFrameId: number;\n\n (function rotationModalOnMouseMove() {\n animationFrameId = window.requestAnimationFrame(rotationModalOnMouseMove);\n\n const mouse = mouseRef.current;\n if (!mouse) return;\n\n const dx = mouse.x / window.innerWidth - 0.5;\n const dy = mouse.y / window.innerHeight - 0.5;\n\n const iframeWindow = iframeRef.current?.contentWindow as\n | (WindowProxy & { setRotation?: (x: number, y: number, z: number) => void })\n | null;\n\n if (iframeWindow?.setRotation) {\n iframeWindow.setRotation(dy, dx, 0);\n }\n })();\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.cancelAnimationFrame(animationFrameId);\n };\n }, []);\n\n const modelSrc = `scenes/${mapFileToName[name] || name}.html`;\n return (\n <div\n className={clsx(\n 'wds-illustration-3d',\n `wds-illustration-3d-${name}`,\n `wds-illustration-3d-${inintrinsicSize as string}`,\n className,\n )}\n aria-hidden\n >\n {renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (\n <iframe\n ref={iframeRef}\n height={ImageSizes[inintrinsicSize]}\n width={ImageSizes[inintrinsicSize]}\n src={modelSrc}\n />\n ) : (\n <Illustration name={name} size={size} alt=\"\" />\n )}\n </div>\n );\n};\n\nexport default Illustration3D;\n"],"names":["DETAILED_FLAG_CODES","unknownFlagName","Flag","code","intrinsicSize","className","undefined","loading","fallback","setFallback","useState","useEffect","detailed","name","toLowerCase","includes","_jsx","clsx","src","process","env","NODE_ENV","alt","width","height","onError","prev","imageSizes","Sizes","SMALL","MEDIUM","LARGE","Illustration","forwardRef","id","size","disablePadding","ref","_jsxs","children","_Fragment","media","srcSet","defineSrc","illustration","descriptor","Assets","useBattery","batteryData","setBatteryData","level","getBatteryData","battery","navigator","getBattery","isBatteryLow","batteryLevel","isWebGL2Available","canvas","document","createElement","window","WebGL2RenderingContext","getContext","e","isConnectionSlow","connection","effectiveType","saveData","illustration3DNames","isIllustrationSupport3D","asset","mapFileToName","RenderMode","Illustration3D","renderMode","setRenderMode","INIT","inintrinsicSize","setInintrinsicSize","iframeRef","useRef","mouseRef","FALLBACK","ASSET_3D","isMobile","matchMedia","matches","handleMouseMove","event","current","x","pageX","y","pageY","addEventListener","animationFrameId","rotationModalOnMouseMove","requestAnimationFrame","mouse","dx","innerWidth","dy","innerHeight","iframeWindow","contentWindow","setRotation","removeEventListener","cancelAnimationFrame","modelSrc","ImageSizes"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/art",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-718543f",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React library for art elements in UI",
|
|
6
6
|
"homepage": "https://github.com/transferwise/web-art#readme",
|
|
@@ -76,7 +76,8 @@
|
|
|
76
76
|
"storybook": "^10.2.10",
|
|
77
77
|
"typescript": "^5.9.3",
|
|
78
78
|
"vite": "^7.3.1",
|
|
79
|
-
"wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#
|
|
79
|
+
"wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#7794401a6d26f748ea5d48e12f6dde0cd9c435ba",
|
|
80
|
+
"3d-assets": "git+https://github.com/transferwise/3d-assets.git#e77d35360fe3a9828784f6f8fec2b6743b4a7a6d",
|
|
80
81
|
"@storybook/addon-docs": "^10.2.10",
|
|
81
82
|
"@changesets/cli": "^2.29.8",
|
|
82
83
|
"@changesets/changelog-github": "0.5.2"
|
|
@@ -98,7 +99,7 @@
|
|
|
98
99
|
"load-riv": "copyfiles -u 1 assets/*.riv s3-bucket/illustrations3d/rive",
|
|
99
100
|
"load-i10s": "copyfiles -u 3 node_modules/wise-atoms/illustrations/**/*.png temp",
|
|
100
101
|
"load-flags": "rm -rf s3-bucket/flags/* && pnpm load-country-flags && pnpm load-currency-flags && pnpm transform-flags && pnpm convert-flags-svg-to-png",
|
|
101
|
-
"load-country-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs
|
|
102
|
+
"load-country-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs",
|
|
102
103
|
"load-currency-flags": "copyfiles -u 3 node_modules/wise-atoms/flags/.metadata.json s3-bucket/flags && node ./scripts/generate-currency-flags.mjs",
|
|
103
104
|
"transform-flags": "node ./scripts/transform-flags.mjs",
|
|
104
105
|
"convert-flags-svg-to-png": "node ./scripts/convert-flags-svg-to-png.mjs",
|
|
@@ -13,7 +13,7 @@ export default {
|
|
|
13
13
|
export const Confetti = () => {
|
|
14
14
|
return (
|
|
15
15
|
<>
|
|
16
|
-
<Illustration3D name={Assets.CONFETTI}
|
|
16
|
+
<Illustration3D name={Assets.CONFETTI} />
|
|
17
17
|
</>
|
|
18
18
|
);
|
|
19
19
|
};
|
|
@@ -21,49 +21,37 @@ export const Confetti = () => {
|
|
|
21
21
|
export const Globe = () => {
|
|
22
22
|
return (
|
|
23
23
|
<>
|
|
24
|
-
<Illustration3D name={Assets.GLOBE}
|
|
24
|
+
<Illustration3D name={Assets.GLOBE} />
|
|
25
25
|
</>
|
|
26
26
|
);
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
export const Lock = () => {
|
|
30
|
-
return <Illustration3D name={Assets.LOCK}
|
|
30
|
+
return <Illustration3D name={Assets.LOCK} />;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
export const CheckMark = () => {
|
|
34
|
-
return <Illustration3D name={Assets.CHECK_MARK}
|
|
34
|
+
return <Illustration3D name={Assets.CHECK_MARK} />;
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
-
export const
|
|
38
|
-
return <Illustration3D name={Assets.
|
|
37
|
+
export const DigitalCard = () => {
|
|
38
|
+
return <Illustration3D name={Assets.DIGITAL_CARD} />;
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
export const Plane = () => {
|
|
42
|
-
return <Illustration3D name={Assets.PLANE}
|
|
42
|
+
return <Illustration3D name={Assets.PLANE} />;
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
export const Graph = () => {
|
|
46
|
-
return <Illustration3D name={Assets.GRAPH}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export const Marble = () => {
|
|
50
|
-
return <Illustration3D name={Assets.MARBLE} size={Sizes.LARGE} />;
|
|
46
|
+
return <Illustration3D name={Assets.GRAPH} />;
|
|
51
47
|
};
|
|
52
48
|
|
|
53
49
|
export const MarbleCard = () => {
|
|
54
|
-
return <Illustration3D name={Assets.MARBLE_CARD}
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export const MagnifyingGlass = () => {
|
|
58
|
-
return <Illustration3D name={Assets.MAGNIFYING_GLASS} size={Sizes.LARGE} />;
|
|
50
|
+
return <Illustration3D name={Assets.MARBLE_CARD} />;
|
|
59
51
|
};
|
|
60
52
|
|
|
61
53
|
export const Jars = () => {
|
|
62
|
-
return <Illustration3D name={Assets.JARS}
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export const MultiCurrency = () => {
|
|
66
|
-
return <Illustration3D name={Assets.MULTI_CURRENCY} size={Sizes.LARGE} />;
|
|
54
|
+
return <Illustration3D name={Assets.JARS} />;
|
|
67
55
|
};
|
|
68
56
|
|
|
69
57
|
export const Interest = () => {
|