fix(dcellar-web-ui): some data issues

node-real · Nov 1, 2023 · aeca194 · aeca194
1 parent 64c2565
commit aeca194
Show file tree

Hide file tree

Showing 15 changed files with 140 additions and 149 deletions.
diff --git a/apps/dcellar-web-ui/public/js/iconfont_v0.2.min.js b/apps/dcellar-web-ui/public/js/iconfont_v0.2.min.js
diff --git a/apps/dcellar-web-ui/public/js/iconfont_v0.3.min.js b/apps/dcellar-web-ui/public/js/iconfont_v0.3.min.js
diff --git a/apps/dcellar-web-ui/src/base/env.ts b/apps/dcellar-web-ui/src/base/env.ts
@@ -13,7 +13,6 @@ const {
   NEXT_PUBLIC_BSC_EXPLORER_URL,
   NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_ID,
   NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_RPC_URL,
-  NEXT_PUBLIC_BILLING_API_URL,
 } = publicRuntimeConfig || {};
 const {
   NEXT_PRIVATE_BILLING_API_URL
@@ -37,4 +36,4 @@ export const GREENFIELD_CHAIN_EXPLORER_URL = NEXT_PUBLIC_GREENFIELD_CHAIN_EXPLOR
 export const BSC_EXPLORER_URL = NEXT_PUBLIC_BSC_EXPLORER_URL;
 export const GREENFIELD_MAINNET_ID = NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_ID;
 export const GREENFIELD_MAINNET_RPC_URL = NEXT_PUBLIC_GREENFIELD_CHAIN_MAINNET_RPC_URL;
-export const BILLING_API_URL = NEXT_PRIVATE_BILLING_API_URL || NEXT_PUBLIC_BILLING_API_URL;
+export const BILLING_API_URL = NEXT_PRIVATE_BILLING_API_URL;
diff --git a/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx b/apps/dcellar-web-ui/src/components/ConnectWallet/WalletConnectModal.tsx
@@ -110,6 +110,7 @@ export function WalletConnectModal() {
         <Flex fontSize={14} fontWeight={400} color={'readable.tertiary'}>
           By connecting your wallet, you agree to our&nbsp;
           <Link
+            display={'inline'}
             href={InternalRoutePaths.terms}
             isExternal
             color="inherit"

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx
@@ -28,13 +28,12 @@ export const AccountCostTrend = memo(({ address }: Props) => {
   console.log('invoke AccountCostTrend');
   const preDataRef = useRef<any>(null);
   const dayjs = getUtcDayjs();
-  const { isLoadingPaymentAccounts } = useAppSelector((root) => root.accounts);
-  const { loadingAccountCostTrend } = useAppSelector((root) => root.billing);
   const accountCostTrend = useAppSelector(selectAccountCostTrend(address));
   const { curRemainingEstimateCost, nextEstimateCost } = useAccountEstimateCost(address, [
     'cur',
     'next',
   ]);
+  console.log('curRemainingEstimateCost', curRemainingEstimateCost)
   const barData: BarData = useMemo(() => {
     if (isEmpty(accountCostTrend)) return [];
     let finalData = {};
@@ -132,15 +131,13 @@ export const AccountCostTrend = memo(({ address }: Props) => {
             curData.estimateCost === null
               ? ''
               : `
-          <div style="${styles.normal}">Estimate Cost:<div style="${styles.bnb}">${curData.estimateCost}%</div>
+          <div style="${styles.normal}">Estimate Cost:<div style="${styles.bnb}">${curData.estimateCost}</div>
           </div>
           `;
           const MoMFragment =
             curData.MoM === null
               ? ''
-              : `
-          <div style="${styles.normal}">MoM:<div style="${styles.bnb}">${curData.MoM}%</div></div>
-          `;
+              : `<div style="${styles.normal}">MoM:<div style="${styles.bnb}">${curData.MoM}%</div></div>`;
           return `
             <div style="${styles.box}">
               ${TotalFragment}

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccounts.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccounts.tsx
@@ -78,11 +78,7 @@ export const PaymentAccounts = () => {
   const columns: ColumnProps<TAccountInfo>[] = [
     {
       key: 'name',
-      title: (
-        <SortItem onClick={() => updateSorter('name', 'ascend')}>
-          Name{sortName === 'name' ? SortIcon[dir] : <span>{SortIcon['ascend']}</span>}
-        </SortItem>
-      ),
+      title: <Text>Name</Text>,
       render: (_: string, record: TAccountInfo) => {
         return <Box>{record.name}</Box>;
       },

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/TotalCostTrend.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/TotalCostTrend.tsx
@@ -29,7 +29,9 @@ export const TotalCostTrend = () => {
   const { loginAccount } = useAppSelector((root) => root.persist);
   const totalCostTrend = useAppSelector(selectAllCostTrend(loginAccount));
   const { loadingAllCostTrend } = useAppSelector((root) => root.billing);
-  const { isLoadingPaymentAccounts, isLoadingAccountInfo } = useAppSelector((root) => root.accounts);
+  const { isLoadingPaymentAccounts, isLoadingAccountInfo } = useAppSelector(
+    (root) => root.accounts,
+  );
   const { curRemainingEstimateCost, nextEstimateCost } = useTotalEstimateCost(['cur', 'next']);
   const { accountInfo } = useAppSelector((root) => root.accounts);
   const barData: BarData = useMemo(() => {
@@ -116,12 +118,14 @@ export const TotalCostTrend = () => {
           const styles = getStyles();
           const TokenSymbol = displayTokenSymbol();
           let DetailFragment = ``;
-          const validDetailBills = (curData.detailBills || []).filter((item) => !BN(item.totalCost).isEqualTo(0));
+          const validDetailBills = (curData.detailBills || []).filter(
+            (item) => !BN(item.totalCost).isEqualTo(0),
+          );
           const dataLen = validDetailBills.length;
           const displayNum = Math.min(3, dataLen);
           for (let i = 0; i < displayNum; i++) {
             const bill = validDetailBills[i];
-            const lowerKeyAccountInfo = formatObjectAddress(accountInfo)
+            const lowerKeyAccountInfo = formatObjectAddress(accountInfo);
             const accountName = lowerKeyAccountInfo[bill.address.toLowerCase()]?.name;
             if (BN(bill.totalCost).isEqualTo(0)) {
               break;
@@ -131,21 +135,31 @@ export const TotalCostTrend = () => {
             `;
           }
           DetailFragment += dataLen > 3 ? `<div style="${styles.normal}">...</div>` : '';
+          const EstimateFragment =
+            curData.estimateCost === null
+              ? ''
+              : `<div style="${styles.normal}">Estimate Cost:<div style="${styles.bnb}">${curData.estimateCost}</div></div>`;
+          const MoMFragment =
+            curData.MoM === null
+              ? ''
+              : `
+           <div style="${styles.normal}">MoM:<div style="${styles.bnb}">${curData.MoM}%</div></div>`;
           return `
             <div style="${styles.box}">
               <div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${curData.totalCost || 0
             } ${TokenSymbol}</div>
               </div>
               ${DetailFragment}
-              <div style="${styles.normal}">MoM:<div style="${styles.bnb}">${curData.MoM}%</div>
-              </div>
+              ${EstimateFragment}
+              ${MoMFragment}
             </div>`;
         },
       },
       grid: {
-        left: '10%',
-        right: '5%',
-        bottom: '8%',
+        containLabel: true,
+        left: 'left',
+        right: '0%',
+        bottom: '0%',
       },
       toolbox: {
         feature: {
@@ -230,7 +244,8 @@ export const TotalCostTrend = () => {
     };
   }, [barData, accountInfo]);
 
-  const loading = loadingAllCostTrend || isLoadingPaymentAccounts || isLoadingAccountInfo === loginAccount;
+  const loading =
+    loadingAllCostTrend || isLoadingPaymentAccounts || isLoadingAccountInfo === loginAccount;
   return (
     <CardContainer flex={1}>
       {loading && <Loading />}

diff --git a/apps/dcellar-web-ui/src/modules/accounts/hooks.ts b/apps/dcellar-web-ui/src/modules/accounts/hooks.ts
@@ -33,7 +33,7 @@ export const useTotalEstimateCost = (types: EstimateCostType[]) => {
     let curRemainingEstimateCost = '';
     let nextEstimateCost = '';
     if (types.includes('cur')) {
-      const remainingSeconds = getSecond(utcDayjs(curTime).endOf('M').valueOf() - curTime);
+      const remainingSeconds = utcDayjs(curTime).endOf('M').unix() - utcDayjs(curTime).startOf('D').unix();
       curCosted = BN(curMonthTotalCosted || 0).dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString();
       curRemainingEstimateCost = BN(remainingSeconds).multipliedBy(totalNetflowRate).abs().dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString();
     }
@@ -58,7 +58,7 @@ export const useAccountEstimateCost = (address: string, types: EstimateCostType[
   const { accountCostTrend } = useAppSelector((root) => root.billing);
   const { netflowRate } = useAppSelector(selectAccountDetail(address));
   const curTime = +new Date();
-  const curMonthRemainingSeconds = getSecond(dayjs(curTime).endOf('M').valueOf() - curTime);
+  const curMonthRemainingSeconds = dayjs(curTime).endOf('M').valueOf() - dayjs(curTime).startOf('M').valueOf();
   const nextMonthSeconds = getSecond(dayjs(curTime).add(1, 'month').endOf('M').valueOf() - dayjs(curTime).add(1, 'month').startOf('M').valueOf());
 
   let curCosted = '';
@@ -68,7 +68,7 @@ export const useAccountEstimateCost = (address: string, types: EstimateCostType[
   const curMonthCost = accountCostTrend[key] || {};
   if (types.includes('cur')) {
     curCosted = curMonthCost?.monthlyCost?.[key].totalCost;
-    const estimateCost = BN(curMonthRemainingSeconds).multipliedBy(netflowRate).abs().dp(2).toString();
+    const estimateCost = BN(curMonthRemainingSeconds).multipliedBy(netflowRate).abs().dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString();
     curRemainingEstimateCost = BN(estimateCost).dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString();
   }
   if (types.includes('next')) {

diff --git a/apps/dcellar-web-ui/src/modules/wallet/TransferIn/index.tsx b/apps/dcellar-web-ui/src/modules/wallet/TransferIn/index.tsx
@@ -1,5 +1,5 @@
 import { Box, Divider, Flex, useDisclosure } from '@totejs/uikit';
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useNetwork, useProvider, useSigner } from 'wagmi';
 import { useForm } from 'react-hook-form';
 import { ethers } from 'ethers';
@@ -13,11 +13,7 @@ import { Head } from '../components/Head';
 import { SwapIcon } from '../components/SwapIcon';
 import { StatusModal } from '../components/StatusModal';
 import Container from '../components/Container';
-import {
-  BSC_CHAIN_ID,
-  BSC_EXPLORER_URL,
-  GREENFIELD_CHAIN_ID,
-} from '@/base/env';
+import { BSC_CHAIN_ID, BSC_EXPLORER_URL, GREENFIELD_CHAIN_ID } from '@/base/env';
 import { WalletButton } from '../components/WalletButton';
 import { Fee } from '../components/Fee';
 import { EOperation, TCalculateGas, TFeeData, TTransferInFromValues } from '../type';
@@ -29,6 +25,7 @@ import { useChainsBalance } from '@/context/GlobalContext/WalletBalanceContext';
 import { InternalRoutePaths } from '@/utils/constant';
 import { removeTrailingSlash } from '@/utils/string';
 import { broadcastFault } from '@/facade/error';
+import { Faucet } from '../components/Faucet';
 
 interface TransferInProps {}
 
@@ -189,55 +186,58 @@ export const TransferIn = memo<TransferInProps>(function TransferIn() {
   }, [getFee, isRight, transType, inputAmount, errors]);
 
   return (
-    <Container>
-      <Head />
-      <Flex mb={'24px'} justifyContent={'space-between'} alignItems="center">
-        <ChainBox type="from" chainId={BSC_CHAIN_ID} />
-        <GAClick name="dc.wallet.transferin.exchange_btn.click">
-          <SwapIcon onClick={onChangeTransfer} />
-        </GAClick>
-        <ChainBox type="to" chainId={GREENFIELD_CHAIN_ID} />
-      </Flex>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Amount
-          balance={balance}
-          errors={errors}
-          register={register}
-          disabled={isSubmitting}
-          watch={watch}
-          feeData={feeData}
-          setValue={setValue}
-          getGasFee={getFee}
-          maxDisabled={isGasLoading}
+    <>
+      <Container>
+        <Head />
+        <Flex mb={'24px'} justifyContent={'space-between'} alignItems="center">
+          <ChainBox type="from" chainId={BSC_CHAIN_ID} />
+          <GAClick name="dc.wallet.transferin.exchange_btn.click">
+            <SwapIcon onClick={onChangeTransfer} />
+          </GAClick>
+          <ChainBox type="to" chainId={GREENFIELD_CHAIN_ID} />
+        </Flex>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Amount
+            balance={balance}
+            errors={errors}
+            register={register}
+            disabled={isSubmitting}
+            watch={watch}
+            feeData={feeData}
+            setValue={setValue}
+            getGasFee={getFee}
+            maxDisabled={isGasLoading}
+          />
+          {isShowFee() ? (
+            <>
+              <Divider margin={'24px 0'} />
+              <Fee
+                isGasLoading={isGasLoading}
+                feeData={feeData}
+                amount={inputAmount}
+                gaShowTipsName="dc.wallet.transferin.fee_pop.show"
+              />
+            </>
+          ) : (
+            <Box height={'32px'} w="100%"></Box>
+          )}
+          <WalletButton
+            isGasLoading={isGasLoading}
+            disabled={!isEmpty(errors) || isSubmitting || isGasLoading}
+            isSubmitting={isSubmitting}
+            gaClickSubmitName="dc.wallet.transferin.transferin_btn.click"
+            gaClickSwitchName="dc.wallet.transferin.switch_network.click"
+          />
+        </form>
+        <StatusModal
+          viewTxUrl={viewTxUrl}
+          isOpen={isOpen}
+          onClose={onModalClose}
+          status={status}
+          errorMsg={errorMsg}
         />
-        {isShowFee() ? (
-          <>
-            <Divider margin={'24px 0'} />
-            <Fee
-              isGasLoading={isGasLoading}
-              feeData={feeData}
-              amount={inputAmount}
-              gaShowTipsName="dc.wallet.transferin.fee_pop.show"
-            />
-          </>
-        ) : (
-          <Box height={'32px'} w="100%"></Box>
-        )}
-        <WalletButton
-          isGasLoading={isGasLoading}
-          disabled={!isEmpty(errors) || isSubmitting || isGasLoading}
-          isSubmitting={isSubmitting}
-          gaClickSubmitName="dc.wallet.transferin.transferin_btn.click"
-          gaClickSwitchName="dc.wallet.transferin.switch_network.click"
-        />
-      </form>
-      <StatusModal
-        viewTxUrl={viewTxUrl}
-        isOpen={isOpen}
-        onClose={onModalClose}
-        status={status}
-        errorMsg={errorMsg}
-      />
-    </Container>
+      </Container>
+      <Faucet />
+    </>
   );
 });
diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/Container.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/Container.tsx
@@ -1,9 +1,9 @@
-import { Box } from '@totejs/uikit';
+import { Box, BoxProps } from '@totejs/uikit';
 import React, { memo, PropsWithChildren } from 'react';
 
-interface ContainerProps extends PropsWithChildren {}
+interface ContainerProps extends BoxProps {}
 
-export const Container = memo<ContainerProps>(function ({ children }) {
+export const Container = memo<ContainerProps>(function ({ children, ...props }) {
   return (
     <Box
       margin="0 auto"
@@ -13,6 +13,7 @@ export const Container = memo<ContainerProps>(function ({ children }) {
       borderRadius="8px"
       backgroundColor="readable.white"
       border={'1px solid readable.border'}
+      {...props}
     >
       {children}
     </Box>

diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/Faucet.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/Faucet.tsx
@@ -0,0 +1,39 @@
+import { runtimeEnv } from '@/base/env';
+import { IconFont } from '@/components/IconFont';
+import { Box, Flex, Text } from '@totejs/uikit';
+
+export const Faucet = () => {
+  if (runtimeEnv !== 'testnet') {
+    return null;
+  }
+  return (
+    <Flex
+      margin="16px auto 0"
+      w={'484px'}
+      h={'auto'}
+      p={'12px 24px'}
+      borderRadius="8px"
+      backgroundColor="transparent"
+      border={'1px solid readable.border'}
+      _hover={{
+        bgColor: 'white',
+        borderColor: 'brand.brand6',
+      }}
+      justifyContent={'space-between'}
+      alignItems={'center'}
+      as={'a'}
+      target="_blank"
+      href="https://testnet.bnbchain.org/faucet-smart"
+    >
+      <Box>
+        <Text fontSize={16} fontWeight={700}>
+          Get Testnet Tokens
+        </Text>
+        <Text fontSize={12} color={'readable.secondary'} marginTop={4}>
+          Use the BNB Greenfield faucet to get testnet tokens.
+        </Text>
+      </Box>
+      <IconFont type="share-b38fk167" width={16} />
+    </Flex>
+  );
+};
diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/Head.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/Head.tsx
@@ -1,21 +1,13 @@
-import { Link, Text } from '@totejs/uikit';
-import React, { memo } from 'react';
+import { Text } from '@totejs/uikit';
+import { memo } from 'react';
 import { useAppSelector } from '@/store';
-import { runtimeEnv } from '@/base/env';
 
 const HeadContent = {
   transfer_in: {
     title: 'transfer in',
     subtitle: (
       <>
-        Transfer BNB from BNB Smart Chain to your BNB Greenfield account{' '}
-        {runtimeEnv === 'testnet' ? (
-          <Link target="_blank" textDecoration={'underline'} href="https://testnet.bnbchain.org/faucet-smart">
-            faucet
-          </Link>
-        ) : (
-          ''
-        )}.
+        Transfer BNB from BNB Smart Chain to your BNB Greenfield account.
       </>
     ),
   },