@blocklet/ui-react 2.9.91 → 2.10.0

package/es/UserCenter/components/notification.js

@@ -1,248 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert, Box, CircularProgress, Divider, Stack, Typography } from "@mui/material";
-import { useCreation, useMemoizedFn, useReactive, useRequest } from "ahooks";
-import { Icon } from "@iconify/react";
-import AddRoundedIcon from "@iconify-icons/material-symbols/add-rounded";
-import Switch from "@arcblock/ux/lib/Switch";
-import Button from "@arcblock/ux/lib/Button";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
-import Toast from "@arcblock/ux/lib/Toast";
-import { getWalletDid } from "@arcblock/ux/lib/SessionUser/libs/utils";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translations } from "../libs/locales.js";
-import WebhookItem from "./webhook-item.js";
-import { formatAxiosError } from "../libs/utils.js";
-import { client } from "../../libs/client.js";
-export default function Notification({ user }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const currentState = useReactive({
-    showAdd: false
-  });
-  const notificationConfigState = useRequest(
-    async () => {
-      const data = await client.user.getUserNotificationConfig();
-      return data;
-    },
-    {
-      refreshDeps: [user],
-      loadingDelay: 300
-    }
-  );
-  const notifications = useCreation(() => {
-    return {
-      wallet: true,
-      email: true,
-      phone: false,
-      ...notificationConfigState?.data?.notifications || {}
-    };
-  }, [notificationConfigState?.data?.notifications]);
-  const webhooks = useCreation(() => {
-    return notificationConfigState?.data?.webhooks || [];
-  }, [notificationConfigState?.data?.webhooks]);
-  const onSaveChanges = useMemoizedFn(async (values) => {
-    try {
-      await client.user.saveUserNotificationConfig(values);
-      Toast.success(t("saveSuccess"));
-      notificationConfigState.run();
-    } catch (err) {
-      Toast.error(formatAxiosError(err));
-    }
-  });
-  const handleChangeSwitch = useMemoizedFn(async (channel, value) => {
-    await onSaveChanges({
-      notifications: {
-        [channel]: value
-      }
-    });
-  });
-  const handleTestWebhook = async (data) => {
-    try {
-      await client.user.testNotificationWebhook(data);
-      Toast.success(t("webhookTested"));
-    } catch (err) {
-      Toast.error(formatAxiosError(err));
-    }
-  };
-  const handleDeleteWebhook = useMemoizedFn(async (index) => {
-    await onSaveChanges({
-      webhooks: webhooks.filter((_, i) => i !== index)
-    });
-  });
-  const handleEditWebhook = useMemoizedFn(async (index, webhook) => {
-    await onSaveChanges({
-      webhooks: webhooks.map((item, i) => i === index ? webhook : item)
-    });
-  });
-  const handleAddWebhook = useMemoizedFn(async (webhook) => {
-    await onSaveChanges({
-      webhooks: [...webhooks, webhook]
-    });
-    currentState.showAdd = false;
-  });
-  if (notificationConfigState.error) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: notificationConfigState.error.message });
-  }
-  if (notificationConfigState.loading || !notificationConfigState.data) {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100px"
-        },
-        children: /* @__PURE__ */ jsx(CircularProgress, {})
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 1,
-          alignItems: "start",
-          ".MuiFormControlLabel-root": {
-            gap: 1,
-            m: 0,
-            flexDirection: {
-              xs: "row-reverse",
-              md: "row"
-            },
-            width: {
-              xs: "100%",
-              md: "unset"
-            }
-          },
-          ".MuiSwitch-track": {
-            borderRadius: "100vw"
-          },
-          ".MuiSwitch-thumb": {
-            borderRadius: "100%"
-          },
-          ".MuiSwitch-root.MuiSwitch-sizeSmall": {
-            height: "20px",
-            width: "36px",
-            ".MuiSwitch-thumb": {
-              width: "16px",
-              height: "16px"
-            }
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: notifications.wallet,
-              labelProps: {
-                label: /* @__PURE__ */ jsxs(
-                  Typography,
-                  {
-                    color: "text.primary",
-                    sx: {
-                      fontSize: 14,
-                      display: "flex",
-                      flexFlow: "wrap",
-                      columnGap: 1,
-                      flex: 1
-                    },
-                    children: [
-                      t("walletNotification"),
-                      getWalletDid(user) && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: getWalletDid(user) })
-                    ]
-                  }
-                )
-              },
-              size: "small",
-              onChange: (event) => handleChangeSwitch("wallet", event.target.checked)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: notifications.email,
-              labelProps: {
-                label: /* @__PURE__ */ jsxs(
-                  Typography,
-                  {
-                    color: "text.primary",
-                    sx: {
-                      fontSize: 14,
-                      display: "flex",
-                      flexFlow: "wrap",
-                      columnGap: 1,
-                      flex: 1
-                    },
-                    children: [
-                      t("emailNotification"),
-                      user?.email && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: user?.email })
-                    ]
-                  }
-                )
-              },
-              size: "small",
-              onChange: (event) => handleChangeSwitch("email", event.target.checked)
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, useFlexGap: true, direction: "column", alignItems: "start", children: [
-      webhooks.map((item, index) => /* @__PURE__ */ jsx(
-        WebhookItem,
-        {
-          onTest: handleTestWebhook,
-          onDelete: () => handleDeleteWebhook(index),
-          onSave: (...args) => handleEditWebhook(index, ...args),
-          type: item.type,
-          url: item.url,
-          edit: false
-        },
-        `${index}_${item.url}`
-      )),
-      currentState.showAdd && /* @__PURE__ */ jsx(
-        WebhookItem,
-        {
-          onTest: handleTestWebhook,
-          onCancel: () => {
-            currentState.showAdd = false;
-          },
-          onSave: (...args) => handleAddWebhook(...args),
-          edit: true
-        },
-        "add"
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outlined",
-          size: "small",
-          sx: {
-            color: colors.foregroundsFgBase,
-            borderColor: colors.strokeBorderBase,
-            backgroundColor: colors.buttonsButtonNeutral,
-            "&:hover": {
-              borderColor: colors.strokeBorderBase,
-              backgroundColor: colors.buttonsButtonNeutralHover
-            },
-            py: 0.5,
-            borderRadius: 2
-          },
-          startIcon: /* @__PURE__ */ jsx(Icon, { icon: AddRoundedIcon }),
-          onClick: () => {
-            currentState.showAdd = true;
-          },
-          children: t("addWebhook")
-        }
-      )
-    ] })
-  ] });
-}

package/es/UserCenter/components/passport.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { BoxProps } from '@mui/material';
-import type { User } from '../../@types';
-export default function Passport({ user, ...rest }: {
-    user: User;
-} & BoxProps): import("react").JSX.Element;

package/es/UserCenter/components/passport.js

@@ -1,88 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-import Empty from "@arcblock/ux/lib/Empty";
-import { useTheme } from "@arcblock/ux/lib/Theme";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
-import PassportItem from "@arcblock/ux/lib/Passport";
-import { PASSPORT_STATUS } from "@arcblock/ux/lib/Util/constant";
-import { useCreation, useMemoizedFn } from "ahooks";
-import uniqBy from "lodash/uniqBy";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translations } from "../libs/locales.js";
-import { createPassportSvg } from "../libs/utils.js";
-export default function Passport({ user, ...rest }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const theme = useTheme();
-  const passports = useCreation(() => {
-    const passportList = (user?.passports || []).map((x) => ({
-      ...x,
-      revoked: x.status === PASSPORT_STATUS.REVOKED
-    }));
-    passportList.sort((a, b) => {
-      if (a.revoked === b.revoked) {
-        return 0;
-      }
-      if (a.revoked) {
-        return 1;
-      }
-      return -1;
-    });
-    return uniqBy(passportList, "role");
-  }, [user?.passports]);
-  const currentRole = useCreation(() => passports?.find((item) => item.name === user.role), [passports, user?.role]);
-  const activeColor = useCreation(() => {
-    return theme?.palette?.primary?.main || colors.textBase;
-  }, [theme?.palette?.primary?.main]);
-  if (passports.length === 0) {
-    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("noPassport") }) });
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...rest,
-      sx: {
-        display: "grid",
-        gridTemplateColumns: {
-          xs: "repeat(2, 1fr)",
-          sm: "repeat(3, 1fr)",
-          md: "repeat(2, 1fr)"
-        },
-        gap: 2.5,
-        ...rest.sx
-      },
-      children: passports.map((x) => /* @__PURE__ */ jsx(
-        PassportItem,
-        {
-          passport: x,
-          user,
-          color: window.blocklet.passportColor,
-          createPassportSvg,
-          title: currentRole && currentRole.role === x.role ? t("currentPassport") : "",
-          sx: {
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 1,
-            ".passport-item__display": {
-              width: 166,
-              height: 166,
-              borderRadius: 2,
-              px: 2,
-              display: "flex",
-              justifyContent: "center",
-              backgroundColor: colors.backgroundsBgComponent,
-              boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "unset"
-            },
-            ".passport-item__body": {
-              marginLeft: "0 !important"
-            }
-          }
-        },
-        x.id
-      ))
-    }
-  );
-}

package/es/UserCenter/components/privacy.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-type PrivacyConfig = {
-    key: string;
-    name: string;
-    value: boolean;
-};
-export default function Privacy({ configList, onSave }: {
-    configList: PrivacyConfig[];
-    onSave: () => void;
-}): import("react").JSX.Element;
-export {};

package/es/UserCenter/components/privacy.js

@@ -1,99 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box, Typography } from "@mui/material";
-import Switch from "@arcblock/ux/lib/Switch";
-import { useState } from "react";
-import { useMemoizedFn } from "ahooks";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import Toast from "@arcblock/ux/lib/Toast";
-import { translations } from "../libs/locales.js";
-import { client } from "../../libs/client.js";
-import { formatAxiosError } from "../libs/utils.js";
-export default function Privacy({ configList, onSave }) {
-  const [dataList, setDataList] = useState(configList);
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const handleChangeSwitch = useMemoizedFn(async (type, value) => {
-    try {
-      const result = await client.user.saveUserPrivacyConfig({
-        [type]: !value
-      });
-      setDataList(
-        dataList.map((item) => {
-          return {
-            ...item,
-            value: result?.[item.key] ?? item.value
-          };
-        })
-      );
-      Toast.success(t("saveSuccess"));
-      onSave();
-    } catch (err) {
-      Toast.error(formatAxiosError(err));
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 1,
-        alignItems: "start",
-        ".MuiFormControlLabel-root": {
-          gap: 1,
-          m: 0,
-          flexDirection: {
-            xs: "row-reverse",
-            md: "row"
-          },
-          width: {
-            xs: "100%",
-            md: "unset"
-          }
-        },
-        ".MuiSwitch-track": {
-          borderRadius: "100vw"
-        },
-        ".MuiSwitch-thumb": {
-          borderRadius: "100%"
-        },
-        ".MuiSwitch-root.MuiSwitch-sizeSmall": {
-          height: "20px",
-          width: "36px",
-          ".MuiSwitch-thumb": {
-            width: "16px",
-            height: "16px"
-          }
-        }
-      },
-      children: dataList.map((item) => /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: !item.value,
-          labelProps: {
-            label: /* @__PURE__ */ jsx(
-              Typography,
-              {
-                color: "text.primary",
-                sx: {
-                  fontSize: 14,
-                  display: "flex",
-                  flexFlow: "wrap",
-                  columnGap: 1,
-                  flex: 1
-                },
-                children: t("toPublic", { name: item.name })
-              }
-            )
-          },
-          size: "small",
-          onChange: (event) => handleChangeSwitch(item.key, event.target.checked)
-        },
-        item.key
-      ))
-    }
-  );
-}

package/es/UserCenter/components/settings.d.ts

@@ -1,9 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import { User, UserCenterTab } from '../../@types';
-export default function Settings({ user, settings, onSave, ...rest }: {
-    user: User;
-    onSave: () => void;
-    settings: {
-        userCenterTabs: UserCenterTab[];
-    };
-} & BoxProps): any;

package/es/UserCenter/components/settings.js

@@ -1,89 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import Tabs from "@arcblock/ux/lib/Tabs";
-import { Box } from "@mui/material";
-import { useCreation, useMemoizedFn, useReactive } from "ahooks";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { ConfigUserSpaceProvider } from "../../contexts/config-user-space.js";
-import { translations } from "../libs/locales.js";
-import Notification from "./notification.js";
-import Privacy from "./privacy.js";
-import DidSpace from "./storage/index.js";
-import { UserSessions } from "../../UserSessions/index.js";
-import ThirdPartyLogin from "./third-party-login/index.js";
-export default function Settings({
-  user,
-  settings,
-  onSave,
-  ...rest
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const privacyConfigList = useCreation(() => {
-    const userCenterTabs = settings?.userCenterTabs || [];
-    return userCenterTabs.map((item) => {
-      return {
-        key: item.value,
-        name: item.label,
-        value: item.protected
-      };
-    });
-  }, [settings?.userCenterTabs]);
-  const tabs = useCreation(() => {
-    return [
-      {
-        label: t("notificationManagement"),
-        value: "notification",
-        content: /* @__PURE__ */ jsx(Notification, { user })
-      },
-      {
-        label: t("thirdPartyLogin.title"),
-        value: "thirdPartyLogin",
-        content: /* @__PURE__ */ jsx(ThirdPartyLogin, { user })
-      },
-      {
-        label: t("privacyManagement"),
-        value: "privacy",
-        content: /* @__PURE__ */ jsx(Privacy, { configList: privacyConfigList, onSave })
-      },
-      user?.didSpace?.endpoint && {
-        label: t("storageManagement"),
-        value: "storage",
-        content: /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) })
-      },
-      {
-        label: t("sessionManagement"),
-        value: "session",
-        content: /* @__PURE__ */ jsx(UserSessions, { user })
-      }
-    ].filter(Boolean);
-  }, [user, privacyConfigList]);
-  const currentState = useReactive({
-    tab: tabs[0].value
-  });
-  const currentTab = useCreation(() => {
-    return tabs.find((x) => x.value === currentState.tab);
-  }, [currentState.tab, tabs]);
-  const handleChangeTab = useMemoizedFn((value) => {
-    currentState.tab = value;
-  });
-  return currentTab && /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...rest,
-      sx: {
-        ...rest?.sx,
-        minWidth: {
-          md: 500
-        },
-        maxWidth: "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsx(Tabs, { variant: "card", tabs, current: currentTab.value, onChange: handleChangeTab }),
-        /* @__PURE__ */ jsx(Box, { mt: 2.5, children: currentTab.content })
-      ]
-    }
-  );
-}

package/es/UserCenter/components/storage/connect-to.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { SpaceGateway } from '../../../contexts/config-user-space';
-declare function ConnectTo({ onConnect, storageEndpoint, }: {
-    onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
-    storageEndpoint: string;
-}): import("react").JSX.Element;
-export default ConnectTo;

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

@@ -1,108 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Button, Typography } from "@mui/material";
-import { useState } from "react";
-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,
-  storageEndpoint
-}) {
-  const { t, locale } = useLocaleContext();
-  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
-    open: false,
-    action: "connect-to-did-spaces-for-user",
-    checkTimeout: 1e3 * 300,
-    prefix: "/api/did",
-    checkFn: axios.create({
-      baseURL: joinURL(window.location.origin, RELAY_SOCKET_PREFIX)
-    }).get,
-    extraParams: {},
-    messages: {
-      title: t("storage.spaces.provideNFT.title", { appName: window.blocklet.appName }, locale),
-      scan: t("storage.spaces.provideNFT.scan", { appName: window.blocklet.appName }, locale),
-      confirm: "",
-      success: /* @__PURE__ */ jsx(Typography, { gutterBottom: true, children: t("storage.spaces.provideNFT.success") })
-    },
-    onClose: () => {
-      setAuthorizeFromNftConnect((preValue) => ({
-        ...preValue,
-        open: false
-      }));
-    }
-  });
-  const updateSpaceGateway = async (spaceGateway) => {
-    await onConnect(spaceGateway);
-    toast.success(t("storage.spaces.connectedWithName", { name: spaceGateway.name }));
-  };
-  const onAuthorizeConnectSuccess = (response, decrypt) => {
-    setTimeout(async () => {
-      setAuthorizeFromNftConnect((preValue) => ({
-        ...preValue,
-        open: false
-      }));
-      if (!isEmpty(response.spaceGateway)) {
-        await updateSpaceGateway(decrypt(response.spaceGateway));
-        return;
-      }
-      const endpoint = decrypt(response.endpoint);
-      const space = response.space ? decrypt(response.space) : {};
-      await updateSpaceGateway({
-        endpoint,
-        // name 默认为 DID Space，兼容旧版本的 DID Spaces
-        ...{ name: "DID Space" },
-        ...space
-      });
-    }, 0);
-  };
-  const handleUseWalletConnect = () => {
-    setAuthorizeFromNftConnect((preValue) => ({
-      ...preValue,
-      open: true,
-      extraParams: {
-        appDid: window.blocklet.appId,
-        appName: window.blocklet.appName,
-        appDescription: window.blocklet.appDescription,
-        scopes: "list:object read:object write:object",
-        appUrl: window.blocklet.appUrl,
-        referrer: window.location.href
-      }
-    }));
-  };
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        color: "primary",
-        sx: { textTransform: "none !important", fontSize: "13px", paddingLeft: 0.75, paddingRight: 0.75 },
-        size: "small",
-        onClick: handleUseWalletConnect,
-        variant: "outlined",
-        children: storageEndpoint ? t("storage.spaces.connect.useWalletReconnect") : t("storage.spaces.connect.useWallet")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DidConnect,
-      {
-        forceConnected: false,
-        saveConnect: false,
-        prefix: authorizeFromNftConnect.prefix,
-        open: authorizeFromNftConnect.open,
-        popup: true,
-        action: authorizeFromNftConnect.action,
-        checkFn: authorizeFromNftConnect.checkFn,
-        onSuccess: onAuthorizeConnectSuccess,
-        onClose: authorizeFromNftConnect.onClose,
-        checkTimeout: authorizeFromNftConnect.checkTimeout,
-        extraParams: authorizeFromNftConnect.extraParams,
-        messages: authorizeFromNftConnect.messages,
-        locale
-      }
-    )
-  ] });
-}
-export default ConnectTo;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
-declare function Connected({ spaceGateway, settingStorageEndpoint, }: {
-    spaceGateway: SpaceGateway | undefined;
-    settingStorageEndpoint: SettingStorageEndpoint;
-}): import("react").JSX.Element;
-export default Connected;