@arcblock/ux 2.5.17 → 2.5.19
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/CardSelector/index.js +122 -0
- package/lib/SessionManager/index.js +29 -15
- package/package.json +4 -4
- package/src/CardSelector/index.jsx +123 -0
- package/src/SessionManager/index.jsx +24 -13
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = CardSelector;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
var _templateObject;
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
21
|
+
|
|
22
|
+
function CardSelector(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
list,
|
|
25
|
+
width,
|
|
26
|
+
height,
|
|
27
|
+
cardSpace,
|
|
28
|
+
onSelect,
|
|
29
|
+
defaultIndex
|
|
30
|
+
} = _ref;
|
|
31
|
+
const [selectedId, setSelectedId] = (0, _react.useState)(0);
|
|
32
|
+
const [translateX, setTranslateX] = (0, _react.useState)(0);
|
|
33
|
+
const outterCon = (0, _react.useRef)(null); // 选择卡片
|
|
34
|
+
|
|
35
|
+
const selectedItem = i => {
|
|
36
|
+
if (i < 0 || i > list.length - 1) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
setSelectedId(i); // 外部容器大小
|
|
41
|
+
|
|
42
|
+
const outerWidth = outterCon.current.clientWidth;
|
|
43
|
+
setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
|
|
44
|
+
onSelect(i);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
(0, _react.useEffect)(() => {
|
|
48
|
+
selectedItem(defaultIndex);
|
|
49
|
+
|
|
50
|
+
const func = e => e.preventDefault();
|
|
51
|
+
|
|
52
|
+
outterCon.current.addEventListener('touchmove', func, {
|
|
53
|
+
passive: false
|
|
54
|
+
}); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
55
|
+
}, []);
|
|
56
|
+
let startX;
|
|
57
|
+
|
|
58
|
+
const touchstart = e => {
|
|
59
|
+
const point = e.touches[0];
|
|
60
|
+
startX = point.clientX;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const touchend = e => {
|
|
64
|
+
const point = e.changedTouches[0];
|
|
65
|
+
const diffX = startX - point.clientX;
|
|
66
|
+
|
|
67
|
+
if (Math.abs(diffX) > 60) {
|
|
68
|
+
if (diffX > 0) {
|
|
69
|
+
selectedItem(selectedId + 1);
|
|
70
|
+
} else {
|
|
71
|
+
selectedItem(selectedId - 1);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Contianer, {
|
|
77
|
+
ref: outterCon,
|
|
78
|
+
onTouchStart: touchstart,
|
|
79
|
+
onTouchEnd: touchend,
|
|
80
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
81
|
+
className: "card-container",
|
|
82
|
+
style: {
|
|
83
|
+
transform: "translate(".concat(-translateX, "px, 0)")
|
|
84
|
+
},
|
|
85
|
+
children: list.map((e, i) => {
|
|
86
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
87
|
+
className: "card-item ".concat(i === selectedId ? 'selected' : ''),
|
|
88
|
+
style: {
|
|
89
|
+
width,
|
|
90
|
+
height,
|
|
91
|
+
margin: cardSpace / 2
|
|
92
|
+
} // eslint-disable-next-line react/no-array-index-key
|
|
93
|
+
,
|
|
94
|
+
onClick: () => selectedItem(i),
|
|
95
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
96
|
+
src: e.src,
|
|
97
|
+
alt: e.name
|
|
98
|
+
})
|
|
99
|
+
}, i);
|
|
100
|
+
})
|
|
101
|
+
})
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n overflow: hidden;\n .card-container {\n display: flex;\n white-space: nowrap;\n width: max-content;\n transition: all ease 0.3s;\n }\n .card-item {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n cursor: pointer;\n img {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n outline: #526ded solid 0;\n transition: all ease 0.2s;\n box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n }\n &.selected {\n cursor: default;\n img {\n outline: #526ded solid 5px;\n }\n }\n }\n"])));
|
|
106
|
+
|
|
107
|
+
CardSelector.propTypes = {
|
|
108
|
+
list: _propTypes.default.array,
|
|
109
|
+
width: _propTypes.default.number,
|
|
110
|
+
height: _propTypes.default.number,
|
|
111
|
+
cardSpace: _propTypes.default.number,
|
|
112
|
+
onSelect: _propTypes.default.func,
|
|
113
|
+
defaultIndex: _propTypes.default.number
|
|
114
|
+
};
|
|
115
|
+
CardSelector.defaultProps = {
|
|
116
|
+
list: '',
|
|
117
|
+
width: 300,
|
|
118
|
+
height: 400,
|
|
119
|
+
cardSpace: 40,
|
|
120
|
+
onSelect: () => {},
|
|
121
|
+
defaultIndex: 0
|
|
122
|
+
};
|
|
@@ -58,6 +58,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
58
58
|
|
|
59
59
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
60
60
|
|
|
61
|
+
const USER_TYPE = Object.freeze({
|
|
62
|
+
DERIVED: 'derived',
|
|
63
|
+
WALLET: 'wallet'
|
|
64
|
+
});
|
|
61
65
|
const messages = {
|
|
62
66
|
zh: {
|
|
63
67
|
switchDid: '切换账户',
|
|
@@ -79,17 +83,19 @@ const messages = {
|
|
|
79
83
|
const translations = {
|
|
80
84
|
en: {
|
|
81
85
|
alreadyBindOAuth: 'Already bind Auth0',
|
|
82
|
-
bind: 'Bind '
|
|
86
|
+
bind: 'Bind ',
|
|
87
|
+
thirdParty: 'Third Party Login'
|
|
83
88
|
},
|
|
84
89
|
zh: {
|
|
85
90
|
// NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
|
|
86
91
|
alreadyBindOAuth: '已绑定 Auth0 账号',
|
|
87
|
-
bind: '绑定'
|
|
92
|
+
bind: '绑定',
|
|
93
|
+
thirdParty: '第三方登录'
|
|
88
94
|
}
|
|
89
95
|
};
|
|
90
96
|
|
|
91
97
|
function SessionManager(_ref) {
|
|
92
|
-
var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user5, _session$user6, _session$user7, _session$user8, _session$user9;
|
|
98
|
+
var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user4$extraC, _session$user5, _session$user6, _session$user7, _session$user8, _session$user9;
|
|
93
99
|
|
|
94
100
|
let {
|
|
95
101
|
session,
|
|
@@ -117,7 +123,8 @@ function SessionManager(_ref) {
|
|
|
117
123
|
const {
|
|
118
124
|
logoutOAuth,
|
|
119
125
|
bindOAuth,
|
|
120
|
-
configs: oauthConfigs
|
|
126
|
+
configs: oauthConfigs,
|
|
127
|
+
switchOAuthPassport
|
|
121
128
|
} = (0, _OAuth.useOAuth)();
|
|
122
129
|
const [userOpen, setUserOpen] = (0, _react.useState)(false); // base64 img maybe have some blank char, need encodeURIComponent to transform it
|
|
123
130
|
|
|
@@ -128,8 +135,8 @@ function SessionManager(_ref) {
|
|
|
128
135
|
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);
|
|
129
136
|
}, [session.user]);
|
|
130
137
|
const browser = (0, _useBrowser.default)();
|
|
131
|
-
const hasBindOAuth = ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.source) ===
|
|
132
|
-
const isDerivedAccount = ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.source) ===
|
|
138
|
+
const hasBindOAuth = ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.source) === USER_TYPE.WALLET && ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : (_session$user4$extraC = _session$user4.extraConfigs) === null || _session$user4$extraC === void 0 ? void 0 : _session$user4$extraC.derivedAccount);
|
|
139
|
+
const isDerivedAccount = ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.source) === USER_TYPE.DERIVED;
|
|
133
140
|
const oauthConfigList = Object.entries(oauthConfigs).map(_ref2 => {
|
|
134
141
|
let [key, value] = _ref2;
|
|
135
142
|
return _objectSpread(_objectSpread({}, value), {}, {
|
|
@@ -217,17 +224,25 @@ function SessionManager(_ref) {
|
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
function _onSwitchPassport() {
|
|
220
|
-
|
|
221
|
-
|
|
227
|
+
const {
|
|
228
|
+
user
|
|
229
|
+
} = session;
|
|
230
|
+
|
|
231
|
+
if ((user === null || user === void 0 ? void 0 : user.source) === USER_TYPE.DERIVED) {
|
|
232
|
+
switchOAuthPassport(user);
|
|
233
|
+
} else {
|
|
222
234
|
setUserOpen(false);
|
|
223
|
-
|
|
224
|
-
|
|
235
|
+
session.switchPassport(function () {
|
|
236
|
+
setUserOpen(false);
|
|
237
|
+
onSwitchPassport(...arguments);
|
|
238
|
+
});
|
|
239
|
+
}
|
|
225
240
|
}
|
|
226
241
|
|
|
227
242
|
function _onBindWallet() {
|
|
228
243
|
setUserOpen(false);
|
|
229
244
|
|
|
230
|
-
if (session.user.source ===
|
|
245
|
+
if (session.user.source === USER_TYPE.DERIVED) {
|
|
231
246
|
session.bindWallet(function () {
|
|
232
247
|
setUserOpen(false);
|
|
233
248
|
onBindWallet(...arguments);
|
|
@@ -378,7 +393,7 @@ function SessionManager(_ref) {
|
|
|
378
393
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
379
394
|
component: _Link.default,
|
|
380
395
|
className: "session-manager-menu-icon"
|
|
381
|
-
}), ((_session$user9 = session.user) === null || _session$user9 === void 0 ? void 0 : _session$user9.source) ===
|
|
396
|
+
}), ((_session$user9 = session.user) === null || _session$user9 === void 0 ? void 0 : _session$user9.source) === USER_TYPE.DERIVED ? "".concat(translations[locale].bind, "DID Wallet") : "".concat(translations[locale].bind).concat(translations[locale].thirdParty)]
|
|
382
397
|
}), oauthConfigList.length > 0 && hasBindOAuth && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
383
398
|
className: "session-manager-menu-item",
|
|
384
399
|
disabled: true,
|
|
@@ -415,9 +430,8 @@ SessionManager.propTypes = {
|
|
|
415
430
|
name: _propTypes.default.string.isRequired,
|
|
416
431
|
title: _propTypes.default.string.isRequired
|
|
417
432
|
})),
|
|
418
|
-
source: _propTypes.default.oneOf([
|
|
419
|
-
|
|
420
|
-
connectedAccounts: _propTypes.default.array
|
|
433
|
+
source: _propTypes.default.oneOf([USER_TYPE.DERIVED, USER_TYPE.WALLET, undefined]),
|
|
434
|
+
extraConfigs: _propTypes.default.object
|
|
421
435
|
}),
|
|
422
436
|
login: _propTypes.default.func.isRequired,
|
|
423
437
|
logout: _propTypes.default.func.isRequired,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.19",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
"react": ">=18.1.0",
|
|
48
48
|
"react-ga": "^2.7.0"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "64969d2186586d8fe4d43e34e82ee234d04e27be",
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@arcblock/did-motif": "^1.1.10",
|
|
53
|
-
"@arcblock/icons": "^2.5.
|
|
54
|
-
"@arcblock/react-hooks": "^2.5.
|
|
53
|
+
"@arcblock/icons": "^2.5.19",
|
|
54
|
+
"@arcblock/react-hooks": "^2.5.19",
|
|
55
55
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
56
56
|
"@emotion/react": "^11.10.4",
|
|
57
57
|
"@emotion/styled": "^11.10.4",
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { useState, useEffect, useRef } from 'react';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
|
|
5
|
+
export default function CardSelector({ list, width, height, cardSpace, onSelect, defaultIndex }) {
|
|
6
|
+
const [selectedId, setSelectedId] = useState(0);
|
|
7
|
+
const [translateX, setTranslateX] = useState(0);
|
|
8
|
+
const outterCon = useRef(null);
|
|
9
|
+
|
|
10
|
+
// 选择卡片
|
|
11
|
+
const selectedItem = (i) => {
|
|
12
|
+
if (i < 0 || i > list.length - 1) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
setSelectedId(i);
|
|
16
|
+
|
|
17
|
+
// 外部容器大小
|
|
18
|
+
const outerWidth = outterCon.current.clientWidth;
|
|
19
|
+
|
|
20
|
+
setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
|
|
21
|
+
|
|
22
|
+
onSelect(i);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
selectedItem(defaultIndex);
|
|
27
|
+
|
|
28
|
+
const func = (e) => e.preventDefault();
|
|
29
|
+
outterCon.current.addEventListener('touchmove', func, { passive: false });
|
|
30
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31
|
+
}, []);
|
|
32
|
+
|
|
33
|
+
let startX;
|
|
34
|
+
|
|
35
|
+
const touchstart = (e) => {
|
|
36
|
+
const point = e.touches[0];
|
|
37
|
+
startX = point.clientX;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const touchend = (e) => {
|
|
41
|
+
const point = e.changedTouches[0];
|
|
42
|
+
const diffX = startX - point.clientX;
|
|
43
|
+
|
|
44
|
+
if (Math.abs(diffX) > 60) {
|
|
45
|
+
if (diffX > 0) {
|
|
46
|
+
selectedItem(selectedId + 1);
|
|
47
|
+
} else {
|
|
48
|
+
selectedItem(selectedId - 1);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<Contianer ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
|
|
55
|
+
<div className="card-container" style={{ transform: `translate(${-translateX}px, 0)` }}>
|
|
56
|
+
{list.map((e, i) => {
|
|
57
|
+
return (
|
|
58
|
+
<div
|
|
59
|
+
className={`card-item ${i === selectedId ? 'selected' : ''}`}
|
|
60
|
+
style={{ width, height, margin: cardSpace / 2 }}
|
|
61
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
62
|
+
key={i}
|
|
63
|
+
onClick={() => selectedItem(i)}>
|
|
64
|
+
<img src={e.src} alt={e.name} />
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
})}
|
|
68
|
+
</div>
|
|
69
|
+
</Contianer>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const Contianer = styled.div`
|
|
74
|
+
overflow: hidden;
|
|
75
|
+
mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
.card-container {
|
|
78
|
+
display: flex;
|
|
79
|
+
white-space: nowrap;
|
|
80
|
+
width: max-content;
|
|
81
|
+
transition: all ease 0.3s;
|
|
82
|
+
}
|
|
83
|
+
.card-item {
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
align-items: center;
|
|
87
|
+
flex-shrink: 0;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
img {
|
|
90
|
+
max-width: 100%;
|
|
91
|
+
max-height: 100%;
|
|
92
|
+
width: auto;
|
|
93
|
+
height: auto;
|
|
94
|
+
outline: #526ded solid 0;
|
|
95
|
+
transition: all ease 0.2s;
|
|
96
|
+
box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
|
|
97
|
+
}
|
|
98
|
+
&.selected {
|
|
99
|
+
cursor: default;
|
|
100
|
+
img {
|
|
101
|
+
outline: #526ded solid 5px;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
`;
|
|
106
|
+
|
|
107
|
+
CardSelector.propTypes = {
|
|
108
|
+
list: PropTypes.array,
|
|
109
|
+
width: PropTypes.number,
|
|
110
|
+
height: PropTypes.number,
|
|
111
|
+
cardSpace: PropTypes.number,
|
|
112
|
+
onSelect: PropTypes.func,
|
|
113
|
+
defaultIndex: PropTypes.number,
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
CardSelector.defaultProps = {
|
|
117
|
+
list: '',
|
|
118
|
+
width: 300,
|
|
119
|
+
height: 400,
|
|
120
|
+
cardSpace: 40,
|
|
121
|
+
onSelect: () => {},
|
|
122
|
+
defaultIndex: 0,
|
|
123
|
+
};
|
|
@@ -18,6 +18,11 @@ import { styled } from '../Theme';
|
|
|
18
18
|
import DidAvatar from '../Avatar';
|
|
19
19
|
import DidAddress from '../Address';
|
|
20
20
|
|
|
21
|
+
const USER_TYPE = Object.freeze({
|
|
22
|
+
DERIVED: 'derived',
|
|
23
|
+
WALLET: 'wallet',
|
|
24
|
+
});
|
|
25
|
+
|
|
21
26
|
const messages = {
|
|
22
27
|
zh: {
|
|
23
28
|
switchDid: '切换账户',
|
|
@@ -40,11 +45,13 @@ const translations = {
|
|
|
40
45
|
en: {
|
|
41
46
|
alreadyBindOAuth: 'Already bind Auth0',
|
|
42
47
|
bind: 'Bind ',
|
|
48
|
+
thirdParty: 'Third Party Login',
|
|
43
49
|
},
|
|
44
50
|
zh: {
|
|
45
51
|
// NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
|
|
46
52
|
alreadyBindOAuth: '已绑定 Auth0 账号',
|
|
47
53
|
bind: '绑定',
|
|
54
|
+
thirdParty: '第三方登录',
|
|
48
55
|
},
|
|
49
56
|
};
|
|
50
57
|
|
|
@@ -70,7 +77,7 @@ function SessionManager({
|
|
|
70
77
|
...rest
|
|
71
78
|
}) {
|
|
72
79
|
const userAnchorRef = useRef(null);
|
|
73
|
-
const { logoutOAuth, bindOAuth, configs: oauthConfigs } = useOAuth();
|
|
80
|
+
const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = useOAuth();
|
|
74
81
|
const [userOpen, setUserOpen] = useState(false);
|
|
75
82
|
|
|
76
83
|
// base64 img maybe have some blank char, need encodeURIComponent to transform it
|
|
@@ -81,8 +88,8 @@ function SessionManager({
|
|
|
81
88
|
);
|
|
82
89
|
const browser = useBrowser();
|
|
83
90
|
|
|
84
|
-
const hasBindOAuth = session.user?.source ===
|
|
85
|
-
const isDerivedAccount = session.user?.source ===
|
|
91
|
+
const hasBindOAuth = session.user?.source === USER_TYPE.WALLET && session.user?.extraConfigs?.derivedAccount;
|
|
92
|
+
const isDerivedAccount = session.user?.source === USER_TYPE.DERIVED;
|
|
86
93
|
|
|
87
94
|
const oauthConfigList = Object.entries(oauthConfigs)
|
|
88
95
|
.map(([key, value]) => {
|
|
@@ -150,16 +157,21 @@ function SessionManager({
|
|
|
150
157
|
});
|
|
151
158
|
}
|
|
152
159
|
function _onSwitchPassport() {
|
|
153
|
-
|
|
154
|
-
|
|
160
|
+
const { user } = session;
|
|
161
|
+
if (user?.source === USER_TYPE.DERIVED) {
|
|
162
|
+
switchOAuthPassport(user);
|
|
163
|
+
} else {
|
|
155
164
|
setUserOpen(false);
|
|
156
|
-
|
|
157
|
-
|
|
165
|
+
session.switchPassport((...args) => {
|
|
166
|
+
setUserOpen(false);
|
|
167
|
+
onSwitchPassport(...args);
|
|
168
|
+
});
|
|
169
|
+
}
|
|
158
170
|
}
|
|
159
171
|
|
|
160
172
|
function _onBindWallet() {
|
|
161
173
|
setUserOpen(false);
|
|
162
|
-
if (session.user.source ===
|
|
174
|
+
if (session.user.source === USER_TYPE.DERIVED) {
|
|
163
175
|
session.bindWallet((...args) => {
|
|
164
176
|
setUserOpen(false);
|
|
165
177
|
onBindWallet(...args);
|
|
@@ -305,9 +317,9 @@ function SessionManager({
|
|
|
305
317
|
onClick={_onBindWallet}
|
|
306
318
|
data-cy="sessionManager-bind-trigger">
|
|
307
319
|
<SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
|
|
308
|
-
{session.user?.source ===
|
|
320
|
+
{session.user?.source === USER_TYPE.DERIVED
|
|
309
321
|
? `${translations[locale].bind}DID Wallet`
|
|
310
|
-
: `${translations[locale].bind}
|
|
322
|
+
: `${translations[locale].bind}${translations[locale].thirdParty}`}
|
|
311
323
|
</MenuItem>
|
|
312
324
|
)}
|
|
313
325
|
{oauthConfigList.length > 0 && hasBindOAuth && (
|
|
@@ -348,9 +360,8 @@ SessionManager.propTypes = {
|
|
|
348
360
|
title: PropTypes.string.isRequired,
|
|
349
361
|
})
|
|
350
362
|
),
|
|
351
|
-
source: PropTypes.oneOf([
|
|
352
|
-
|
|
353
|
-
connectedAccounts: PropTypes.array,
|
|
363
|
+
source: PropTypes.oneOf([USER_TYPE.DERIVED, USER_TYPE.WALLET, undefined]),
|
|
364
|
+
extraConfigs: PropTypes.object,
|
|
354
365
|
}),
|
|
355
366
|
login: PropTypes.func.isRequired,
|
|
356
367
|
logout: PropTypes.func.isRequired,
|