@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.
@@ -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 { getSourceProvider } from '../libs/utils';
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 isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
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, isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
114
- did: sessionItem.userDid,
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 { getSourceProvider } from '../libs/utils';
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 isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
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
- }), isRawWalletAccount ? null : /*#__PURE__*/_jsxs(Box, {
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 const getConnectedAccounts = user => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
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 isRawWalletAccount = (0, _utils.getSourceProvider)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user) === 'wallet';
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, isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
128
- did: sessionItem.userDid,
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 isRawWalletAccount = (0, _utils.getSourceProvider)(session.user) === 'wallet';
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
- }), isRawWalletAccount ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
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.getSourceProvider = exports.getSourceAppPid = exports.getCurrentAppPid = exports.getConnectedAccounts = void 0;
7
- const getSourceProvider = user => {
8
- var _user$extraConfigs;
9
- return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.sourceProvider) || 'wallet';
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
- const getConnectedAccounts = user => {
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.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.connectedAccounts) || [];
22
- };
23
- exports.getConnectedAccounts = getConnectedAccounts;
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.7",
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": "362c78d98c51f7f4297f019cf2a01c2dae919870",
343
+ "gitHead": "518ea493a3b47e8411ea1e9045a9ad14d453eb3c",
344
344
  "dependencies": {
345
345
  "@arcblock/did-motif": "^1.1.13",
346
- "@arcblock/icons": "^2.9.7",
347
- "@arcblock/react-hooks": "^2.9.7",
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 };
@@ -48,7 +48,7 @@ export default function SessionBlocklet({ session, locale, size }) {
48
48
  currentState.open = value;
49
49
  });
50
50
 
51
- if (sessionMenuList.length === 0) {
51
+ if (sessionMenuList.length === 0 || !session?.user) {
52
52
  return null;
53
53
  }
54
54
 
@@ -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 { getSourceProvider } from '../libs/utils';
17
+ import { getWalletDid } from '../libs/utils';
17
18
 
18
19
  const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
19
- const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
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} width={10} height={10} style={{ color: 'black' }} />;
28
+ return <Icon icon={Auth0Icon} style={{ color: 'black', transform: 'scale(0.85)' }} />;
24
29
  }
25
30
  if (walletOS === 'ios') {
26
- return <Icon icon={IOSRoundedIcon} width={16} height={16} style={{ color: 'black' }} />;
31
+ return <Icon icon={IOSRoundedIcon} style={{ color: 'black', transform: 'scale(1.1)' }} />;
27
32
  }
28
33
  if (walletOS === 'android') {
29
- return <Icon icon={AndroidIcon} width={14} height={14} style={{ color: 'black' }} />;
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} width={14} height={14} style={{ color: 'black' }} />;
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
- {isRawWalletAccount ? (
70
- <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
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 { getSourceProvider } from '../libs/utils';
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
- const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
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
- {isRawWalletAccount ? null : (
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 const getConnectedAccounts = (user) => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
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
+ }