@arcblock/ux 3.4.9 → 3.4.11
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/lib/SessionUser/components/logged-in.d.ts +3 -1
- package/lib/SessionUser/components/logged-in.js +132 -114
- package/lib/SessionUser/components/user-info.js +53 -52
- package/lib/SessionUser/index.d.ts +20 -1
- package/lib/SessionUser/index.js +19 -17
- package/lib/package.json.js +1 -1
- package/package.json +7 -7
- package/src/SessionUser/components/logged-in.tsx +26 -2
- package/src/SessionUser/components/user-info.tsx +4 -3
- package/src/SessionUser/index.tsx +21 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material';
|
|
2
2
|
import { Locale, Session } from '../../type';
|
|
3
|
+
import { SessionUserProps } from '..';
|
|
3
4
|
export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
|
|
4
5
|
session: Session;
|
|
5
6
|
onBindWallet?: () => void;
|
|
@@ -9,5 +10,6 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
|
|
|
9
10
|
popperType?: 'hover' | 'click';
|
|
10
11
|
profileUrl?: string;
|
|
11
12
|
mode?: 'minimal' | 'normal';
|
|
13
|
+
renderUserButton: SessionUserProps['renderUserButton'];
|
|
12
14
|
}
|
|
13
|
-
export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, mode, sx, ...rest }: LoggedInProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export default function LoggedIn({ session, onBindWallet, isBlocklet, locale, size, popperType, profileUrl, mode, sx, renderUserButton, ...rest }: LoggedInProps): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
@@ -1,126 +1,144 @@
|
|
|
1
1
|
import { jsxs as s, jsx as r, Fragment as T } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { useMemoizedFn as n, useCreation as
|
|
4
|
-
import
|
|
5
|
-
import { Box as
|
|
6
|
-
import { Icon as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import { getUserAvatar as
|
|
16
|
-
import
|
|
17
|
-
import { DASHBOARD_URL as
|
|
18
|
-
import
|
|
19
|
-
import { translations as
|
|
20
|
-
import { translate as
|
|
21
|
-
import
|
|
22
|
-
import { mergeSx as
|
|
23
|
-
import { createDebug as
|
|
24
|
-
import { GA_LAST_ROLE as
|
|
25
|
-
const
|
|
2
|
+
import { useRef as G, useEffect as H } from "react";
|
|
3
|
+
import { useMemoizedFn as n, useCreation as N, useReactive as Q } from "ahooks";
|
|
4
|
+
import v from "@arcblock/bridge";
|
|
5
|
+
import { Box as M, IconButton as V, Popper as q, ClickAwayListener as J, Fade as K, Paper as X, Divider as B, MenuList as Y, MenuItem as Z } from "@mui/material";
|
|
6
|
+
import { Icon as $ } from "@iconify/react";
|
|
7
|
+
import ee from "@iconify-icons/material-symbols/person-outline-rounded";
|
|
8
|
+
import re from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
|
|
9
|
+
import te from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
|
|
10
|
+
import oe from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
|
|
11
|
+
import ie from "copy-to-clipboard";
|
|
12
|
+
import x from "lodash/noop";
|
|
13
|
+
import ne from "../../Toast/index.js";
|
|
14
|
+
import ce from "../../Avatar/index.js";
|
|
15
|
+
import { getUserAvatar as ae } from "../../Util/index.js";
|
|
16
|
+
import le from "./user-info.js";
|
|
17
|
+
import { DASHBOARD_URL as E, PROFILE_URL as se } from "../../Util/constant.js";
|
|
18
|
+
import pe from "../../SessionPermission/index.js";
|
|
19
|
+
import { translations as ue } from "../libs/translation.js";
|
|
20
|
+
import { translate as de } from "../../Locale/util.js";
|
|
21
|
+
import me from "./did-space.js";
|
|
22
|
+
import { mergeSx as fe } from "../../Util/style.js";
|
|
23
|
+
import { createDebug as he } from "../../Util/logger.js";
|
|
24
|
+
import { GA_LAST_ROLE as ge } from "../../withTracker/constant/index.js";
|
|
25
|
+
const Pe = (e) => {
|
|
26
26
|
const c = new URL(window.location.href);
|
|
27
27
|
return c.searchParams.set("inviter", e), c.toString();
|
|
28
|
-
},
|
|
29
|
-
function
|
|
28
|
+
}, w = he("did-connect");
|
|
29
|
+
function Ge({
|
|
30
30
|
session: e,
|
|
31
|
-
onBindWallet: c =
|
|
32
|
-
isBlocklet:
|
|
33
|
-
locale:
|
|
34
|
-
size:
|
|
35
|
-
popperType:
|
|
36
|
-
profileUrl:
|
|
37
|
-
mode:
|
|
38
|
-
sx:
|
|
39
|
-
|
|
31
|
+
onBindWallet: c = x,
|
|
32
|
+
isBlocklet: a = !0,
|
|
33
|
+
locale: p = "en",
|
|
34
|
+
size: A = 24,
|
|
35
|
+
popperType: S = "click",
|
|
36
|
+
profileUrl: b = se,
|
|
37
|
+
mode: d = "normal",
|
|
38
|
+
sx: U,
|
|
39
|
+
renderUserButton: k,
|
|
40
|
+
...F
|
|
40
41
|
}) {
|
|
41
|
-
const
|
|
42
|
+
const l = n((t, o = {}) => de(ue, t, p, "en", o)), I = N(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), y = G(null), m = Q({
|
|
42
43
|
open: !1
|
|
43
|
-
}), i = n((t = !
|
|
44
|
-
|
|
45
|
-
}),
|
|
46
|
-
localStorage.setItem(
|
|
44
|
+
}), i = n((t = !m.open) => {
|
|
45
|
+
m.open = t;
|
|
46
|
+
}), W = S === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, R = ae(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), _ = e.useOAuth(), j = typeof e.usePasskey == "function" ? e.usePasskey() : null, f = n(({ inArcSphere: t = !1 } = {}) => {
|
|
47
|
+
localStorage.setItem(ge, e?.user?.role);
|
|
47
48
|
const o = {};
|
|
48
|
-
t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ?
|
|
49
|
-
}),
|
|
50
|
-
const
|
|
51
|
-
o && e.user.sourceAppPid && (
|
|
52
|
-
const
|
|
53
|
-
t ?
|
|
49
|
+
t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? j.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? _.switchOAuthPassport(e.user) : e.switchPassport(x, o);
|
|
50
|
+
}), h = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((z) => {
|
|
51
|
+
const O = {};
|
|
52
|
+
o && e.user.sourceAppPid && (O.sourceAppPid = e.user.sourceAppPid);
|
|
53
|
+
const P = {};
|
|
54
|
+
t ? P.userSession = t : (i(!1), P.showQuickConnect = !1), e.switchDid(
|
|
54
55
|
() => {
|
|
55
56
|
i(!1), z();
|
|
56
57
|
},
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
O,
|
|
59
|
+
P
|
|
59
60
|
);
|
|
60
|
-
})),
|
|
61
|
+
})), g = n(({ inArcSphere: t = !1 } = {}) => {
|
|
61
62
|
const o = {};
|
|
62
|
-
t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(
|
|
63
|
-
}),
|
|
63
|
+
t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(x, o);
|
|
64
|
+
}), C = n(() => {
|
|
64
65
|
i(!1), e.logout();
|
|
65
|
-
}),
|
|
66
|
+
}), L = n(() => {
|
|
66
67
|
i(!1), e.bindWallet(c);
|
|
67
|
-
}),
|
|
68
|
+
}), D = n(() => {
|
|
68
69
|
i(!1);
|
|
69
|
-
const t =
|
|
70
|
-
|
|
70
|
+
const t = Pe(e.user.did);
|
|
71
|
+
ie(t), ne.success(l("inviteCopied"));
|
|
71
72
|
});
|
|
72
|
-
return
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}),
|
|
76
|
-
|
|
77
|
-
}),
|
|
78
|
-
|
|
73
|
+
return H(() => {
|
|
74
|
+
v.registerBlocklet("callSwitchPassport", () => {
|
|
75
|
+
w("bridge registerBlocklet: callSwitchPassport"), f({ inArcSphere: !0 });
|
|
76
|
+
}), v.registerBlocklet("callSwitchDid", () => {
|
|
77
|
+
w("bridge registerBlocklet: callSwitchDid"), h({ inArcSphere: !0 });
|
|
78
|
+
}), v.registerBlocklet("callSwitchProfile", () => {
|
|
79
|
+
w("bridge registerBlocklet: callSwitchProfile"), g({ inArcSphere: !0 });
|
|
79
80
|
});
|
|
80
|
-
}, []),
|
|
81
|
-
|
|
81
|
+
}, []), k ? k({
|
|
82
|
+
isBlocklet: a,
|
|
83
|
+
session: e,
|
|
84
|
+
locale: p,
|
|
85
|
+
size: A,
|
|
86
|
+
popperType: S,
|
|
87
|
+
profileUrl: b,
|
|
88
|
+
dashboardUrl: E,
|
|
89
|
+
mode: d,
|
|
90
|
+
avatar: R,
|
|
91
|
+
isInviteEnabled: I,
|
|
92
|
+
handleSwitchPassport: f,
|
|
93
|
+
handleSwitchAccount: h,
|
|
94
|
+
handleSwitchProfile: g,
|
|
95
|
+
handleBindWallet: L,
|
|
96
|
+
handleOpenInvite: D,
|
|
97
|
+
handleLogout: C
|
|
98
|
+
}) : /* @__PURE__ */ s(
|
|
99
|
+
M,
|
|
82
100
|
{
|
|
83
|
-
sx:
|
|
101
|
+
sx: fe(
|
|
84
102
|
{
|
|
85
103
|
display: "inline-flex",
|
|
86
104
|
alignItems: "center",
|
|
87
105
|
justifyContent: "center"
|
|
88
106
|
},
|
|
89
107
|
// @ts-ignore
|
|
90
|
-
|
|
108
|
+
U
|
|
91
109
|
),
|
|
92
|
-
...
|
|
110
|
+
...F,
|
|
93
111
|
children: [
|
|
94
112
|
/* @__PURE__ */ r(
|
|
95
|
-
|
|
113
|
+
V,
|
|
96
114
|
{
|
|
97
|
-
ref:
|
|
115
|
+
ref: y,
|
|
98
116
|
size: "medium",
|
|
99
117
|
"data-cy": "sessionManager-logout-popup",
|
|
100
118
|
className: "arc-session-user-logged-in",
|
|
101
119
|
"aria-label": "User info button",
|
|
102
|
-
...
|
|
103
|
-
children: /* @__PURE__ */ r(
|
|
120
|
+
...W,
|
|
121
|
+
children: /* @__PURE__ */ r(ce, { variant: "circle", did: e.user.did, src: R, size: A, shape: "circle" })
|
|
104
122
|
}
|
|
105
123
|
),
|
|
106
124
|
/* @__PURE__ */ r(
|
|
107
|
-
|
|
125
|
+
q,
|
|
108
126
|
{
|
|
109
|
-
open:
|
|
110
|
-
anchorEl:
|
|
127
|
+
open: m.open,
|
|
128
|
+
anchorEl: y.current,
|
|
111
129
|
transition: !0,
|
|
112
130
|
placement: "bottom-end",
|
|
113
131
|
sx: {
|
|
114
132
|
zIndex: 1600
|
|
115
133
|
},
|
|
116
134
|
children: ({ TransitionProps: t }) => /* @__PURE__ */ r(
|
|
117
|
-
|
|
135
|
+
J,
|
|
118
136
|
{
|
|
119
137
|
onClickAway: (o) => {
|
|
120
138
|
o.preventDefault(), o.stopPropagation(), i(!1);
|
|
121
139
|
},
|
|
122
|
-
children: /* @__PURE__ */ r(
|
|
123
|
-
|
|
140
|
+
children: /* @__PURE__ */ r(K, { ...t, timeout: 350, children: /* @__PURE__ */ s(
|
|
141
|
+
X,
|
|
124
142
|
{
|
|
125
143
|
variant: "outlined",
|
|
126
144
|
sx: {
|
|
@@ -130,62 +148,62 @@ function je({
|
|
|
130
148
|
},
|
|
131
149
|
children: [
|
|
132
150
|
/* @__PURE__ */ r(
|
|
133
|
-
|
|
151
|
+
le,
|
|
134
152
|
{
|
|
135
|
-
locale:
|
|
136
|
-
isBlocklet:
|
|
153
|
+
locale: p,
|
|
154
|
+
isBlocklet: a,
|
|
137
155
|
session: e,
|
|
138
|
-
onSwitchPassport:
|
|
139
|
-
onSwitchAccount:
|
|
140
|
-
onSwitchProfile:
|
|
141
|
-
onBindWallet:
|
|
142
|
-
mode:
|
|
156
|
+
onSwitchPassport: f,
|
|
157
|
+
onSwitchAccount: h,
|
|
158
|
+
onSwitchProfile: g,
|
|
159
|
+
onBindWallet: L,
|
|
160
|
+
mode: d
|
|
143
161
|
}
|
|
144
162
|
),
|
|
145
|
-
/* @__PURE__ */ r(
|
|
146
|
-
/* @__PURE__ */ s(
|
|
147
|
-
|
|
148
|
-
/* @__PURE__ */ r(
|
|
149
|
-
|
|
163
|
+
/* @__PURE__ */ r(B, { sx: { m: "0 !important" } }),
|
|
164
|
+
/* @__PURE__ */ s(Y, { sx: { p: 0 }, children: [
|
|
165
|
+
a ? /* @__PURE__ */ s(T, { children: [
|
|
166
|
+
/* @__PURE__ */ r(pe, { session: e, children: /* @__PURE__ */ r(
|
|
167
|
+
u,
|
|
150
168
|
{
|
|
151
|
-
icon:
|
|
152
|
-
title:
|
|
169
|
+
icon: re,
|
|
170
|
+
title: l("dashboard"),
|
|
153
171
|
component: "a",
|
|
154
|
-
href:
|
|
172
|
+
href: E,
|
|
155
173
|
sx: { display: "block", textDecoration: "none", color: "inherit" }
|
|
156
174
|
}
|
|
157
175
|
) }),
|
|
158
176
|
/* @__PURE__ */ r(
|
|
159
|
-
|
|
177
|
+
u,
|
|
160
178
|
{
|
|
161
|
-
icon:
|
|
162
|
-
title:
|
|
179
|
+
icon: ee,
|
|
180
|
+
title: l("profile"),
|
|
163
181
|
component: "a",
|
|
164
|
-
href:
|
|
182
|
+
href: b,
|
|
165
183
|
sx: { display: "block", textDecoration: "none", color: "inherit" }
|
|
166
184
|
}
|
|
167
185
|
),
|
|
168
|
-
|
|
169
|
-
|
|
186
|
+
I && /* @__PURE__ */ r(
|
|
187
|
+
u,
|
|
170
188
|
{
|
|
171
|
-
icon:
|
|
172
|
-
title:
|
|
189
|
+
icon: oe,
|
|
190
|
+
title: l("invite"),
|
|
173
191
|
component: "div",
|
|
174
|
-
onClick:
|
|
192
|
+
onClick: D,
|
|
175
193
|
sx: { display: "block", color: "inherit" }
|
|
176
194
|
}
|
|
177
195
|
),
|
|
178
|
-
/* @__PURE__ */ r(
|
|
179
|
-
|
|
196
|
+
/* @__PURE__ */ r(B, { sx: { m: "0 !important" } }),
|
|
197
|
+
d === "normal" ? /* @__PURE__ */ r(me, { session: e, locale: p }) : null
|
|
180
198
|
] }) : null,
|
|
181
199
|
/* @__PURE__ */ r(
|
|
182
|
-
|
|
200
|
+
u,
|
|
183
201
|
{
|
|
184
|
-
icon:
|
|
185
|
-
title:
|
|
202
|
+
icon: te,
|
|
203
|
+
title: l("logout"),
|
|
186
204
|
component: "div",
|
|
187
205
|
sx: { color: "error.main" },
|
|
188
|
-
onClick:
|
|
206
|
+
onClick: C,
|
|
189
207
|
"data-cy": "sessionManager-logout-trigger"
|
|
190
208
|
}
|
|
191
209
|
)
|
|
@@ -201,13 +219,13 @@ function je({
|
|
|
201
219
|
}
|
|
202
220
|
);
|
|
203
221
|
}
|
|
204
|
-
function
|
|
222
|
+
function u({
|
|
205
223
|
icon: e,
|
|
206
224
|
title: c,
|
|
207
|
-
...
|
|
225
|
+
...a
|
|
208
226
|
}) {
|
|
209
|
-
return /* @__PURE__ */ r(
|
|
210
|
-
|
|
227
|
+
return /* @__PURE__ */ r(M, { ...a, sx: { p: 0.5, ...a?.sx }, children: /* @__PURE__ */ s(
|
|
228
|
+
Z,
|
|
211
229
|
{
|
|
212
230
|
sx: {
|
|
213
231
|
display: "flex",
|
|
@@ -220,12 +238,12 @@ function p({
|
|
|
220
238
|
py: 1
|
|
221
239
|
},
|
|
222
240
|
children: [
|
|
223
|
-
/* @__PURE__ */ r(
|
|
241
|
+
/* @__PURE__ */ r($, { icon: e, fontSize: 24 }),
|
|
224
242
|
c
|
|
225
243
|
]
|
|
226
244
|
}
|
|
227
245
|
) });
|
|
228
246
|
}
|
|
229
247
|
export {
|
|
230
|
-
|
|
248
|
+
Ge as default
|
|
231
249
|
};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Box as
|
|
3
|
-
import { Icon as
|
|
1
|
+
import { jsxs as n, jsx as e, Fragment as w } from "react/jsx-runtime";
|
|
2
|
+
import { Box as o, Typography as C, Chip as v, alpha as I } from "@mui/material";
|
|
3
|
+
import { Icon as p } from "@iconify/react";
|
|
4
4
|
import S from "@iconify-icons/material-symbols/swap-horiz-rounded";
|
|
5
|
-
import
|
|
6
|
-
import { useMemoizedFn as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { getUserAvatar as
|
|
10
|
-
import
|
|
11
|
-
import { getWallet as
|
|
12
|
-
import { translations as
|
|
13
|
-
import { translate as
|
|
14
|
-
import
|
|
15
|
-
function
|
|
5
|
+
import _ from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
|
|
6
|
+
import { useMemoizedFn as z, useCreation as d } from "ahooks";
|
|
7
|
+
import m from "lodash/noop";
|
|
8
|
+
import R from "../../Avatar/index.js";
|
|
9
|
+
import { getUserAvatar as D } from "../../Util/index.js";
|
|
10
|
+
import k from "./session-user-switch.js";
|
|
11
|
+
import { getWallet as N } from "../libs/utils.js";
|
|
12
|
+
import { translations as A } from "../libs/translation.js";
|
|
13
|
+
import { translate as U } from "../../Locale/util.js";
|
|
14
|
+
import W from "../../Tag/index.js";
|
|
15
|
+
function Q({
|
|
16
16
|
session: r,
|
|
17
17
|
onSwitchPassport: l,
|
|
18
18
|
onSwitchAccount: u,
|
|
19
19
|
onBindWallet: f,
|
|
20
|
-
onSwitchProfile: h =
|
|
20
|
+
onSwitchProfile: h = m,
|
|
21
21
|
locale: c = "en",
|
|
22
|
-
isBlocklet:
|
|
23
|
-
mode:
|
|
22
|
+
isBlocklet: a = !0,
|
|
23
|
+
mode: i = "normal"
|
|
24
24
|
}) {
|
|
25
|
-
const
|
|
26
|
-
(
|
|
27
|
-
), [r?.user?.passports, r?.user?.role]), y =
|
|
28
|
-
return /* @__PURE__ */
|
|
29
|
-
|
|
25
|
+
const s = z((t, b = {}) => U(A, t, c, "en", b)), g = D(r.user?.avatar?.replace(/\s/g, encodeURIComponent(" ")), 64), x = d(() => r.user?.passports?.find(
|
|
26
|
+
(t) => t.name === r.user.role || t.role === r.user.role
|
|
27
|
+
), [r?.user?.passports, r?.user?.role]), y = d(() => N(r?.user), [r?.user]);
|
|
28
|
+
return /* @__PURE__ */ n(
|
|
29
|
+
o,
|
|
30
30
|
{
|
|
31
31
|
sx: {
|
|
32
32
|
py: 2,
|
|
@@ -37,8 +37,8 @@ function V({
|
|
|
37
37
|
gap: 1.5
|
|
38
38
|
},
|
|
39
39
|
children: [
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
|
|
40
|
+
/* @__PURE__ */ n(
|
|
41
|
+
o,
|
|
42
42
|
{
|
|
43
43
|
sx: {
|
|
44
44
|
display: "flex",
|
|
@@ -48,8 +48,8 @@ function V({
|
|
|
48
48
|
px: 2
|
|
49
49
|
},
|
|
50
50
|
children: [
|
|
51
|
-
/* @__PURE__ */
|
|
52
|
-
|
|
51
|
+
/* @__PURE__ */ n(
|
|
52
|
+
o,
|
|
53
53
|
{
|
|
54
54
|
sx: {
|
|
55
55
|
display: "flex",
|
|
@@ -57,21 +57,21 @@ function V({
|
|
|
57
57
|
gap: 1.5
|
|
58
58
|
},
|
|
59
59
|
children: [
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
i === "normal" ? /* @__PURE__ */ e(
|
|
61
|
+
o,
|
|
62
62
|
{
|
|
63
|
-
onClick:
|
|
63
|
+
onClick: a ? m : h,
|
|
64
64
|
"data-cy": "sessionManager-switch-profile-trigger",
|
|
65
65
|
sx: {
|
|
66
|
-
cursor:
|
|
66
|
+
cursor: a ? "default" : "pointer",
|
|
67
67
|
position: "relative",
|
|
68
68
|
borderRadius: "100%",
|
|
69
69
|
overflow: "hidden",
|
|
70
70
|
fontSize: 0,
|
|
71
71
|
flexShrink: 0,
|
|
72
|
-
"&:hover":
|
|
72
|
+
"&:hover": a ? {} : {
|
|
73
73
|
"&::after": {
|
|
74
|
-
content: `"${
|
|
74
|
+
content: `"${s("switch")}"`,
|
|
75
75
|
position: "absolute",
|
|
76
76
|
bottom: 0,
|
|
77
77
|
background: "rgba(0, 0, 0, 0.2)",
|
|
@@ -86,7 +86,7 @@ function V({
|
|
|
86
86
|
}
|
|
87
87
|
},
|
|
88
88
|
children: /* @__PURE__ */ e(
|
|
89
|
-
|
|
89
|
+
R,
|
|
90
90
|
{
|
|
91
91
|
variant: "circle",
|
|
92
92
|
did: r.user.did,
|
|
@@ -94,39 +94,40 @@ function V({
|
|
|
94
94
|
size: 48,
|
|
95
95
|
shape: "circle",
|
|
96
96
|
sx: {
|
|
97
|
-
cursor:
|
|
97
|
+
cursor: a ? "unset" : "pointer"
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
)
|
|
101
101
|
}
|
|
102
102
|
) : null,
|
|
103
|
-
/* @__PURE__ */ o
|
|
104
|
-
/* @__PURE__ */ e(C, { variant:
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
/* @__PURE__ */ n(o, { children: [
|
|
104
|
+
/* @__PURE__ */ e(C, { variant: i === "normal" ? "h6" : "h4", sx: { wordBreak: "break-word" }, children: r.user.fullName }),
|
|
105
|
+
i === "normal" ? null : /* @__PURE__ */ n(
|
|
106
|
+
W,
|
|
107
107
|
{
|
|
108
|
+
className: "user-info__connected-tag",
|
|
108
109
|
type: "primary",
|
|
109
110
|
sx: {
|
|
110
111
|
transform: "scale(0.85)",
|
|
111
112
|
transformOrigin: "left",
|
|
112
|
-
color: "white !important",
|
|
113
113
|
display: "flex",
|
|
114
114
|
alignItems: "center"
|
|
115
115
|
},
|
|
116
116
|
children: [
|
|
117
117
|
/* @__PURE__ */ e(
|
|
118
|
-
|
|
118
|
+
o,
|
|
119
119
|
{
|
|
120
|
+
className: "user-info__connected-tag__dot",
|
|
120
121
|
sx: {
|
|
121
122
|
mr: 0.75,
|
|
122
123
|
width: 6,
|
|
123
124
|
height: 6,
|
|
124
|
-
backgroundColor:
|
|
125
|
+
backgroundColor: (t) => t.palette.text.contrast,
|
|
125
126
|
borderRadius: "100vw"
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
),
|
|
129
|
-
/* @__PURE__ */ e(
|
|
130
|
+
/* @__PURE__ */ e(o, { className: "user-info__connected-tag__text", children: "DID CONNECTED" })
|
|
130
131
|
]
|
|
131
132
|
}
|
|
132
133
|
)
|
|
@@ -134,7 +135,7 @@ function V({
|
|
|
134
135
|
]
|
|
135
136
|
}
|
|
136
137
|
),
|
|
137
|
-
|
|
138
|
+
i === "normal" ? /* @__PURE__ */ e(
|
|
138
139
|
v,
|
|
139
140
|
{
|
|
140
141
|
label: x?.title || r.user?.role.toUpperCase(),
|
|
@@ -153,7 +154,7 @@ function V({
|
|
|
153
154
|
boxShadow: "none"
|
|
154
155
|
}
|
|
155
156
|
},
|
|
156
|
-
deleteIcon: /* @__PURE__ */ e(
|
|
157
|
+
deleteIcon: /* @__PURE__ */ e(p, { icon: S, color: "inherit" }),
|
|
157
158
|
onDelete: l,
|
|
158
159
|
onClick: l,
|
|
159
160
|
"data-cy": "sessionManager-switch-passport-trigger"
|
|
@@ -162,14 +163,14 @@ function V({
|
|
|
162
163
|
]
|
|
163
164
|
}
|
|
164
165
|
),
|
|
165
|
-
|
|
166
|
-
/* @__PURE__ */ e(
|
|
167
|
-
y ? null : /* @__PURE__ */
|
|
168
|
-
|
|
166
|
+
i === "normal" ? /* @__PURE__ */ n(w, { children: [
|
|
167
|
+
/* @__PURE__ */ e(k, { session: r, onSwitch: u, isBlocklet: a, locale: c }),
|
|
168
|
+
y ? null : /* @__PURE__ */ n(
|
|
169
|
+
o,
|
|
169
170
|
{
|
|
170
171
|
sx: {
|
|
171
172
|
color: "secondary.main",
|
|
172
|
-
bgcolor: ({ palette:
|
|
173
|
+
bgcolor: ({ palette: t }) => I(t.secondary.main, 0.05),
|
|
173
174
|
borderRadius: 1,
|
|
174
175
|
display: "flex",
|
|
175
176
|
justifyContent: "space-between",
|
|
@@ -183,8 +184,8 @@ function V({
|
|
|
183
184
|
onClick: f,
|
|
184
185
|
"data-cy": "sessionManager-bind-trigger",
|
|
185
186
|
children: [
|
|
186
|
-
|
|
187
|
-
/* @__PURE__ */ e(
|
|
187
|
+
s("connectDIDWallet"),
|
|
188
|
+
/* @__PURE__ */ e(p, { icon: _, color: "inherit", fontSize: 16 })
|
|
188
189
|
]
|
|
189
190
|
}
|
|
190
191
|
)
|
|
@@ -194,5 +195,5 @@ function V({
|
|
|
194
195
|
);
|
|
195
196
|
}
|
|
196
197
|
export {
|
|
197
|
-
|
|
198
|
+
Q as default
|
|
198
199
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { Locale, Session } from '../type';
|
|
2
3
|
export interface SessionUserProps {
|
|
3
4
|
session: Session;
|
|
@@ -6,5 +7,23 @@ export interface SessionUserProps {
|
|
|
6
7
|
size?: number;
|
|
7
8
|
popperType?: 'hover' | 'click';
|
|
8
9
|
profileUrl?: string;
|
|
10
|
+
renderUserButton?: (props: {
|
|
11
|
+
isBlocklet: boolean;
|
|
12
|
+
session: Session;
|
|
13
|
+
locale: Locale;
|
|
14
|
+
size: number;
|
|
15
|
+
popperType: 'hover' | 'click';
|
|
16
|
+
profileUrl?: string;
|
|
17
|
+
dashboardUrl?: string;
|
|
18
|
+
mode?: any;
|
|
19
|
+
avatar: string;
|
|
20
|
+
isInviteEnabled: boolean;
|
|
21
|
+
handleSwitchPassport: () => void;
|
|
22
|
+
handleSwitchAccount: () => void;
|
|
23
|
+
handleSwitchProfile: () => void;
|
|
24
|
+
handleBindWallet: () => void;
|
|
25
|
+
handleOpenInvite: () => void;
|
|
26
|
+
handleLogout: () => void;
|
|
27
|
+
}) => ReactNode;
|
|
9
28
|
}
|
|
10
|
-
export default function SessionUser({ session, onBindWallet, locale, size, popperType, profileUrl, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export default function SessionUser({ session, onBindWallet, locale, size, popperType, profileUrl, renderUserButton, }: SessionUserProps): import("react/jsx-runtime").JSX.Element;
|
package/lib/SessionUser/index.js
CHANGED
|
@@ -1,31 +1,33 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { useCreation as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { PROFILE_URL as
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import c from "lodash/noop";
|
|
3
|
+
import { useCreation as u } from "ahooks";
|
|
4
|
+
import g from "./components/logged-in.js";
|
|
5
|
+
import s from "./components/un-login.js";
|
|
6
|
+
import { PROFILE_URL as S } from "../Util/constant.js";
|
|
7
7
|
function U({
|
|
8
8
|
session: o,
|
|
9
|
-
onBindWallet:
|
|
9
|
+
onBindWallet: m = c,
|
|
10
10
|
locale: r = "en",
|
|
11
11
|
size: t = 24,
|
|
12
|
-
popperType:
|
|
13
|
-
profileUrl: n =
|
|
12
|
+
popperType: e = "click",
|
|
13
|
+
profileUrl: n = S,
|
|
14
|
+
renderUserButton: l = void 0
|
|
14
15
|
}) {
|
|
15
|
-
const
|
|
16
|
-
return o.user ? /* @__PURE__ */
|
|
17
|
-
|
|
16
|
+
const f = u(() => !!globalThis?.blocklet, []), p = globalThis?.blocklet?.SESSION_USER_MODE;
|
|
17
|
+
return o.user ? /* @__PURE__ */ i(
|
|
18
|
+
g,
|
|
18
19
|
{
|
|
19
|
-
isBlocklet:
|
|
20
|
+
isBlocklet: f,
|
|
20
21
|
session: o,
|
|
21
|
-
onBindWallet:
|
|
22
|
+
onBindWallet: m,
|
|
22
23
|
locale: r,
|
|
23
24
|
size: t,
|
|
24
|
-
popperType:
|
|
25
|
+
popperType: e,
|
|
25
26
|
profileUrl: n,
|
|
26
|
-
mode:
|
|
27
|
+
mode: p,
|
|
28
|
+
renderUserButton: l
|
|
27
29
|
}
|
|
28
|
-
) : /* @__PURE__ */
|
|
30
|
+
) : /* @__PURE__ */ i(s, { session: o, locale: r, size: t });
|
|
29
31
|
}
|
|
30
32
|
export {
|
|
31
33
|
U as default
|
package/lib/package.json.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.11",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -74,16 +74,16 @@
|
|
|
74
74
|
"react": "^19.0.0",
|
|
75
75
|
"react-router-dom": "^6.22.3"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "1cc263e80cb7b98f6ebb02bb8d151fee552e6c76",
|
|
78
78
|
"dependencies": {
|
|
79
|
-
"@arcblock/bridge": "3.4.
|
|
79
|
+
"@arcblock/bridge": "3.4.11",
|
|
80
80
|
"@arcblock/did": "^1.28.6",
|
|
81
81
|
"@arcblock/did-motif": "^1.1.14",
|
|
82
|
-
"@arcblock/icons": "3.4.
|
|
83
|
-
"@arcblock/nft-display": "3.4.
|
|
84
|
-
"@arcblock/react-hooks": "3.4.
|
|
82
|
+
"@arcblock/icons": "3.4.11",
|
|
83
|
+
"@arcblock/nft-display": "3.4.11",
|
|
84
|
+
"@arcblock/react-hooks": "3.4.11",
|
|
85
85
|
"@blocklet/js-sdk": "^1.17.7",
|
|
86
|
-
"@blocklet/theme": "3.4.
|
|
86
|
+
"@blocklet/theme": "3.4.11",
|
|
87
87
|
"@fontsource/roboto": "~5.1.1",
|
|
88
88
|
"@fontsource/ubuntu-mono": "^5.2.6",
|
|
89
89
|
"@iconify-icons/logos": "^1.2.36",
|
|
@@ -34,6 +34,7 @@ import DidSpace from './did-space';
|
|
|
34
34
|
import { mergeSx } from '../../Util/style';
|
|
35
35
|
import { createDebug } from '../../Util/logger';
|
|
36
36
|
import { GA_LAST_ROLE } from '../../withTracker/constant';
|
|
37
|
+
import type { SessionUserProps } from '..';
|
|
37
38
|
|
|
38
39
|
const getInviteLink = (inviter: string) => {
|
|
39
40
|
const url = new URL(window.location.href);
|
|
@@ -52,6 +53,7 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
|
|
|
52
53
|
popperType?: 'hover' | 'click';
|
|
53
54
|
profileUrl?: string;
|
|
54
55
|
mode?: 'minimal' | 'normal';
|
|
56
|
+
renderUserButton: SessionUserProps['renderUserButton'];
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
export default function LoggedIn({
|
|
@@ -64,6 +66,7 @@ export default function LoggedIn({
|
|
|
64
66
|
profileUrl = PROFILE_URL,
|
|
65
67
|
mode = 'normal',
|
|
66
68
|
sx,
|
|
69
|
+
renderUserButton,
|
|
67
70
|
...rest
|
|
68
71
|
}: LoggedInProps) {
|
|
69
72
|
const t = useMemoizedFn((key, data = {}) => {
|
|
@@ -143,7 +146,7 @@ export default function LoggedIn({
|
|
|
143
146
|
onTogglePopper(false);
|
|
144
147
|
session.switchProfile(noop, extraParams);
|
|
145
148
|
});
|
|
146
|
-
const
|
|
149
|
+
const handleLogout = useMemoizedFn(() => {
|
|
147
150
|
onTogglePopper(false);
|
|
148
151
|
session.logout();
|
|
149
152
|
});
|
|
@@ -176,6 +179,27 @@ export default function LoggedIn({
|
|
|
176
179
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
177
180
|
}, []);
|
|
178
181
|
|
|
182
|
+
if (renderUserButton) {
|
|
183
|
+
return renderUserButton({
|
|
184
|
+
isBlocklet,
|
|
185
|
+
session,
|
|
186
|
+
locale,
|
|
187
|
+
size,
|
|
188
|
+
popperType,
|
|
189
|
+
profileUrl,
|
|
190
|
+
dashboardUrl: DASHBOARD_URL,
|
|
191
|
+
mode,
|
|
192
|
+
avatar,
|
|
193
|
+
isInviteEnabled,
|
|
194
|
+
handleSwitchPassport,
|
|
195
|
+
handleSwitchAccount,
|
|
196
|
+
handleSwitchProfile,
|
|
197
|
+
handleBindWallet,
|
|
198
|
+
handleOpenInvite,
|
|
199
|
+
handleLogout,
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
|
|
179
203
|
return (
|
|
180
204
|
<Box
|
|
181
205
|
sx={mergeSx(
|
|
@@ -269,7 +293,7 @@ export default function LoggedIn({
|
|
|
269
293
|
title={t('logout')}
|
|
270
294
|
component="div"
|
|
271
295
|
sx={{ color: 'error.main' }}
|
|
272
|
-
onClick={
|
|
296
|
+
onClick={handleLogout}
|
|
273
297
|
data-cy="sessionManager-logout-trigger"
|
|
274
298
|
/>
|
|
275
299
|
</MenuList>
|
|
@@ -122,24 +122,25 @@ export default function UserInfo({
|
|
|
122
122
|
</Typography>
|
|
123
123
|
{mode === 'normal' ? null : (
|
|
124
124
|
<Tag
|
|
125
|
+
className="user-info__connected-tag"
|
|
125
126
|
type="primary"
|
|
126
127
|
sx={{
|
|
127
128
|
transform: 'scale(0.85)',
|
|
128
129
|
transformOrigin: 'left',
|
|
129
|
-
color: 'white !important',
|
|
130
130
|
display: 'flex',
|
|
131
131
|
alignItems: 'center',
|
|
132
132
|
}}>
|
|
133
133
|
<Box
|
|
134
|
+
className="user-info__connected-tag__dot"
|
|
134
135
|
sx={{
|
|
135
136
|
mr: 0.75,
|
|
136
137
|
width: 6,
|
|
137
138
|
height: 6,
|
|
138
|
-
backgroundColor:
|
|
139
|
+
backgroundColor: (theme) => theme.palette.text.contrast,
|
|
139
140
|
borderRadius: '100vw',
|
|
140
141
|
}}
|
|
141
142
|
/>
|
|
142
|
-
<Box>DID CONNECTED</Box>
|
|
143
|
+
<Box className="user-info__connected-tag__text">DID CONNECTED</Box>
|
|
143
144
|
</Tag>
|
|
144
145
|
)}
|
|
145
146
|
</Box>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import noop from 'lodash/noop';
|
|
2
2
|
import { useCreation } from 'ahooks';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
|
|
4
5
|
import LoggedIn from './components/logged-in';
|
|
5
6
|
import UnLogin from './components/un-login';
|
|
@@ -13,6 +14,24 @@ export interface SessionUserProps {
|
|
|
13
14
|
size?: number;
|
|
14
15
|
popperType?: 'hover' | 'click';
|
|
15
16
|
profileUrl?: string;
|
|
17
|
+
renderUserButton?: (props: {
|
|
18
|
+
isBlocklet: boolean;
|
|
19
|
+
session: Session;
|
|
20
|
+
locale: Locale;
|
|
21
|
+
size: number;
|
|
22
|
+
popperType: 'hover' | 'click';
|
|
23
|
+
profileUrl?: string;
|
|
24
|
+
dashboardUrl?: string;
|
|
25
|
+
mode?: any;
|
|
26
|
+
avatar: string;
|
|
27
|
+
isInviteEnabled: boolean;
|
|
28
|
+
handleSwitchPassport: () => void;
|
|
29
|
+
handleSwitchAccount: () => void;
|
|
30
|
+
handleSwitchProfile: () => void;
|
|
31
|
+
handleBindWallet: () => void;
|
|
32
|
+
handleOpenInvite: () => void;
|
|
33
|
+
handleLogout: () => void;
|
|
34
|
+
}) => ReactNode;
|
|
16
35
|
}
|
|
17
36
|
|
|
18
37
|
export default function SessionUser({
|
|
@@ -22,6 +41,7 @@ export default function SessionUser({
|
|
|
22
41
|
size = 24,
|
|
23
42
|
popperType = 'click',
|
|
24
43
|
profileUrl = PROFILE_URL,
|
|
44
|
+
renderUserButton = undefined,
|
|
25
45
|
}: SessionUserProps) {
|
|
26
46
|
const isBlocklet = useCreation(() => {
|
|
27
47
|
return !!globalThis?.blocklet;
|
|
@@ -40,6 +60,7 @@ export default function SessionUser({
|
|
|
40
60
|
popperType={popperType}
|
|
41
61
|
profileUrl={profileUrl}
|
|
42
62
|
mode={mode}
|
|
63
|
+
renderUserButton={renderUserButton}
|
|
43
64
|
/>
|
|
44
65
|
);
|
|
45
66
|
}
|