feat(dcellar-web-ui): optimize create folder fee and support payment …

…account when upload objects

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

@@ -1,15 +1,22 @@
-import { GREENFIELD_CHAIN_ID } from "@/base/env";
-import { useAppDispatch, useAppSelector } from "@/store";
-import { setBankBalance, setupAccountsInfo, setupOAList, setupPAList } from "@/store/slices/accounts";
-import { setupGasObjects } from "@/store/slices/global";
-import { useAsyncEffect } from "ahooks";
-import { useRouter } from "next/router";
-import { useBalance } from "wagmi";
+import { GREENFIELD_CHAIN_ID } from '@/base/env';
+import { useAppDispatch, useAppSelector } from '@/store';
+import {
+  setBankBalance,
+  setupAccountsInfo,
+  setupOAList,
+  setupPAList,
+} from '@/store/slices/accounts';
+import { setupGasObjects } from '@/store/slices/global';
+import { useAsyncEffect, useThrottleEffect } from 'ahooks';
+import { useRouter } from 'next/router';
+import { useBalance } from 'wagmi';
 
 export const PaymentAccounts = () => {
   const dispatch = useAppDispatch();
   const { asPath } = useRouter();
   const { loginAccount } = useAppSelector((state) => state.persist);
+  const { bucketInfo } = useAppSelector((state) => state.bucket);
+  const { bucketName } = useAppSelector((state) => state.object);
   useAsyncEffect(async () => {
     dispatch(setupOAList());
     dispatch(setupPAList());
@@ -29,5 +36,11 @@ export const PaymentAccounts = () => {
     dispatch(setBankBalance(metamaskValue));
   }, [asPath, refetch]);
 
-  return <></>
-}
+  useThrottleEffect(() => {
+    console.log('invoke get paymentAddress info');
+    const paymentAddress = bucketInfo[bucketName]?.PaymentAddress;
+    paymentAddress && dispatch(setupAccountsInfo(paymentAddress));
+  }, [asPath]);
+
+  return <></>;
+};

apps/dcellar-web-ui/src/modules/file/components/Fees.tsx

@@ -1,11 +1,13 @@
 import { memo } from 'react';
-import { Flex, Link, Text } from '@totejs/uikit';
+import { Flex, Link, Text, useDisclosure } from '@totejs/uikit';
 import { renderBalanceNumber, renderFeeValue, renderUsd } from '@/modules/file/utils';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { selectBnbPrice, setupTmpAvailableBalance } from '@/store/slices/global';
 import { selectBalance } from '@/store/slices/balance';
 import { useMount } from 'ahooks';
 import { GAS_FEE_DOC } from '../constant';
+import { MenuCloseIcon } from '@totejs/icons';
+import BigNumber from 'bignumber.js';
 
 interface GasFeeItemProps {
   label?: string;
@@ -14,13 +16,12 @@ interface GasFeeItemProps {
 }
 
 export const Fees = memo<GasFeeItemProps>(function GasFeeItem(props) {
+  const { isOpen: isOpenFees, onToggle: onToggleFees } = useDisclosure();
+  const exchangeRate = useAppSelector(selectBnbPrice);
   const dispatch = useAppDispatch();
-  const bnbPrice = useAppSelector(selectBnbPrice);
   const { loginAccount: address } = useAppSelector((root) => root.persist);
   const { bankBalance: availableBalance } = useAppSelector((root) => root.accounts);
-  const exchangeRate = Number(bnbPrice);
   const { label = 'Gas Fee', gasFee, lockFee } = props;
-
   useMount(() => {
     dispatch(setupTmpAvailableBalance(address));
   });
@@ -31,39 +32,74 @@ export const Fees = memo<GasFeeItemProps>(function GasFeeItem(props) {
         gap={4}
         padding={16}
         borderRadius={12}
-        mt={32}
+        // mt={32}
         w="100%"
         bg="bg.secondary"
         flexDirection="column"
       >
-        <Flex w="100%" alignItems="center" justifyContent="space-between">
-          <Flex alignItems="center" mb={4}>
-            <Text fontSize={14} lineHeight="28px" fontWeight={400} color="readable.tertiary" as="p">
-              {label} (
-              <Link href={GAS_FEE_DOC} textDecoration={'underline'} color="readable.disabled">
-                Pay by Owner Account
-              </Link>
-              )
-            </Text>
-          </Flex>
-          <Text fontSize={14} lineHeight="28px" fontWeight={400} color="readable.tertiary">
-            {renderFeeValue(gasFee, exchangeRate)}
+        <Flex
+          paddingBottom={'4px'}
+          fontSize={'14px'}
+          fontWeight={600}
+          onClick={onToggleFees}
+          justifyContent={'space-between'}
+          alignItems={'center'}
+          cursor={'pointer'}
+        >
+          <Text>Total Fees</Text>
+          <Text justifySelf={'flex-end'} fontWeight={'normal'}>
+            {renderFeeValue(BigNumber(gasFee).plus(BigNumber(lockFee)).toString(), exchangeRate)}
+            <MenuCloseIcon
+              sx={{
+                transform: isOpenFees ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
           </Text>
         </Flex>
-        <Flex w="100%" alignItems="center" justifyContent="space-between">
-          <Flex alignItems="center" mb={4}>
-            <Text fontSize={14} lineHeight="28px" fontWeight={400} color="readable.tertiary" as="p">
-              6 months prepaid fee
+        {isOpenFees && (
+          <>
+            <Flex w="100%" alignItems="center" justifyContent="space-between">
+              <Flex alignItems="center" mb={4}>
+                <Text
+                  fontSize={14}
+                  lineHeight="28px"
+                  fontWeight={400}
+                  color="readable.tertiary"
+                  as="p"
+                >
+                  {label} (
+                  <Link href={GAS_FEE_DOC} textDecoration={'underline'} color="readable.disabled">
+                    Pay by Owner Account
+                  </Link>
+                  )
+                </Text>
+              </Flex>
+              <Text fontSize={14} lineHeight="28px" fontWeight={400} color="readable.tertiary">
+                {renderFeeValue(gasFee, exchangeRate)}
+              </Text>
+            </Flex>
+            <Flex w="100%" alignItems="center" justifyContent="space-between">
+              <Flex alignItems="center" mb={4}>
+                <Text
+                  fontSize={14}
+                  lineHeight="28px"
+                  fontWeight={400}
+                  color="readable.tertiary"
+                  as="p"
+                >
+                  6 months prepaid fee
+                </Text>
+              </Flex>
+              <Text fontSize={14} lineHeight="28px" fontWeight={400} color="readable.tertiary">
+                {renderFeeValue(lockFee, exchangeRate)}
+              </Text>
+            </Flex>
+            <Text fontSize={12} lineHeight="16px" color="readable.disabled" alignSelf="flex-end">
+              Available balance: {renderBalanceNumber(availableBalance || '0')} (
+              {renderUsd(availableBalance || '0', exchangeRate)})
             </Text>
-          </Flex>
-          <Text fontSize={14} lineHeight="28px" fontWeight={400} color="readable.tertiary">
-            {renderFeeValue(lockFee, exchangeRate)}
-          </Text>
-        </Flex>
-        <Text fontSize={12} lineHeight="16px" color="readable.disabled" alignSelf="flex-end">
-          Available balance: {renderBalanceNumber(availableBalance || '0')} (
-          {renderUsd(availableBalance || '0', exchangeRate)})
-        </Text>
+          </>
+        )}
       </Flex>
     </>
   );

apps/dcellar-web-ui/src/modules/file/utils/index.tsx

@@ -15,6 +15,8 @@ import { getClient } from '@/base/client';
 import { generateGetObjectOptions } from './generateGetObjectOptions';
 import { ChainVisibilityEnum } from '../type';
 import { SpItem } from '@/store/slices/sp';
+import BigNumber from 'bignumber.js';
+import { GasFee } from '@/modules/buckets/List/components/GasFee';
 
 const formatBytes = (bytes: number | string, isFloor = false) => {
   if (typeof bytes === 'string') {
@@ -44,7 +46,7 @@ const renderFeeValue = (bnbValue: string, exchangeRate: number | string) => {
   if (!bnbValue || Number(bnbValue) < 0) {
     return '--';
   }
-  
+
   return `${renderBnb(bnbValue)} BNB (${renderUsd(bnbValue, exchangeRate)})`;
 };
 const renderPrelockedFeeValue = (bnbValue: string, exchangeRate: number | string) => {
@@ -319,6 +321,69 @@ const truncateFileName = (fileName: string) => {
   )}...${fileNameWithoutExtension.slice(-4)}${fileExtension}`;
 };
 
+const renderPaymentInsufficientBalance = ({
+  gasFee,
+  lockFee,
+  payGasFeeBalance,
+  payLockFeeBalance,
+  ownerAccount,
+  payAccount,
+  gaOptions,
+}:{
+  gasFee: string,
+  lockFee: string,
+  payGasFeeBalance: string,
+  payLockFeeBalance: string,
+  ownerAccount: string,
+  payAccount: string,
+  gaOptions?: { gaClickName: string; gaShowName: string },
+}) => {
+  if (!gasFee || Number(gasFee) < 0 || !lockFee || Number(lockFee) < 0) return <></>;
+  const items = [];
+  const isOwnerAccount = ownerAccount === payAccount;
+  if (isOwnerAccount) {
+    if (!BigNumber(payGasFeeBalance).gt(BigNumber(gasFee))
+      && BigNumber(payGasFeeBalance).minus(BigNumber(gasFee)).plus(BigNumber(payLockFeeBalance)).gt(BigNumber(lockFee))) {
+      items.push({
+        link: InternalRoutePaths.transfer_in,
+        text: 'Transfer in',
+      });
+    }
+  } else {
+    if (!BigNumber(payGasFeeBalance).gt(BigNumber(gasFee))) {
+      items.push({
+        link: InternalRoutePaths.transfer_in,
+        text: 'Transfer in',
+      });
+    }
+    if (!BigNumber(payLockFeeBalance).gt(BigNumber(lockFee))) {
+      items.push({
+        link: InternalRoutePaths.send,
+        text: 'Deposit',
+      });
+    }
+  }
+  if (items.length === 0) return <></>;
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <GAShow key={index} name={gaOptions?.gaShowName}>
+          Insufficient balance.&nbsp;
+          <GAClick name={gaOptions?.gaClickName}>
+            <Link
+              href={InternalRoutePaths.transfer_in}
+              style={{ textDecoration: 'underline' }}
+              color="#EE3911"
+            >
+              Transfer in
+            </Link>
+          </GAClick>
+        </GAShow>
+      ))}
+    </>
+  );
+};
 export {
   formatBytes,
   getObjectInfo,
@@ -337,4 +402,5 @@ export {
   truncateFileName,
   renderPrelockedFeeValue,
   getBuiltInLink,
+  renderPaymentInsufficientBalance,
 };

apps/dcellar-web-ui/src/modules/object/components/CreateFolder.tsx

@@ -69,8 +69,7 @@ interface modalProps {
 export const CreateFolder = memo<modalProps>(function CreateFolderDrawer({ refetch }) {
   const dispatch = useAppDispatch();
   const { connector } = useAccount();
-  const { isOpen: isOpenFees, onToggle: onToggleFees } = useDisclosure();
-  const exchangeRate = useAppSelector(selectBnbPrice);
+
   const { preLockFeeObjects } = useAppSelector((root) => root.global);
   const checksumWorkerApi = useChecksumApi();
   const { primarySpInfo } = useAppSelector((root) => root.sp);
@@ -116,7 +115,7 @@ export const CreateFolder = memo<modalProps>(function CreateFolderDrawer({ refet
   const loadingFee = useMemo(() => {
     return isEmpty(preLockFeeObjects);
   }, [preLockFeeObjects]);
-  const preLockFee = calPreLockFee({
+  const preLockFee = !isEmpty(preLockFeeObject) && calPreLockFee({
     size: 0,
     primarySpAddress: primarySp.operatorAddress,
     preLockFeeObject: preLockFeeObject,
@@ -370,25 +369,6 @@ export const CreateFolder = memo<modalProps>(function CreateFolderDrawer({ refet
         </Flex>
       </QDrawerBody>
       <QDrawerFooter w="100%" flexDirection={'column'}>
-        <Flex
-          paddingBottom={'4px'}
-          fontSize={'14px'}
-          fontWeight={600}
-          onClick={onToggleFees}
-          justifyContent={'space-between'}
-          alignItems={'center'}
-          cursor={'pointer'}
-        >
-          <Text>Total Fees</Text>
-          <Text justifySelf={'flex-end'} fontWeight={'normal'}>
-            {renderFeeValue(preLockFee.toString(), exchangeRate)}
-            <MenuCloseIcon
-              sx={{
-                transform: isOpenFees ? 'rotate(180deg)' : 'rotate(0deg)',
-              }}
-            />
-          </Text>
-        </Flex>
         <Fees gasFee={gasFee + ''} lockFee={preLockFee || '0'} />
         {lackGasFee && (
           <Flex w="100%" justifyContent="space-between" mt={8}>