feat(dcellar-web-ui): add tutorial card and update logo

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

@@ -19,7 +19,7 @@ export const Header = memo<HeaderProps>(function Header({ taskManagement = true
       <HeaderContainer>
         <LogoContainer>
           <Link href="/" target="_blank" data-track-id="dc.main.nav.logo.click">
-            <IconFont type="logo" w={122} h={24} />
+            <IconFont type="logo-new" w={184} h={32} />
           </Link>
           {runtimeEnv === 'testnet' && <Badge>{networkTag(runtimeEnv)}</Badge>}
         </LogoContainer>

apps/dcellar-web-ui/src/components/layout/Logo/index.tsx

@@ -14,7 +14,7 @@ interface ILogo extends BoxProps {
 export const Logo: React.FC<ILogo> = (props) => {
   const { href, target = '', title = '', ...restProps } = props;
   const { basePath } = useRouter();
-  const logo = <IconFont w={132} h={26} type={'logo'} />;
+  const logo = <IconFont w={184} h={32} type={'logo-new'} />;
 
   return (
     <Box {...restProps}>

apps/dcellar-web-ui/src/modules/dashboard/components/TutorialCard.tsx

@@ -0,0 +1,107 @@
+import { Card } from './Common';
+import { Box, Flex, Link, Text } from '@node-real/uikit';
+import { IconFont } from '@/components/IconFont';
+import { DCButton } from '@/components/common/DCButton';
+import { useRouter } from 'next/router';
+import { InternalRoutePaths } from '@/constants/paths';
+import { useAppDispatch } from '@/store';
+import { setIsShowTutorialCard } from '@/store/slices/persist';
+
+export const TutorialCard = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const onHideClick = () => {
+    dispatch(setIsShowTutorialCard(false));
+  };
+
+  const steps = [
+    {
+      title: 'Create a bucket',
+      description:
+        "A bucket acts as your data's storage space. Feel free to manage your data via the console or the SDK.",
+      icon: 'create-bucket',
+      Link: (
+        <DCButton onClick={() => router.push(InternalRoutePaths.buckets)}>Create Bucket</DCButton>
+      ),
+    },
+    {
+      title: 'Manage Objects',
+      description:
+        'Upload, delete, and share objects with invited groups that have the appropriate authority levels.',
+      icon: 'upload-objects',
+      Link: (
+        <Link
+          fontWeight={500}
+          target="_blank"
+          href="https://docs.nodereal.io/docs/dcellar-get-started#upload-object"
+        >
+          Learn More
+        </Link>
+      ),
+    },
+    {
+      title: 'Monitor Usage',
+      description:
+        'DCellar provides a highly efficient dashboard, enabling you to manage your data usage and cost estimates with ease.',
+      icon: 'share-objects',
+      Link: (
+        <Link
+          fontWeight={500}
+          target="_blank"
+          href="https://docs.nodereal.io/docs/dcellar-get-started#monitor-usage"
+        >
+          Learn More
+        </Link>
+      ),
+    },
+  ];
+
+  return (
+    <Card mb={16}>
+      <Flex justifyContent={'space-between'} paddingY={8} mb={8}>
+        <Text fontSize={18} fontWeight={700}>
+          Get Started with BNB Greenfield
+        </Text>
+        <Flex
+          onClick={onHideClick}
+          gap={4}
+          color={'readable.tertiary'}
+          alignItems={'center'}
+          cursor={'pointer'}
+        >
+          <IconFont type="nosee" />
+          <Text>Don&apos;t show again</Text>
+        </Flex>
+      </Flex>
+      <Flex>
+        {steps.map((step, index) => (
+          <>
+            <Box key={index} marginX={24}>
+              <Flex gap={8} mb={8} alignItems={'center'}>
+                <Flex
+                  fontSize={12}
+                  w={20}
+                  h={20}
+                  justifyContent={'center'}
+                  alignItems={'center'}
+                  color={'brand.brand6'}
+                  border="1px solid brand.brand6"
+                  borderRadius={'10'}
+                >
+                  {index + 1}
+                </Flex>
+                <Text fontWeight={600}>{step.title}</Text>
+              </Flex>
+              <Text color="readable.tertiary" mb={16}>
+                {step.description}
+              </Text>
+              {step.Link}
+            </Box>
+            {index !== steps.length - 1 && <Box w={1} bg={'readable.border'} />}
+          </>
+        ))}
+      </Flex>
+    </Card>
+  );
+};

apps/dcellar-web-ui/src/modules/dashboard/index.tsx

@@ -13,21 +13,18 @@ import { setupBucketList } from '@/store/slices/bucket';
 import { setupBucketDailyStorage } from '@/store/slices/dashboard';
 import { getCurMonthDetailUrl } from '@/utils/accounts';
 import { useRouter } from 'next/router';
+import { TutorialCard } from './components/TutorialCard';
 
 export const Dashboard = () => {
   const dispatch = useAppDispatch();
   const loginAccount = useAppSelector((root) => root.persist.loginAccount);
-
+  const isShowTutorialCard = useAppSelector((root) => root.persist.isShowTutorialCard);
   const [isLessThan1200] = useMediaQuery('(max-width: 1200px)');
-
   const curMonthDetailUrl = getCurMonthDetailUrl();
-
   const router = useRouter();
-
   const onNavigate = (path: string) => {
     router.push(path);
   };
-
   useMount(async () => {
     dispatch(setupOwnerAccount());
     dispatch(setupTotalCost());
@@ -42,6 +39,7 @@ export const Dashboard = () => {
       <Text as="h1" fontSize={24} fontWeight={700} mb={16}>
         Dashboard
       </Text>
+      {isShowTutorialCard && <TutorialCard />}
       <Flex gap={16}>
         <Flex flexDirection={'column'} gap={16} flex={1} minW={0}>
           <Flex gap={16}>

apps/dcellar-web-ui/src/modules/share/ShareLogin.tsx

@@ -19,7 +19,7 @@ export const ShareLogin = () => {
       <Cube2 />
       <Cube3 />
       <Cube4 />
-      <IconFont type={'logo'} w={242} h={45} />
+      <IconFont type={'logo-new'} w={242} h={45} />
       <Text mt={48} mb={4} fontSize={24} fontWeight={600}>
         Connect wallet to view objects in DCellar.
       </Text>

apps/dcellar-web-ui/src/pages/_document.tsx

@@ -26,7 +26,7 @@ export default function Document() {
             __html: `window.__ASSET_PREFIX = ${flatted.stringify(assetPrefix)}`,
           }}
         ></script>
-        <script defer src={`${assetPrefix}/js/iconfont_v0.8.min.js`}></script>
+        <script defer src={`${assetPrefix}/js/iconfont_v0.9.min.js`}></script>
         <script defer src={`${assetPrefix}/wasm/tinygo_wasm_exec_v1.js`}></script>
         <script defer src={`${assetPrefix}/wasm/tinygo_init_v1.js`}></script>
         <EthereumScript />

apps/dcellar-web-ui/src/store/slices/persist.ts

@@ -39,6 +39,7 @@ export interface PersistState {
   billPageSize: number;
   accountBillPageSize: number;
   paymentAccountSortBy: SorterType;
+  isShowTutorialCard: boolean;
 }
 
 const initialState: PersistState = {
@@ -55,6 +56,7 @@ const initialState: PersistState = {
   paymentAccountPageSize: 20,
   billPageSize: 20,
   accountBillPageSize: 20,
+  isShowTutorialCard: true,
 };
 
 export const persistSlice = createSlice({
@@ -126,6 +128,9 @@ export const persistSlice = createSlice({
     setUnAvailableSps(state, { payload }: PayloadAction<string[]>) {
       state.unAvailableSps = payload;
     },
+    setIsShowTutorialCard(state, { payload }: PayloadAction<boolean>) {
+      state.isShowTutorialCard = payload;
+    },
   },
 });
 
@@ -144,6 +149,7 @@ export const {
   setObjectListPageSize,
   setGroupSorter,
   setGroupListPageSize,
+  setIsShowTutorialCard,
 } = persistSlice.actions;
 
 export const selectAccountConfig = (address: string) => (state: AppState) =>