@blocklet/ui-react 2.9.17 → 2.9.19

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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/es/UserCenter/components/storage/item.js

@@ -0,0 +1,147 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import toast from "@arcblock/ux/lib/Toast";
+import CheckIcon from "@mui/icons-material/Check";
+import styled from "@emotion/styled";
+import SpacesConnectedSvg from "./icons/space-connected.svg?react";
+import DidAddress from "@arcblock/ux/lib/DID";
+import PreviewSpaceNft from "./preview-nft.js";
+import useMobile from "../../../hooks/use-mobile.js";
+import { getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
+function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }) {
+  const isMobile = useMobile({});
+  const { t } = useLocaleContext();
+  const handleOnDisconnect = async () => {
+    try {
+      await onDisconnect();
+      toast.success(t("storage.spaces.gateway.delete.succeeded", { name: spaceGateway.name }));
+    } catch (error) {
+      console.error(error);
+      toast.error(error.message);
+    }
+  };
+  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" },
+                  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(
+                        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, { className: "spaces-address", 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, { 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/es/UserCenter/components/storage/preview-nft.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function PreviewSpaceNft({ src, alt }: {
+    src: string;
+    alt: string;
+}): import("react").JSX.Element;
+export default PreviewSpaceNft;

package/es/UserCenter/components/storage/preview-nft.js

@@ -0,0 +1,80 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import ReactPlaceholder from "react-placeholder";
+import { Dialog, DialogContent, IconButton } from "@mui/material";
+import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
+import EmptySpacesNFT from "./icons/empty-spaces-nft.svg?react";
+function PreviewSpaceNft({ src, alt }) {
+  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ReactPlaceholder,
+      {
+        ready: showEmptySpaceNFT,
+        customPlaceholder: (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              style: { cursor: "pointer" },
+              alt,
+              src,
+              width: "58px",
+              height: "58px",
+              onError: () => setShowEmptySpaceNFT(true),
+              onClick: handleOpen
+            }
+          )
+        ),
+        children: /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { cursor: "pointer", width: "58px", height: "58px" }, onClick: handleOpen })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onClose: handleClose,
+        "aria-labelledby": "preview-space-nft-display",
+        "aria-describedby": "preview space nft display",
+        fullWidth: true,
+        maxWidth: "md",
+        children: /* @__PURE__ */ jsxs(DialogContent, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              color: "inherit",
+              onClick: handleClose,
+              "aria-label": "close",
+              style: { position: "absolute", top: 8, right: 8, color: "white" },
+              children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
+            }
+          ),
+          showEmptySpaceNFT ? /* @__PURE__ */ jsx(
+            EmptySpacesNFT,
+            {
+              style: {
+                width: "100%",
+                height: "75vh"
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: "",
+              style: {
+                width: "100%",
+                height: "75vh",
+                objectFit: "contain"
+              }
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export default PreviewSpaceNft;

package/es/UserCenter/components/user-basic-info.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
-export default function UserBasicInfo({ user, isMyself, switchPassport, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, switchPassport, switchProfile, openSettings, ...rest }: {
     user: User;
     isMyself: boolean;
     switchPassport: () => void;
+    switchProfile: () => void;
+    openSettings: () => void;
 } & BoxProps): import("react").JSX.Element;

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

@@ -1,66 +1,153 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Chip, Typography } from "@mui/material";
+import { Box, Chip, IconButton, Typography } from "@mui/material";
 import { Icon } from "@iconify/react";
 import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
+import Avatar from "@arcblock/ux/lib/Avatar";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useTheme } from "@arcblock/ux/lib/Theme";
 import DID from "@arcblock/ux/lib/DID";
-import { useCreation } from "ahooks";
+import { useCreation, useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import noop from "lodash/noop";
+import { translations } from "../libs/locales.js";
 export default function UserBasicInfo({
   user,
   isMyself = true,
   switchPassport,
+  switchProfile,
+  openSettings,
   ...rest
 }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
   const currentRole = useCreation(
     () => (user?.passports || [])?.find((item) => item.name === user.role),
     [user?.passports, user?.role]
   );
-  return /* @__PURE__ */ jsxs(Box, { ...rest, children: [
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "h4",
-        sx: {
-          fontWeight: "bold",
-          display: "flex",
-          alignItems: "center",
-          gap: 1,
-          mb: 1
-        },
-        children: [
-          user?.fullName,
-          isMyself ? /* @__PURE__ */ jsx(
-            Chip,
-            {
-              label: currentRole?.title || user?.role || "Guest",
-              size: "small",
-              variant: "outlined",
-              sx: {
-                flexShrink: 0,
-                fontWeight: "bold",
-                fontSize: "12px",
-                color: colors.textBase,
-                borderColor: colors.strokeBorderStrong,
-                backgroundColor: "white",
-                textTransform: "capitalize",
-                pr: 1,
-                pl: 0.5,
+  const theme = useTheme();
+  const isSmallView = theme.breakpoints.down("md");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      sx: {
+        position: "relative",
+        ...rest.sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            src: user?.avatar,
+            did: user?.did,
+            size: isSmallView ? 64 : 80,
+            variant: "circle",
+            shape: "circle",
+            sx: {
+              borderRadius: "100%",
+              backgroundColor: "#fff",
+              position: "relative",
+              overflow: "hidden",
+              ...isMyself ? {
+                cursor: "pointer",
                 "&:hover": {
-                  backgroundColor: "rgba(0, 0, 0, 0.04)"
+                  "&::after": {
+                    content: `"${t("switchProfile")}"`
+                  }
                 },
-                "&:active": {
-                  boxShadow: "none"
+                "&::after": {
+                  color: "white",
+                  position: "absolute",
+                  fontSize: "12px",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  height: "50%",
+                  backgroundColor: "rgba(0, 0, 0, 0.3)",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
                 }
+              } : {}
+            },
+            onClick: isMyself ? switchProfile : noop
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "h5",
+            sx: {
+              fontWeight: "bold",
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              fontSize: "24px !important"
+            },
+            children: [
+              user?.fullName,
+              isMyself ? /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: currentRole?.title || user?.role || "Guest",
+                  size: "small",
+                  variant: "outlined",
+                  sx: {
+                    flexShrink: 0,
+                    fontWeight: "bold",
+                    fontSize: "12px",
+                    color: colors.textBase,
+                    borderColor: colors.strokeBorderStrong,
+                    backgroundColor: "white",
+                    textTransform: "capitalize",
+                    pr: 1,
+                    pl: 0.5,
+                    "&:hover": {
+                      backgroundColor: "rgba(0, 0, 0, 0.04)"
+                    },
+                    "&:active": {
+                      boxShadow: "none"
+                    }
+                  },
+                  clickable: true,
+                  deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
+                  onDelete: switchPassport,
+                  onClick: switchPassport
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false }),
+        isMyself ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: {
+              borderRadius: 2,
+              color: colors.textBase,
+              backgroundColor: "white",
+              border: `1px solid ${colors.strokeBorderBase}`,
+              position: "absolute",
+              bottom: {
+                xs: "unset",
+                md: 0
+              },
+              top: {
+                xs: 0,
+                md: "unset"
               },
-              clickable: true,
-              deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
-              onDelete: switchPassport,
-              onClick: switchPassport
-            }
-          ) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false })
-  ] });
+              right: 0
+            },
+            disableFocusRipple: true,
+            onClick: openSettings,
+            children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
+          }
+        ) : null
+      ]
+    }
+  );
 }

package/es/UserCenter/components/user-center.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import type { PaperProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, }: {
-    children: any;
-    currentTab: string;
-    contentProps?: PaperProps;
-    disableAutoRedirect?: boolean;
-    autoPopupSetting?: boolean;
+export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, }: {
+    readonly children: any;
+    readonly currentTab: string;
+    readonly contentProps?: PaperProps;
+    readonly disableAutoRedirect?: boolean;
+    readonly autoPopupSetting?: boolean;
+    readonly hideFooter?: boolean;
+    readonly headerProps?: object;
+    readonly footerProps?: object;
 }): import("react").JSX.Element | null;