feat(dcellar-web-ui): add sp meta

apps/dcellar-web-ui/src/base/theme/antd.ts

@@ -0,0 +1,18 @@
+import { ThemeConfig } from 'antd';
+
+export const theme: ThemeConfig = {
+  token: {
+    colorBorderSecondary: '#e6e8ea',
+    colorLink: '#00BA34',
+    colorLinkActive: '#00BA34',
+    colorLinkHover: '#00BA34',
+    colorText: '#1E2026',
+    colorTextHeading: '#76808F',
+    fontFamily: 'Inter, sans-serif',
+  },
+  components: {
+    Tooltip: {
+      zIndexPopup: 1600,
+    },
+  },
+};

apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx

@@ -20,11 +20,13 @@ import {
   InputProps,
 } from '@totejs/uikit';
 import React, { useEffect, useRef, useState } from 'react';
+import TickIcon from '@/components/common/SvgIcon/TickIcon.svg';
 
 import noResultImage from '@/public/images/common/no-result.png';
 import { useKeyDown } from '@/hooks/useKeyDown';
 import { useSaveFuncRef } from '@/hooks/useSaveFuncRef';
 import { GAClick } from '@/components/common/GATracker';
+import styled from '@emotion/styled';
 
 interface ListItemProps extends MenuItemProps {
   gaClickName?: string;
@@ -122,21 +124,7 @@ export function Select(props: DCSelectProps) {
       />
 
       <MenuList border="1px solid readable.border" borderRadius={8} {...listProps}>
-        {header && (
-          <Box
-            color="#2AA372"
-            fontSize={12}
-            lineHeight="15px"
-            bg="bg.bottom"
-            py={8}
-            px={24}
-            fontWeight={500}
-            borderBottom="1px solid readable.border"
-            {...headerProps}
-          >
-            {header}
-          </Box>
-        )}
+        {header}
 
         <Box
           maxH={220}
@@ -158,8 +146,10 @@ export function Select(props: DCSelectProps) {
             return (
               <GAClick key={item.value} name={gaClickName}>
                 <MenuItem
-                  px={24}
-                  py={8}
+                  as="div"
+                  position="relative"
+                  px={0}
+                  py={0}
                   transitionDuration="normal"
                   transitionProperty="colors"
                   bg={isSelected ? rgba('#00BA34', 0.1) : undefined}
@@ -172,7 +162,7 @@ export function Select(props: DCSelectProps) {
                   }}
                   {...restItemProps}
                 >
-                  {item.label}
+                  {isSelected && <Tick />} {item.label}
                 </MenuItem>
               </GAClick>
             );
@@ -258,3 +248,9 @@ const NoResult = () => {
     </Center>
   );
 };
+
+const Tick = styled(TickIcon)`
+  color: #00ba34;
+  position: absolute;
+  left: 8px;
+`;

apps/dcellar-web-ui/src/components/common/DCTable/index.tsx

@@ -13,23 +13,12 @@ import { useAppSelector } from '@/store';
 import { selectUploadQueue, UploadFile } from '@/store/slices/global';
 import { find } from 'lodash-es';
 import { formatBytes } from '@/modules/file/utils';
+import { theme } from '@/base/theme/antd';
 
 export type AlignType = 'left' | 'right' | 'center';
 
 export type FixedType = 'left' | 'right' | boolean;
 
-const theme: ThemeConfig = {
-  token: {
-    colorBorderSecondary: '#e6e8ea',
-    colorLink: '#00BA34',
-    colorLinkActive: '#00BA34',
-    colorLinkHover: '#00BA34',
-    colorText: '#1E2026',
-    colorTextHeading: '#76808F',
-    fontFamily: 'Inter, sans-serif',
-  },
-};
-
 interface DCTable extends TableProps<any> {
   renderEmpty?: ConfigProviderProps['renderEmpty'];
 }

apps/dcellar-web-ui/src/components/common/DCTooltip/index.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { ConfigProvider, Tooltip, TooltipProps } from 'antd';
+import { theme } from '@/base/theme/antd';
+
+type DCTooltipProps = TooltipProps & {};
+
+export const DCTooltip = memo<DCTooltipProps>(function DCTooltip({ arrow = false, ...props }) {
+  return (
+    <ConfigProvider theme={theme}>
+      <Tooltip
+        overlayInnerStyle={{
+          borderRadius: 4,
+          border: '1px solid #E6E8EA',
+          padding: '4px 8px',
+          background: '#FFFFFF',
+          color: '#1E2026',
+          fontSize: 12,
+          lineHeight: '15px',
+          minHeight: 25,
+          boxShadow: 'none',
+        }}
+        {...props}
+        arrow={arrow}
+      />
+    </ConfigProvider>
+  );
+});

apps/dcellar-web-ui/src/components/layout/Header/GlobalTasks.tsx

@@ -21,11 +21,13 @@ import axios from 'axios';
 import { headObject, queryLockFee } from '@/facade/object';
 import Long from 'long';
 import { formatLockFee } from '@/utils/object';
+import { setupSpMeta } from '@/store/slices/sp';
 
 interface GlobalTasksProps {}
 
 export const GlobalTasks = memo<GlobalTasksProps>(function GlobalTasks() {
   const dispatch = useAppDispatch();
+  const { SP_RECOMMEND_META } = useAppSelector((root) => root.apollo);
   const { loginAccount } = useAppSelector((root) => root.persist);
   const { spInfo } = useAppSelector((root) => root.sp);
   const { primarySp } = useAppSelector((root) => root.object);
@@ -128,5 +130,10 @@ export const GlobalTasks = memo<GlobalTasksProps>(function GlobalTasks() {
     }
   }, [sealQueue.join(''), counter]);
 
+  useAsyncEffect(async () => {
+    if (!loginAccount || !SP_RECOMMEND_META) return;
+    dispatch(setupSpMeta());
+  }, [loginAccount, SP_RECOMMEND_META]);
+
   return <></>;
 });

apps/dcellar-web-ui/src/facade/sp.ts

@@ -1,6 +1,8 @@
 import { getClient } from '@/base/client';
 import { resolve } from '@/facade/common';
 import { commonFault } from '@/facade/error';
+import axios from 'axios';
+import { SpMeta } from '@/store/slices/sp';
 
 export const getStorageProviders = async () => {
   const client = await getClient();
@@ -9,3 +11,8 @@ export const getStorageProviders = async () => {
   console.log('getStorageProviders', performance.now() - start);
   return (sps || []).filter((sp) => sp.endpoint.startsWith('https'));
 };
+
+export const getSpMeta = async () => {
+  const { data } = await axios.get<Array<SpMeta>>('/api/sp-meta');
+  return data;
+};

apps/dcellar-web-ui/src/modules/buckets/List/components/CreateBucket.tsx

@@ -46,6 +46,7 @@ import { getSpOffChainData } from '@/store/slices/persist';
 import { useMount } from 'ahooks';
 import { setupTmpAvailableBalance } from '@/store/slices/global';
 import { DCDrawer } from '@/components/common/DCDrawer';
+import { DCTooltip } from '@/components/common/DCTooltip';
 
 type Props = {
   isOpen: boolean;
@@ -432,7 +433,7 @@ export const CreateBucket = ({ isOpen, onClose, refetch }: Props) => {
               </Box>
               <Flex flexDir="column" gap={12}>
                 <FormControl isInvalid={!isEmpty(errors?.bucketName)}>
-                  <FormLabel fontWeight={500} fontSize={14} mb={8} fontFamily="heading">
+                  <FormLabel fontWeight={500} fontSize={14} mb={8}>
                     Name
                   </FormLabel>
                   <InputGroup>
@@ -500,7 +501,7 @@ export const CreateBucket = ({ isOpen, onClose, refetch }: Props) => {
                 </FormControl>
 
                 <FormControl>
-                  <FormLabel fontSize={14} fontWeight={500} mb={8} fontFamily="heading">
+                  <FormLabel fontSize={14} fontWeight={500} mb={8}>
                     Primary Storage Provider
                   </FormLabel>
                   <SPSelector onChange={onChangeSP} />