Merge pull request #160 from node-real/hotfix/upload-status

fix(dcellar-web-ui): cal lock fee error and some style issues
node-real · Aug 3, 2023 · bb13d56 · bb13d56
2 parents ecb25ff + 2a29c94
commit bb13d56
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 41 deletions.
diff --git a/apps/dcellar-web-ui/src/components/layout/Header/index.tsx b/apps/dcellar-web-ui/src/components/layout/Header/index.tsx
@@ -91,7 +91,7 @@ export const Header = ({ taskManagement = true }: { taskManagement?: boolean })
         </Flex>
         <Flex alignItems="center" mt="16px">
           <Text color="readable.disabled" fontWeight="400" fontSize="12px" lineHeight="20px">
-            Available Balance
+            Greenfield Available Balance
           </Text>
           <Tips
             iconSize={'16px'}

diff --git a/apps/dcellar-web-ui/src/modules/upload/ListItem.tsx b/apps/dcellar-web-ui/src/modules/upload/ListItem.tsx
@@ -1,12 +1,10 @@
 import { Empty, EmptyDescription, Flex, QListItem, Image } from '@totejs/uikit';
 import React, { useMemo } from 'react';
-import { formatBytes } from '../file/utils';
-import { EllipsisText } from '@/components/common/EllipsisText';
 import { CloseIcon} from '@totejs/icons';
 import { removeFromWaitQueue } from '@/store/slices/global';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { UPLOAD_TASK_EMPTY_ICON } from '../file/constant';
-import { isEmpty, slice } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 import { NameItem } from './NameItem';
 import { PathItem } from './PathItem';
 
@@ -63,12 +61,13 @@ export const ListItem = ({ path, type }: ListItemProps) => {
           >
             <Flex fontSize={'12px'} alignItems={'center'} justifyContent={'space-between'}>
               <NameItem
-                maxW="300px"
+                w={300}
+                mr={12}
                 name={selectedFile.name}
                 msg={selectedFile.msg}
                 size={selectedFile.size}
               />
-              <PathItem path={`${path}/`} flex={1} textAlign="right" />
+              <PathItem path={`${path}/`} textAlign="left" />
             </Flex>
           </QListItem>
         ))}

diff --git a/apps/dcellar-web-ui/src/modules/upload/NameItem.tsx b/apps/dcellar-web-ui/src/modules/upload/NameItem.tsx
@@ -6,11 +6,10 @@ type Props = {
   name: string;
   size: number;
   msg?: string;
-  maxW: string;
   status?: string;
   [key: string]: any;
 };
-export const NameItem = ({ name, size, msg, maxW, status, ...styleProps }: Props) => {
+export const NameItem = ({ name, size, msg,  status, ...styleProps }: Props) => {
   const fileType = contentIconTypeToExtension(name);
   const icon = (
     <Flex
@@ -31,14 +30,14 @@ export const NameItem = ({ name, size, msg, maxW, status, ...styleProps }: Props
     </Flex>
   );
   return (
-    <Flex maxW={maxW} alignItems="center" {...styleProps}>
+    <Flex alignItems="center" {...styleProps}>
       {icon}
       <Box w="calc(100% - 39px)">
         <EllipsisText marginRight={'12px'}>{name}</EllipsisText>
         {status && ['CANCEL', 'ERROR'].includes(status) || msg ? (
-          <EllipsisText color={'red'}>{msg}</EllipsisText>
+          <EllipsisText fontWeight={400} color={'red'}>{msg}</EllipsisText>
         ) : (
-          <EllipsisText color="readable.tertiary">{formatBytes(size)}</EllipsisText>
+          <EllipsisText fontWeight={400} color="readable.tertiary">{formatBytes(size)}</EllipsisText>
         )}
       </Box>
     </Flex>

diff --git a/apps/dcellar-web-ui/src/modules/upload/PathItem.tsx b/apps/dcellar-web-ui/src/modules/upload/PathItem.tsx
@@ -9,9 +9,10 @@ export const PathItem = ({ path, ...styleProps }: Props) => {
   return (
     <EllipsisText
       color={'readable.tertiary'}
-      maxW="150px"
-      textAlign={'center'}
+      w={126}
+      textAlign={'left'}
       marginRight={'12px'}
+      fontWeight={400}
       {...styleProps}
     >
       {path}

diff --git a/apps/dcellar-web-ui/src/modules/upload/SimulateFee.tsx b/apps/dcellar-web-ui/src/modules/upload/SimulateFee.tsx
@@ -8,7 +8,7 @@ import {
 import { useAppDispatch, useAppSelector } from '@/store';
 import { MsgCreateObjectTypeUrl } from '@bnb-chain/greenfield-chain-sdk';
 import { Box, Flex, Slide, Text, useDisclosure, Link } from '@totejs/uikit';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useAsyncEffect, useMount } from 'ahooks';
 import { WaitFile, setupPreLockFeeObjects, setupTmpAvailableBalance } from '@/store/slices/global';
 import { isEmpty } from 'lodash-es';
@@ -65,7 +65,7 @@ export const Fee = () => {
     ? -1
     : waitQueue.filter((item: WaitFile) => item.status !== 'ERROR').length * singleTxGasFee;
 
-  useUpdateEffect(() => {
+  useEffect(() => {
     if (gasFee && lockFee) {
       dispatch(setEditUpload({
         gasFee: BigNumber(gasFee).toString(DECIMAL_NUMBER),
@@ -74,7 +74,7 @@ export const Fee = () => {
         isBalanceAvailable: BigNumber(availableBalance).minus(BigNumber(gasFee)).minus(BigNumber(lockFee)).isPositive(),
       }))
     }
-  }, [gasFee, lockFee]);
+  }, [availableBalance, dispatch, gasFee, lockFee]);
   useMount(() => {
     dispatch(setupTmpAvailableBalance(loginAccount));
   });

diff --git a/apps/dcellar-web-ui/src/modules/upload/TaskManagement.tsx b/apps/dcellar-web-ui/src/modules/upload/TaskManagement.tsx
@@ -42,10 +42,22 @@ export const TaskManagement = () => {
       <Box
         cursor={'pointer'}
         alignSelf={'center'}
-        marginRight={'12px'}
+        marginRight={24}
         onClick={() => onToggle()}
       >
-        <DCButton variant="ghost" fontWeight={'500'}>
+        <DCButton
+          variant="ghost"
+          fontWeight={500}
+          border='none'
+          fontSize={14}
+          paddingX={8}
+          borderRadius={4}
+          h={44}
+          color='readable.secondary'
+          _hover={{
+            bg: 'bg.bottom',
+          }}
+        >
           Task Management
         </DCButton>
       </Box>

diff --git a/apps/dcellar-web-ui/src/modules/upload/UploadObjects.tsx b/apps/dcellar-web-ui/src/modules/upload/UploadObjects.tsx
@@ -203,16 +203,17 @@ export const UploadObjects = () => {
   }, [preLockFeeObjects, selectedFiles]);
 
   const checkedQueue = selectedFiles.filter((item) => item.status === 'WAIT');
+  console.log(loading, creating, !checkedQueue?.length, !editUpload.isBalanceAvailable, editUpload)
   return (
     <DCDrawer isOpen={!!editUpload.isOpen} onClose={onClose}>
       <QDrawerCloseButton />
       <QDrawerHeader>Upload Objects</QDrawerHeader>
       {!isEmpty(selectedFiles) && (
-        <QDrawerBody marginTop={'24px'}>
+        <QDrawerBody marginTop={'16px'}>
           <Tabs activeKey={activeKey} onChange={(key: any) => setActiveKey(key)}>
             <TabList>
               {tabOptions.map((item) => (
-                <Tab h="auto" key={item.key} tabKey={item.key} paddingBottom={'8px'}>
+                <Tab h="auto" key={item.key} fontWeight={500} tabKey={item.key} paddingBottom={'8px'}>
                   {item.icon}
                   {item.title}({item.len})
                 </Tab>
@@ -246,7 +247,7 @@ export const UploadObjects = () => {
                 ),
               )}
             </strong>{' '}
-            / <strong>{checkedQueue.length} Files</strong>
+            / <strong>{checkedQueue.length} Objects</strong>
           </Box>
         </Flex>
         <Fee />

diff --git a/apps/dcellar-web-ui/src/modules/upload/UploadProgress.tsx b/apps/dcellar-web-ui/src/modules/upload/UploadProgress.tsx
@@ -6,9 +6,9 @@ type Props = {
 };
 export const UploadProgress = memo(({ value }: Props) => {
   return (
-    <CircularProgress size="32" value={value} color="#00BA34" marginRight={'4px'}>
+    <CircularProgress size="32" value={value} trackColor='bg.bottom' color="#00BA34" marginRight={'4px'}>
       <CircularProgressLabel>
-        <Text allowSmallFontSize fontSize={8} color="readable.tertiary" fontWeight={'600'}>
+        <Text allowSmallFontSize fontSize={10} color="readable.tertiary" fontWeight={600}>
           {value}%
         </Text>
       </CircularProgressLabel>

diff --git a/apps/dcellar-web-ui/src/modules/upload/UploadingObjects.tsx b/apps/dcellar-web-ui/src/modules/upload/UploadingObjects.tsx
@@ -16,7 +16,7 @@ import {
   Text,
 } from '@totejs/uikit';
 import { FILE_UPLOAD_STATIC_URL, UPLOAD_TASK_EMPTY_ICON } from '@/modules/file/constant';
-import { ColoredErrorIcon, ColoredSuccessIcon, Icon } from '@totejs/icons';
+import { ColoredAlertIcon, ColoredSuccessIcon } from '@totejs/icons';
 import { Loading } from '@/components/common/Loading';
 import { UploadFile } from '@/store/slices/global';
 import { useTaskManagementTab } from './useTaskManagementTab';
@@ -32,34 +32,40 @@ export const UploadingObjects = () => {
       case 'WAIT':
         return (
           <>
-            <Loading justifyContent={'flex-end'} />
-            <Text marginLeft={'4px'}>waiting</Text>
+            <Loading iconSize={16} justifyContent={'flex-end'} />
+            <Text marginLeft={'4px'} fontWeight={400}>
+              Waiting
+            </Text>
           </>
         );
       case 'HASH':
         return (
           <>
-            <Loading justifyContent={'flex-end'} />
-            <Text marginLeft={'4px'}>hashing</Text>
+            <Loading iconSize={16} justifyContent={'flex-end'} />
+            <Text marginLeft={'4px'} fontWeight={400}>
+              Hashing
+            </Text>
           </>
         );
       case 'READY':
-        return <UploadProgress value={0} />
+        return <UploadProgress value={0} />;
       case 'UPLOAD':
-        return<UploadProgress value={task.progress || 0} />
+        return <UploadProgress value={task.progress || 0} />;
       case 'SEAL':
         return (
           <>
-            <Loading justifyContent={'flex-end'} />
-            <Text marginLeft={'4px'}>sealing</Text>
+            <Loading iconSize={16} justifyContent={'flex-end'} />
+            <Text marginLeft={'4px'} fontWeight={400}>
+              Sealing
+            </Text>
           </>
         );
       case 'FINISH':
         return <ColoredSuccessIcon />;
       case 'ERROR':
-        return <ColoredErrorIcon />;
+        return <ColoredAlertIcon width={'16px'} height={'16px'} marginRight={'4px'} />;
       case 'CANCEL':
-        return <ColoredErrorIcon />;
+        return <ColoredAlertIcon width={'16px'} height={'16px'} marginRight={'4px'} />;
       default:
         return null;
     }
@@ -99,14 +105,15 @@ export const UploadingObjects = () => {
                 key={item.key}
                 tabKey={item.key}
                 paddingBottom={'8px'}
+                fontWeight={500}
                 _hover={{
                   color: 'readable.brand6',
-                  fontWeight: '600',
+                  fontWeight: '500',
                   borderBottom: '3px solid readable.brand6',
                 }}
                 _selected={{
                   color: 'readable.brand6',
-                  fontWeight: '600',
+                  fontWeight: '500',
                   borderBottom: '3px solid readable.brand6',
                 }}
               >
@@ -139,12 +146,11 @@ export const UploadingObjects = () => {
                       _hover={{}}
                       maxW={'520px'}
                       key={task.id}
-                      paddingX={'6px'}
+                      paddingX={'0'}
                       right={null}
                       display="block"
                     >
                       <Flex
-                        marginLeft={'12px'}
                         fontSize={'12px'}
                         alignItems={'center'}
                         justifyContent={'space-between'}
@@ -154,11 +160,10 @@ export const UploadingObjects = () => {
                           size={task.file.size}
                           msg={task.msg}
                           status={task.status}
-                          maxW="200px"
-                          flex="1"
+                          w={300}
                         />
                         <PathItem path={[task.bucketName, task.prefixFolders].join('/')} />
-                        <Flex width={'100px'} justifyContent={'flex-end'} alignItems={'center'}>
+                        <Flex width={'70px'} justifyContent={'flex-end'} alignItems={'center'}>
                           <FileStatus task={task} />
                         </Flex>
                       </Flex>

diff --git a/apps/dcellar-web-ui/src/modules/upload/useTaskManagementTab.tsx b/apps/dcellar-web-ui/src/modules/upload/useTaskManagementTab.tsx
@@ -1,5 +1,6 @@
 import { useAppSelector } from '@/store';
 import { TUploadStatus, UploadFile } from '@/store/slices/global';
+import { ColoredAlertIcon } from '@totejs/icons';
 // import { ColoredAlertIcon } from '@totejs/icons';
 
 import { sortBy } from 'lodash-es';