@blocklet/ui-react 2.9.56 → 2.9.58

package/es/UserCenter/components/storage/connect-to.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { useState } from "react";
-import Button from "@arcblock/ux/lib/Button";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import DidConnect from "@arcblock/did-connect/lib/Connect";
 import { joinURL } from "ufo";
 import toast from "@arcblock/ux/lib/Toast";
 import isEmpty from "lodash/isEmpty";
+import { RELAY_SOCKET_PREFIX } from "@arcblock/ux/lib/Util/constant";
 import { axios } from "../../libs/api.js";
 function ConnectTo({
   onConnect,
@@ -19,9 +19,7 @@ function ConnectTo({
     checkTimeout: 1e3 * 300,
     prefix: "/api/did",
     checkFn: axios.create({
-      // FIXME: @jianchao 检查 env 的使用是否正确
-      // @ts-ignore
-      baseURL: joinURL(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/")
+      baseURL: joinURL(window.location.origin, RELAY_SOCKET_PREFIX)
     }).get,
     extraParams: {},
     messages: {
@@ -80,7 +78,7 @@ function ConnectTo({
       Button,
       {
         color: "primary",
-        style: { textTransform: "none !important", fontSize: "1rem" },
+        sx: { textTransform: "none !important", fontSize: "13px", paddingLeft: 0.75, paddingRight: 0.75 },
         size: "small",
         onClick: handleUseWalletConnect,
         variant: "outlined",

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

@@ -8,7 +8,7 @@ function Connected({
 }) {
   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: "1.2rem", fontWeight: "bold", children: t("storage.spaces.connected.title") }) }),
+    /* @__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,
       {

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

@@ -1,13 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, Typography } from "@mui/material";
+import { Box, Chip, IconButton, 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 { getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
+import { getSpaceHomeUrl, getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
 function SpaceItem({
   spaceGateway,
   connected,
@@ -48,7 +49,21 @@ function SpaceItem({
                   sx: { marginLeft: "20px", padding: "0px 0px" },
                   children: [
                     /* @__PURE__ */ jsxs(Box, { className: "spaces-info", display: "flex", maxWidth: "360px", alignItems: "center", children: [
-                      /* @__PURE__ */ jsx(Typography, { color: connected ? "primary" : "inherit", fontSize: "1rem", fontWeight: "bold", children: spaceGateway.name }),
+                      /* @__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,
                         {
@@ -62,7 +77,7 @@ function SpaceItem({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx(Box, { className: "spaces-address", display: "flex", color: "#9397A1", marginTop: "8px", children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(Box, { display: "flex", color: "#9397A1", marginTop: "8px", children: /* @__PURE__ */ jsx(
                       Typography,
                       {
                         sx: {
@@ -76,7 +91,8 @@ function SpaceItem({
                     ) })
                   ]
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", width: "100%", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => window.open(getSpaceHomeUrl(spaceGateway.endpoint)), children: /* @__PURE__ */ jsx(OpenInNewIcon, {}) }) }) })
             ]
           }
         ),

package/es/libs/spaces.d.ts

@@ -1 +1,2 @@
 export declare function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string;
+export declare function getSpaceHomeUrl(endpoint: string): string;

package/es/libs/spaces.js

@@ -5,3 +5,9 @@ export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
   const spaceDid = strArray.at(-4);
   return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
 }
+export function getSpaceHomeUrl(endpoint) {
+  const baseUrl = endpoint.replace(/\/api\/space\/.+/, "");
+  const strArray = endpoint.replace(/\/$/, "").split("/");
+  const spaceDid = strArray.at(-4);
+  return joinURL(baseUrl, "space", spaceDid);
+}

package/lib/UserCenter/components/storage/connect-to.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _react = require("react");
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _ufo = require("ufo");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _constant = require("@arcblock/ux/lib/Util/constant");
 var _api = require("../../libs/api");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ConnectTo({
@@ -29,9 +29,7 @@ function ConnectTo({
     checkTimeout: 1e3 * 300,
     prefix: "/api/did",
     checkFn: _api.axios.create({
-      // FIXME: @jianchao 检查 env 的使用是否正确
-      // @ts-ignore
-      baseURL: (0, _ufo.joinURL)(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/")
+      baseURL: (0, _ufo.joinURL)(window.location.origin, _constant.RELAY_SOCKET_PREFIX)
     }).get,
     extraParams: {},
     messages: {
@@ -97,11 +95,13 @@ function ConnectTo({
     }));
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
       color: "primary",
-      style: {
+      sx: {
         textTransform: "none !important",
-        fontSize: "1rem"
+        fontSize: "13px",
+        paddingLeft: 0.75,
+        paddingRight: 0.75
       },
       size: "small",
       onClick: handleUseWalletConnect,

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

@@ -26,7 +26,7 @@ function Connected({
       justifyContent: "space-between",
       marginBottom: "12px",
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        fontSize: "1.2rem",
+        fontSize: "16px",
         fontWeight: "bold",
         children: t("storage.spaces.connected.title")
       })

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

@@ -10,6 +10,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _OpenInNew = _interopRequireDefault(require("@mui/icons-material/OpenInNew"));
 var _spaceConnected = _interopRequireDefault(require("./icons/space-connected.svg?react"));
 var _previewNft = _interopRequireDefault(require("./preview-nft"));
 var _useMobile = _interopRequireDefault(require("../../../hooks/use-mobile"));
@@ -62,8 +63,14 @@ function SpaceItem({
           alignItems: "center",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             color: connected ? "primary" : "inherit",
-            fontSize: "1rem",
             fontWeight: "bold",
+            sx: {
+              display: "-webkit-box",
+              wordBreak: "break-word",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden"
+            },
             children: spaceGateway.name
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
             label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -81,7 +88,6 @@ function SpaceItem({
             }
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          className: "spaces-address",
           display: "flex",
           color: "#9397A1",
           marginTop: "8px",
@@ -101,6 +107,19 @@ function SpaceItem({
             })
           })
         })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: () => window.open((0, _spaces.getSpaceHomeUrl)(spaceGateway.endpoint)),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_OpenInNew.default, {})
+          })
+        })
       })]
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       className: "selected-container selected",

package/lib/libs/spaces.d.ts

@@ -1 +1,2 @@
 export declare function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string;
+export declare function getSpaceHomeUrl(endpoint: string): string;

package/lib/libs/spaces.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getSpaceHomeUrl = getSpaceHomeUrl;
 exports.getSpaceNftDisplayUrlFromEndpoint = getSpaceNftDisplayUrlFromEndpoint;
 var _ufo = require("ufo");
 function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
@@ -10,4 +11,10 @@ function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
   const strArray = endpoint.replace(/\/$/, "").split("/");
   const spaceDid = strArray.at(-4);
   return (0, _ufo.joinURL)(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
+}
+function getSpaceHomeUrl(endpoint) {
+  const baseUrl = endpoint.replace(/\/api\/space\/.+/, "");
+  const strArray = endpoint.replace(/\/$/, "").split("/");
+  const spaceDid = strArray.at(-4);
+  return (0, _ufo.joinURL)(baseUrl, "space", spaceDid);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.56",
+  "version": "2.9.58",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -62,9 +62,9 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.56",
-    "@arcblock/react-hooks": "^2.9.56",
-    "@arcblock/ux": "^2.9.56",
+    "@arcblock/did-connect": "^2.9.58",
+    "@arcblock/react-hooks": "^2.9.58",
+    "@arcblock/ux": "^2.9.58",
     "@blocklet/js-sdk": "1.16.25-beta-be3a37f4",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -108,5 +108,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "d08feff1d01ddf6c67bb8094588635e9005a1dc6"
+  "gitHead": "908522ee6638e31a421ee0bb1942f0a20792ba8a"
 }

package/src/UserCenter/components/storage/connect-to.tsx

@@ -1,11 +1,11 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import { useState } from 'react';
-import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
 import { joinURL } from 'ufo';
 import toast from '@arcblock/ux/lib/Toast';
 import isEmpty from 'lodash/isEmpty';
+import { RELAY_SOCKET_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { axios } from '../../libs/api';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 
@@ -24,9 +24,7 @@ function ConnectTo({
     checkTimeout: 1000 * 300,
     prefix: '/api/did',
     checkFn: axios.create({
-      // FIXME: @jianchao 检查 env 的使用是否正确
-      // @ts-ignore
-      baseURL: joinURL(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : '/'),
+      baseURL: joinURL(window.location.origin, RELAY_SOCKET_PREFIX),
     }).get,
     extraParams: {},
     messages: {
@@ -93,7 +91,7 @@ function ConnectTo({
     <Box>
       <Button
         color="primary"
-        style={{ textTransform: 'none !important', fontSize: '1rem' }}
+        sx={{ textTransform: 'none !important', fontSize: '13px', paddingLeft: 0.75, paddingRight: 0.75 }}
         size="small"
         onClick={handleUseWalletConnect}
         variant="outlined">

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

@@ -15,7 +15,7 @@ function Connected({
   return (
     <Box display="flex" flexDirection="column">
       <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between" marginBottom="12px">
-        <Typography fontSize="1.2rem" fontWeight="bold">
+        <Typography fontSize="16px" fontWeight="bold">
           {t('storage.spaces.connected.title')}
         </Typography>
       </Box>

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

@@ -1,15 +1,15 @@
-import { Box, BoxProps, Chip, Typography } from '@mui/material';
+import { Box, BoxProps, Chip, IconButton, 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 { getSpaceNftDisplayUrlFromEndpoint } from '../../../libs/spaces';
+import { getSpaceHomeUrl, getSpaceNftDisplayUrlFromEndpoint } from '../../../libs/spaces';
 
 function SpaceItem({
   spaceGateway,
@@ -46,7 +46,16 @@ function SpaceItem({
           flexDirection="column"
           sx={{ marginLeft: '20px', padding: '0px 0px' }}>
           <Box className="spaces-info" display="flex" maxWidth="360px" alignItems="center">
-            <Typography color={connected ? 'primary' : 'inherit'} fontSize="1rem" fontWeight="bold">
+            <Typography
+              color={connected ? 'primary' : 'inherit'}
+              fontWeight="bold"
+              sx={{
+                display: '-webkit-box',
+                wordBreak: 'break-word',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}>
               {spaceGateway.name}
             </Typography>
             <Chip
@@ -61,7 +70,7 @@ function SpaceItem({
               style={{ marginLeft: isMobile ? undefined : '20px', fontWeight: 'bold' }}
             />
           </Box>
-          <Box className="spaces-address" display="flex" color="#9397A1" marginTop="8px">
+          <Box display="flex" color="#9397A1" marginTop="8px">
             <Typography
               sx={{
                 display: 'inline-flex',
@@ -75,6 +84,13 @@ function SpaceItem({
             </Typography>
           </Box>
         </Box>
+        <Box display="flex" alignItems="center">
+          <Box display="flex" alignItems="center" width="100%">
+            <IconButton size="small" onClick={() => window.open(getSpaceHomeUrl(spaceGateway.endpoint))}>
+              <OpenInNewIcon />
+            </IconButton>
+          </Box>
+        </Box>
       </Box>
 
       <Box className="selected-container selected">

package/src/libs/spaces.tsx

@@ -8,3 +8,11 @@ export function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string {
 
   return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
 }
+
+export function getSpaceHomeUrl(endpoint: string): string {
+  const baseUrl = endpoint.replace(/\/api\/space\/.+/, '');
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4) as string;
+
+  return joinURL(baseUrl, 'space', spaceDid);
+}