@blocklet/ui-react 2.9.18 → 2.9.20

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

@@ -0,0 +1,150 @@
+import { Box, BoxProps, 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';
+// @ts-expect-error
+import SpacesConnectedSvg from './icons/space-connected.svg?react';
+import DidAddress from '@arcblock/ux/lib/DID';
+import PropTypes, { bool, func } from 'prop-types';
+import PreviewSpaceNft from './preview-nft';
+import { SpaceGateway } from '../../../contexts/config-user-space';
+import useMobile from '../../../hooks/use-mobile';
+import { getSpaceNftDisplayUrlFromEndpoint } from '../../../libs/spaces';
+
+
+function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }: {spaceGateway: SpaceGateway, connected: boolean, onDisconnect: Function} & BoxProps) {
+  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: any) {
+      console.error(error);
+      toast.error(error.message);
+    }
+  };
+
+  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' }}>
+          <Box className="spaces-info" display="flex" maxWidth="360px" alignItems="center">
+            <Typography color={connected ? 'primary' : 'inherit'} fontSize="1rem" fontWeight="bold">
+              {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 className="spaces-address" 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>
+
+      <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;

package/src/UserCenter/components/storage/preview-nft.tsx

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

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

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { Box, CircularProgress, IconButton, Paper, Typography } from '@mui/material';
+import { Box, CircularProgress, Paper, Typography } from '@mui/material';
 import type { PaperProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useMount, useRequest } from 'ahooks';
 
@@ -36,6 +36,7 @@ export default function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
+  userDid,
 }: {
   readonly children: any;
   readonly currentTab: string;
@@ -45,6 +46,7 @@ export default function UserCenter({
   readonly hideFooter?: boolean;
   readonly headerProps?: object;
   readonly footerProps?: object;
+  readonly userDid?: string;
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -54,6 +56,10 @@ export default function UserCenter({
   const session = sessionCtx?.session;
 
   const currentDid = useCreation(() => {
+    if (userDid) {
+      return userDid;
+    }
+
     const currentUrl = window.location.href;
     const query = getQuery(currentUrl);
     if (query?.did) {
@@ -63,7 +69,7 @@ export default function UserCenter({
       return query.did;
     }
     return session?.user?.did;
-  }, [session?.user?.did]);
+  }, [session?.user?.did, userDid]);
 
   const isMyself = useCreation(() => {
     if (session?.user) {
@@ -284,13 +290,13 @@ export default function UserCenter({
         {isMyself ? (
           <>
             <Box>
-              <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
+              <Typography variant="h6" sx={{ fontWeight: 600, mb: 1.5 }}>
                 {t('passport')}
               </Typography>
               <Passport user={userState.data} />
             </Box>
             <Box>
-              <Typography variant="h5" sx={{ fontWeight: 'bold', mb: 1.5 }}>
+              <Typography variant="h6" sx={{ fontWeight: 600, mb: 1.5 }}>
                 {t('userInfo')}
               </Typography>
               <UserInfo

package/src/UserCenter/libs/api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+axios.defaults.timeout = 10 * 1000; // 超时时间设为10s
+
+const api = axios.create();
+
+export { axios, api };

package/src/UserCenter/libs/locales.ts

@@ -23,6 +23,7 @@ export const translations = {
     noUserFound: '未找到指定的用户',
     notificationManagement: '通知管理',
     privacyManagement: '隐私管理',
+    storageManagement: "存储管理",
     webhook: {
       url: '自定义URL',
       slack: 'Slack',
@@ -57,6 +58,7 @@ export const translations = {
     emptyField: 'Empty field',
     notificationManagement: 'Notification',
     privacyManagement: 'Privacy',
+    storageManagement: 'Storage',
     emptyContent: 'Empty',
     underProtected: 'This page has protected privacy',
     noUserFound: 'No user found',

package/src/contexts/config-user-space.tsx

@@ -0,0 +1,86 @@
+import { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import { SessionContext as TSessionContext } from '../@types';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+
+
+export interface SpaceGateway {
+  did: string;
+  name: string;
+  url: string;
+  endpoint: string;
+}
+
+export interface SettingStorageEndpoint {
+  (endpoint: string | undefined): void | Promise<void>;
+} 
+
+interface ConfigUserSpaceContextType {
+  loading: boolean;
+  spaceGateway: SpaceGateway | undefined;
+  deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
+  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) =>  Promise<void>;
+  storageEndpoint: string;
+  settingStorageEndpoint: SettingStorageEndpoint;
+  hasStorageEndpoint: boolean;
+}
+
+const ConfigUserSpaceContext = createContext<ConfigUserSpaceContextType>({} as ConfigUserSpaceContextType);
+const { Provider, Consumer } = ConfigUserSpaceContext;
+
+function ConfigUserSpaceProvider({ children }: {children: React.ReactNode }) {
+  const [loading] = useState(false);
+  const {session} = useContext<TSessionContext>(SessionContext);
+  const { user } = session;
+
+  const [spaceGateway, setSpaceGateway] = useState<SpaceGateway | undefined>();
+  const storageEndpoint = useMemo(() => {
+    return user?.didSpace?.endpoint;
+  }, [user?.didSpace]);
+
+  useEffect(() => {
+    setSpaceGateway(user?.didSpace as SpaceGateway)
+  }, [user?.didSpace])
+
+  const deleteSpaceGateway = async (): Promise<void> => {
+    setSpaceGateway(undefined);
+  };
+ 
+  const updateSpaceGateway = async (x: SpaceGateway) => {
+    setSpaceGateway(x);
+    session.refresh();
+    // eslint-disable-next-line no-use-before-define
+    await settingStorageEndpoint(x.endpoint);
+  };
+
+
+  const settingStorageEndpoint =  (endpoint: string | undefined) => {};
+
+  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
+
+  return (
+    <Provider
+      value={{
+        loading,
+        spaceGateway,
+        deleteSpaceGateway,
+        updateSpaceGateway,
+        storageEndpoint,
+        settingStorageEndpoint,
+        hasStorageEndpoint,
+      }}>
+      {children}
+    </Provider>
+  );
+}
+
+function useConfigUserSpaceContext() {
+  const res = useContext(ConfigUserSpaceContext);
+  return res;
+}
+
+export {
+  ConfigUserSpaceContext,
+  ConfigUserSpaceProvider,
+  Consumer as ConfigUserSpaceConsumer,
+  useConfigUserSpaceContext,
+};

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,6 @@
+import { Breakpoint, useTheme, useMediaQuery } from '@mui/material';
+
+export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint }) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}

package/src/libs/spaces.tsx

@@ -0,0 +1,10 @@
+import { joinURL } from "ufo";
+
+export function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string {
+  const prefix = endpoint.replace(/\/api\/space\/.+/, '');
+
+  const strArray = endpoint.replace(/\/$/, '').split('/');
+  const spaceDid = strArray.at(-4);
+
+  return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
+}