@blocklet/ui-react 2.9.18 → 2.9.20
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/build.config.ts +1 -1
- package/es/@types/index.d.ts +2 -0
- package/es/UserCenter/components/settings.d.ts +1 -2
- package/es/UserCenter/components/settings.js +8 -1
- package/es/UserCenter/components/storage/connect-to.d.ts +7 -0
- package/es/UserCenter/components/storage/connect-to.js +104 -0
- package/es/UserCenter/components/storage/connected.d.ts +7 -0
- package/es/UserCenter/components/storage/connected.js +21 -0
- package/es/UserCenter/components/storage/delete.d.ts +7 -0
- package/es/UserCenter/components/storage/delete.js +59 -0
- package/es/UserCenter/components/storage/disconnect.d.ts +3 -0
- package/es/UserCenter/components/storage/disconnect.js +23 -0
- package/es/UserCenter/components/storage/icons/empty-spaces-nft.svg +58 -0
- package/es/UserCenter/components/storage/icons/long-arrow.svg +5 -0
- package/es/UserCenter/components/storage/icons/space-connected.svg +3 -0
- package/es/UserCenter/components/storage/icons/space-disconnect.svg +3 -0
- package/es/UserCenter/components/storage/index.d.ts +3 -0
- package/es/UserCenter/components/storage/index.js +25 -0
- package/es/UserCenter/components/storage/item.d.ts +9 -0
- package/es/UserCenter/components/storage/item.js +147 -0
- package/es/UserCenter/components/storage/preview-nft.d.ts +6 -0
- package/es/UserCenter/components/storage/preview-nft.js +80 -0
- package/es/UserCenter/components/user-center.d.ts +2 -1
- package/es/UserCenter/components/user-center.js +8 -4
- package/es/UserCenter/libs/api.d.ts +3 -0
- package/es/UserCenter/libs/api.js +4 -0
- package/es/UserCenter/libs/locales.d.ts +2 -0
- package/es/UserCenter/libs/locales.js +2 -0
- package/es/contexts/config-user-space.d.ts +26 -0
- package/es/contexts/config-user-space.js +53 -0
- package/es/hooks/use-mobile.d.ts +4 -0
- package/es/hooks/use-mobile.js +5 -0
- package/es/libs/spaces.d.ts +1 -0
- package/es/libs/spaces.js +7 -0
- package/lib/@types/index.d.ts +2 -0
- package/lib/UserCenter/components/settings.d.ts +1 -2
- package/lib/UserCenter/components/settings.js +9 -1
- package/lib/UserCenter/components/storage/connect-to.d.ts +7 -0
- package/lib/UserCenter/components/storage/connect-to.js +127 -0
- package/lib/UserCenter/components/storage/connected.d.ts +7 -0
- package/lib/UserCenter/components/storage/connected.js +45 -0
- package/lib/UserCenter/components/storage/delete.d.ts +7 -0
- package/lib/UserCenter/components/storage/delete.js +71 -0
- package/lib/UserCenter/components/storage/disconnect.d.ts +3 -0
- package/lib/UserCenter/components/storage/disconnect.js +37 -0
- package/lib/UserCenter/components/storage/icons/empty-spaces-nft.svg +58 -0
- package/lib/UserCenter/components/storage/icons/long-arrow.svg +5 -0
- package/lib/UserCenter/components/storage/icons/space-connected.svg +3 -0
- package/lib/UserCenter/components/storage/icons/space-disconnect.svg +3 -0
- package/lib/UserCenter/components/storage/index.d.ts +3 -0
- package/lib/UserCenter/components/storage/index.js +56 -0
- package/lib/UserCenter/components/storage/item.d.ts +9 -0
- package/lib/UserCenter/components/storage/item.js +179 -0
- package/lib/UserCenter/components/storage/preview-nft.d.ts +6 -0
- package/lib/UserCenter/components/storage/preview-nft.js +88 -0
- package/lib/UserCenter/components/user-center.d.ts +2 -1
- package/lib/UserCenter/components/user-center.js +10 -6
- package/lib/UserCenter/libs/api.d.ts +3 -0
- package/lib/UserCenter/libs/api.js +16 -0
- package/lib/UserCenter/libs/locales.d.ts +2 -0
- package/lib/UserCenter/libs/locales.js +2 -0
- package/lib/contexts/config-user-space.d.ts +26 -0
- package/lib/contexts/config-user-space.js +61 -0
- package/lib/hooks/use-mobile.d.ts +4 -0
- package/lib/hooks/use-mobile.js +13 -0
- package/lib/libs/spaces.d.ts +1 -0
- package/lib/libs/spaces.js +13 -0
- package/package.json +6 -4
- package/src/@types/index.ts +3 -0
- package/src/UserCenter/components/settings.tsx +8 -2
- package/src/UserCenter/components/storage/connect-to.tsx +117 -0
- package/src/UserCenter/components/storage/connected.tsx +29 -0
- package/src/UserCenter/components/storage/delete.tsx +66 -0
- package/src/UserCenter/components/storage/disconnect.tsx +27 -0
- package/src/UserCenter/components/storage/icons/empty-spaces-nft.svg +58 -0
- package/src/UserCenter/components/storage/icons/long-arrow.svg +5 -0
- package/src/UserCenter/components/storage/icons/space-connected.svg +3 -0
- package/src/UserCenter/components/storage/icons/space-disconnect.svg +3 -0
- package/src/UserCenter/components/storage/index.tsx +47 -0
- package/src/UserCenter/components/storage/item.tsx +150 -0
- package/src/UserCenter/components/storage/preview-nft.tsx +72 -0
- package/src/UserCenter/components/user-center.tsx +10 -4
- package/src/UserCenter/libs/api.ts +7 -0
- package/src/UserCenter/libs/locales.ts +2 -0
- package/src/contexts/config-user-space.tsx +86 -0
- package/src/hooks/use-mobile.tsx +6 -0
- package/src/libs/spaces.tsx +10 -0
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Chip, Typography } from "@mui/material";
|
|
3
|
+
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
|
|
4
|
+
import toast from "@arcblock/ux/lib/Toast";
|
|
5
|
+
import CheckIcon from "@mui/icons-material/Check";
|
|
6
|
+
import styled from "@emotion/styled";
|
|
7
|
+
import SpacesConnectedSvg from "./icons/space-connected.svg?react";
|
|
8
|
+
import DidAddress from "@arcblock/ux/lib/DID";
|
|
9
|
+
import PreviewSpaceNft from "./preview-nft.js";
|
|
10
|
+
import useMobile from "../../../hooks/use-mobile.js";
|
|
11
|
+
import { getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
|
|
12
|
+
function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }) {
|
|
13
|
+
const isMobile = useMobile({});
|
|
14
|
+
const { t } = useLocaleContext();
|
|
15
|
+
const handleOnDisconnect = async () => {
|
|
16
|
+
try {
|
|
17
|
+
await onDisconnect();
|
|
18
|
+
toast.success(t("storage.spaces.gateway.delete.succeeded", { name: spaceGateway.name }));
|
|
19
|
+
} catch (error) {
|
|
20
|
+
console.error(error);
|
|
21
|
+
toast.error(error.message);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsxs(
|
|
25
|
+
BoxContainer,
|
|
26
|
+
{
|
|
27
|
+
style: {
|
|
28
|
+
position: "relative"
|
|
29
|
+
},
|
|
30
|
+
children: [
|
|
31
|
+
/* @__PURE__ */ jsxs(
|
|
32
|
+
Box,
|
|
33
|
+
{
|
|
34
|
+
sx: {
|
|
35
|
+
backgroundColor: connected ? "#F0FDFF" : "inherit",
|
|
36
|
+
"&:hover": {
|
|
37
|
+
backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
|
|
38
|
+
},
|
|
39
|
+
borderRadius: "8px"
|
|
40
|
+
},
|
|
41
|
+
display: "flex",
|
|
42
|
+
padding: "12px 20px",
|
|
43
|
+
...rest,
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(PreviewSpaceNft, { alt: spaceGateway.did, src: getSpaceNftDisplayUrlFromEndpoint(spaceGateway.endpoint) }) }),
|
|
46
|
+
/* @__PURE__ */ jsxs(
|
|
47
|
+
Box,
|
|
48
|
+
{
|
|
49
|
+
className: "spaces-info",
|
|
50
|
+
display: "flex",
|
|
51
|
+
flexGrow: 1,
|
|
52
|
+
flexDirection: "column",
|
|
53
|
+
sx: { marginLeft: "20px", padding: "0px 0px" },
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ jsxs(Box, { className: "spaces-info", display: "flex", maxWidth: "360px", alignItems: "center", children: [
|
|
56
|
+
/* @__PURE__ */ jsx(Typography, { color: connected ? "primary" : "inherit", fontSize: "1rem", fontWeight: "bold", children: spaceGateway.name }),
|
|
57
|
+
/* @__PURE__ */ jsx(
|
|
58
|
+
Chip,
|
|
59
|
+
{
|
|
60
|
+
label: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
61
|
+
/* @__PURE__ */ jsx(SpacesConnectedSvg, { style: { marginRight: "4px" } }),
|
|
62
|
+
t("storage.spaces.connected.tag")
|
|
63
|
+
] }),
|
|
64
|
+
variant: "outlined",
|
|
65
|
+
size: "small",
|
|
66
|
+
style: { marginLeft: isMobile ? void 0 : "20px", fontWeight: "bold" }
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
] }),
|
|
70
|
+
/* @__PURE__ */ jsx(Box, { className: "spaces-address", display: "flex", color: "#9397A1", marginTop: "8px", children: /* @__PURE__ */ jsx(
|
|
71
|
+
Typography,
|
|
72
|
+
{
|
|
73
|
+
sx: {
|
|
74
|
+
display: "inline-flex",
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
fontSize: "14px"
|
|
77
|
+
},
|
|
78
|
+
color: "#9397A1",
|
|
79
|
+
children: spaceGateway.did && /* @__PURE__ */ jsx(DidAddress, { copyable: false, size: 14, compact: true, responsive: false, did: spaceGateway.did })
|
|
80
|
+
}
|
|
81
|
+
) })
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ jsx(Box, { className: "selected-container selected", children: /* @__PURE__ */ jsx(CheckIcon, { className: "selected-icon" }) })
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
const BoxContainer = styled(Box)`
|
|
94
|
+
.selected-container {
|
|
95
|
+
position: absolute;
|
|
96
|
+
right: 0px;
|
|
97
|
+
bottom: 0px;
|
|
98
|
+
display: flex;
|
|
99
|
+
-webkit-box-pack: end;
|
|
100
|
+
justify-content: flex-end;
|
|
101
|
+
align-items: flex-end;
|
|
102
|
+
width: 32px;
|
|
103
|
+
height: 32px;
|
|
104
|
+
border-radius: 0px 0px 8px;
|
|
105
|
+
color: rgb(255, 255, 255);
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
transition: all 0.4s ease 0s;
|
|
108
|
+
|
|
109
|
+
&::after {
|
|
110
|
+
position: absolute;
|
|
111
|
+
z-index: 0;
|
|
112
|
+
left: 60px;
|
|
113
|
+
top: 60px;
|
|
114
|
+
display: block;
|
|
115
|
+
width: 0px;
|
|
116
|
+
height: 0px;
|
|
117
|
+
border-width: 16px;
|
|
118
|
+
border-style: solid;
|
|
119
|
+
border-color: transparent #1dc1c7 #1dc1c7 transparent;
|
|
120
|
+
transition: all 0.1s ease 0s;
|
|
121
|
+
content: '';
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.selected-icon {
|
|
125
|
+
visibility: hidden;
|
|
126
|
+
width: 60%;
|
|
127
|
+
height: 60%;
|
|
128
|
+
position: relative;
|
|
129
|
+
z-index: 2;
|
|
130
|
+
margin: 0px 1px 1px 0px;
|
|
131
|
+
font-size: 16px;
|
|
132
|
+
transition: all 0.2s ease 0s;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.selected-container.selected {
|
|
137
|
+
&::after {
|
|
138
|
+
left: 0px;
|
|
139
|
+
top: 0px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.selected-icon {
|
|
143
|
+
visibility: visible;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
`;
|
|
147
|
+
export default SpaceItem;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import ReactPlaceholder from "react-placeholder";
|
|
4
|
+
import { Dialog, DialogContent, IconButton } from "@mui/material";
|
|
5
|
+
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
|
|
6
|
+
import EmptySpacesNFT from "./icons/empty-spaces-nft.svg?react";
|
|
7
|
+
function PreviewSpaceNft({ src, alt }) {
|
|
8
|
+
const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
|
|
9
|
+
const [open, setOpen] = useState(false);
|
|
10
|
+
const handleOpen = () => setOpen(true);
|
|
11
|
+
const handleClose = () => setOpen(false);
|
|
12
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
13
|
+
/* @__PURE__ */ jsx(
|
|
14
|
+
ReactPlaceholder,
|
|
15
|
+
{
|
|
16
|
+
ready: showEmptySpaceNFT,
|
|
17
|
+
customPlaceholder: (
|
|
18
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
19
|
+
/* @__PURE__ */ jsx(
|
|
20
|
+
"img",
|
|
21
|
+
{
|
|
22
|
+
style: { cursor: "pointer" },
|
|
23
|
+
alt,
|
|
24
|
+
src,
|
|
25
|
+
width: "58px",
|
|
26
|
+
height: "58px",
|
|
27
|
+
onError: () => setShowEmptySpaceNFT(true),
|
|
28
|
+
onClick: handleOpen
|
|
29
|
+
}
|
|
30
|
+
)
|
|
31
|
+
),
|
|
32
|
+
children: /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { cursor: "pointer", width: "58px", height: "58px" }, onClick: handleOpen })
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
/* @__PURE__ */ jsx(
|
|
36
|
+
Dialog,
|
|
37
|
+
{
|
|
38
|
+
open,
|
|
39
|
+
onClose: handleClose,
|
|
40
|
+
"aria-labelledby": "preview-space-nft-display",
|
|
41
|
+
"aria-describedby": "preview space nft display",
|
|
42
|
+
fullWidth: true,
|
|
43
|
+
maxWidth: "md",
|
|
44
|
+
children: /* @__PURE__ */ jsxs(DialogContent, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
|
|
45
|
+
/* @__PURE__ */ jsx(
|
|
46
|
+
IconButton,
|
|
47
|
+
{
|
|
48
|
+
color: "inherit",
|
|
49
|
+
onClick: handleClose,
|
|
50
|
+
"aria-label": "close",
|
|
51
|
+
style: { position: "absolute", top: 8, right: 8, color: "white" },
|
|
52
|
+
children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
showEmptySpaceNFT ? /* @__PURE__ */ jsx(
|
|
56
|
+
EmptySpacesNFT,
|
|
57
|
+
{
|
|
58
|
+
style: {
|
|
59
|
+
width: "100%",
|
|
60
|
+
height: "75vh"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
) : /* @__PURE__ */ jsx(
|
|
64
|
+
"img",
|
|
65
|
+
{
|
|
66
|
+
src,
|
|
67
|
+
alt: "",
|
|
68
|
+
style: {
|
|
69
|
+
width: "100%",
|
|
70
|
+
height: "75vh",
|
|
71
|
+
objectFit: "contain"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
] })
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
] });
|
|
79
|
+
}
|
|
80
|
+
export default PreviewSpaceNft;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { PaperProps } from '@mui/material';
|
|
3
|
-
export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, }: {
|
|
3
|
+
export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, }: {
|
|
4
4
|
readonly children: any;
|
|
5
5
|
readonly currentTab: string;
|
|
6
6
|
readonly contentProps?: PaperProps;
|
|
@@ -9,4 +9,5 @@ export default function UserCenter({ children, currentTab, contentProps, disable
|
|
|
9
9
|
readonly hideFooter?: boolean;
|
|
10
10
|
readonly headerProps?: object;
|
|
11
11
|
readonly footerProps?: object;
|
|
12
|
+
readonly userDid?: string;
|
|
12
13
|
}): import("react").JSX.Element | null;
|
|
@@ -28,7 +28,8 @@ export default function UserCenter({
|
|
|
28
28
|
autoPopupSetting = false,
|
|
29
29
|
hideFooter = false,
|
|
30
30
|
headerProps = {},
|
|
31
|
-
footerProps = {}
|
|
31
|
+
footerProps = {},
|
|
32
|
+
userDid
|
|
32
33
|
}) {
|
|
33
34
|
const { locale } = useLocaleContext();
|
|
34
35
|
const t = useMemoizedFn((key, data = {}) => {
|
|
@@ -37,6 +38,9 @@ export default function UserCenter({
|
|
|
37
38
|
const sessionCtx = useContext(SessionContext);
|
|
38
39
|
const session = sessionCtx?.session;
|
|
39
40
|
const currentDid = useCreation(() => {
|
|
41
|
+
if (userDid) {
|
|
42
|
+
return userDid;
|
|
43
|
+
}
|
|
40
44
|
const currentUrl = window.location.href;
|
|
41
45
|
const query = getQuery(currentUrl);
|
|
42
46
|
if (query?.did) {
|
|
@@ -46,7 +50,7 @@ export default function UserCenter({
|
|
|
46
50
|
return query.did;
|
|
47
51
|
}
|
|
48
52
|
return session?.user?.did;
|
|
49
|
-
}, [session?.user?.did]);
|
|
53
|
+
}, [session?.user?.did, userDid]);
|
|
50
54
|
const isMyself = useCreation(() => {
|
|
51
55
|
if (session?.user) {
|
|
52
56
|
return currentDid === session?.user?.did;
|
|
@@ -251,11 +255,11 @@ export default function UserCenter({
|
|
|
251
255
|
) : null,
|
|
252
256
|
isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
253
257
|
/* @__PURE__ */ jsxs(Box, { children: [
|
|
254
|
-
/* @__PURE__ */ jsx(Typography, { variant: "
|
|
258
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
|
|
255
259
|
/* @__PURE__ */ jsx(Passport, { user: userState.data })
|
|
256
260
|
] }),
|
|
257
261
|
/* @__PURE__ */ jsxs(Box, { children: [
|
|
258
|
-
/* @__PURE__ */ jsx(Typography, { variant: "
|
|
262
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600, mb: 1.5 }, children: t("userInfo") }),
|
|
259
263
|
/* @__PURE__ */ jsx(
|
|
260
264
|
UserInfo,
|
|
261
265
|
{
|
|
@@ -23,6 +23,7 @@ export declare const translations: {
|
|
|
23
23
|
noUserFound: string;
|
|
24
24
|
notificationManagement: string;
|
|
25
25
|
privacyManagement: string;
|
|
26
|
+
storageManagement: string;
|
|
26
27
|
webhook: {
|
|
27
28
|
url: string;
|
|
28
29
|
slack: string;
|
|
@@ -57,6 +58,7 @@ export declare const translations: {
|
|
|
57
58
|
emptyField: string;
|
|
58
59
|
notificationManagement: string;
|
|
59
60
|
privacyManagement: string;
|
|
61
|
+
storageManagement: string;
|
|
60
62
|
emptyContent: string;
|
|
61
63
|
underProtected: string;
|
|
62
64
|
noUserFound: string;
|
|
@@ -23,6 +23,7 @@ export const translations = {
|
|
|
23
23
|
noUserFound: "\u672A\u627E\u5230\u6307\u5B9A\u7684\u7528\u6237",
|
|
24
24
|
notificationManagement: "\u901A\u77E5\u7BA1\u7406",
|
|
25
25
|
privacyManagement: "\u9690\u79C1\u7BA1\u7406",
|
|
26
|
+
storageManagement: "\u5B58\u50A8\u7BA1\u7406",
|
|
26
27
|
webhook: {
|
|
27
28
|
url: "\u81EA\u5B9A\u4E49URL",
|
|
28
29
|
slack: "Slack"
|
|
@@ -57,6 +58,7 @@ export const translations = {
|
|
|
57
58
|
emptyField: "Empty field",
|
|
58
59
|
notificationManagement: "Notification",
|
|
59
60
|
privacyManagement: "Privacy",
|
|
61
|
+
storageManagement: "Storage",
|
|
60
62
|
emptyContent: "Empty",
|
|
61
63
|
underProtected: "This page has protected privacy",
|
|
62
64
|
noUserFound: "No user found",
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface SpaceGateway {
|
|
3
|
+
did: string;
|
|
4
|
+
name: string;
|
|
5
|
+
url: string;
|
|
6
|
+
endpoint: string;
|
|
7
|
+
}
|
|
8
|
+
export interface SettingStorageEndpoint {
|
|
9
|
+
(endpoint: string | undefined): void | Promise<void>;
|
|
10
|
+
}
|
|
11
|
+
interface ConfigUserSpaceContextType {
|
|
12
|
+
loading: boolean;
|
|
13
|
+
spaceGateway: SpaceGateway | undefined;
|
|
14
|
+
deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
|
|
15
|
+
updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => Promise<void>;
|
|
16
|
+
storageEndpoint: string;
|
|
17
|
+
settingStorageEndpoint: SettingStorageEndpoint;
|
|
18
|
+
hasStorageEndpoint: boolean;
|
|
19
|
+
}
|
|
20
|
+
declare const ConfigUserSpaceContext: import("react").Context<ConfigUserSpaceContextType>;
|
|
21
|
+
declare const Consumer: import("react").Consumer<ConfigUserSpaceContextType>;
|
|
22
|
+
declare function ConfigUserSpaceProvider({ children }: {
|
|
23
|
+
children: React.ReactNode;
|
|
24
|
+
}): import("react").JSX.Element;
|
|
25
|
+
declare function useConfigUserSpaceContext(): ConfigUserSpaceContextType;
|
|
26
|
+
export { ConfigUserSpaceContext, ConfigUserSpaceProvider, Consumer as ConfigUserSpaceConsumer, useConfigUserSpaceContext, };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useMemo, useState, useEffect } from "react";
|
|
3
|
+
import { SessionContext } from "@arcblock/did-connect/lib/Session";
|
|
4
|
+
const ConfigUserSpaceContext = createContext({});
|
|
5
|
+
const { Provider, Consumer } = ConfigUserSpaceContext;
|
|
6
|
+
function ConfigUserSpaceProvider({ children }) {
|
|
7
|
+
const [loading] = useState(false);
|
|
8
|
+
const { session } = useContext(SessionContext);
|
|
9
|
+
const { user } = session;
|
|
10
|
+
const [spaceGateway, setSpaceGateway] = useState();
|
|
11
|
+
const storageEndpoint = useMemo(() => {
|
|
12
|
+
return user?.didSpace?.endpoint;
|
|
13
|
+
}, [user?.didSpace]);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
setSpaceGateway(user?.didSpace);
|
|
16
|
+
}, [user?.didSpace]);
|
|
17
|
+
const deleteSpaceGateway = async () => {
|
|
18
|
+
setSpaceGateway(void 0);
|
|
19
|
+
};
|
|
20
|
+
const updateSpaceGateway = async (x) => {
|
|
21
|
+
setSpaceGateway(x);
|
|
22
|
+
session.refresh();
|
|
23
|
+
await settingStorageEndpoint(x.endpoint);
|
|
24
|
+
};
|
|
25
|
+
const settingStorageEndpoint = (endpoint) => {
|
|
26
|
+
};
|
|
27
|
+
const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
|
|
28
|
+
return /* @__PURE__ */ jsx(
|
|
29
|
+
Provider,
|
|
30
|
+
{
|
|
31
|
+
value: {
|
|
32
|
+
loading,
|
|
33
|
+
spaceGateway,
|
|
34
|
+
deleteSpaceGateway,
|
|
35
|
+
updateSpaceGateway,
|
|
36
|
+
storageEndpoint,
|
|
37
|
+
settingStorageEndpoint,
|
|
38
|
+
hasStorageEndpoint
|
|
39
|
+
},
|
|
40
|
+
children
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
function useConfigUserSpaceContext() {
|
|
45
|
+
const res = useContext(ConfigUserSpaceContext);
|
|
46
|
+
return res;
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
ConfigUserSpaceContext,
|
|
50
|
+
ConfigUserSpaceProvider,
|
|
51
|
+
Consumer as ConfigUserSpaceConsumer,
|
|
52
|
+
useConfigUserSpaceContext
|
|
53
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { joinURL } from "ufo";
|
|
2
|
+
export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
|
|
3
|
+
const prefix = endpoint.replace(/\/api\/space\/.+/, "");
|
|
4
|
+
const strArray = endpoint.replace(/\/$/, "").split("/");
|
|
5
|
+
const spaceDid = strArray.at(-4);
|
|
6
|
+
return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
|
|
7
|
+
}
|
package/lib/@types/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export type User = {
|
|
|
15
15
|
lastLoginIp?: string;
|
|
16
16
|
createdAt?: string;
|
|
17
17
|
passports?: any[];
|
|
18
|
+
didSpace: Record<string, any>;
|
|
18
19
|
};
|
|
19
20
|
export type UserCenterTab = {
|
|
20
21
|
value: string;
|
|
@@ -32,6 +33,7 @@ export type Session = {
|
|
|
32
33
|
switchDid: any;
|
|
33
34
|
switchProfile: any;
|
|
34
35
|
switchPassport: any;
|
|
36
|
+
refresh: Function;
|
|
35
37
|
};
|
|
36
38
|
export type WebhookType = 'slack' | 'api';
|
|
37
39
|
export type WebhookItemData = {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { BoxProps } from '@mui/material';
|
|
3
2
|
import { User, UserCenterTab } from '../../@types';
|
|
4
3
|
export default function Settings({ user, settings, onSave, ...rest }: {
|
|
@@ -7,4 +6,4 @@ export default function Settings({ user, settings, onSave, ...rest }: {
|
|
|
7
6
|
settings: {
|
|
8
7
|
userCenterTabs: UserCenterTab[];
|
|
9
8
|
};
|
|
10
|
-
} & BoxProps):
|
|
9
|
+
} & BoxProps): any;
|
|
@@ -10,9 +10,11 @@ var _material = require("@mui/material");
|
|
|
10
10
|
var _ahooks = require("ahooks");
|
|
11
11
|
var _util = require("@arcblock/ux/lib/Locale/util");
|
|
12
12
|
var _context = require("@arcblock/ux/lib/Locale/context");
|
|
13
|
+
var _configUserSpace = require("../../contexts/config-user-space");
|
|
13
14
|
var _locales = require("../libs/locales");
|
|
14
15
|
var _notification = _interopRequireDefault(require("./notification"));
|
|
15
16
|
var _privacy = _interopRequireDefault(require("./privacy"));
|
|
17
|
+
var _storage = _interopRequireDefault(require("./storage"));
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
19
|
function Settings({
|
|
18
20
|
user,
|
|
@@ -50,7 +52,13 @@ function Settings({
|
|
|
50
52
|
configList: privacyConfigList,
|
|
51
53
|
onSave
|
|
52
54
|
})
|
|
53
|
-
}
|
|
55
|
+
}, user?.didSpace?.endpoint && {
|
|
56
|
+
label: t("storageManagement"),
|
|
57
|
+
value: "storage",
|
|
58
|
+
content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_configUserSpace.ConfigUserSpaceProvider, {
|
|
59
|
+
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_storage.default, {})
|
|
60
|
+
})
|
|
61
|
+
}].filter(Boolean);
|
|
54
62
|
}, [user, privacyConfigList]);
|
|
55
63
|
const currentState = (0, _ahooks.useReactive)({
|
|
56
64
|
tab: tabs[0].value
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { SpaceGateway } from '../../../contexts/config-user-space';
|
|
3
|
+
declare function ConnectTo({ onConnect, storageEndpoint, ...rest }: {
|
|
4
|
+
onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
|
|
5
|
+
storageEndpoint: string;
|
|
6
|
+
}): import("react").JSX.Element;
|
|
7
|
+
export default ConnectTo;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
+
var _material = require("@mui/material");
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
|
|
11
|
+
var _context = require("@arcblock/ux/lib/Locale/context");
|
|
12
|
+
var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
|
|
13
|
+
var _ufo = require("ufo");
|
|
14
|
+
var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
|
|
15
|
+
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
|
|
16
|
+
var _api = require("../../libs/api");
|
|
17
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
+
function ConnectTo({
|
|
19
|
+
onConnect,
|
|
20
|
+
storageEndpoint,
|
|
21
|
+
...rest
|
|
22
|
+
}) {
|
|
23
|
+
const {
|
|
24
|
+
t,
|
|
25
|
+
locale
|
|
26
|
+
} = (0, _context.useLocaleContext)();
|
|
27
|
+
const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = (0, _react.useState)({
|
|
28
|
+
open: false,
|
|
29
|
+
action: "connect-to-did-spaces-for-user",
|
|
30
|
+
checkTimeout: 1e3 * 300,
|
|
31
|
+
prefix: "/api/did",
|
|
32
|
+
// @ts-expect-error
|
|
33
|
+
checkFn: _api.axios.create({
|
|
34
|
+
baseURL: (0, _ufo.joinURL)(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/")
|
|
35
|
+
}).get,
|
|
36
|
+
extraParams: {},
|
|
37
|
+
messages: {
|
|
38
|
+
title: t("storage.spaces.provideNFT.title", {
|
|
39
|
+
appName: window.blocklet.appName
|
|
40
|
+
}, locale),
|
|
41
|
+
scan: t("storage.spaces.provideNFT.scan", {
|
|
42
|
+
appName: window.blocklet.appName
|
|
43
|
+
}, locale),
|
|
44
|
+
confirm: "",
|
|
45
|
+
success: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
|
|
46
|
+
gutterBottom: true,
|
|
47
|
+
children: t("storage.spaces.provideNFT.success")
|
|
48
|
+
})
|
|
49
|
+
},
|
|
50
|
+
onClose: () => {
|
|
51
|
+
setAuthorizeFromNftConnect(preValue => ({
|
|
52
|
+
...preValue,
|
|
53
|
+
open: false
|
|
54
|
+
}));
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
const updateSpaceGateway = async spaceGateway => {
|
|
58
|
+
await onConnect(spaceGateway);
|
|
59
|
+
_Toast.default.success(t("storage.spaces.connectedWithName", {
|
|
60
|
+
name: spaceGateway.name
|
|
61
|
+
}));
|
|
62
|
+
};
|
|
63
|
+
const onAuthorizeConnectSuccess = (response, decrypt) => {
|
|
64
|
+
setTimeout(async () => {
|
|
65
|
+
setAuthorizeFromNftConnect(preValue => ({
|
|
66
|
+
...preValue,
|
|
67
|
+
open: false
|
|
68
|
+
}));
|
|
69
|
+
if (!(0, _isEmpty.default)(response.spaceGateway)) {
|
|
70
|
+
await updateSpaceGateway(decrypt(response.spaceGateway));
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const endpoint = decrypt(response.endpoint);
|
|
74
|
+
const space = response.space ? decrypt(response.space) : {};
|
|
75
|
+
await updateSpaceGateway({
|
|
76
|
+
endpoint,
|
|
77
|
+
// name 默认为 DID Space,兼容旧版本的 DID Spaces
|
|
78
|
+
...{
|
|
79
|
+
name: "DID Space"
|
|
80
|
+
},
|
|
81
|
+
...space
|
|
82
|
+
});
|
|
83
|
+
}, 0);
|
|
84
|
+
};
|
|
85
|
+
const handleUseWalletConnect = () => {
|
|
86
|
+
setAuthorizeFromNftConnect(preValue => ({
|
|
87
|
+
...preValue,
|
|
88
|
+
open: true,
|
|
89
|
+
extraParams: {
|
|
90
|
+
appDid: window.blocklet.appId,
|
|
91
|
+
appName: window.blocklet.appName,
|
|
92
|
+
appDescription: window.blocklet.appDescription,
|
|
93
|
+
scopes: "list:object read:object write:object",
|
|
94
|
+
appUrl: window.blocklet.appUrl,
|
|
95
|
+
referrer: window.location.href
|
|
96
|
+
}
|
|
97
|
+
}));
|
|
98
|
+
};
|
|
99
|
+
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
|
|
100
|
+
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
|
|
101
|
+
color: "primary",
|
|
102
|
+
style: {
|
|
103
|
+
textTransform: "none !important",
|
|
104
|
+
fontSize: "1rem"
|
|
105
|
+
},
|
|
106
|
+
size: "small",
|
|
107
|
+
onClick: handleUseWalletConnect,
|
|
108
|
+
variant: "outlined",
|
|
109
|
+
children: storageEndpoint ? t("storage.spaces.connect.useWalletReconnect") : t("storage.spaces.connect.useWallet")
|
|
110
|
+
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Connect.default, {
|
|
111
|
+
forceConnected: false,
|
|
112
|
+
saveConnect: false,
|
|
113
|
+
prefix: authorizeFromNftConnect.prefix,
|
|
114
|
+
open: authorizeFromNftConnect.open,
|
|
115
|
+
popup: true,
|
|
116
|
+
action: authorizeFromNftConnect.action,
|
|
117
|
+
checkFn: authorizeFromNftConnect.checkFn,
|
|
118
|
+
onSuccess: onAuthorizeConnectSuccess,
|
|
119
|
+
onClose: authorizeFromNftConnect.onClose,
|
|
120
|
+
checkTimeout: authorizeFromNftConnect.checkTimeout,
|
|
121
|
+
extraParams: authorizeFromNftConnect.extraParams,
|
|
122
|
+
messages: authorizeFromNftConnect.messages,
|
|
123
|
+
locale
|
|
124
|
+
})]
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
module.exports = ConnectTo;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
|
|
3
|
+
declare function Connected({ spaceGateway, settingStorageEndpoint }: {
|
|
4
|
+
spaceGateway: SpaceGateway | undefined;
|
|
5
|
+
settingStorageEndpoint: SettingStorageEndpoint;
|
|
6
|
+
}): import("react").JSX.Element;
|
|
7
|
+
export default Connected;
|