@arcblock/ux 2.9.7 → 2.9.9
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/es/BlockletContext/index.js +7 -4
- package/es/SessionBlocklet/index.js +1 -1
- package/es/SessionUser/components/session-user-item.js +20 -16
- package/es/SessionUser/components/session-user-switch.js +1 -0
- package/es/SessionUser/components/user-info.js +6 -4
- package/es/SessionUser/libs/utils.js +27 -2
- package/lib/BlockletContext/index.js +7 -4
- package/lib/SessionBlocklet/index.js +1 -1
- package/lib/SessionUser/components/session-user-item.js +19 -15
- package/lib/SessionUser/components/session-user-switch.js +1 -0
- package/lib/SessionUser/components/user-info.js +5 -3
- package/lib/SessionUser/libs/utils.js +36 -9
- package/package.json +4 -4
- package/src/BlockletContext/index.jsx +4 -2
- package/src/SessionBlocklet/index.jsx +1 -1
- package/src/SessionUser/components/session-user-item.jsx +14 -9
- package/src/SessionUser/components/session-user-switch.jsx +1 -0
- package/src/SessionUser/components/user-info.jsx +7 -4
- package/src/SessionUser/libs/utils.js +33 -3
|
@@ -17,7 +17,8 @@ const {
|
|
|
17
17
|
*/
|
|
18
18
|
function BlockletProvider({
|
|
19
19
|
children,
|
|
20
|
-
baseUrl
|
|
20
|
+
baseUrl,
|
|
21
|
+
loading
|
|
21
22
|
}) {
|
|
22
23
|
const [blockletData, setBlockletData] = useState(null);
|
|
23
24
|
const getBlockleData = useMemoizedFn(async () => {
|
|
@@ -43,7 +44,7 @@ function BlockletProvider({
|
|
|
43
44
|
}, [baseUrl]);
|
|
44
45
|
return /*#__PURE__*/_jsx(Provider, {
|
|
45
46
|
value: blockletData,
|
|
46
|
-
children: blockletData ? children : null
|
|
47
|
+
children: blockletData ? children : loading || null
|
|
47
48
|
});
|
|
48
49
|
}
|
|
49
50
|
function useBlockletContext() {
|
|
@@ -54,9 +55,11 @@ function useBlockletContext() {
|
|
|
54
55
|
}
|
|
55
56
|
BlockletProvider.propTypes = {
|
|
56
57
|
baseUrl: PropTypes.string,
|
|
57
|
-
children: PropTypes.any.isRequired
|
|
58
|
+
children: PropTypes.any.isRequired,
|
|
59
|
+
loading: PropTypes.any
|
|
58
60
|
};
|
|
59
61
|
BlockletProvider.defaultProps = {
|
|
60
|
-
baseUrl: ''
|
|
62
|
+
baseUrl: '',
|
|
63
|
+
loading: null
|
|
61
64
|
};
|
|
62
65
|
export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };
|
|
@@ -39,7 +39,7 @@ export default function SessionBlocklet({
|
|
|
39
39
|
const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
|
|
40
40
|
currentState.open = value;
|
|
41
41
|
});
|
|
42
|
-
if (sessionMenuList.length === 0) {
|
|
42
|
+
if (sessionMenuList.length === 0 || !session?.user) {
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
45
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -8,11 +8,12 @@ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
|
|
|
8
8
|
import LanguageIcon from '@iconify-icons/material-symbols/language';
|
|
9
9
|
import LensIcon from '@iconify-icons/material-symbols/lens';
|
|
10
10
|
import AndroidIcon from '@iconify-icons/material-symbols/android';
|
|
11
|
+
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
|
|
11
12
|
import Auth0Icon from '@iconify-icons/logos/auth0-icon';
|
|
12
13
|
import Avatar from '../../Avatar';
|
|
13
14
|
import DID from '../../DID';
|
|
14
15
|
import { temp as colors } from '../../Colors';
|
|
15
|
-
import {
|
|
16
|
+
import { getWalletDid } from '../libs/utils';
|
|
16
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
19
|
const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
@@ -21,8 +22,16 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
21
22
|
active,
|
|
22
23
|
...rest
|
|
23
24
|
}, ref) => {
|
|
24
|
-
const
|
|
25
|
+
const walletDid = getWalletDid(sessionItem?.user);
|
|
25
26
|
const walletIcon = useCreation(() => {
|
|
27
|
+
if (sessionItem.__isDefault) {
|
|
28
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
29
|
+
icon: QuestionMarkRoundedIcon,
|
|
30
|
+
style: {
|
|
31
|
+
color: 'transparent'
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
26
35
|
const {
|
|
27
36
|
walletOS,
|
|
28
37
|
provider
|
|
@@ -30,28 +39,24 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
30
39
|
if (provider === 'auth0') {
|
|
31
40
|
return /*#__PURE__*/_jsx(Icon, {
|
|
32
41
|
icon: Auth0Icon,
|
|
33
|
-
width: 10,
|
|
34
|
-
height: 10,
|
|
35
42
|
style: {
|
|
36
|
-
color: 'black'
|
|
43
|
+
color: 'black',
|
|
44
|
+
transform: 'scale(0.85)'
|
|
37
45
|
}
|
|
38
46
|
});
|
|
39
47
|
}
|
|
40
48
|
if (walletOS === 'ios') {
|
|
41
49
|
return /*#__PURE__*/_jsx(Icon, {
|
|
42
50
|
icon: IOSRoundedIcon,
|
|
43
|
-
width: 16,
|
|
44
|
-
height: 16,
|
|
45
51
|
style: {
|
|
46
|
-
color: 'black'
|
|
52
|
+
color: 'black',
|
|
53
|
+
transform: 'scale(1.1)'
|
|
47
54
|
}
|
|
48
55
|
});
|
|
49
56
|
}
|
|
50
57
|
if (walletOS === 'android') {
|
|
51
58
|
return /*#__PURE__*/_jsx(Icon, {
|
|
52
59
|
icon: AndroidIcon,
|
|
53
|
-
width: 14,
|
|
54
|
-
height: 14,
|
|
55
60
|
style: {
|
|
56
61
|
color: 'black'
|
|
57
62
|
}
|
|
@@ -68,10 +73,9 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
68
73
|
if (walletOS === 'api') {
|
|
69
74
|
return /*#__PURE__*/_jsx(Icon, {
|
|
70
75
|
icon: ApiIcon,
|
|
71
|
-
width: 14,
|
|
72
|
-
height: 14,
|
|
73
76
|
style: {
|
|
74
|
-
color: 'black'
|
|
77
|
+
color: 'black',
|
|
78
|
+
transform: 'scale(1.05)'
|
|
75
79
|
}
|
|
76
80
|
});
|
|
77
81
|
}
|
|
@@ -110,8 +114,8 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
110
114
|
did: sessionItem.userDid,
|
|
111
115
|
size: 36
|
|
112
116
|
})
|
|
113
|
-
}), walletIcon,
|
|
114
|
-
did:
|
|
117
|
+
}), walletIcon, walletDid ? /*#__PURE__*/_jsx(DID, {
|
|
118
|
+
did: walletDid,
|
|
115
119
|
copyable: false,
|
|
116
120
|
size: 14,
|
|
117
121
|
responsive: false,
|
|
@@ -119,7 +123,7 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
119
123
|
sx: {
|
|
120
124
|
lineHeight: 1
|
|
121
125
|
}
|
|
122
|
-
}) : /*#__PURE__*/_jsx(Typography, {
|
|
126
|
+
}) : sessionItem.user.email && /*#__PURE__*/_jsx(Typography, {
|
|
123
127
|
sx: {
|
|
124
128
|
fontSize: 14
|
|
125
129
|
},
|
|
@@ -42,6 +42,7 @@ export default function SessionUserSwitch({
|
|
|
42
42
|
return matchSession;
|
|
43
43
|
}
|
|
44
44
|
return {
|
|
45
|
+
__isDefault: true,
|
|
45
46
|
appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
|
|
46
47
|
appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
|
|
47
48
|
userDid: session?.user?.did,
|
|
@@ -9,7 +9,7 @@ import DidAvatar from '../../Avatar';
|
|
|
9
9
|
import { getUserAvatar } from '../../Util';
|
|
10
10
|
import SessionUserSwitch from './session-user-switch';
|
|
11
11
|
import { temp as colors } from '../../Colors';
|
|
12
|
-
import {
|
|
12
|
+
import { getWallet } from '../libs/utils';
|
|
13
13
|
import { translations } from '../libs/translation';
|
|
14
14
|
import { translate } from '../../Locale/util';
|
|
15
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -28,7 +28,9 @@ export default function UserInfo({
|
|
|
28
28
|
});
|
|
29
29
|
const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
|
|
30
30
|
const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
|
|
31
|
-
const
|
|
31
|
+
const hasBindWallet = useCreation(() => {
|
|
32
|
+
return getWallet(session?.user);
|
|
33
|
+
}, [session?.user]);
|
|
32
34
|
return /*#__PURE__*/_jsxs(Box, {
|
|
33
35
|
sx: {
|
|
34
36
|
p: 2,
|
|
@@ -123,7 +125,7 @@ export default function UserInfo({
|
|
|
123
125
|
onSwitch: onSwitchAccount,
|
|
124
126
|
isBlocklet: isBlocklet,
|
|
125
127
|
locale: locale
|
|
126
|
-
}),
|
|
128
|
+
}), !hasBindWallet ? /*#__PURE__*/_jsxs(Box, {
|
|
127
129
|
sx: {
|
|
128
130
|
color: colors.primaryBase,
|
|
129
131
|
backgroundColor: colors.surfacePrimarySubtitle,
|
|
@@ -144,7 +146,7 @@ export default function UserInfo({
|
|
|
144
146
|
color: colors.primaryBase,
|
|
145
147
|
fontSize: 16
|
|
146
148
|
})]
|
|
147
|
-
})]
|
|
149
|
+
}) : null]
|
|
148
150
|
});
|
|
149
151
|
}
|
|
150
152
|
UserInfo.propTypes = {
|
|
@@ -1,4 +1,29 @@
|
|
|
1
|
-
export const getSourceProvider = user => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
|
|
2
1
|
export const getSourceAppPid = user => user?.sourceAppPid;
|
|
3
2
|
export const getCurrentAppPid = user => user?.sourceAppPid || window?.blocklet?.appPid;
|
|
4
|
-
export
|
|
3
|
+
export function getPermanentDid(user) {
|
|
4
|
+
return user?.did;
|
|
5
|
+
}
|
|
6
|
+
export function getConnectedAccounts(user) {
|
|
7
|
+
return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
|
|
8
|
+
}
|
|
9
|
+
export function getSourceProvider(user) {
|
|
10
|
+
return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
|
|
11
|
+
}
|
|
12
|
+
export function getSourceProviders(user) {
|
|
13
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
14
|
+
return connectedAccounts.map(item => item.provider);
|
|
15
|
+
}
|
|
16
|
+
export function getConnectedDids(user) {
|
|
17
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
18
|
+
const didList = connectedAccounts.map(item => item.did);
|
|
19
|
+
return didList;
|
|
20
|
+
}
|
|
21
|
+
export function getWallet(user) {
|
|
22
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
23
|
+
const walletAccount = connectedAccounts.find(item => item.provider === 'wallet');
|
|
24
|
+
return walletAccount;
|
|
25
|
+
}
|
|
26
|
+
export function getWalletDid(user) {
|
|
27
|
+
const walletAccount = getWallet(user);
|
|
28
|
+
return walletAccount?.did;
|
|
29
|
+
}
|
|
@@ -29,7 +29,8 @@ exports.BlockletConsumer = Consumer;
|
|
|
29
29
|
function BlockletProvider(_ref) {
|
|
30
30
|
let {
|
|
31
31
|
children,
|
|
32
|
-
baseUrl
|
|
32
|
+
baseUrl,
|
|
33
|
+
loading
|
|
33
34
|
} = _ref;
|
|
34
35
|
const [blockletData, setBlockletData] = (0, _react.useState)(null);
|
|
35
36
|
const getBlockleData = (0, _ahooks.useMemoizedFn)(async () => {
|
|
@@ -55,7 +56,7 @@ function BlockletProvider(_ref) {
|
|
|
55
56
|
}, [baseUrl]);
|
|
56
57
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
|
|
57
58
|
value: blockletData,
|
|
58
|
-
children: blockletData ? children : null
|
|
59
|
+
children: blockletData ? children : loading || null
|
|
59
60
|
});
|
|
60
61
|
}
|
|
61
62
|
function useBlockletContext() {
|
|
@@ -66,8 +67,10 @@ function useBlockletContext() {
|
|
|
66
67
|
}
|
|
67
68
|
BlockletProvider.propTypes = {
|
|
68
69
|
baseUrl: _propTypes.default.string,
|
|
69
|
-
children: _propTypes.default.any.isRequired
|
|
70
|
+
children: _propTypes.default.any.isRequired,
|
|
71
|
+
loading: _propTypes.default.any
|
|
70
72
|
};
|
|
71
73
|
BlockletProvider.defaultProps = {
|
|
72
|
-
baseUrl: ''
|
|
74
|
+
baseUrl: '',
|
|
75
|
+
loading: null
|
|
73
76
|
};
|
|
@@ -52,7 +52,7 @@ function SessionBlocklet(_ref) {
|
|
|
52
52
|
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !currentState.open;
|
|
53
53
|
currentState.open = value;
|
|
54
54
|
});
|
|
55
|
-
if (sessionMenuList.length === 0) {
|
|
55
|
+
if (sessionMenuList.length === 0 || !(session !== null && session !== void 0 && session.user)) {
|
|
56
56
|
return null;
|
|
57
57
|
}
|
|
58
58
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
@@ -14,6 +14,7 @@ var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbol
|
|
|
14
14
|
var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
|
|
15
15
|
var _lens = _interopRequireDefault(require("@iconify-icons/material-symbols/lens"));
|
|
16
16
|
var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
|
|
17
|
+
var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
|
|
17
18
|
var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
|
|
18
19
|
var _Avatar = _interopRequireDefault(require("../../Avatar"));
|
|
19
20
|
var _DID = _interopRequireDefault(require("../../DID"));
|
|
@@ -37,8 +38,16 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
37
38
|
active
|
|
38
39
|
} = _ref,
|
|
39
40
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
40
|
-
const
|
|
41
|
+
const walletDid = (0, _utils.getWalletDid)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user);
|
|
41
42
|
const walletIcon = (0, _ahooks.useCreation)(() => {
|
|
43
|
+
if (sessionItem.__isDefault) {
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
45
|
+
icon: _questionMarkRounded.default,
|
|
46
|
+
style: {
|
|
47
|
+
color: 'transparent'
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
}
|
|
42
51
|
const {
|
|
43
52
|
walletOS,
|
|
44
53
|
provider
|
|
@@ -46,28 +55,24 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
46
55
|
if (provider === 'auth0') {
|
|
47
56
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
48
57
|
icon: _auth0Icon.default,
|
|
49
|
-
width: 10,
|
|
50
|
-
height: 10,
|
|
51
58
|
style: {
|
|
52
|
-
color: 'black'
|
|
59
|
+
color: 'black',
|
|
60
|
+
transform: 'scale(0.85)'
|
|
53
61
|
}
|
|
54
62
|
});
|
|
55
63
|
}
|
|
56
64
|
if (walletOS === 'ios') {
|
|
57
65
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
58
66
|
icon: _iosRounded.default,
|
|
59
|
-
width: 16,
|
|
60
|
-
height: 16,
|
|
61
67
|
style: {
|
|
62
|
-
color: 'black'
|
|
68
|
+
color: 'black',
|
|
69
|
+
transform: 'scale(1.1)'
|
|
63
70
|
}
|
|
64
71
|
});
|
|
65
72
|
}
|
|
66
73
|
if (walletOS === 'android') {
|
|
67
74
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
68
75
|
icon: _android.default,
|
|
69
|
-
width: 14,
|
|
70
|
-
height: 14,
|
|
71
76
|
style: {
|
|
72
77
|
color: 'black'
|
|
73
78
|
}
|
|
@@ -84,10 +89,9 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
84
89
|
if (walletOS === 'api') {
|
|
85
90
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
86
91
|
icon: _api.default,
|
|
87
|
-
width: 14,
|
|
88
|
-
height: 14,
|
|
89
92
|
style: {
|
|
90
|
-
color: 'black'
|
|
93
|
+
color: 'black',
|
|
94
|
+
transform: 'scale(1.05)'
|
|
91
95
|
}
|
|
92
96
|
});
|
|
93
97
|
}
|
|
@@ -124,8 +128,8 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
124
128
|
did: sessionItem.userDid,
|
|
125
129
|
size: 36
|
|
126
130
|
})
|
|
127
|
-
}), walletIcon,
|
|
128
|
-
did:
|
|
131
|
+
}), walletIcon, walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
|
|
132
|
+
did: walletDid,
|
|
129
133
|
copyable: false,
|
|
130
134
|
size: 14,
|
|
131
135
|
responsive: false,
|
|
@@ -133,7 +137,7 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
133
137
|
sx: {
|
|
134
138
|
lineHeight: 1
|
|
135
139
|
}
|
|
136
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
140
|
+
}) : sessionItem.user.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
137
141
|
sx: {
|
|
138
142
|
fontSize: 14
|
|
139
143
|
},
|
|
@@ -58,6 +58,7 @@ function SessionUserSwitch(_ref) {
|
|
|
58
58
|
return matchSession;
|
|
59
59
|
}
|
|
60
60
|
return {
|
|
61
|
+
__isDefault: true,
|
|
61
62
|
appName: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet2 = globalThis.blocklet) === null || _globalThis$blocklet2 === void 0 ? void 0 : _globalThis$blocklet2.appName) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env = globalThis.env) === null || _globalThis$env === void 0 ? void 0 : _globalThis$env.appName),
|
|
62
63
|
appPid: (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$blocklet3 = globalThis.blocklet) === null || _globalThis$blocklet3 === void 0 ? void 0 : _globalThis$blocklet3.appPid) || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$env2 = globalThis.env) === null || _globalThis$env2 === void 0 ? void 0 : _globalThis$env2.appPid),
|
|
63
64
|
userDid: session === null || session === void 0 ? void 0 : (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : _session$user2.did,
|
|
@@ -40,7 +40,9 @@ function UserInfo(_ref) {
|
|
|
40
40
|
var _session$user2, _session$user2$passpo;
|
|
41
41
|
return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
|
|
42
42
|
}, [session === null || session === void 0 ? void 0 : (_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.passports, session === null || session === void 0 ? void 0 : (_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role]);
|
|
43
|
-
const
|
|
43
|
+
const hasBindWallet = (0, _ahooks.useCreation)(() => {
|
|
44
|
+
return (0, _utils.getWallet)(session === null || session === void 0 ? void 0 : session.user);
|
|
45
|
+
}, [session === null || session === void 0 ? void 0 : session.user]);
|
|
44
46
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
|
|
45
47
|
sx: {
|
|
46
48
|
p: 2,
|
|
@@ -135,7 +137,7 @@ function UserInfo(_ref) {
|
|
|
135
137
|
onSwitch: onSwitchAccount,
|
|
136
138
|
isBlocklet: isBlocklet,
|
|
137
139
|
locale: locale
|
|
138
|
-
}),
|
|
140
|
+
}), !hasBindWallet ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
|
|
139
141
|
sx: {
|
|
140
142
|
color: _Colors.temp.primaryBase,
|
|
141
143
|
backgroundColor: _Colors.temp.surfacePrimarySubtitle,
|
|
@@ -156,7 +158,7 @@ function UserInfo(_ref) {
|
|
|
156
158
|
color: _Colors.temp.primaryBase,
|
|
157
159
|
fontSize: 16
|
|
158
160
|
})]
|
|
159
|
-
})]
|
|
161
|
+
}) : null]
|
|
160
162
|
});
|
|
161
163
|
}
|
|
162
164
|
UserInfo.propTypes = {
|
|
@@ -3,12 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
exports.getConnectedAccounts = getConnectedAccounts;
|
|
7
|
+
exports.getConnectedDids = getConnectedDids;
|
|
8
|
+
exports.getCurrentAppPid = void 0;
|
|
9
|
+
exports.getPermanentDid = getPermanentDid;
|
|
10
|
+
exports.getSourceAppPid = void 0;
|
|
11
11
|
exports.getSourceProvider = getSourceProvider;
|
|
12
|
+
exports.getSourceProviders = getSourceProviders;
|
|
13
|
+
exports.getWallet = getWallet;
|
|
14
|
+
exports.getWalletDid = getWalletDid;
|
|
12
15
|
const getSourceAppPid = user => user === null || user === void 0 ? void 0 : user.sourceAppPid;
|
|
13
16
|
exports.getSourceAppPid = getSourceAppPid;
|
|
14
17
|
const getCurrentAppPid = user => {
|
|
@@ -16,8 +19,32 @@ const getCurrentAppPid = user => {
|
|
|
16
19
|
return (user === null || user === void 0 ? void 0 : user.sourceAppPid) || ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.appPid);
|
|
17
20
|
};
|
|
18
21
|
exports.getCurrentAppPid = getCurrentAppPid;
|
|
19
|
-
|
|
22
|
+
function getPermanentDid(user) {
|
|
23
|
+
return user === null || user === void 0 ? void 0 : user.did;
|
|
24
|
+
}
|
|
25
|
+
function getConnectedAccounts(user) {
|
|
26
|
+
var _user$extraConfigs;
|
|
27
|
+
return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.connectedAccounts) || [];
|
|
28
|
+
}
|
|
29
|
+
function getSourceProvider(user) {
|
|
20
30
|
var _user$extraConfigs2;
|
|
21
|
-
return (user === null || user === void 0 ? void 0 : user.
|
|
22
|
-
}
|
|
23
|
-
|
|
31
|
+
return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.sourceProvider) || 'wallet';
|
|
32
|
+
}
|
|
33
|
+
function getSourceProviders(user) {
|
|
34
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
35
|
+
return connectedAccounts.map(item => item.provider);
|
|
36
|
+
}
|
|
37
|
+
function getConnectedDids(user) {
|
|
38
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
39
|
+
const didList = connectedAccounts.map(item => item.did);
|
|
40
|
+
return didList;
|
|
41
|
+
}
|
|
42
|
+
function getWallet(user) {
|
|
43
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
44
|
+
const walletAccount = connectedAccounts.find(item => item.provider === 'wallet');
|
|
45
|
+
return walletAccount;
|
|
46
|
+
}
|
|
47
|
+
function getWalletDid(user) {
|
|
48
|
+
const walletAccount = getWallet(user);
|
|
49
|
+
return walletAccount === null || walletAccount === void 0 ? void 0 : walletAccount.did;
|
|
50
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.9",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -340,11 +340,11 @@
|
|
|
340
340
|
"peerDependencies": {
|
|
341
341
|
"react": ">=18.1.0"
|
|
342
342
|
},
|
|
343
|
-
"gitHead": "
|
|
343
|
+
"gitHead": "518ea493a3b47e8411ea1e9045a9ad14d453eb3c",
|
|
344
344
|
"dependencies": {
|
|
345
345
|
"@arcblock/did-motif": "^1.1.13",
|
|
346
|
-
"@arcblock/icons": "^2.9.
|
|
347
|
-
"@arcblock/react-hooks": "^2.9.
|
|
346
|
+
"@arcblock/icons": "^2.9.9",
|
|
347
|
+
"@arcblock/react-hooks": "^2.9.9",
|
|
348
348
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
349
349
|
"@emotion/react": "^11.10.4",
|
|
350
350
|
"@emotion/styled": "^11.10.4",
|
|
@@ -13,7 +13,7 @@ const { Provider, Consumer } = BlockletContext;
|
|
|
13
13
|
* @param {any} props.children
|
|
14
14
|
* @returns
|
|
15
15
|
*/
|
|
16
|
-
function BlockletProvider({ children, baseUrl }) {
|
|
16
|
+
function BlockletProvider({ children, baseUrl, loading }) {
|
|
17
17
|
const [blockletData, setBlockletData] = useState(null);
|
|
18
18
|
const getBlockleData = useMemoizedFn(async () => {
|
|
19
19
|
if (!baseUrl || window.location.href.startsWith(baseUrl)) {
|
|
@@ -37,7 +37,7 @@ function BlockletProvider({ children, baseUrl }) {
|
|
|
37
37
|
}
|
|
38
38
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
39
|
}, [baseUrl]);
|
|
40
|
-
return <Provider value={blockletData}>{blockletData ? children : null}</Provider>;
|
|
40
|
+
return <Provider value={blockletData}>{blockletData ? children : loading || null}</Provider>;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
function useBlockletContext() {
|
|
@@ -48,9 +48,11 @@ function useBlockletContext() {
|
|
|
48
48
|
BlockletProvider.propTypes = {
|
|
49
49
|
baseUrl: PropTypes.string,
|
|
50
50
|
children: PropTypes.any.isRequired,
|
|
51
|
+
loading: PropTypes.any,
|
|
51
52
|
};
|
|
52
53
|
BlockletProvider.defaultProps = {
|
|
53
54
|
baseUrl: '',
|
|
55
|
+
loading: null,
|
|
54
56
|
};
|
|
55
57
|
|
|
56
58
|
export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };
|
|
@@ -8,31 +8,36 @@ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
|
|
|
8
8
|
import LanguageIcon from '@iconify-icons/material-symbols/language';
|
|
9
9
|
import LensIcon from '@iconify-icons/material-symbols/lens';
|
|
10
10
|
import AndroidIcon from '@iconify-icons/material-symbols/android';
|
|
11
|
+
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
|
|
11
12
|
import Auth0Icon from '@iconify-icons/logos/auth0-icon';
|
|
12
13
|
|
|
13
14
|
import Avatar from '../../Avatar';
|
|
14
15
|
import DID from '../../DID';
|
|
15
16
|
import { temp as colors } from '../../Colors';
|
|
16
|
-
import {
|
|
17
|
+
import { getWalletDid } from '../libs/utils';
|
|
17
18
|
|
|
18
19
|
const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
|
|
19
|
-
const
|
|
20
|
+
const walletDid = getWalletDid(sessionItem?.user);
|
|
20
21
|
const walletIcon = useCreation(() => {
|
|
22
|
+
if (sessionItem.__isDefault) {
|
|
23
|
+
return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
const { walletOS, provider } = sessionItem?.extra || {};
|
|
22
27
|
if (provider === 'auth0') {
|
|
23
|
-
return <Icon icon={Auth0Icon}
|
|
28
|
+
return <Icon icon={Auth0Icon} style={{ color: 'black', transform: 'scale(0.85)' }} />;
|
|
24
29
|
}
|
|
25
30
|
if (walletOS === 'ios') {
|
|
26
|
-
return <Icon icon={IOSRoundedIcon}
|
|
31
|
+
return <Icon icon={IOSRoundedIcon} style={{ color: 'black', transform: 'scale(1.1)' }} />;
|
|
27
32
|
}
|
|
28
33
|
if (walletOS === 'android') {
|
|
29
|
-
return <Icon icon={AndroidIcon}
|
|
34
|
+
return <Icon icon={AndroidIcon} style={{ color: 'black' }} />;
|
|
30
35
|
}
|
|
31
36
|
if (walletOS === 'web') {
|
|
32
37
|
return <Icon icon={LanguageIcon} style={{ color: 'black' }} />;
|
|
33
38
|
}
|
|
34
39
|
if (walletOS === 'api') {
|
|
35
|
-
return <Icon icon={ApiIcon}
|
|
40
|
+
return <Icon icon={ApiIcon} style={{ color: 'black', transform: 'scale(1.05)' }} />;
|
|
36
41
|
}
|
|
37
42
|
return null;
|
|
38
43
|
}, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
|
|
@@ -66,10 +71,10 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
|
|
|
66
71
|
<Avatar did={sessionItem.userDid} size={36} />
|
|
67
72
|
</Box>
|
|
68
73
|
{walletIcon}
|
|
69
|
-
{
|
|
70
|
-
<DID did={
|
|
74
|
+
{walletDid ? (
|
|
75
|
+
<DID did={walletDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
|
|
71
76
|
) : (
|
|
72
|
-
<Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
|
|
77
|
+
sessionItem.user.email && <Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
|
|
73
78
|
)}
|
|
74
79
|
</Box>
|
|
75
80
|
{statusContent ||
|
|
@@ -52,6 +52,7 @@ export default function SessionUserSwitch({ session, onSwitch, isBlocklet, local
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
return {
|
|
55
|
+
__isDefault: true,
|
|
55
56
|
appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
|
|
56
57
|
appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
|
|
57
58
|
userDid: session?.user?.did,
|
|
@@ -10,7 +10,7 @@ import DidAvatar from '../../Avatar';
|
|
|
10
10
|
import { getUserAvatar } from '../../Util';
|
|
11
11
|
import SessionUserSwitch from './session-user-switch';
|
|
12
12
|
import { temp as colors } from '../../Colors';
|
|
13
|
-
import {
|
|
13
|
+
import { getWallet } from '../libs/utils';
|
|
14
14
|
import { translations } from '../libs/translation';
|
|
15
15
|
import { translate } from '../../Locale/util';
|
|
16
16
|
|
|
@@ -31,7 +31,10 @@ export default function UserInfo({
|
|
|
31
31
|
() => session.user?.passports?.find((item) => item.name === session.user.role),
|
|
32
32
|
[session?.user?.passports, session?.user?.role]
|
|
33
33
|
);
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
const hasBindWallet = useCreation(() => {
|
|
36
|
+
return getWallet(session?.user);
|
|
37
|
+
}, [session?.user]);
|
|
35
38
|
|
|
36
39
|
return (
|
|
37
40
|
<Box
|
|
@@ -123,7 +126,7 @@ export default function UserInfo({
|
|
|
123
126
|
/>
|
|
124
127
|
</Box>
|
|
125
128
|
<SessionUserSwitch session={session} onSwitch={onSwitchAccount} isBlocklet={isBlocklet} locale={locale} />
|
|
126
|
-
{
|
|
129
|
+
{!hasBindWallet ? (
|
|
127
130
|
<Box
|
|
128
131
|
sx={{
|
|
129
132
|
color: colors.primaryBase,
|
|
@@ -143,7 +146,7 @@ export default function UserInfo({
|
|
|
143
146
|
{t('connectDIDWallet')}
|
|
144
147
|
<Icon icon={ArrowRightAltRoundedIcon} color={colors.primaryBase} fontSize={16} />
|
|
145
148
|
</Box>
|
|
146
|
-
)}
|
|
149
|
+
) : null}
|
|
147
150
|
</Box>
|
|
148
151
|
);
|
|
149
152
|
}
|
|
@@ -1,7 +1,37 @@
|
|
|
1
|
-
export const getSourceProvider = (user) => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
|
|
2
|
-
|
|
3
1
|
export const getSourceAppPid = (user) => user?.sourceAppPid;
|
|
4
2
|
|
|
5
3
|
export const getCurrentAppPid = (user) => user?.sourceAppPid || window?.blocklet?.appPid;
|
|
6
4
|
|
|
7
|
-
export
|
|
5
|
+
export function getPermanentDid(user) {
|
|
6
|
+
return user?.did;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export function getConnectedAccounts(user) {
|
|
10
|
+
return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function getSourceProvider(user) {
|
|
14
|
+
return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function getSourceProviders(user) {
|
|
18
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
19
|
+
return connectedAccounts.map((item) => item.provider);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export function getConnectedDids(user) {
|
|
23
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
24
|
+
const didList = connectedAccounts.map((item) => item.did);
|
|
25
|
+
return didList;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export function getWallet(user) {
|
|
29
|
+
const connectedAccounts = getConnectedAccounts(user);
|
|
30
|
+
const walletAccount = connectedAccounts.find((item) => item.provider === 'wallet');
|
|
31
|
+
return walletAccount;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export function getWalletDid(user) {
|
|
35
|
+
const walletAccount = getWallet(user);
|
|
36
|
+
return walletAccount?.did;
|
|
37
|
+
}
|