@blocklet/ui-react 2.12.8 → 2.12.10

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

@@ -20,7 +20,7 @@ import { PROFILE_URL } from "@arcblock/ux/lib/Util/constant";
 import Footer from "../../Footer/index.js";
 import Header from "../../Header/index.js";
 import { translations } from "../libs/locales.js";
-import { UserInfo, UserBasicInfo, SwitchRole } from "./user-info/index.js";
+import { UserBasicInfo } from "./user-info/index.js";
 import { formatBlockletInfo, getLink, getLocalizedNavigation } from "../../blocklets.js";
 import Passport from "./passport.js";
 import Settings from "./settings.js";
@@ -28,15 +28,16 @@ import { client } from "../../libs/client.js";
 import useMobile from "../../hooks/use-mobile.js";
 import { ConfigUserSpaceProvider } from "../../contexts/config-user-space.js";
 import DidSpace from "./storage/index.js";
-const profileLink = joinURL(PROFILE_URL, "/profile");
+import Nft from "./nft.js";
+const nftsLink = joinURL(PROFILE_URL, "/nfts");
 const settingsLink = joinURL(PROFILE_URL, "/settings");
 const didSpacesLink = joinURL(PROFILE_URL, "/did-spaces");
 const Main = styled(Box)(({ theme }) => ({
   flex: 1,
   boxSizing: "border-box",
-  padding: theme.spacing(3),
+  padding: "0 16px",
   width: "100%",
-  maxWidth: 1200,
+  maxWidth: 1600,
   margin: "0 auto",
   display: "flex",
   alignItems: "stretch",
@@ -152,29 +153,32 @@ export default function UserCenter({
     }
   }, []);
   const defaultTabs = useCreation(() => {
-    const tabs = [
-      {
-        label: t("common.profile"),
-        protected: false,
-        value: profileLink,
-        url: getLink(profileLink, locale)
-      }
-    ];
+    let tabs = [];
     if (isMyself) {
-      tabs.push({
-        label: t("common.setting"),
-        protected: true,
-        isPrivate: true,
-        value: settingsLink,
-        url: getLink(settingsLink, locale)
-      });
-      tabs.push({
-        label: t("storageManagement"),
-        protected: true,
-        isPrivate: true,
-        value: didSpacesLink,
-        url: getLink(didSpacesLink, locale)
-      });
+      tabs = [
+        {
+          label: t("common.nft"),
+          protected: true,
+          isPrivate: true,
+          // 隐私数据，仅自己可见
+          value: nftsLink,
+          url: getLink(nftsLink, locale)
+        },
+        {
+          label: t("common.setting"),
+          protected: true,
+          isPrivate: true,
+          value: settingsLink,
+          url: getLink(settingsLink, locale)
+        },
+        {
+          label: t("storageManagement"),
+          protected: true,
+          isPrivate: true,
+          value: didSpacesLink,
+          url: getLink(didSpacesLink, locale)
+        }
+      ];
     }
     return tabs;
   }, [isMyself, locale]);
@@ -189,7 +193,8 @@ export default function UserCenter({
         label: x.title || x.label,
         url: x.link || x.url,
         protected: privacyState?.data?.[value] ?? false,
-        isPrivate: x.isPrivate
+        isPrivate: x.isPrivate || x._rawLink === "/payment-kit/customer"
+        // FIXME: HACK: 隐藏 payment-kit/customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
         // icon: x.icon,
       };
     }).filter((x) => isMyself || !x.isPrivate);
@@ -227,8 +232,8 @@ export default function UserCenter({
   const isSettingTab = useCreation(() => {
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/settings");
   }, [currentActiveTab]);
-  const isProfileTab = useCreation(() => {
-    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile");
+  const isNftsTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile") || currentActiveTab?.value === joinURL(PROFILE_URL, "/nfts");
   }, [currentActiveTab]);
   const isDidSpaceTab = useCreation(() => {
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/did-spaces");
@@ -245,53 +250,32 @@ export default function UserCenter({
     }
   });
   const renderDefaultTab = useCreation(() => {
-    if (isProfileTab) {
-      return /* @__PURE__ */ jsx(
+    if (isNftsTab && isMyself) {
+      return /* @__PURE__ */ jsxs(
         Box,
         {
           sx: {
-            maxWidth: "100%",
-            position: "relative"
+            display: "flex",
+            flexDirection: "column",
+            gap: 2.5
           },
-          children: /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                flexDirection: "column",
-                gap: 2.5,
-                position: {
-                  xs: "static",
-                  md: stickySidebar ? "sticky" : "static"
-                },
-                top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  Box,
-                  {
-                    sx: {
-                      width: {
-                        sx: "100%",
-                        md: 420
-                      }
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", children: [
-                        /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
-                        isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user: userState.data, switchPassport: handleSwitchPassport }) : null
-                      ] }),
-                      /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
-                    ]
-                  }
-                ),
-                isMyself ? /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
-                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
-                ] }) : null
-              ]
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2 }, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    color: colors.foregroundsFgBase,
+                    fontWeight: 600,
+                    mb: 2.5
+                  },
+                  children: t("passport")
+                }
+              ),
+              /* @__PURE__ */ jsx(Passport, { user: userState.data })
+            ] }),
+            /* @__PURE__ */ jsx(Nft, { user: userState.data })
+          ]
         }
       );
     }
@@ -302,7 +286,7 @@ export default function UserCenter({
       return /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) });
     }
     return null;
-  }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
+  }, [isSettingTab, isNftsTab, userState, isMyself, stickySidebar, settingContent]);
   const emptyContent = useCreation(() => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -397,66 +381,79 @@ export default function UserCenter({
         userCenterTabs.length === 0 && emptyContent
       ] });
     }
-    return /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+    return /* @__PURE__ */ jsxs(ContentWrapper, { display: "flex", flexDirection: isMobile ? "column" : "row", children: [
+      /* @__PURE__ */ jsxs(Box, { flex: "1", order: isMobile ? 2 : "unset", children: [
+        userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            flexDirection: "column",
+            sx: {
+              height: "100%",
+              overflow: "auto",
+              padding: "1px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  orientation: "horizontal",
+                  variant: "line",
+                  tabs: userCenterTabs,
+                  current: currentActiveTab?.value ?? currentTab,
+                  onChange: handleChangeTab,
+                  sx: {
+                    mb: 2,
+                    ".MuiTabs-flexContainer": {
+                      gap: 3,
+                      ".MuiButtonBase-root": {
+                        padding: "40px 4px 32px 4px",
+                        fontSize: 16
+                      },
+                      ".MuiTab-root": {
+                        display: "block",
+                        textAlign: "left",
+                        alignItems: "flex-start",
+                        justifyContent: "flex-start",
+                        fontWeight: 400
+                      }
+                    },
+                    ".MuiTabs-scroller": {
+                      "&:after": {
+                        content: '""',
+                        display: "block",
+                        width: "100%",
+                        height: "1px",
+                        backgroundColor: `${colors.dividerColor} !important`
+                      }
+                    }
+                  }
+                }
+              ),
+              tabContent
+            ]
+          }
+        ) : null,
+        userCenterTabs.length === 0 && emptyContent
+      ] }),
+      !isMobile && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { borderColor: colors.dividerColor, ml: 5 } }),
       /* @__PURE__ */ jsx(
         UserBasicInfo,
         {
+          isMobile,
+          order: isMobile ? 1 : "unset",
           isMyself,
           switchPassport: handleSwitchPassport,
           switchProfile: session.switchProfile,
           user: userState.data,
           showFullDid: false,
           sx: {
-            display: "flex",
-            gap: 3,
-            mt: 2
+            padding: !isMobile ? "40px 24px 24px 40px" : "24px 0",
+            ...!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {},
+            boxSizing: "content-box"
           }
         }
-      ),
-      /* @__PURE__ */ jsx(Divider, { sx: { mt: 3, mb: 3, borderColor: colors.dividerColor } }),
-      userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
-        Box,
-        {
-          display: isMobile ? "block" : "flex",
-          sx: {
-            height: "100%",
-            overflow: "auto",
-            padding: "1px"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Tabs,
-              {
-                orientation: isMobile ? "horizontal" : "vertical",
-                variant: "line",
-                tabs: userCenterTabs,
-                current: currentActiveTab?.value ?? currentTab,
-                onChange: handleChangeTab,
-                sx: {
-                  width: isMobile ? "100%" : 160,
-                  marginBottom: isMobile ? "8px" : 0,
-                  flexShrink: 0,
-                  ".MuiTabs-flexContainer": {
-                    gap: 1.5,
-                    ".MuiButtonBase-root": {
-                      fontSize: 16
-                    },
-                    ".MuiTab-root": {
-                      display: "block",
-                      textAlign: "left",
-                      alignItems: "flex-start",
-                      justifyContent: "flex-start"
-                    }
-                  }
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(Divider, { orientation: "vertical", sx: { height: "100%", mr: 3, borderColor: colors.dividerColor } }),
-            tabContent
-          ]
-        }
-      ) : null,
-      userCenterTabs.length === 0 && emptyContent
+      )
     ] });
   }, [
     userState,

package/lib/UserCenter/components/user-info/clock.d.ts

@@ -0,0 +1,4 @@
+export default function Clock({ timezone, locale }: {
+    timezone?: string;
+    locale?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezonePlugin from "dayjs/plugin/timezone";
+import { formatToDatetime } from "@arcblock/ux/lib/Util";
+import { useCreation } from "ahooks";
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+export default function Clock({ timezone = "utc", locale = "zh" }) {
+  const [time, setTime] = useState(dayjs().tz(timezone));
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      setTime(dayjs().tz(timezone));
+    }, 6e3);
+    return () => clearInterval(timerId);
+  }, [timezone]);
+  const formatTime = useCreation(() => {
+    const localeOption = locale === "zh" ? "zh-cn" : "en-us";
+    return formatToDatetime(time.toDate(), { tz: timezone, locale: localeOption });
+  }, [time, timezone, locale]);
+  return /* @__PURE__ */ jsx("div", { children: formatTime });
+}

package/lib/UserCenter/components/user-info/link-preview-input.d.ts

@@ -0,0 +1,5 @@
+export declare function LinkPreviewInput({ editable, links, onChange, }: {
+    editable?: boolean;
+    links: string[];
+    onChange: (links: string[]) => void;
+}): import("react").JSX.Element;

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, FormControl, IconButton, TextField, Typography } from "@mui/material";
+import styled from "@emotion/styled";
+import RemoveIcon from "@arcblock/icons/lib/Subtract";
+import AddIcon from "@mui/icons-material/Add";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useEffect, useMemo, useState } from "react";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn } from "ahooks";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import LinkIcon from "@arcblock/icons/lib/Link";
+import { joinURL } from "ufo";
+import { isValidUrl } from "./utils.js";
+import { translations } from "../../libs/locales.js";
+function LinkInput({ value, onChange, error }) {
+  const handleUrlChange = (event) => {
+    const inputValue = event.target.value;
+    onChange(inputValue);
+  };
+  return /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      variant: "outlined",
+      value,
+      onChange: handleUrlChange,
+      fullWidth: true,
+      error,
+      helperText: error ? "Invalid URL" : "",
+      sx: {
+        fieldset: {
+          borderColor: colors.dividerColor
+        }
+      }
+    }
+  ) });
+}
+function DynamicLinkForm({ links = [], onChange }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const [errors, setErrors] = useState([false]);
+  const isLastError = useMemo(() => {
+    const lastLink = links[links.length - 1];
+    return !isValidUrl(lastLink) || errors.length > 0 && errors[errors.length - 1];
+  }, [errors, links]);
+  const handleAddLink = () => {
+    if (links.length < 5 || !isLastError) {
+      onChange([...links, ""]);
+    }
+  };
+  const handleRemoveLink = (index) => {
+    const updatedLinks = links.filter((_, i) => i !== index);
+    const updatedErrors = errors.filter((_, i) => i !== index);
+    setErrors(updatedErrors);
+    onChange(updatedLinks);
+  };
+  const handleInputChange = (index, value) => {
+    const updatedLinks = [...links];
+    updatedLinks[index] = value;
+    const updatedErrors = [...errors];
+    updatedErrors[index] = !!(value && !isValidUrl(value));
+    setErrors(updatedErrors);
+    onChange(updatedLinks);
+  };
+  return /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
+    /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0, fontSize: "12px", color: "#4B5563" }, children: "Social Media" }) }),
+    links.map((link, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "flex-start", mb: 1, children: [
+        /* @__PURE__ */ jsx(LinkInput, { value: link, onChange: (value) => handleInputChange(index, value), error: errors[index] }),
+        /* @__PURE__ */ jsx(IconButton, { sx: { color: colors.foregroundsFgMuted }, onClick: () => handleRemoveLink(index), children: /* @__PURE__ */ jsx(RemoveIcon, {}) })
+      ] }, index)
+    )),
+    links.length < 5 && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        fullWidth: true,
+        variant: "outlined",
+        disabled: isLastError,
+        onClick: handleAddLink,
+        size: "small",
+        sx: {
+          height: "40px",
+          border: `1px dashed ${colors.dividerColor}`,
+          color: colors.textBase,
+          "&:hover": {
+            border: `1px dashed ${colors.backgroundsBgSubtileHover}`,
+            backgroundColor: colors.backgroundsBgSubtileHover
+          },
+          "&.Mui-disabled": {
+            borderStyle: "dashed"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(AddIcon, {}),
+          " ",
+          /* @__PURE__ */ jsx("span", { children: t("profile.addLink") })
+        ]
+      }
+    )
+  ] });
+}
+function FaviconPreview({ link }) {
+  const [favicon, setFavicon] = useState("");
+  const [iconError, setIconError] = useState(false);
+  useEffect(() => {
+    try {
+      if (link) {
+        const url = new URL(link);
+        const faviconUrl = joinURL(url.origin, "favicon.ico");
+        const img = new Image();
+        img.src = faviconUrl;
+        img.onload = () => {
+          setFavicon(faviconUrl);
+          setIconError(false);
+        };
+        img.onerror = () => {
+          setIconError(true);
+          setFavicon("");
+        };
+      } else {
+        setIconError(true);
+        setFavicon("");
+      }
+    } catch (error) {
+      setIconError(true);
+    }
+  }, [link]);
+  if (!link) {
+    return null;
+  }
+  if (iconError || !favicon) {
+    return /* @__PURE__ */ jsx(LinkIcon, { width: 20, height: 20 });
+  }
+  return /* @__PURE__ */ jsx("img", { src: favicon, alt: "Favicon", width: 20, height: 20 });
+}
+export function LinkPreviewInput({
+  editable = false,
+  links = [],
+  onChange
+}) {
+  if (editable) {
+    return /* @__PURE__ */ jsx(DynamicLinkForm, { links, onChange });
+  }
+  return /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", flexDirection: "column", gap: 2, children: links.map((link) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      sx: {
+        overflow: "hidden",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(FaviconPreview, { link }),
+        /* @__PURE__ */ jsx(LinkDiv, { children: /* @__PURE__ */ jsx(Box, { component: "a", href: link, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: link }) })
+      ]
+    },
+    link
+  )) });
+}
+const LinkDiv = styled.span`
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &,
+  & > * {
+    color: #222;
+  }
+
+  & > * {
+    word-break: break-all;
+  }
+
+  .status {
+    margin-left: 8px;
+  }
+`;

package/lib/UserCenter/components/user-info/metadata.d.ts

@@ -0,0 +1,7 @@
+import type { User, UserMetadata } from '../../../@types';
+export default function UserMetadataComponent({ isMyself, user, onSave, }: {
+    isMyself: boolean;
+    user: User;
+    onSave: (v: UserMetadata) => void;
+    isMobile?: boolean;
+}): import("react").JSX.Element;