@blocklet/ui-react 2.10.51 → 2.10.53

package/lib/UserCenter/components/settings.js

@@ -32,6 +32,9 @@ export default function Settings({
       };
     });
   }, [settings?.userCenterTabs]);
+  const showStorage = window?.blocklet?.componentMountPoints.some(
+    (v) => v.capabilities?.didSpace === "requiredOnConnect"
+  );
   const tabs = useCreation(() => {
     return [
       {
@@ -54,7 +57,7 @@ export default function Settings({
         value: "privacy",
         content: /* @__PURE__ */ jsx(Privacy, { configList: privacyConfigList, onSave })
       },
-      user?.didSpace?.endpoint && {
+      showStorage && {
         label: t("storageManagement"),
         value: "storage",
         content: /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) })

package/lib/UserCenter/components/storage/connected.d.ts

@@ -1,6 +1,5 @@
-import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
-declare function Connected({ spaceGateway, settingStorageEndpoint, }: {
+import { SpaceGateway } from '../../../contexts/config-user-space';
+declare function Connected({ spaceGateway }: {
     spaceGateway: SpaceGateway | undefined;
-    settingStorageEndpoint: SettingStorageEndpoint;
 }): import("react").JSX.Element;
 export default Connected;

package/lib/UserCenter/components/storage/connected.js

@@ -1,23 +1,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Typography } from "@mui/material";
-import SpaceItem from "./item.js";
-function Connected({
-  spaceGateway,
-  settingStorageEndpoint
-}) {
+import { Box, IconButton, Link, Typography } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import SpaceCard from "@blocklet/did-space-react/lib/components/SpaceCard";
+import { getSpaceHomeUrl } from "../../../libs/spaces.js";
+function Connected({ spaceGateway }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: "12px", children: /* @__PURE__ */ jsx(Typography, { fontSize: "16px", fontWeight: "bold", children: t("storage.spaces.connected.title") }) }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-      SpaceItem,
+    /* @__PURE__ */ jsx(Box, { children: spaceGateway && /* @__PURE__ */ jsx(
+      SpaceCard,
       {
-        style: { marginTop: "12px" },
-        spaceGateway,
-        connected: true,
-        onDisconnect: () => settingStorageEndpoint(void 0)
+        sx: { marginTop: "12px", "&.selected": { borderColor: "primary.main" } },
+        endpoint: spaceGateway.endpoint,
+        deps: [spaceGateway],
+        selected: true,
+        action: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            LinkComponent: Link,
+            href: getSpaceHomeUrl(spaceGateway.endpoint),
+            target: "_blank",
+            children: /* @__PURE__ */ jsx(OpenInNewIcon, {})
+          }
+        )
       },
-      spaceGateway?.endpoint
+      spaceGateway.endpoint
     ) })
   ] });
 }

package/lib/UserCenter/components/storage/index.js

@@ -9,12 +9,12 @@ import Connected from "./connected.js";
 import Disconnect from "./disconnect.js";
 import { translations } from "../../libs/locales.js";
 function DidSpace() {
-  const { spaceGateway, updateSpaceGateway, settingStorageEndpoint, hasStorageEndpoint, loading, storageEndpoint } = useConfigUserSpaceContext();
+  const { spaceGateway, updateSpaceGateway, hasStorageEndpoint, loading, storageEndpoint } = useConfigUserSpaceContext();
   if (loading) {
     return /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
   return /* @__PURE__ */ jsx(LocaleProvider, { translations, children: /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(Box, { maxWidth: "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway, settingStorageEndpoint }) : /* @__PURE__ */ jsx(Disconnect, {}) }),
+    /* @__PURE__ */ jsx(Box, { maxWidth: "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway }) : /* @__PURE__ */ jsx(Disconnect, {}) }),
     /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", paddingTop: "24px", children: /* @__PURE__ */ jsx(ConnectTo, { onConnect: updateSpaceGateway, storageEndpoint }) })
   ] }) });
 }

package/lib/UserCenter/components/user-center.js

@@ -23,6 +23,7 @@ import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
 import Passport from "./passport.js";
 import Settings from "./settings.js";
 import { client } from "../../libs/client.js";
+import useMobile from "../../hooks/use-mobile.js";
 export default function UserCenter({
   children,
   notLoginContent = null,
@@ -37,6 +38,7 @@ export default function UserCenter({
   stickySidebar = false
 }) {
   const { locale } = useLocaleContext();
+  const isMobile = useMobile({});
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
@@ -91,6 +93,7 @@ export default function UserCenter({
     }
   );
   const { confirmHolder, confirmApi } = useConfirm({
+    fullScreen: isMobile,
     sx: {
       ".MuiDialog-paper": {
         borderRadius: 2,

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -80,12 +80,8 @@ export default function UserBasicInfo({
               mb: 1.5,
               ...isMyself ? {
                 cursor: "pointer",
-                "&:hover": {
-                  "&::after": {
-                    content: `"${t("switchProfile")}"`
-                  }
-                },
                 "&::after": {
+                  content: `"${t("switchProfile")}"`,
                   color: "white",
                   position: "absolute",
                   fontSize: "12px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.51",
+  "version": "2.10.53",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,9 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.51",
-    "@arcblock/react-hooks": "^2.10.51",
+    "@arcblock/bridge": "^2.10.53",
+    "@arcblock/react-hooks": "^2.10.53",
+    "@blocklet/did-space-react": "^0.5.57",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -79,5 +80,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "50d25c76d0450bf7e2a471dcec83a38a4afca2e8"
+  "gitHead": "a78ffedb0502bf9605989a9494d85dcfe6d1e2d1"
 }

package/src/UserCenter/components/settings.tsx

@@ -41,6 +41,9 @@ export default function Settings({
       };
     });
   }, [settings?.userCenterTabs]);
+  const showStorage = window?.blocklet?.componentMountPoints.some(
+    (v: any) => v.capabilities?.didSpace === 'requiredOnConnect'
+  );
   const tabs = useCreation(() => {
     return [
       {
@@ -63,7 +66,7 @@ export default function Settings({
         value: 'privacy',
         content: <Privacy configList={privacyConfigList} onSave={onSave} />,
       },
-      user?.didSpace?.endpoint && {
+      showStorage && {
         label: t('storageManagement'),
         value: 'storage',
         content: (

package/src/UserCenter/components/storage/connected.tsx

@@ -1,15 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Typography } from '@mui/material';
-import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
-import SpaceItem from './item';
+import { Box, IconButton, Link, Typography } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import SpaceCard from '@blocklet/did-space-react/lib/components/SpaceCard';
+import { SpaceGateway } from '../../../contexts/config-user-space';
+import { getSpaceHomeUrl } from '../../../libs/spaces';
 
-function Connected({
-  spaceGateway,
-  settingStorageEndpoint,
-}: {
-  spaceGateway: SpaceGateway | undefined;
-  settingStorageEndpoint: SettingStorageEndpoint;
-}) {
+function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined }) {
   const { t } = useLocaleContext();
 
   return (
@@ -20,13 +16,24 @@ function Connected({
         </Typography>
       </Box>
       <Box>
-        <SpaceItem
-          style={{ marginTop: '12px' }}
-          key={spaceGateway?.endpoint}
-          spaceGateway={spaceGateway as SpaceGateway}
-          connected
-          onDisconnect={() => settingStorageEndpoint(undefined)}
-        />
+        {spaceGateway && (
+          <SpaceCard
+            sx={{ marginTop: '12px', '&.selected': { borderColor: 'primary.main' } }}
+            key={spaceGateway.endpoint}
+            endpoint={spaceGateway.endpoint}
+            deps={[spaceGateway]}
+            selected
+            action={
+              <IconButton
+                size="small"
+                LinkComponent={Link}
+                href={getSpaceHomeUrl(spaceGateway.endpoint)}
+                target="_blank">
+                <OpenInNewIcon />
+              </IconButton>
+            }
+          />
+        )}
       </Box>
     </Box>
   );

package/src/UserCenter/components/storage/index.tsx

@@ -9,7 +9,7 @@ import Disconnect from './disconnect';
 import { translations } from '../../libs/locales';
 
 function DidSpace() {
-  const { spaceGateway, updateSpaceGateway, settingStorageEndpoint, hasStorageEndpoint, loading, storageEndpoint } =
+  const { spaceGateway, updateSpaceGateway, hasStorageEndpoint, loading, storageEndpoint } =
     useConfigUserSpaceContext();
 
   if (loading) {
@@ -23,16 +23,7 @@ function DidSpace() {
   return (
     <LocaleProvider translations={translations}>
       <Container>
-        {/* 标题区 */}
-
-        <Box maxWidth="720px">
-          {hasStorageEndpoint ? (
-            <Connected spaceGateway={spaceGateway} settingStorageEndpoint={settingStorageEndpoint} />
-          ) : (
-            <Disconnect />
-          )}
-        </Box>
-
+        <Box maxWidth="720px">{hasStorageEndpoint ? <Connected spaceGateway={spaceGateway} /> : <Disconnect />}</Box>
         <Box display="flex" alignItems="center" justifyContent="center" paddingTop="24px">
           <ConnectTo onConnect={updateSpaceGateway} storageEndpoint={storageEndpoint} />
         </Box>

package/src/UserCenter/components/user-center.tsx

@@ -29,6 +29,7 @@ import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
 import Passport from './passport';
 import Settings from './settings';
 import { client } from '../../libs/client';
+import useMobile from '../../hooks/use-mobile';
 
 export default function UserCenter({
   children,
@@ -57,6 +58,7 @@ export default function UserCenter({
   readonly stickySidebar?: boolean;
 }) {
   const { locale } = useLocaleContext();
+  const isMobile = useMobile({});
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -117,6 +119,7 @@ export default function UserCenter({
   );
 
   const { confirmHolder, confirmApi } = useConfirm({
+    fullScreen: isMobile,
     sx: {
       '.MuiDialog-paper': {
         borderRadius: 2,

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -95,12 +95,8 @@ export default function UserBasicInfo({
           ...(isMyself
             ? {
                 cursor: 'pointer',
-                '&:hover': {
-                  '&::after': {
-                    content: `"${t('switchProfile')}"`,
-                  },
-                },
                 '&::after': {
+                  content: `"${t('switchProfile')}"`,
                   color: 'white',
                   position: 'absolute',
                   fontSize: '12px',

package/lib/UserCenter/components/storage/item.d.ts

@@ -1,8 +0,0 @@
-import { BoxProps } from '@mui/material';
-import { SpaceGateway } from '../../../contexts/config-user-space';
-declare function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }: {
-    spaceGateway: SpaceGateway;
-    connected: boolean;
-    onDisconnect: Function;
-} & BoxProps): import("react").JSX.Element;
-export default SpaceItem;

package/lib/UserCenter/components/storage/item.js

@@ -1,158 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, IconButton, Link, Typography } from "@mui/material";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import CheckIcon from "@mui/icons-material/Check";
-import styled from "@emotion/styled";
-import DidAddress from "@arcblock/ux/lib/DID";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import SpacesConnectedSvg from "./icons/space-connected.svg?react";
-import PreviewSpaceNft from "./preview-nft.js";
-import useMobile from "../../../hooks/use-mobile.js";
-import { getSpaceHomeUrl, getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
-function SpaceItem({
-  spaceGateway,
-  connected,
-  onDisconnect,
-  ...rest
-}) {
-  const isMobile = useMobile({});
-  const { t } = useLocaleContext();
-  return /* @__PURE__ */ jsxs(
-    BoxContainer,
-    {
-      style: {
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              backgroundColor: connected ? "#F0FDFF" : "inherit",
-              "&:hover": {
-                backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
-              },
-              borderRadius: "8px"
-            },
-            display: "flex",
-            padding: "12px 20px",
-            ...rest,
-            children: [
-              /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(PreviewSpaceNft, { alt: spaceGateway.did, src: getSpaceNftDisplayUrlFromEndpoint(spaceGateway.endpoint) }) }),
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  className: "spaces-info",
-                  display: "flex",
-                  flexGrow: 1,
-                  flexDirection: "column",
-                  sx: { marginLeft: "20px", padding: "0px 0px", minWidth: "0px" },
-                  children: [
-                    /* @__PURE__ */ jsxs(Box, { className: "spaces-info", display: "flex", alignItems: "center", children: [
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          color: connected ? "primary" : "inherit",
-                          fontWeight: "bold",
-                          sx: {
-                            display: "-webkit-box",
-                            wordBreak: "break-word",
-                            WebkitLineClamp: 2,
-                            WebkitBoxOrient: "vertical",
-                            overflow: "hidden"
-                          },
-                          children: spaceGateway.name
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          label: /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(SpacesConnectedSvg, { style: { marginRight: "4px" } }),
-                            t("storage.spaces.connected.tag")
-                          ] }),
-                          variant: "outlined",
-                          size: "small",
-                          style: { marginLeft: isMobile ? void 0 : "20px", fontWeight: "bold" }
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(Box, { display: "flex", color: "#9397A1", marginTop: "8px", children: /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        sx: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          fontSize: "14px"
-                        },
-                        color: "#9397A1",
-                        children: spaceGateway.did && /* @__PURE__ */ jsx(DidAddress, { copyable: false, size: 14, compact: true, responsive: false, did: spaceGateway.did })
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", width: "100%", children: /* @__PURE__ */ jsx(IconButton, { size: "small", LinkComponent: Link, href: getSpaceHomeUrl(spaceGateway.endpoint), target: "_blank", children: /* @__PURE__ */ jsx(OpenInNewIcon, {}) }) }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { className: "selected-container selected", children: /* @__PURE__ */ jsx(CheckIcon, { className: "selected-icon" }) })
-      ]
-    }
-  );
-}
-const BoxContainer = styled(Box)`
-  .selected-container {
-    position: absolute;
-    right: 0px;
-    bottom: 0px;
-    display: flex;
-    -webkit-box-pack: end;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 32px;
-    height: 32px;
-    border-radius: 0px 0px 8px;
-    color: rgb(255, 255, 255);
-    overflow: hidden;
-    transition: all 0.4s ease 0s;
-
-    &::after {
-      position: absolute;
-      z-index: 0;
-      left: 60px;
-      top: 60px;
-      display: block;
-      width: 0px;
-      height: 0px;
-      border-width: 16px;
-      border-style: solid;
-      border-color: transparent #1dc1c7 #1dc1c7 transparent;
-      transition: all 0.1s ease 0s;
-      content: '';
-    }
-
-    .selected-icon {
-      visibility: hidden;
-      width: 60%;
-      height: 60%;
-      position: relative;
-      z-index: 2;
-      margin: 0px 1px 1px 0px;
-      font-size: 16px;
-      transition: all 0.2s ease 0s;
-    }
-  }
-
-  .selected-container.selected {
-    &::after {
-      left: 0px;
-      top: 0px;
-    }
-
-    .selected-icon {
-      visibility: visible;
-    }
-  }
-`;
-export default SpaceItem;

package/src/UserCenter/components/storage/item.tsx

@@ -1,159 +0,0 @@
-import { Box, BoxProps, Chip, IconButton, Link, Typography } from '@mui/material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import CheckIcon from '@mui/icons-material/Check';
-import styled from '@emotion/styled';
-import DidAddress from '@arcblock/ux/lib/DID';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-// @ts-expect-error
-import SpacesConnectedSvg from './icons/space-connected.svg?react';
-import PreviewSpaceNft from './preview-nft';
-import { SpaceGateway } from '../../../contexts/config-user-space';
-import useMobile from '../../../hooks/use-mobile';
-import { getSpaceHomeUrl, getSpaceNftDisplayUrlFromEndpoint } from '../../../libs/spaces';
-
-function SpaceItem({
-  spaceGateway,
-  connected,
-  onDisconnect,
-  ...rest
-}: { spaceGateway: SpaceGateway; connected: boolean; onDisconnect: Function } & BoxProps) {
-  const isMobile = useMobile({});
-  const { t } = useLocaleContext();
-
-  return (
-    <BoxContainer
-      style={{
-        position: 'relative',
-      }}>
-      <Box
-        sx={{
-          backgroundColor: connected ? '#F0FDFF' : 'inherit',
-          '&:hover': {
-            backgroundColor: connected ? '#F0FDFF' : '#FBFBFB',
-          },
-          borderRadius: '8px',
-        }}
-        display="flex"
-        padding="12px 20px"
-        {...rest}>
-        <Box display="flex">
-          <PreviewSpaceNft alt={spaceGateway.did} src={getSpaceNftDisplayUrlFromEndpoint(spaceGateway.endpoint)} />
-        </Box>
-        <Box
-          className="spaces-info"
-          display="flex"
-          flexGrow={1}
-          flexDirection="column"
-          sx={{ marginLeft: '20px', padding: '0px 0px', minWidth: '0px' }}>
-          <Box className="spaces-info" display="flex" alignItems="center">
-            <Typography
-              color={connected ? 'primary' : 'inherit'}
-              fontWeight="bold"
-              sx={{
-                display: '-webkit-box',
-                wordBreak: 'break-word',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-              }}>
-              {spaceGateway.name}
-            </Typography>
-            <Chip
-              label={
-                <>
-                  <SpacesConnectedSvg style={{ marginRight: '4px' }} />
-                  {t('storage.spaces.connected.tag')}
-                </>
-              }
-              variant="outlined"
-              size="small"
-              style={{ marginLeft: isMobile ? undefined : '20px', fontWeight: 'bold' }}
-            />
-          </Box>
-          <Box display="flex" color="#9397A1" marginTop="8px">
-            <Typography
-              sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                fontSize: '14px',
-              }}
-              color="#9397A1">
-              {spaceGateway.did && (
-                <DidAddress copyable={false} size={14} compact responsive={false} did={spaceGateway.did} />
-              )}
-            </Typography>
-          </Box>
-        </Box>
-        <Box display="flex" alignItems="center">
-          <Box display="flex" alignItems="center" width="100%">
-            <IconButton size="small" LinkComponent={Link} href={getSpaceHomeUrl(spaceGateway.endpoint)} target="_blank">
-              <OpenInNewIcon />
-            </IconButton>
-          </Box>
-        </Box>
-      </Box>
-
-      <Box className="selected-container selected">
-        {/* check icon */}
-        <CheckIcon className="selected-icon" />
-      </Box>
-    </BoxContainer>
-  );
-}
-
-const BoxContainer = styled(Box)`
-  .selected-container {
-    position: absolute;
-    right: 0px;
-    bottom: 0px;
-    display: flex;
-    -webkit-box-pack: end;
-    justify-content: flex-end;
-    align-items: flex-end;
-    width: 32px;
-    height: 32px;
-    border-radius: 0px 0px 8px;
-    color: rgb(255, 255, 255);
-    overflow: hidden;
-    transition: all 0.4s ease 0s;
-
-    &::after {
-      position: absolute;
-      z-index: 0;
-      left: 60px;
-      top: 60px;
-      display: block;
-      width: 0px;
-      height: 0px;
-      border-width: 16px;
-      border-style: solid;
-      border-color: transparent #1dc1c7 #1dc1c7 transparent;
-      transition: all 0.1s ease 0s;
-      content: '';
-    }
-
-    .selected-icon {
-      visibility: hidden;
-      width: 60%;
-      height: 60%;
-      position: relative;
-      z-index: 2;
-      margin: 0px 1px 1px 0px;
-      font-size: 16px;
-      transition: all 0.2s ease 0s;
-    }
-  }
-
-  .selected-container.selected {
-    &::after {
-      left: 0px;
-      top: 0px;
-    }
-
-    .selected-icon {
-      visibility: visible;
-    }
-  }
-`;
-
-export default SpaceItem;