@seams/wallet 0.15.0 → 0.15.1
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/.build-inputs.sha256 +1 -1
- package/dist/esm/react/components/AccountMenuButton/AccountsSection.css +7 -1
- package/dist/esm/react/components/AccountMenuButton/AuthenticationMethodRow.js +2 -8
- package/dist/esm/react/components/AccountMenuButton/ExportKeysSection.css +7 -1
- package/dist/esm/react/components/AccountMenuButton/Web3AuthProfileButton.css +95 -3
- package/dist/esm/react/components/AccountMenuButton/icons/HoverArrowIcon.js +26 -0
- package/dist/esm/react/styles/styles.css +102 -4
- package/dist/public/headers.manifest.json +1 -1
- package/dist/public/wallet-assets.manifest.json +2 -2
- package/dist/public/wallet-service/index.html +4 -4
- package/dist/types/wallet/src/react/components/AccountMenuButton/icons/HoverArrowIcon.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
56dfa3066068a5f5ad802cb10bfd073c092a4fde4e47e508b35776539f0bcfd1
|
|
@@ -49,7 +49,13 @@
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.seams-accounts-row:hover {
|
|
52
|
-
|
|
52
|
+
/* a shade off the expander surface behind the rows, which is often surface2;
|
|
53
|
+
mixing follows a theme's surface where a fixed surface step does not */
|
|
54
|
+
background: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--seams-colors-textPrimary) 7%,
|
|
57
|
+
var(--seams-expander-surface, var(--seams-colors-surface))
|
|
58
|
+
);
|
|
53
59
|
}
|
|
54
60
|
|
|
55
61
|
.seams-accounts-row-chain {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import TouchIcon from "./icons/TouchIcon.js";
|
|
2
2
|
import { MailIcon } from "./icons/MailIcon.js";
|
|
3
|
+
import { HoverArrowIcon } from "./icons/HoverArrowIcon.js";
|
|
3
4
|
import "react";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
//#region src/react/components/AccountMenuButton/AuthenticationMethodRow.tsx
|
|
@@ -23,14 +24,7 @@ function AuthenticationMethodRow({ kind, title, description, icon, action, onSel
|
|
|
23
24
|
}))
|
|
24
25
|
}),
|
|
25
26
|
/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("small", { children: description })] }),
|
|
26
|
-
/* @__PURE__ */ jsx(
|
|
27
|
-
viewBox: "0 0 24 24",
|
|
28
|
-
fill: "none",
|
|
29
|
-
stroke: "currentColor",
|
|
30
|
-
strokeWidth: "1.5",
|
|
31
|
-
"aria-hidden": "true",
|
|
32
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
|
|
33
|
-
})
|
|
27
|
+
/* @__PURE__ */ jsx(HoverArrowIcon, {})
|
|
34
28
|
]
|
|
35
29
|
})
|
|
36
30
|
});
|
|
@@ -53,7 +53,13 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.seams-export-keys-row:hover:not(:disabled) {
|
|
56
|
-
|
|
56
|
+
/* a shade off the expander surface behind the rows, which is often surface2;
|
|
57
|
+
mixing follows a theme's surface where a fixed surface step does not */
|
|
58
|
+
background: color-mix(
|
|
59
|
+
in srgb,
|
|
60
|
+
var(--seams-colors-textPrimary) 7%,
|
|
61
|
+
var(--seams-expander-surface, var(--seams-colors-surface))
|
|
62
|
+
);
|
|
57
63
|
}
|
|
58
64
|
|
|
59
65
|
.seams-export-keys-row:disabled {
|
|
@@ -156,16 +156,44 @@
|
|
|
156
156
|
color: inherit;
|
|
157
157
|
cursor: pointer;
|
|
158
158
|
margin-top: 14px;
|
|
159
|
+
transition:
|
|
160
|
+
background-color 150ms ease,
|
|
161
|
+
border-color 150ms ease,
|
|
162
|
+
transform 120ms ease;
|
|
163
|
+
}
|
|
164
|
+
.seams-account-action:hover:not(:disabled) {
|
|
165
|
+
background: var(--seams-colors-surface2);
|
|
166
|
+
border-color: color-mix(
|
|
167
|
+
in srgb,
|
|
168
|
+
var(--seams-colors-textPrimary) 16%,
|
|
169
|
+
var(--seams-colors-borderPrimary)
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
.seams-account-action:active:not(:disabled) {
|
|
173
|
+
transform: scale(0.98);
|
|
159
174
|
}
|
|
160
175
|
.seams-account-action.primary {
|
|
161
176
|
background: var(--seams-colors-textPrimary);
|
|
162
177
|
color: var(--seams-colors-colorBackground);
|
|
163
178
|
border-color: transparent;
|
|
164
179
|
}
|
|
180
|
+
.seams-account-action.primary:hover:not(:disabled) {
|
|
181
|
+
background: color-mix(
|
|
182
|
+
in srgb,
|
|
183
|
+
var(--seams-colors-textPrimary) 84%,
|
|
184
|
+
var(--seams-colors-colorBackground)
|
|
185
|
+
);
|
|
186
|
+
border-color: transparent;
|
|
187
|
+
}
|
|
165
188
|
.seams-account-action:disabled {
|
|
166
189
|
opacity: 0.5;
|
|
167
190
|
cursor: default;
|
|
168
191
|
}
|
|
192
|
+
@media (prefers-reduced-motion: reduce) {
|
|
193
|
+
.seams-account-action {
|
|
194
|
+
transition: none;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
169
197
|
.seams-account-note {
|
|
170
198
|
color: var(--seams-colors-textSecondary);
|
|
171
199
|
font-size: 12px;
|
|
@@ -215,6 +243,8 @@
|
|
|
215
243
|
margin: 0;
|
|
216
244
|
}
|
|
217
245
|
.seams-account-method-button {
|
|
246
|
+
position: relative;
|
|
247
|
+
isolation: isolate;
|
|
218
248
|
display: flex;
|
|
219
249
|
width: 100%;
|
|
220
250
|
align-items: center;
|
|
@@ -228,6 +258,29 @@
|
|
|
228
258
|
cursor: pointer;
|
|
229
259
|
font: inherit;
|
|
230
260
|
}
|
|
261
|
+
/* The hover shade bleeds past the row edges so the content and the
|
|
262
|
+
separators stay aligned with the rest of the screen. */
|
|
263
|
+
.seams-account-method-button::before {
|
|
264
|
+
content: '';
|
|
265
|
+
position: absolute;
|
|
266
|
+
z-index: -1;
|
|
267
|
+
inset: 4px -10px;
|
|
268
|
+
border-radius: var(--seams-shape-item, 10px);
|
|
269
|
+
background: var(--seams-colors-surface2);
|
|
270
|
+
opacity: 0;
|
|
271
|
+
transition: opacity 150ms ease;
|
|
272
|
+
}
|
|
273
|
+
.seams-account-method-button:hover::before,
|
|
274
|
+
.seams-account-method-button:focus-visible::before {
|
|
275
|
+
opacity: 1;
|
|
276
|
+
}
|
|
277
|
+
.seams-account-method-button .seams-account-avatar {
|
|
278
|
+
transition: background-color 150ms ease;
|
|
279
|
+
}
|
|
280
|
+
.seams-account-method-button:hover .seams-account-avatar,
|
|
281
|
+
.seams-account-method-button:focus-visible .seams-account-avatar {
|
|
282
|
+
background: var(--seams-colors-colorBackground);
|
|
283
|
+
}
|
|
231
284
|
.seams-account-method-button > div {
|
|
232
285
|
flex: 1;
|
|
233
286
|
}
|
|
@@ -241,10 +294,49 @@
|
|
|
241
294
|
color: var(--seams-colors-textSecondary);
|
|
242
295
|
font-size: 12px;
|
|
243
296
|
}
|
|
244
|
-
.seams-account-method-button >
|
|
245
|
-
|
|
246
|
-
|
|
297
|
+
.seams-account-method-button > .seams-hover-arrow {
|
|
298
|
+
flex: 0 0 auto;
|
|
299
|
+
margin-inline-end: 2px;
|
|
300
|
+
fill: none;
|
|
301
|
+
stroke: currentColor;
|
|
302
|
+
stroke-width: 1.5;
|
|
247
303
|
color: var(--seams-colors-textSecondary);
|
|
304
|
+
transition: color 140ms ease;
|
|
305
|
+
}
|
|
306
|
+
.seams-hover-arrow-line {
|
|
307
|
+
opacity: 0;
|
|
308
|
+
filter: blur(2px);
|
|
309
|
+
transform: scaleX(0.45);
|
|
310
|
+
transform-origin: right center;
|
|
311
|
+
transition:
|
|
312
|
+
opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
|
|
313
|
+
filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
|
|
314
|
+
transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
315
|
+
}
|
|
316
|
+
.seams-hover-arrow-tip {
|
|
317
|
+
transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
318
|
+
}
|
|
319
|
+
.seams-account-method-button:hover > .seams-hover-arrow,
|
|
320
|
+
.seams-account-method-button:focus-visible > .seams-hover-arrow {
|
|
321
|
+
color: var(--seams-colors-textPrimary);
|
|
322
|
+
}
|
|
323
|
+
.seams-account-method-button:hover .seams-hover-arrow-line,
|
|
324
|
+
.seams-account-method-button:focus-visible .seams-hover-arrow-line {
|
|
325
|
+
opacity: 1;
|
|
326
|
+
filter: blur(0);
|
|
327
|
+
transform: scaleX(1);
|
|
328
|
+
}
|
|
329
|
+
.seams-account-method-button:hover .seams-hover-arrow-tip,
|
|
330
|
+
.seams-account-method-button:focus-visible .seams-hover-arrow-tip {
|
|
331
|
+
transform: translateX(3px);
|
|
332
|
+
}
|
|
333
|
+
@media (prefers-reduced-motion: reduce) {
|
|
334
|
+
.seams-account-method-button::before,
|
|
335
|
+
.seams-account-method-button .seams-account-avatar,
|
|
336
|
+
.seams-hover-arrow-line,
|
|
337
|
+
.seams-hover-arrow-tip {
|
|
338
|
+
transition: none;
|
|
339
|
+
}
|
|
248
340
|
}
|
|
249
341
|
.seams-account-screen .seams-dropdown-accounts-root,
|
|
250
342
|
.seams-account-screen .seams-dropdown-export-keys-root {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
//#region src/react/components/AccountMenuButton/icons/HoverArrowIcon.tsx
|
|
4
|
+
/** A chevron that grows a shaft on its parent's hover (">" to "->"). The
|
|
5
|
+
* parent row owns the hover selectors in Web3AuthProfileButton.css. */
|
|
6
|
+
function HoverArrowIcon({ size = 12 }) {
|
|
7
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
8
|
+
className: "seams-hover-arrow",
|
|
9
|
+
width: size,
|
|
10
|
+
height: size,
|
|
11
|
+
viewBox: "0 0 10 10",
|
|
12
|
+
"aria-hidden": "true",
|
|
13
|
+
focusable: "false",
|
|
14
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
15
|
+
className: "seams-hover-arrow-line",
|
|
16
|
+
d: "M0 5h7"
|
|
17
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
18
|
+
className: "seams-hover-arrow-tip",
|
|
19
|
+
d: "M1 1l4 4-4 4"
|
|
20
|
+
})]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
export { HoverArrowIcon };
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=HoverArrowIcon.js.map
|
|
@@ -56,7 +56,13 @@
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.seams-export-keys-row:hover:not(:disabled) {
|
|
59
|
-
|
|
59
|
+
/* a shade off the expander surface behind the rows, which is often surface2;
|
|
60
|
+
mixing follows a theme's surface where a fixed surface step does not */
|
|
61
|
+
background: color-mix(
|
|
62
|
+
in srgb,
|
|
63
|
+
var(--seams-colors-textPrimary) 7%,
|
|
64
|
+
var(--seams-expander-surface, var(--seams-colors-surface))
|
|
65
|
+
);
|
|
60
66
|
}
|
|
61
67
|
|
|
62
68
|
.seams-export-keys-row:disabled {
|
|
@@ -867,16 +873,44 @@
|
|
|
867
873
|
color: inherit;
|
|
868
874
|
cursor: pointer;
|
|
869
875
|
margin-top: 14px;
|
|
876
|
+
transition:
|
|
877
|
+
background-color 150ms ease,
|
|
878
|
+
border-color 150ms ease,
|
|
879
|
+
transform 120ms ease;
|
|
880
|
+
}
|
|
881
|
+
.seams-account-action:hover:not(:disabled) {
|
|
882
|
+
background: var(--seams-colors-surface2);
|
|
883
|
+
border-color: color-mix(
|
|
884
|
+
in srgb,
|
|
885
|
+
var(--seams-colors-textPrimary) 16%,
|
|
886
|
+
var(--seams-colors-borderPrimary)
|
|
887
|
+
);
|
|
888
|
+
}
|
|
889
|
+
.seams-account-action:active:not(:disabled) {
|
|
890
|
+
transform: scale(0.98);
|
|
870
891
|
}
|
|
871
892
|
.seams-account-action.primary {
|
|
872
893
|
background: var(--seams-colors-textPrimary);
|
|
873
894
|
color: var(--seams-colors-colorBackground);
|
|
874
895
|
border-color: transparent;
|
|
875
896
|
}
|
|
897
|
+
.seams-account-action.primary:hover:not(:disabled) {
|
|
898
|
+
background: color-mix(
|
|
899
|
+
in srgb,
|
|
900
|
+
var(--seams-colors-textPrimary) 84%,
|
|
901
|
+
var(--seams-colors-colorBackground)
|
|
902
|
+
);
|
|
903
|
+
border-color: transparent;
|
|
904
|
+
}
|
|
876
905
|
.seams-account-action:disabled {
|
|
877
906
|
opacity: 0.5;
|
|
878
907
|
cursor: default;
|
|
879
908
|
}
|
|
909
|
+
@media (prefers-reduced-motion: reduce) {
|
|
910
|
+
.seams-account-action {
|
|
911
|
+
transition: none;
|
|
912
|
+
}
|
|
913
|
+
}
|
|
880
914
|
.seams-account-note {
|
|
881
915
|
color: var(--seams-colors-textSecondary);
|
|
882
916
|
font-size: 12px;
|
|
@@ -926,6 +960,8 @@
|
|
|
926
960
|
margin: 0;
|
|
927
961
|
}
|
|
928
962
|
.seams-account-method-button {
|
|
963
|
+
position: relative;
|
|
964
|
+
isolation: isolate;
|
|
929
965
|
display: flex;
|
|
930
966
|
width: 100%;
|
|
931
967
|
align-items: center;
|
|
@@ -939,6 +975,29 @@
|
|
|
939
975
|
cursor: pointer;
|
|
940
976
|
font: inherit;
|
|
941
977
|
}
|
|
978
|
+
/* The hover shade bleeds past the row edges so the content and the
|
|
979
|
+
separators stay aligned with the rest of the screen. */
|
|
980
|
+
.seams-account-method-button::before {
|
|
981
|
+
content: '';
|
|
982
|
+
position: absolute;
|
|
983
|
+
z-index: -1;
|
|
984
|
+
inset: 4px -10px;
|
|
985
|
+
border-radius: var(--seams-shape-item, 10px);
|
|
986
|
+
background: var(--seams-colors-surface2);
|
|
987
|
+
opacity: 0;
|
|
988
|
+
transition: opacity 150ms ease;
|
|
989
|
+
}
|
|
990
|
+
.seams-account-method-button:hover::before,
|
|
991
|
+
.seams-account-method-button:focus-visible::before {
|
|
992
|
+
opacity: 1;
|
|
993
|
+
}
|
|
994
|
+
.seams-account-method-button .seams-account-avatar {
|
|
995
|
+
transition: background-color 150ms ease;
|
|
996
|
+
}
|
|
997
|
+
.seams-account-method-button:hover .seams-account-avatar,
|
|
998
|
+
.seams-account-method-button:focus-visible .seams-account-avatar {
|
|
999
|
+
background: var(--seams-colors-colorBackground);
|
|
1000
|
+
}
|
|
942
1001
|
.seams-account-method-button > div {
|
|
943
1002
|
flex: 1;
|
|
944
1003
|
}
|
|
@@ -952,10 +1011,49 @@
|
|
|
952
1011
|
color: var(--seams-colors-textSecondary);
|
|
953
1012
|
font-size: 12px;
|
|
954
1013
|
}
|
|
955
|
-
.seams-account-method-button >
|
|
956
|
-
|
|
957
|
-
|
|
1014
|
+
.seams-account-method-button > .seams-hover-arrow {
|
|
1015
|
+
flex: 0 0 auto;
|
|
1016
|
+
margin-inline-end: 2px;
|
|
1017
|
+
fill: none;
|
|
1018
|
+
stroke: currentColor;
|
|
1019
|
+
stroke-width: 1.5;
|
|
958
1020
|
color: var(--seams-colors-textSecondary);
|
|
1021
|
+
transition: color 140ms ease;
|
|
1022
|
+
}
|
|
1023
|
+
.seams-hover-arrow-line {
|
|
1024
|
+
opacity: 0;
|
|
1025
|
+
filter: blur(2px);
|
|
1026
|
+
transform: scaleX(0.45);
|
|
1027
|
+
transform-origin: right center;
|
|
1028
|
+
transition:
|
|
1029
|
+
opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
|
|
1030
|
+
filter 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
|
|
1031
|
+
transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1032
|
+
}
|
|
1033
|
+
.seams-hover-arrow-tip {
|
|
1034
|
+
transition: transform 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
1035
|
+
}
|
|
1036
|
+
.seams-account-method-button:hover > .seams-hover-arrow,
|
|
1037
|
+
.seams-account-method-button:focus-visible > .seams-hover-arrow {
|
|
1038
|
+
color: var(--seams-colors-textPrimary);
|
|
1039
|
+
}
|
|
1040
|
+
.seams-account-method-button:hover .seams-hover-arrow-line,
|
|
1041
|
+
.seams-account-method-button:focus-visible .seams-hover-arrow-line {
|
|
1042
|
+
opacity: 1;
|
|
1043
|
+
filter: blur(0);
|
|
1044
|
+
transform: scaleX(1);
|
|
1045
|
+
}
|
|
1046
|
+
.seams-account-method-button:hover .seams-hover-arrow-tip,
|
|
1047
|
+
.seams-account-method-button:focus-visible .seams-hover-arrow-tip {
|
|
1048
|
+
transform: translateX(3px);
|
|
1049
|
+
}
|
|
1050
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1051
|
+
.seams-account-method-button::before,
|
|
1052
|
+
.seams-account-method-button .seams-account-avatar,
|
|
1053
|
+
.seams-hover-arrow-line,
|
|
1054
|
+
.seams-hover-arrow-tip {
|
|
1055
|
+
transition: none;
|
|
1056
|
+
}
|
|
959
1057
|
}
|
|
960
1058
|
.seams-account-screen .seams-dropdown-accounts-root,
|
|
961
1059
|
.seams-account-screen .seams-dropdown-export-keys-root {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
3
|
"packageName": "@seams/wallet",
|
|
4
|
-
"packageVersion": "0.15.
|
|
4
|
+
"packageVersion": "0.15.1",
|
|
5
5
|
"assetRoot": "dist/public",
|
|
6
6
|
"sdkBasePath": "/sdk",
|
|
7
7
|
"walletServicePath": "/wallet-service",
|
|
8
8
|
"headersManifest": "headers.manifest.json",
|
|
9
9
|
"versionSkewContract": {
|
|
10
10
|
"kind": "wallet_iframe_protocol_handshake",
|
|
11
|
-
"packageVersion": "0.15.
|
|
11
|
+
"packageVersion": "0.15.1",
|
|
12
12
|
"protocolVersion": "16.0.0",
|
|
13
13
|
"readyPayloadField": "protocolVersion",
|
|
14
14
|
"failureMode": "typed_error",
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
<title>Web3Authn Wallet Service</title>
|
|
7
7
|
<!-- Surface styles are external so strict CSP can keep style-src 'self' -->
|
|
8
|
-
<link rel="stylesheet" href="/sdk/wallet-ui.css?v=0.15.
|
|
8
|
+
<link rel="stylesheet" href="/sdk/wallet-ui.css?v=0.15.1" />
|
|
9
9
|
<!-- Minimal shims some ESM bundles expect (externalized to enable strict CSP) -->
|
|
10
|
-
<script src="/sdk/wallet-shims.js?v=0.15.
|
|
10
|
+
<script src="/sdk/wallet-shims.js?v=0.15.1"></script>
|
|
11
11
|
<!-- Hint the browser to fetch the host script earlier -->
|
|
12
|
-
<link rel="modulepreload" href="/sdk/wallet-iframe-host-runtime.js?v=0.15.
|
|
12
|
+
<link rel="modulepreload" href="/sdk/wallet-iframe-host-runtime.js?v=0.15.1" crossorigin>
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
15
|
<!-- sdkBasePath points to the SDK root (e.g. '/sdk'). Load the host directly. -->
|
|
16
|
-
<script type="module" src="/sdk/wallet-iframe-host-runtime.js?v=0.15.
|
|
16
|
+
<script type="module" src="/sdk/wallet-iframe-host-runtime.js?v=0.15.1"></script>
|
|
17
17
|
</body>
|
|
18
18
|
</html>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/** A chevron that grows a shaft on its parent's hover (">" to "->"). The
|
|
3
|
+
* parent row owns the hover selectors in Web3AuthProfileButton.css. */
|
|
4
|
+
export declare function HoverArrowIcon({ size }: {
|
|
5
|
+
size?: number;
|
|
6
|
+
}): React.JSX.Element;
|
|
7
|
+
//# sourceMappingURL=HoverArrowIcon.d.ts.map
|