@arcblock/ux 2.9.44 → 2.9.46
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/Layout/dashboard/index.js +7 -1
- package/es/SessionUser/components/session-user-item.js +6 -66
- package/es/WalletOSIcon/index.js +80 -0
- package/lib/Layout/dashboard/index.js +2 -2
- package/lib/SessionUser/components/session-user-item.js +6 -66
- package/lib/WalletOSIcon/index.js +88 -0
- package/package.json +9 -5
- package/src/Layout/dashboard/index.js +7 -1
- package/src/SessionUser/components/session-user-item.jsx +6 -31
- package/src/WalletOSIcon/index.jsx +45 -0
|
@@ -123,7 +123,7 @@ function Dashboard({
|
|
|
123
123
|
children: [/*#__PURE__*/_jsx(Hidden, {
|
|
124
124
|
mdDown: true,
|
|
125
125
|
children: !!links?.length && sidebarVisible && /*#__PURE__*/_jsx(Box, {
|
|
126
|
-
className:
|
|
126
|
+
className: ['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' '),
|
|
127
127
|
children: /*#__PURE__*/_jsx(Sidebar, {
|
|
128
128
|
links: links,
|
|
129
129
|
dense: _dense
|
|
@@ -208,6 +208,12 @@ const Wrapper = styled('div', {
|
|
|
208
208
|
overflow-y: auto;
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
|
+
.dashboard-sidebar-padding {
|
|
212
|
+
&:hover {
|
|
213
|
+
padding-left: 15px;
|
|
214
|
+
overflow-y: auto;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
211
217
|
.dashboard-main {
|
|
212
218
|
display: flex;
|
|
213
219
|
flex-direction: column;
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Box, IconButton, Typography } from '@mui/material';
|
|
4
|
-
import { useCreation } from 'ahooks';
|
|
5
4
|
import { Icon } from '@iconify/react';
|
|
6
|
-
import ApiIcon from '@iconify-icons/mdi/api';
|
|
7
|
-
import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
|
|
8
|
-
import LanguageIcon from '@iconify-icons/material-symbols/language';
|
|
9
5
|
import LensIcon from '@iconify-icons/material-symbols/lens';
|
|
10
|
-
import
|
|
11
|
-
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
|
|
12
|
-
import Auth0Icon from '@iconify-icons/logos/auth0-icon';
|
|
6
|
+
import WalletOSIcon from '../../WalletOSIcon';
|
|
13
7
|
import Avatar from '../../Avatar';
|
|
14
8
|
import DID from '../../DID';
|
|
15
9
|
import { temp as colors } from '../../Colors';
|
|
@@ -23,64 +17,6 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
23
17
|
...rest
|
|
24
18
|
}, ref) => {
|
|
25
19
|
const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
|
|
26
|
-
const walletIcon = useCreation(() => {
|
|
27
|
-
if (sessionItem.__isDefault) {
|
|
28
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
29
|
-
icon: QuestionMarkRoundedIcon,
|
|
30
|
-
style: {
|
|
31
|
-
color: 'transparent'
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
const {
|
|
36
|
-
walletOS,
|
|
37
|
-
provider
|
|
38
|
-
} = sessionItem?.extra || {};
|
|
39
|
-
if (provider === 'auth0') {
|
|
40
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
41
|
-
icon: Auth0Icon,
|
|
42
|
-
style: {
|
|
43
|
-
color: 'black',
|
|
44
|
-
transform: 'scale(0.85)'
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
if (walletOS === 'ios') {
|
|
49
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
50
|
-
icon: IOSRoundedIcon,
|
|
51
|
-
style: {
|
|
52
|
-
color: 'black',
|
|
53
|
-
transform: 'scale(1.1)'
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
if (walletOS === 'android') {
|
|
58
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
59
|
-
icon: AndroidIcon,
|
|
60
|
-
style: {
|
|
61
|
-
color: 'black'
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
if (walletOS === 'web') {
|
|
66
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
67
|
-
icon: LanguageIcon,
|
|
68
|
-
style: {
|
|
69
|
-
color: 'black'
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
if (walletOS === 'api') {
|
|
74
|
-
return /*#__PURE__*/_jsx(Icon, {
|
|
75
|
-
icon: ApiIcon,
|
|
76
|
-
style: {
|
|
77
|
-
color: 'black',
|
|
78
|
-
transform: 'scale(1.05)'
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
return null;
|
|
83
|
-
}, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
|
|
84
20
|
return /*#__PURE__*/_jsxs(Box, {
|
|
85
21
|
...rest,
|
|
86
22
|
ref: ref,
|
|
@@ -114,7 +50,11 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
|
|
|
114
50
|
did: sessionItem.userDid,
|
|
115
51
|
size: 36
|
|
116
52
|
})
|
|
117
|
-
}),
|
|
53
|
+
}), /*#__PURE__*/_jsx(WalletOSIcon, {
|
|
54
|
+
loading: sessionItem.__isDefault,
|
|
55
|
+
provider: sessionItem?.extra?.provider,
|
|
56
|
+
walletOS: sessionItem?.extra?.walletOS
|
|
57
|
+
}), isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
|
|
118
58
|
did: sessionItem.userDid,
|
|
119
59
|
copyable: false,
|
|
120
60
|
size: 14,
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { Icon } from '@iconify/react';
|
|
3
|
+
import ApiIcon from '@iconify-icons/mdi/api';
|
|
4
|
+
import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
|
|
5
|
+
import LanguageIcon from '@iconify-icons/material-symbols/language';
|
|
6
|
+
import AndroidIcon from '@iconify-icons/material-symbols/android';
|
|
7
|
+
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
|
|
8
|
+
import Auth0Icon from '@iconify-icons/logos/auth0-icon';
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
export default function WalletOSIcon({
|
|
11
|
+
loading,
|
|
12
|
+
walletOS,
|
|
13
|
+
provider,
|
|
14
|
+
color
|
|
15
|
+
}) {
|
|
16
|
+
if (loading) {
|
|
17
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
18
|
+
icon: QuestionMarkRoundedIcon,
|
|
19
|
+
style: {
|
|
20
|
+
color: 'transparent'
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
if (provider === 'auth0') {
|
|
25
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
26
|
+
icon: Auth0Icon,
|
|
27
|
+
style: {
|
|
28
|
+
color,
|
|
29
|
+
transform: 'scale(0.85)'
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
if (walletOS === 'ios') {
|
|
34
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
35
|
+
icon: IOSRoundedIcon,
|
|
36
|
+
style: {
|
|
37
|
+
color,
|
|
38
|
+
transform: 'scale(1.1)'
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
if (walletOS === 'android') {
|
|
43
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
44
|
+
icon: AndroidIcon,
|
|
45
|
+
style: {
|
|
46
|
+
color
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
if (walletOS === 'web') {
|
|
51
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
52
|
+
icon: LanguageIcon,
|
|
53
|
+
style: {
|
|
54
|
+
color
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
if (walletOS === 'api') {
|
|
59
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
60
|
+
icon: ApiIcon,
|
|
61
|
+
style: {
|
|
62
|
+
color,
|
|
63
|
+
transform: 'scale(1.05)'
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
WalletOSIcon.propTypes = {
|
|
70
|
+
loading: PropTypes.bool,
|
|
71
|
+
walletOS: PropTypes.string,
|
|
72
|
+
provider: PropTypes.string,
|
|
73
|
+
color: PropTypes.string
|
|
74
|
+
};
|
|
75
|
+
WalletOSIcon.defaultProps = {
|
|
76
|
+
loading: false,
|
|
77
|
+
walletOS: null,
|
|
78
|
+
provider: null,
|
|
79
|
+
color: 'black'
|
|
80
|
+
};
|
|
@@ -142,7 +142,7 @@ function Dashboard(_ref2) {
|
|
|
142
142
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
|
|
143
143
|
mdDown: true,
|
|
144
144
|
children: !!(links !== null && links !== void 0 && links.length) && sidebarVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
145
|
-
className:
|
|
145
|
+
className: ['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' '),
|
|
146
146
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
|
|
147
147
|
links: links,
|
|
148
148
|
dense: _dense
|
|
@@ -206,7 +206,7 @@ Dashboard.defaultProps = {
|
|
|
206
206
|
};
|
|
207
207
|
const Wrapper = (0, _Theme.styled)('div', {
|
|
208
208
|
shouldForwardProp: prop => prop !== 'sidebarWidth'
|
|
209
|
-
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.dashboard {\n display: flex;\n flex-direction: column;\n height: 100vh;\n }\n .dashboard-body {\n overflow: hidden;\n flex: 1;\n }\n .dashboard-sidebar {\n box-sizing: border-box;\n flex: 0 0 auto;\n width: ", "px;\n overflow: hidden;\n &:hover {\n overflow-y: auto;\n }\n }\n .dashboard-main {\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex: 1;\n position: relative;\n }\n .dashboard-content {\n flex: 1;\n }\n &.dashboard-dense {\n .dashboard-header {\n border-bottom: 1px solid #eee;\n }\n .dashboard-sidebar {\n width: 256px;\n border-right: 1px solid #eee;\n }\n }\n ", " {\n .header-logo {\n display: flex;\n justify-content: center;\n /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n min-width: ", "px;\n }\n &.dashboard-dense {\n .header-logo {\n /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n width: auto;\n }\n }\n }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
|
|
209
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.dashboard {\n display: flex;\n flex-direction: column;\n height: 100vh;\n }\n .dashboard-body {\n overflow: hidden;\n flex: 1;\n }\n .dashboard-sidebar {\n box-sizing: border-box;\n flex: 0 0 auto;\n width: ", "px;\n overflow: hidden;\n &:hover {\n overflow-y: auto;\n }\n }\n .dashboard-sidebar-padding {\n &:hover {\n padding-left: 15px;\n overflow-y: auto;\n }\n }\n .dashboard-main {\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex: 1;\n position: relative;\n }\n .dashboard-content {\n flex: 1;\n }\n &.dashboard-dense {\n .dashboard-header {\n border-bottom: 1px solid #eee;\n }\n .dashboard-sidebar {\n width: 256px;\n border-right: 1px solid #eee;\n }\n }\n ", " {\n .header-logo {\n display: flex;\n justify-content: center;\n /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n min-width: ", "px;\n }\n &.dashboard-dense {\n .header-logo {\n /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n width: auto;\n }\n }\n }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
|
|
210
210
|
const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .header-container {\n max-width: 100%;\n }\n"])));
|
|
211
211
|
|
|
212
212
|
// 兼容旧版 dashboard
|
|
@@ -7,15 +7,9 @@ exports.default = void 0;
|
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _material = require("@mui/material");
|
|
10
|
-
var _ahooks = require("ahooks");
|
|
11
10
|
var _react2 = require("@iconify/react");
|
|
12
|
-
var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
|
|
13
|
-
var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/ios-rounded"));
|
|
14
|
-
var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
|
|
15
11
|
var _lens = _interopRequireDefault(require("@iconify-icons/material-symbols/lens"));
|
|
16
|
-
var
|
|
17
|
-
var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
|
|
18
|
-
var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
|
|
12
|
+
var _WalletOSIcon = _interopRequireDefault(require("../../WalletOSIcon"));
|
|
19
13
|
var _Avatar = _interopRequireDefault(require("../../Avatar"));
|
|
20
14
|
var _DID = _interopRequireDefault(require("../../DID"));
|
|
21
15
|
var _Colors = require("../../Colors");
|
|
@@ -39,64 +33,6 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
39
33
|
} = _ref,
|
|
40
34
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
35
|
const isRawWalletAccount = (0, _utils.getSourceProvider)(sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.user) === 'wallet';
|
|
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
|
-
}
|
|
51
|
-
const {
|
|
52
|
-
walletOS,
|
|
53
|
-
provider
|
|
54
|
-
} = (sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.extra) || {};
|
|
55
|
-
if (provider === 'auth0') {
|
|
56
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
57
|
-
icon: _auth0Icon.default,
|
|
58
|
-
style: {
|
|
59
|
-
color: 'black',
|
|
60
|
-
transform: 'scale(0.85)'
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
if (walletOS === 'ios') {
|
|
65
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
66
|
-
icon: _iosRounded.default,
|
|
67
|
-
style: {
|
|
68
|
-
color: 'black',
|
|
69
|
-
transform: 'scale(1.1)'
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
if (walletOS === 'android') {
|
|
74
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
75
|
-
icon: _android.default,
|
|
76
|
-
style: {
|
|
77
|
-
color: 'black'
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
if (walletOS === 'web') {
|
|
82
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
83
|
-
icon: _language.default,
|
|
84
|
-
style: {
|
|
85
|
-
color: 'black'
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
if (walletOS === 'api') {
|
|
90
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
|
|
91
|
-
icon: _api.default,
|
|
92
|
-
style: {
|
|
93
|
-
color: 'black',
|
|
94
|
-
transform: 'scale(1.05)'
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
return null;
|
|
99
|
-
}, [sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra = sessionItem.extra) === null || _sessionItem$extra === void 0 ? void 0 : _sessionItem$extra.walletOS, sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra2 = sessionItem.extra) === null || _sessionItem$extra2 === void 0 ? void 0 : _sessionItem$extra2.provider]);
|
|
100
36
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, _objectSpread(_objectSpread({}, rest), {}, {
|
|
101
37
|
ref: ref,
|
|
102
38
|
sx: _objectSpread({
|
|
@@ -128,7 +64,11 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
128
64
|
did: sessionItem.userDid,
|
|
129
65
|
size: 36
|
|
130
66
|
})
|
|
131
|
-
}),
|
|
67
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WalletOSIcon.default, {
|
|
68
|
+
loading: sessionItem.__isDefault,
|
|
69
|
+
provider: sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra = sessionItem.extra) === null || _sessionItem$extra === void 0 ? void 0 : _sessionItem$extra.provider,
|
|
70
|
+
walletOS: sessionItem === null || sessionItem === void 0 ? void 0 : (_sessionItem$extra2 = sessionItem.extra) === null || _sessionItem$extra2 === void 0 ? void 0 : _sessionItem$extra2.walletOS
|
|
71
|
+
}), isRawWalletAccount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
|
|
132
72
|
did: sessionItem.userDid,
|
|
133
73
|
copyable: false,
|
|
134
74
|
size: 14,
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = WalletOSIcon;
|
|
7
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = require("@iconify/react");
|
|
9
|
+
var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
|
|
10
|
+
var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/ios-rounded"));
|
|
11
|
+
var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
|
|
12
|
+
var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
|
|
13
|
+
var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
|
|
14
|
+
var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
function WalletOSIcon(_ref) {
|
|
18
|
+
let {
|
|
19
|
+
loading,
|
|
20
|
+
walletOS,
|
|
21
|
+
provider,
|
|
22
|
+
color
|
|
23
|
+
} = _ref;
|
|
24
|
+
if (loading) {
|
|
25
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
|
|
26
|
+
icon: _questionMarkRounded.default,
|
|
27
|
+
style: {
|
|
28
|
+
color: 'transparent'
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
if (provider === 'auth0') {
|
|
33
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
|
|
34
|
+
icon: _auth0Icon.default,
|
|
35
|
+
style: {
|
|
36
|
+
color,
|
|
37
|
+
transform: 'scale(0.85)'
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
if (walletOS === 'ios') {
|
|
42
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
|
|
43
|
+
icon: _iosRounded.default,
|
|
44
|
+
style: {
|
|
45
|
+
color,
|
|
46
|
+
transform: 'scale(1.1)'
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
if (walletOS === 'android') {
|
|
51
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
|
|
52
|
+
icon: _android.default,
|
|
53
|
+
style: {
|
|
54
|
+
color
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
if (walletOS === 'web') {
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
|
|
60
|
+
icon: _language.default,
|
|
61
|
+
style: {
|
|
62
|
+
color
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
if (walletOS === 'api') {
|
|
67
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
|
|
68
|
+
icon: _api.default,
|
|
69
|
+
style: {
|
|
70
|
+
color,
|
|
71
|
+
transform: 'scale(1.05)'
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
return null;
|
|
76
|
+
}
|
|
77
|
+
WalletOSIcon.propTypes = {
|
|
78
|
+
loading: _propTypes.default.bool,
|
|
79
|
+
walletOS: _propTypes.default.string,
|
|
80
|
+
provider: _propTypes.default.string,
|
|
81
|
+
color: _propTypes.default.string
|
|
82
|
+
};
|
|
83
|
+
WalletOSIcon.defaultProps = {
|
|
84
|
+
loading: false,
|
|
85
|
+
walletOS: null,
|
|
86
|
+
provider: null,
|
|
87
|
+
color: 'black'
|
|
88
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.46",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -319,6 +319,10 @@
|
|
|
319
319
|
"import": "./es/Video/index.js",
|
|
320
320
|
"require": "./lib/Video/index.js"
|
|
321
321
|
},
|
|
322
|
+
"./lib/WalletOSIcon": {
|
|
323
|
+
"import": "./es/WalletOSIcon/index.js",
|
|
324
|
+
"require": "./lib/WalletOSIcon/index.js"
|
|
325
|
+
},
|
|
322
326
|
"./lib/WebWalletSWKeeper": {
|
|
323
327
|
"import": "./es/WebWalletSWKeeper/index.js",
|
|
324
328
|
"require": "./lib/WebWalletSWKeeper/index.js"
|
|
@@ -354,12 +358,12 @@
|
|
|
354
358
|
"@mui/material": "^5.15.0",
|
|
355
359
|
"react": ">=18.2.0"
|
|
356
360
|
},
|
|
357
|
-
"gitHead": "
|
|
361
|
+
"gitHead": "a82d6d3ccae838268f9e64b5bc60e6734ecffd89",
|
|
358
362
|
"dependencies": {
|
|
359
363
|
"@arcblock/did-motif": "^1.1.13",
|
|
360
|
-
"@arcblock/icons": "^2.9.
|
|
361
|
-
"@arcblock/nft-display": "^2.9.
|
|
362
|
-
"@arcblock/react-hooks": "^2.9.
|
|
364
|
+
"@arcblock/icons": "^2.9.46",
|
|
365
|
+
"@arcblock/nft-display": "^2.9.46",
|
|
366
|
+
"@arcblock/react-hooks": "^2.9.46",
|
|
363
367
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
364
368
|
"@emotion/react": "^11.10.4",
|
|
365
369
|
"@emotion/styled": "^11.10.4",
|
|
@@ -94,7 +94,7 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
|
|
|
94
94
|
<Box display="flex" className="dashboard-body">
|
|
95
95
|
<Hidden mdDown>
|
|
96
96
|
{!!links?.length && sidebarVisible && (
|
|
97
|
-
<Box className=
|
|
97
|
+
<Box className={['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' ')}>
|
|
98
98
|
<Sidebar links={links} dense={_dense} />
|
|
99
99
|
</Box>
|
|
100
100
|
)}
|
|
@@ -175,6 +175,12 @@ const Wrapper = styled('div', {
|
|
|
175
175
|
overflow-y: auto;
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
|
+
.dashboard-sidebar-padding {
|
|
179
|
+
&:hover {
|
|
180
|
+
padding-left: 15px;
|
|
181
|
+
overflow-y: auto;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
178
184
|
.dashboard-main {
|
|
179
185
|
display: flex;
|
|
180
186
|
flex-direction: column;
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Box, IconButton, Typography } from '@mui/material';
|
|
4
|
-
import { useCreation } from 'ahooks';
|
|
5
4
|
import { Icon } from '@iconify/react';
|
|
6
|
-
import ApiIcon from '@iconify-icons/mdi/api';
|
|
7
|
-
import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
|
|
8
|
-
import LanguageIcon from '@iconify-icons/material-symbols/language';
|
|
9
5
|
import LensIcon from '@iconify-icons/material-symbols/lens';
|
|
10
|
-
import AndroidIcon from '@iconify-icons/material-symbols/android';
|
|
11
|
-
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
|
|
12
|
-
import Auth0Icon from '@iconify-icons/logos/auth0-icon';
|
|
13
6
|
|
|
7
|
+
import WalletOSIcon from '../../WalletOSIcon';
|
|
14
8
|
import Avatar from '../../Avatar';
|
|
15
9
|
import DID from '../../DID';
|
|
16
10
|
import { temp as colors } from '../../Colors';
|
|
@@ -18,29 +12,6 @@ import { getSourceProvider } from '../libs/utils';
|
|
|
18
12
|
|
|
19
13
|
const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
|
|
20
14
|
const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
|
|
21
|
-
const walletIcon = useCreation(() => {
|
|
22
|
-
if (sessionItem.__isDefault) {
|
|
23
|
-
return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const { walletOS, provider } = sessionItem?.extra || {};
|
|
27
|
-
if (provider === 'auth0') {
|
|
28
|
-
return <Icon icon={Auth0Icon} style={{ color: 'black', transform: 'scale(0.85)' }} />;
|
|
29
|
-
}
|
|
30
|
-
if (walletOS === 'ios') {
|
|
31
|
-
return <Icon icon={IOSRoundedIcon} style={{ color: 'black', transform: 'scale(1.1)' }} />;
|
|
32
|
-
}
|
|
33
|
-
if (walletOS === 'android') {
|
|
34
|
-
return <Icon icon={AndroidIcon} style={{ color: 'black' }} />;
|
|
35
|
-
}
|
|
36
|
-
if (walletOS === 'web') {
|
|
37
|
-
return <Icon icon={LanguageIcon} style={{ color: 'black' }} />;
|
|
38
|
-
}
|
|
39
|
-
if (walletOS === 'api') {
|
|
40
|
-
return <Icon icon={ApiIcon} style={{ color: 'black', transform: 'scale(1.05)' }} />;
|
|
41
|
-
}
|
|
42
|
-
return null;
|
|
43
|
-
}, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
|
|
44
15
|
|
|
45
16
|
return (
|
|
46
17
|
<Box
|
|
@@ -70,7 +41,11 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
|
|
|
70
41
|
<Box sx={{ mr: 0.5, fontSize: 0 }}>
|
|
71
42
|
<Avatar did={sessionItem.userDid} size={36} />
|
|
72
43
|
</Box>
|
|
73
|
-
|
|
44
|
+
<WalletOSIcon
|
|
45
|
+
loading={sessionItem.__isDefault}
|
|
46
|
+
provider={sessionItem?.extra?.provider}
|
|
47
|
+
walletOS={sessionItem?.extra?.walletOS}
|
|
48
|
+
/>
|
|
74
49
|
{isRawWalletAccount ? (
|
|
75
50
|
<DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
|
|
76
51
|
) : (
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { Icon } from '@iconify/react';
|
|
3
|
+
import ApiIcon from '@iconify-icons/mdi/api';
|
|
4
|
+
import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
|
|
5
|
+
import LanguageIcon from '@iconify-icons/material-symbols/language';
|
|
6
|
+
import AndroidIcon from '@iconify-icons/material-symbols/android';
|
|
7
|
+
import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
|
|
8
|
+
import Auth0Icon from '@iconify-icons/logos/auth0-icon';
|
|
9
|
+
|
|
10
|
+
export default function WalletOSIcon({ loading, walletOS, provider, color }) {
|
|
11
|
+
if (loading) {
|
|
12
|
+
return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (provider === 'auth0') {
|
|
16
|
+
return <Icon icon={Auth0Icon} style={{ color, transform: 'scale(0.85)' }} />;
|
|
17
|
+
}
|
|
18
|
+
if (walletOS === 'ios') {
|
|
19
|
+
return <Icon icon={IOSRoundedIcon} style={{ color, transform: 'scale(1.1)' }} />;
|
|
20
|
+
}
|
|
21
|
+
if (walletOS === 'android') {
|
|
22
|
+
return <Icon icon={AndroidIcon} style={{ color }} />;
|
|
23
|
+
}
|
|
24
|
+
if (walletOS === 'web') {
|
|
25
|
+
return <Icon icon={LanguageIcon} style={{ color }} />;
|
|
26
|
+
}
|
|
27
|
+
if (walletOS === 'api') {
|
|
28
|
+
return <Icon icon={ApiIcon} style={{ color, transform: 'scale(1.05)' }} />;
|
|
29
|
+
}
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
WalletOSIcon.propTypes = {
|
|
34
|
+
loading: PropTypes.bool,
|
|
35
|
+
walletOS: PropTypes.string,
|
|
36
|
+
provider: PropTypes.string,
|
|
37
|
+
color: PropTypes.string,
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
WalletOSIcon.defaultProps = {
|
|
41
|
+
loading: false,
|
|
42
|
+
walletOS: null,
|
|
43
|
+
provider: null,
|
|
44
|
+
color: 'black',
|
|
45
|
+
};
|