feat(dcellar-web-ui): fix ui issues

node-real · Oct 10, 2023 · 698f35c · 698f35c
1 parent e195f2c
commit 698f35c
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 59 deletions.
diff --git a/apps/dcellar-web-ui/src/components/common/DCInputSelect/index.tsx b/apps/dcellar-web-ui/src/components/common/DCInputSelect/index.tsx
@@ -36,6 +36,8 @@ export interface DCSelectProps extends MenuProps {
   onSearchFilter?: (value: string, item: MenuOption) => boolean;
   onSearch?: (result: Array<MenuOption>) => void;
   renderOption?: (option: MenuOption) => ReactNode;
+  emptyIcon?: string;
+  emptyText?: string;
 }
 
 export function DCInputSelect(props: DCSelectProps) {
@@ -56,6 +58,8 @@ export function DCInputSelect(props: DCSelectProps) {
     isDisabled,
     RightIcon,
     renderOption,
+    emptyIcon,
+    emptyText,
     ...restProps
   } = props;
 
@@ -109,6 +113,9 @@ console.log('DCInputSelect', placeholder, text)
       renderOption={renderOption}
       selectIcon
       onMenuSelect={onSelectItem}
+      emptyIcon={emptyIcon}
+      emptyText={emptyText}
+      menuListProps={listProps}
       renderHeader={() =>
         header && (
           <Box

diff --git a/apps/dcellar-web-ui/src/components/common/DCMenu/index.tsx b/apps/dcellar-web-ui/src/components/common/DCMenu/index.tsx
@@ -11,6 +11,8 @@ interface DCMenuProps extends MenuProps {
   menuListProps?: MenuListProps;
   renderHeader?: () => ReactNode;
   renderFooter?: () => ReactNode;
+  emptyIcon?: string;
+  emptyText?: string;
 }
 
 export const DCMenu = memo<DCMenuProps>(function DCMenu(props) {
@@ -24,6 +26,8 @@ export const DCMenu = memo<DCMenuProps>(function DCMenu(props) {
     menuListProps,
     renderHeader,
     renderFooter,
+    emptyIcon,
+    emptyText,
     ...restProps
   } = props;
   const isFunc = typeof children === 'function';
@@ -44,6 +48,8 @@ export const DCMenu = memo<DCMenuProps>(function DCMenu(props) {
               renderOption={renderOption}
               renderHeader={renderHeader}
               renderFooter={renderFooter}
+              emptyIcon={emptyIcon}
+              emptyText={emptyText}
               {...menuListProps}
             />
           </Portal>

diff --git a/apps/dcellar-web-ui/src/components/common/DCMenuList/index.tsx b/apps/dcellar-web-ui/src/components/common/DCMenuList/index.tsx
@@ -20,6 +20,8 @@ export interface DCMenuListProps extends MenuListProps {
   renderHeader?: () => ReactNode;
   renderFooter?: () => ReactNode;
   renderEmpty?: () => ReactNode;
+  emptyIcon?: string;
+  emptyText?: string;
 }
 
 export const DCMenuList = memo<DCMenuListProps>(function DCMenu(props) {
@@ -31,6 +33,8 @@ export const DCMenuList = memo<DCMenuListProps>(function DCMenu(props) {
     renderOption,
     renderHeader,
     renderFooter,
+    emptyText = 'No Result',
+    emptyIcon = 'empty-object',
     ...restProps
   } = props;
 
@@ -64,16 +68,10 @@ export const DCMenuList = memo<DCMenuListProps>(function DCMenu(props) {
           );
         })}
         {!options.length && (
-          <Center flexDir="column" pt={21} minH={220} justifyContent="flex-start">
-            <IconFont type="empty-object" w={120} />
-            <Text
-              mt={12}
-              color="readable.tertiary"
-              fontSize={12}
-              fontWeight={500}
-              lineHeight="15px"
-            >
-              No Result
+          <Center flexDir="column" pt={24} h={160} justifyContent="flex-start">
+            <IconFont type={emptyIcon} w={64} />
+            <Text mt={8} color="readable.normal" fontSize={14} fontWeight={600}>
+              {emptyText}
             </Text>
           </Center>
         )}

diff --git a/apps/dcellar-web-ui/src/components/common/DCModal/ConfirmModal.tsx b/apps/dcellar-web-ui/src/components/common/DCModal/ConfirmModal.tsx
@@ -126,7 +126,7 @@ export const ConfirmModal = memo<ConfirmModalProps>(function ConfirmModal({
           <Divider borderColor={'readable.disable'} />
           <Flex alignItems={'center'} justifyContent={'space-between'} color={'readable.secondary'}>
             <Flex alignItems="center">
-              <Text>Gas Fee</Text>
+              <Text>Gas fee</Text>
               <GasFeeTips />
             </Flex>
             <Text>{renderFeeValue(String(fee), exchangeRate)}</Text>

diff --git a/apps/dcellar-web-ui/src/modules/group/components/Fees.tsx b/apps/dcellar-web-ui/src/modules/group/components/Fees.tsx
@@ -1,7 +1,6 @@
 import React, { memo, useEffect } from 'react';
 import { useAppSelector } from '@/store';
-import { Box, Divider, Flex, Text, useDisclosure } from '@totejs/uikit';
-import { MenuCloseIcon } from '@totejs/icons';
+import { Divider, Flex, Text, useDisclosure } from '@totejs/uikit';
 import BigNumber from 'bignumber.js';
 import {
   renderBalanceNumber,
@@ -25,7 +24,7 @@ export const Fees = memo<FeesProps>(function Fees({ fees, setBalanceAvailable =
   const { price: exchangeRate } = useAppSelector((root) => root.global.bnb);
   const { bankBalance } = useAppSelector((root) => root.accounts);
   const { gasObjects = {} } = useAppSelector((root) => root.global.gasHub);
-  const { isOpen, onToggle } = useDisclosure();
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
   const _fees = fees.map((fee) => ({
     label: fee.label,
@@ -64,31 +63,31 @@ export const Fees = memo<FeesProps>(function Fees({ fees, setBalanceAvailable =
             alignItems={'center'}
           >
             {renderFeeValue(allFees.toString(), exchangeRate)}
-            <IconFont
-              color={'readable.normal'}
-              type={!isOpen ? 'menu-open' : 'menu-close'}
-              w={20}
-            />
+            <IconFont color={'readable.normal'} type={isOpen ? 'menu-open' : 'menu-close'} w={20} />
           </Flex>
         </Flex>
-        <Divider borderColor={'readable.disable'} />
-        {_fees.map((item, index) => (
-          <Flex key={index} w="100%" alignItems={'center'} justifyContent={'space-between'}>
-            <Flex alignItems="center">
-              <Text color={'readable.tertiary'} as="p">
-                {item.label}
+        {isOpen && (
+          <>
+            <Divider borderColor={'readable.disable'} />
+            {_fees.map((item, index) => (
+              <Flex key={index} w="100%" alignItems={'center'} justifyContent={'space-between'}>
+                <Flex alignItems="center">
+                  <Text color={'readable.tertiary'} as="p">
+                    {item.label}
+                  </Text>
+                </Flex>
+                <Text color={'readable.tertiary'}>
+                  {renderFeeValue(String(item.value), exchangeRate)}
+                </Text>
+              </Flex>
+            ))}
+            <Flex w={'100%'} justifyContent={'flex-end'}>
+              <Text fontSize={'12px'} color={'readable.disable'}>
+                Owner Account balance: {renderBalanceNumber(bankBalance || '0')}
               </Text>
             </Flex>
-            <Text color={'readable.tertiary'}>
-              {renderFeeValue(String(item.value), exchangeRate)}
-            </Text>
-          </Flex>
-        ))}
-        <Flex w={'100%'} justifyContent={'flex-end'}>
-          <Text fontSize={'12px'} color={'readable.disable'}>
-            Owner Account balance: {renderBalanceNumber(bankBalance || '0')}
-          </Text>
-        </Flex>
+          </>
+        )}
       </Flex>
       {!enoughBalance && (
         <Text fontSize={'14px'} color={'scene.danger.normal'}>

diff --git a/apps/dcellar-web-ui/src/modules/object/components/CancelObjectOperation.tsx b/apps/dcellar-web-ui/src/modules/object/components/CancelObjectOperation.tsx
@@ -195,7 +195,7 @@ export const CancelObjectOperation = memo<CancelObjectOperationProps>(
               />,
             )}
             {renderFee('Settlement fee', settlementFee, exchangeRate)}
-            {renderFee('Gas Fee', simulateGasFee, exchangeRate)}
+            {renderFee('Gas fee', simulateGasFee, exchangeRate)}
           </Flex>
           <Flex w={'100%'} justifyContent={'space-between'} mt="8px">
             <Text fontSize={'12px'} lineHeight={'16px'} color={'scene.danger.normal'}>

diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/AccountTips.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/AccountTips.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Box, Popover, PopoverContent, PopoverTrigger } from '@totejs/uikit';
+import { Box, Tooltip } from '@totejs/uikit';
 import { AccountType } from '@/store/slices/accounts';
 import { getAccountDisplay } from '@/utils/accounts';
 
@@ -12,21 +12,9 @@ export const AccountTips = memo<AccountTipsProps>(function ({ type }) {
   return (
     <>
       {accountDisplay && (
-        <Popover trigger="hover" matchWidth={true}>
-          <PopoverTrigger>
-            <Box>{accountDisplay.icon}</Box>
-          </PopoverTrigger>
-          <PopoverContent
-            minW={140}
-            maxW={245}
-            w="fit-content"
-            bg={'white'}
-            p={8}
-            color={'readable.normal'}
-          >
-            {accountDisplay.tip}
-          </PopoverContent>
-        </Popover>
+        <Tooltip trigger="hover" content={accountDisplay.tip} placement="bottom-start">
+          <Box>{accountDisplay.icon}</Box>
+        </Tooltip>
       )}
     </>
   );

diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/Fee.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/Fee.tsx
@@ -68,7 +68,6 @@ export const Fee = memo<FeeProps>(function Fee({
     feeUsdPrice &&
     currencyFormatter(feeUsdPrice.dp(FIAT_CURRENCY_DISPLAY_PRECISION).toString(DECIMAL_NUMBER));
 
-
   const totalAmount = BigNumber(amount || 0)
     .plus(totalFee)
     .plus(settlementFee || '0')
@@ -83,16 +82,24 @@ export const Fee = memo<FeeProps>(function Fee({
   //   .toString(DECIMAL_NUMBER)} ${TOKEN_SYMBOL} (${formatFeeUsdPrice})`;
 
   //show defalut fee if cannot get fee data in 3000ms
+  const defaultFeeUsdPrice = currencyFormatter(
+    BigNumber(defaultFee)
+      .times(BigNumber(bnbPrice))
+      .dp(FIAT_CURRENCY_DISPLAY_PRECISION)
+      .toString(DECIMAL_NUMBER),
+  );
   const TotalFeeContent = useMemo(() => {
     let total = totalFee;
     if (isShowDefault) {
       total = BigNumber(defaultFee);
-      return `~${total.dp(CRYPTOCURRENCY_DISPLAY_PRECISION, 1).toString(DECIMAL_NUMBER)} ${TOKEN_SYMBOL}`;
+      return `~${total
+        .dp(CRYPTOCURRENCY_DISPLAY_PRECISION, 1)
+        .toString(DECIMAL_NUMBER)} ${TOKEN_SYMBOL} (${defaultFeeUsdPrice})`;
     }
     return `${totalFee
       .dp(CRYPTOCURRENCY_DISPLAY_PRECISION, 1)
       .toString(DECIMAL_NUMBER)} ${TOKEN_SYMBOL} (${formatFeeUsdPrice})`;
-  }, [TOKEN_SYMBOL, defaultFee, formatFeeUsdPrice, isShowDefault, totalFee]);
+  }, [TOKEN_SYMBOL, defaultFee, formatFeeUsdPrice, isShowDefault, totalFee, defaultFeeUsdPrice]);
   const TotalAmountContent = `${totalAmount} ${TOKEN_SYMBOL} (${formatTotalUsdPrice})`;
 
   const TipContent = useMemo(() => {
@@ -125,7 +132,14 @@ export const Fee = memo<FeeProps>(function Fee({
         <Text>Relayer fee is paid to relayers for handling cross-chain packets.</Text>
       </Box>
     );
-  }, [transType, gasFee, defaultGasRelayerFee.gasFee, defaultGasRelayerFee.relayerFee, TOKEN_SYMBOL, relayerFee]);
+  }, [
+    transType,
+    gasFee,
+    defaultGasRelayerFee.gasFee,
+    defaultGasRelayerFee.relayerFee,
+    TOKEN_SYMBOL,
+    relayerFee,
+  ]);
 
   const amountUsd = currencyFormatter(
     BigNumber(amount || 0)
@@ -150,7 +164,7 @@ export const Fee = memo<FeeProps>(function Fee({
       padding={'8px 12px'}
     >
       <Flex justifyContent={'space-between'} fontWeight={600} color={'readable.normal'}>
-        <Text>Total amount</Text>
+        <Text>Total Amount</Text>
         <Text color={'readable.secondary'} fontWeight={500}>
           {isGasLoading ? '--' : TotalAmountContent}
         </Text>
@@ -186,7 +200,7 @@ export const Fee = memo<FeeProps>(function Fee({
         <Flex>
           {transType !== 'send' && (
             <Flex justifyContent={'flex-start'}>
-              <Text>{'Gas Fee'}</Text>{' '}
+              <Text>{'Gas fee'}</Text>{' '}
               <Tips
                 containerWidth={'308px'}
                 tips={TipContent}

diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/ToAccountSelector.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/ToAccountSelector.tsx
@@ -116,7 +116,7 @@ export const ToAccountSelector = memo<ToAccountSelectorProps>(function ToAccount
       text={account?.address}
       placeholder="Choose or enter addresses"
       options={options}
-      header={() => `Accounts (${total})`}
+      header={() => `Payment Accounts (${total})`}
       onChange={onChangeAccount}
       onSearchFilter={onSearchFilter}
       onSearch={onSearch}
@@ -125,6 +125,8 @@ export const ToAccountSelector = memo<ToAccountSelectorProps>(function ToAccount
       }}
       footer={Footer}
       renderOption={({ value, label }) => <OptionItem value={value} label={label} />}
+      emptyIcon="empty-account"
+      emptyText="No Payment Accounts"
     />
   );
 });