feat(dcellar-web-ui): introduce retry upload functionality (#377)

* feat(dcellar-web-ui): introduce retry upload functionality

* feat(dcellar-web-ui): add caching for billing_monthly & billing total_cost API

* feat(dcellar-web-ui): incorporate greenfield ecosystem tools into toolbox page

* fix(dcellar-web-ui): introduce retry check step to handle error

* feat(dcellar-web-ui): fix spselector styles

* feat(dcellar-web-ui): add object version history

* feat(dcellar-web-ui): only sealed object can be updated

* feat(dcellar-web-ui): fix empty path segment

* feat(dcellar-web-ui): replace object update object meta

* feat(dcellar-web-ui): create on chain object can only be replace original object

* chore(dcellar-web-ui): add change log

* fix(dcellar-web-ui): remove duplicate codes

* docs(dcellar-web-ui): update changelog

---------

Co-authored-by: aidencao <aiden.c@nodereal.io>

apps/dcellar-web-ui/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "dcellar-web-ui",
   "entries": [
+    {
+      "version": "1.2.0",
+      "tag": "dcellar-web-ui_v1.2.0",
+      "date": "Thu, 09 May 2024 06:16:58 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Introduce retry upload functionality"
+          },
+          {
+            "comment": "Add toolbox page"
+          }
+        ]
+      }
+    },
     {
       "version": "1.1.0",
       "tag": "dcellar-web-ui_v1.1.0",

apps/dcellar-web-ui/CHANGELOG.md

@@ -1,6 +1,14 @@
 # Change Log - dcellar-web-ui
 
-This log was last generated on Mon, 29 Apr 2024 06:35:57 GMT and should not be manually modified.
+This log was last generated on Thu, 09 May 2024 06:16:58 GMT and should not be manually modified.
+
+## 1.2.0
+Thu, 09 May 2024 06:16:58 GMT
+
+### Minor changes
+
+- Introduce retry upload functionality
+- Add toolbox page
 
 ## 1.1.0
 Mon, 29 Apr 2024 06:35:57 GMT

apps/dcellar-web-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcellar-web-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "scripts": {
     "dev": "node ./scripts/dev.js -p 3200",

apps/dcellar-web-ui/src/components/layout/GlobalManagements/GlobalObjectUploadManager.tsx

@@ -73,7 +73,6 @@ export const GlobalObjectUploadManager = memo<GlobalTasksProps>(
     const [authModal, setAuthModal] = useState(false);
 
     const uploadQueue = queue.filter((t) => t.status === 'UPLOAD');
-
     const waitUploadQueue = queue.filter(
       (t) => t.status === 'SIGNED' || (t.status === 'WAIT' && t.delegateUpload),
     );
@@ -91,6 +90,47 @@ export const GlobalObjectUploadManager = memo<GlobalTasksProps>(
       return sealQueue.slice(0, sealOffset).map((p) => p.id);
     }, [sealOffset, sealQueue]);
 
+    const retryCheckQueue = queue.filter((t) => t.status === 'RETRY_CHECK');
+    const retryCheckingQueue = queue.filter((t) => t.status === 'RETRY_CHECKING');
+    const retryOffset = MAX_PARALLEL_UPLOADS - retryCheckingQueue.length;
+    const retryTasks = useMemo(() => {
+      if (retryOffset <= 0) return [];
+      return retryCheckQueue.slice(0, retryOffset).map((p) => p.id);
+    }, [retryCheckQueue, retryOffset]);
+
+    const runRetryCheckTask = async (task: UploadObject) => {
+      if (authModal) return;
+      const { bucketName, prefixFolders, waitObject } = task;
+      const objectName = [...prefixFolders, waitObject.relativePath, waitObject.name]
+        .filter(Boolean)
+        .join('/');
+      const endpoint = spRecords[task.spAddress].endpoint;
+      const [objectMeta, error] = await getObjectMeta(bucketName, objectName, endpoint);
+      if (error && error.code !== 404) {
+        return dispatch(
+          setupUploadTaskErrorMsg({
+            account: loginAccount,
+            task,
+            errorMsg: error.message || 'Something went wrong.',
+          }),
+        );
+      }
+      const objectStatus = objectMeta?.ObjectInfo?.ObjectStatus;
+      if (objectStatus === 1) {
+        dispatch(uploadQueueAndRefresh(task));
+        dispatch(setupAccountRecords(bucketRecords[task.bucketName].PaymentAddress));
+        return;
+      }
+
+      dispatch(
+        updateUploadStatus({
+          account: loginAccount,
+          ids: [task.id],
+          status: 'WAIT',
+        }),
+      );
+    };
+
     const runUploadTask = async (task: UploadObject) => {
       if (authModal) return;
       const name = task.waitObject.name;
@@ -295,6 +335,16 @@ export const GlobalObjectUploadManager = memo<GlobalTasksProps>(
       }
     };
 
+    // retry checking
+    useAsyncEffect(async () => {
+      if (!retryTasks.length) return;
+      dispatch(
+        updateUploadStatus({ ids: retryTasks, status: 'RETRY_CHECKING', account: loginAccount }),
+      );
+      const tasks = queue.filter((t) => retryTasks.includes(t.id));
+      tasks.forEach(runRetryCheckTask);
+    }, [retryTasks.join('')]);
+
     // 1. hash
     useAsyncEffect(async () => {
       if (!hashTask) return;

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

@@ -40,7 +40,7 @@ export const BalanceAmount = memo<BalanceAmountProps>(function BalanceAmount() {
           alignItems={'center'}
         >
           <Circle backgroundColor={'#F0B90B'} size="24px" marginRight={10}>
-            <IconFont color={'#fff'} type="bsc" />
+            <IconFont color={'#fff'} type="line-bsc" />
           </Circle>{' '}
           {renderBalanceNumber()}
         </Flex>

apps/dcellar-web-ui/src/modules/accounts/components/AccountBillingHistory.tsx

@@ -114,7 +114,7 @@ export const AccountBillingHistory = ({ address }: Props) => {
 
   return (
     <>
-      <AccountBillingHistoryFilter />
+      <AccountBillingHistoryFilter address={address} />
       <DCTable
         loading={loadingComponent}
         columns={columns}

apps/dcellar-web-ui/src/modules/accounts/components/AccountBillingHistoryFilter.tsx

@@ -1,5 +1,9 @@
 import { useAppDispatch, useAppSelector } from '@/store';
-import { setAccountFilterRange, setAccountFilterTypes } from '@/store/slices/billing';
+import {
+  setAccountFilterRange,
+  setAccountFilterTypes,
+  setupAccountBills,
+} from '@/store/slices/billing';
 import { Flex, Text } from '@node-real/uikit';
 import { useUpdateEffect } from 'ahooks';
 import dayjs from 'dayjs';
@@ -8,8 +12,10 @@ import { stringify } from 'querystring';
 import { FilterContainer } from './Common';
 import { FilterDateRange } from './FilterDateRange';
 import { FilterTypes } from './FilterTypes';
+import { DCButton } from '@/components/common/DCButton';
+import { IconFont } from '@/components/IconFont';
 
-export const AccountBillingHistoryFilter = () => {
+export const AccountBillingHistoryFilter = ({ address }: { address: string }) => {
   const dispatch = useAppDispatch();
   const router = useRouter();
   const { query } = router;
@@ -44,11 +50,22 @@ export const AccountBillingHistoryFilter = () => {
     });
   }, [accountBillTypeFilter?.join('')]);
 
+  const onRefresh = () => {
+    dispatch(setupAccountBills(address));
+  };
+
   return (
-    <Flex justifyContent={'space-between'} alignItems={'center'}>
-      <Text fontSize={16} fontWeight={600}>
+    <Flex justifyContent={'space-between'} alignItems={'center'} gap={12}>
+      <Text fontSize={16} fontWeight={600} flex={1}>
         Billing History
       </Text>
+      <DCButton
+        variant="ghost"
+        alignItems={'center'}
+        onClick={onRefresh}
+        paddingLeft={6}
+        leftIcon={<IconFont type="refresh" w={24} />}
+      />
       <FilterContainer>
         <FilterDateRange
           filterDateRange={accountBillRangeFilter}

apps/dcellar-web-ui/src/modules/accounts/components/AllBillingHistoryFilter.tsx

@@ -1,6 +1,6 @@
 import { InternalRoutePaths } from '@/constants/paths';
 import { useAppDispatch, useAppSelector } from '@/store';
-import { setAllFilterRange, setAllFilterTypes } from '@/store/slices/billing';
+import { setAllFilterRange, setAllFilterTypes, setupAllBills } from '@/store/slices/billing';
 import { Flex, Text } from '@node-real/uikit';
 import { useUpdateEffect } from 'ahooks';
 import dayjs from 'dayjs';
@@ -10,6 +10,8 @@ import { FilterContainer } from './Common';
 import { FilterAccounts } from './FilterAccounts';
 import { FilterDateRange } from './FilterDateRange';
 import { FilterTypes } from './FilterTypes';
+import { DCButton } from '@/components/common/DCButton';
+import { IconFont } from '@/components/IconFont';
 
 export const AllBillingHistoryFilter = () => {
   const dispatch = useAppDispatch();
@@ -57,11 +59,22 @@ export const AllBillingHistoryFilter = () => {
     });
   }, [billTypeFilter?.join('')]);
 
+  const onRefresh = () => {
+    dispatch(setupAllBills());
+  };
+
   return (
-    <Flex justifyContent={'space-between'} mt={16} alignItems={'center'}>
-      <Text fontSize={16} fontWeight={600}>
+    <Flex justifyContent={'space-between'} mt={16} alignItems={'center'} gap={12}>
+      <Text fontSize={16} fontWeight={600} flex={1}>
         Billing History
       </Text>
+      <DCButton
+        variant="ghost"
+        alignItems={'center'}
+        onClick={onRefresh}
+        paddingLeft={6}
+        leftIcon={<IconFont type="refresh" w={24} />}
+      />
       <FilterContainer>
         <FilterDateRange
           filterDateRange={billRangeFilter}

apps/dcellar-web-ui/src/modules/accounts/components/MetaInfo.tsx

@@ -150,7 +150,7 @@ export const MetaInfo = memo(function MetaInfo({ address }: Props) {
               w={24}
               h={24}
             >
-              <IconFont type={'bsc'} w={20} color={'#fff'} />
+              <IconFont type={'line-bsc'} w={20} color={'#fff'} />
             </Flex>
             <Text fontSize={24} fontWeight={600}>
               {BN(availableBalance).dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString()}

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

@@ -67,11 +67,16 @@ export const Accounts = () => {
 
   useEffect(() => {
     if (tab === 'a') return;
+
     const filterAccounts = typeof address === 'string' ? [address] : ((address || []) as string[]);
+
     const filterRange: [string, string] =
       typeof from === 'string' && typeof to === 'string' ? [from, to] : ['', ''];
+
     const filterTypes = typeof type === 'string' ? [type] : ((type || []) as string[]);
+
     const curPage = isNaN(+(page as string)) ? 1 : +(page as string);
+
     dispatch(setAllFilterRange(filterRange));
     dispatch(setAllFilterAccounts(filterAccounts));
     dispatch(setAllFilterTypes(filterTypes));
@@ -140,7 +145,6 @@ export const Accounts = () => {
               </TabPanel>
               <TabPanel panelKey={'b'}>
                 <Flex flexDirection={'column'} gap={16}>
-                  {/* <ComingBillingHistory /> */}
                   <AllBillingHistory />
                 </Flex>
               </TabPanel>

apps/dcellar-web-ui/src/modules/bucket/components/PaymentAccountOperation.tsx

@@ -178,12 +178,6 @@ export const PaymentAccountOperation = memo(function PaymentAccountOperation({
         paymentAddress: newPaymentAccount.address,
       }),
     );
-    dispatch(
-      setBucketPaymentAccount({
-        bucketName: bucket.BucketName,
-        paymentAddress: newPaymentAccount.address,
-      }),
-    );
   };
 
   return (

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

@@ -25,6 +25,7 @@ export const Dashboard = () => {
   const onNavigate = (path: string) => {
     router.push(path);
   };
+
   useMount(async () => {
     dispatch(setupOwnerAccount());
     dispatch(setupTotalCost());

apps/dcellar-web-ui/src/modules/toolbox/components/TellUsCard.tsx

@@ -1,7 +1,5 @@
-import { Box, Text, Tooltip } from '@node-real/uikit';
-
+import { Box, Text } from '@node-real/uikit';
 import { Card } from './Common';
-
 import { assetPrefix } from '@/base/env';
 import { DCButton } from '@/components/common/DCButton';
 
@@ -21,24 +19,22 @@ export const TellUsCard = () => {
       justifyContent={'center'}
     >
       <Text fontSize={18} fontWeight={600} color={'readable.normal'} textAlign={'center'}>
-        Start Building with DCellar Now
+        Tell us what other tools you want.
       </Text>
       <Box textAlign={'center'}>
         <Text color={'readable.secondary'}>
-          DCellar offers a full set of open source toolkits for developers to start build on
-          Greenfield at ease.
+          Want some off-the-shelf tools, API, or SDK to aid in development? Feel free to give us a
+          message.
         </Text>
       </Box>
-      <Tooltip content="Upcoming">
-        <DCButton
-          margin={'16px auto 0'}
-          variant="brand"
-          w={'fit-content'}
-          onClick={() => onNavigateExternal('#')}
-        >
-          Explore
-        </DCButton>
-      </Tooltip>
+      <DCButton
+        margin={'16px auto 0'}
+        variant="brand"
+        w={'fit-content'}
+        onClick={() => onNavigateExternal('https://discord.com/invite/bnbchain/')}
+      >
+        Contact Us
+      </DCButton>
     </Card>
   );
 };

apps/dcellar-web-ui/src/modules/toolbox/components/ToolCards.tsx

@@ -0,0 +1,34 @@
+import { Badge, Flex, Text } from '@node-real/uikit';
+
+import { Card, CircleLink } from './Common';
+
+import { IconFont } from '@/components/IconFont';
+import { ToolItem } from '../config';
+
+export const ToolCards = ({ data }: { data: ToolItem[] }) => {
+  return (
+    <>
+      {data.map((item, index) => (
+        <Card key={index} w={'100%'}>
+          <IconFont type={item.icon || 'link'} w={48} />
+          <Flex justifyContent={'space-between'} gap={8}>
+            <Text fontSize={16} fontWeight={600} flex={1}>
+              {item.title}
+            </Text>
+            {item.links &&
+              item.links.map((link, i) => (
+                <CircleLink key={i} title={link.name} href={link.url}>
+                  <IconFont type={link.icon} w={16} />
+                </CircleLink>
+              ))}
+          </Flex>
+
+          <Badge colorScheme="primary" width={'fit-content'} borderRadius={4}>
+            {item.badge}
+          </Badge>
+          <Text color={'readable.secondary'}>{item.desc}</Text>
+        </Card>
+      ))}
+    </>
+  );
+};