Merge pull request #343 from node-real/release_mainnet_0201

release mainnet 0201

apps/dcellar-web-ui/src/components/Fee/BalanceOn.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TextProps } from '@totejs/uikit';
+import { useAppSelector } from '@/store';
+import { selectBnbPrice } from '@/store/slices/global';
+import { renderFee } from '@/utils/common';
+
+type BalanceOnProps = TextProps & {
+  amount: string;
+};
+export const BalanceOn = ({ amount, ...restProps }: BalanceOnProps) => {
+  const bnbPrice = useAppSelector(selectBnbPrice);
+
+  return (
+    <Text color={'readable.tertiary'} fontSize={12} textAlign={'right'} mt={8} {...restProps}>
+      Balance on Greenfield: {renderFee(amount, bnbPrice)}
+    </Text>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/BankBalance.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Flex, TextProps } from '@totejs/uikit';
+import { useAppSelector } from '@/store';
+import { selectBnbPrice } from '@/store/slices/global';
+import { renderFee } from '@/utils/common';
+import { LearnMoreTips } from '../common/Tips';
+
+type BankBalanceProps = TextProps & {
+  amount: string;
+};
+
+const TipsLink = 'https://docs.nodereal.io/docs/dcellar-faq#question-what-is-bank-balance';
+const TipsText = 'Bank Balance';
+
+export const BankBalance = ({ amount, ...restProps }: BankBalanceProps) => {
+  const bnbPrice = useAppSelector(selectBnbPrice);
+
+  return (
+    <Flex
+      color={'readable.disable'}
+      fontSize={12}
+      textAlign={'right'}
+      {...restProps}
+      justifyContent={'flex-end'}
+    >
+      Owner Account Bank Balance <LearnMoreTips href={TipsLink} text={TipsText} />:{' '}
+      {renderFee(amount, bnbPrice)}
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/FullBalance.tsx

@@ -0,0 +1,38 @@
+import { CRYPTOCURRENCY_DISPLAY_PRECISION } from '@/modules/wallet/constants';
+import { useAppSelector } from '@/store';
+import { TAccount, selectAccount } from '@/store/slices/accounts';
+import { selectBnbPrice } from '@/store/slices/global';
+import { renderFee } from '@/utils/common';
+import { BN } from '@/utils/math';
+import { Flex, Text } from '@totejs/uikit';
+import { isEmpty } from 'lodash-es';
+
+type AccountBalanceProps = {
+  address: string;
+};
+
+export const FullBalance = ({ address }: AccountBalanceProps) => {
+  const { loginAccount } = useAppSelector((root) => root.persist);
+  const { bankBalance } = useAppSelector((root) => root.accounts);
+  const accountDetail = useAppSelector(selectAccount(address));
+  const exchangeRate = useAppSelector(selectBnbPrice);
+  const isOwnerAccount = address === loginAccount;
+  const balance = isOwnerAccount
+    ? BN(accountDetail.staticBalance)
+        .plus(bankBalance)
+        .dp(CRYPTOCURRENCY_DISPLAY_PRECISION)
+        .toString()
+    : BN(accountDetail.staticBalance).dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString();
+
+  if (isEmpty(accountDetail)) return null;
+
+  return (
+    <Flex w="100%" alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center" />
+      <Text fontSize={12} color="readable.disable">
+        {`${accountDetail.name} balance: `}
+        {renderFee(balance, exchangeRate)}
+      </Text>
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/GasFee.tsx

@@ -0,0 +1,20 @@
+import { GasFeeTips } from '@/modules/object/components/TotalFees/GasFeeTips'
+import { renderFeeValue } from '@/modules/object/utils'
+import { useAppSelector } from '@/store'
+import { selectBnbPrice } from '@/store/slices/global'
+import { Flex, Text } from '@totejs/uikit'
+import React from 'react'
+
+export const GasFee = ({amount}: {amount: string}) => {
+  const bnbPrice = useAppSelector(selectBnbPrice);
+  return (
+    <Flex w="100%" alignItems="center" justifyContent="space-between">
+    <Flex alignItems="center">
+      <Text color="readable.tertiary" as="p">
+        Gas fee
+      </Text>
+    </Flex>
+    <Text color="readable.tertiary">{renderFeeValue(String(amount), bnbPrice)}</Text>
+  </Flex>
+  )
+}

apps/dcellar-web-ui/src/components/Fee/InsufficientBalance.tsx

@@ -0,0 +1,49 @@
+import { Flex, Text } from '@totejs/uikit';
+import { useEffect, useState } from 'react';
+import NextLink from 'next/link';
+import { InternalRoutePaths } from '@/constants/paths';
+
+export type InsufficientBalanceProps = {
+  loginAccount: string;
+  accounts: { address: string }[];
+};
+export const InsufficientBalance = ({ loginAccount, accounts }: InsufficientBalanceProps) => {
+  const [activeWays, setActiveWays] = useState<{ link: string; text: string }[]>([]);
+  useEffect(() => {
+    const ways = accounts
+      .map((account) => {
+        const isOwnerAccount = account.address === loginAccount;
+        return isOwnerAccount
+          ? {
+              link: InternalRoutePaths.transfer_in,
+              text: 'Transfer in',
+            }
+          : {
+              link: `${InternalRoutePaths.send}&from=${loginAccount}&to=${account.address}`,
+              text: 'Send',
+            };
+      });
+    setActiveWays(ways);
+  }, [loginAccount, accounts]);
+
+  return (
+    <Flex color={'#EE3911'} flexDirection={'column'} gap={4}>
+      {activeWays.map((item, index) => (
+        <Flex key={index}>
+          Insufficient balance.&nbsp;
+          <NextLink href={item.link} passHref legacyBehavior>
+            <Text
+              cursor={'pointer'}
+              display={'inline'}
+              style={{ textDecoration: 'underline' }}
+              color="#EE3911"
+              _hover={{ color: '#EE3911' }}
+            >
+              {item.text}
+            </Text>
+          </NextLink>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/PrepaidFee.tsx

@@ -0,0 +1,23 @@
+import { PrePaidTips } from '@/modules/object/components/TotalFees/PrepaidTips';
+import { useAppSelector } from '@/store';
+import { selectBnbPrice } from '@/store/slices/global';
+import { renderFee } from '@/utils/common';
+import { Flex, Text } from '@totejs/uikit';
+
+export type PrepaidFeeProps = {
+  amount: string;
+};
+export const PrepaidFee = ({ amount }: PrepaidFeeProps) => {
+  const exchangeRate = useAppSelector(selectBnbPrice);
+  return (
+    <Flex w="100%" alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center">
+        <Text color="readable.tertiary" as="p">
+          Prepaid fee
+        </Text>
+        <PrePaidTips />
+      </Flex>
+      <Text color="readable.tertiary">{renderFee(amount, exchangeRate)}</Text>
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/RefundPrepaidFee.tsx

@@ -0,0 +1,28 @@
+import { PrePaidTips } from '@/modules/object/components/TotalFees/PrepaidTips';
+import { useAppSelector } from '@/store';
+import { selectBnbPrice } from '@/store/slices/global';
+import { renderFee } from '@/utils/common';
+import { Flex, Text } from '@totejs/uikit';
+
+export type RefundPrepaidFeeProps = {
+  amount: string;
+};
+export const RefundPrepaidFee = ({ amount }: RefundPrepaidFeeProps) => {
+  const exchangeRate = useAppSelector(selectBnbPrice);
+  return (
+    <Flex w="100%" alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center">
+        <Text color="readable.tertiary" as="p">
+          Prepaid fee refund
+        </Text>
+        <PrePaidTips />
+      </Flex>
+      <Text color="readable.tertiary">
+        <Text as="span" color={'#EEBE11'} mr={4}>
+          Refund
+        </Text>
+        {renderFee(amount, exchangeRate)}
+      </Text>
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/SettlementFee.tsx

@@ -0,0 +1,26 @@
+import { SettlementTips } from '@/modules/object/components/TotalFees/SettlementTips';
+import { renderFeeValue } from '@/modules/object/utils';
+import { useAppSelector } from '@/store';
+import { TAccount } from '@/store/slices/accounts';
+import { selectBnbPrice } from '@/store/slices/global';
+import { Box, Flex, Text } from '@totejs/uikit';
+import { BoxProps } from '@totejs/uikit';
+
+export type SettlementFeeProps =  {
+  amount: string;
+};
+
+export const SettlementFee = ({ amount }: SettlementFeeProps) => {
+  const exchangeRate = useAppSelector(selectBnbPrice);
+  return (
+    <Flex w="100%" alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center">
+        <Text color="readable.tertiary" as="p">
+          Settlement fee
+        </Text>
+        <SettlementTips />
+      </Flex>
+      <Text color="readable.tertiary">{renderFeeValue(amount, exchangeRate)}</Text>
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/Fee/TotalFeeBox.tsx

@@ -0,0 +1,61 @@
+import { renderFeeValue } from '@/modules/object/utils';
+import { Divider, Flex, FlexProps, Text } from '@totejs/uikit';
+import { IconFont } from '../IconFont';
+import React from 'react';
+
+export type TotalFeeBoxProps = FlexProps & {
+  expand: boolean;
+  amount: string;
+  canExpand: boolean;
+  exchangeRate: string;
+  onToggle: () => void;
+  Tips?: React.ReactNode;
+};
+export const TotalFeeBox = ({
+  expand,
+  canExpand,
+  amount,
+  exchangeRate,
+  onToggle,
+  Tips,
+  children,
+}: TotalFeeBoxProps) => {
+  return (
+    <Flex
+      gap={8}
+      padding={'8px 12px'}
+      borderRadius={4}
+      w="100%"
+      bg="bg.bottom"
+      flexDirection="column"
+    >
+      <Flex
+        fontSize={'14px'}
+        fontWeight={600}
+        onClick={() => canExpand && onToggle()}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        cursor={expand ? 'pointer' : 'default'}
+      >
+        <Flex alignItems="center">
+          <Text>Total Fees</Text>
+          {Tips}
+        </Flex>
+        <Flex
+          color={'readable.secondary'}
+          alignItems="center"
+          gap={4}
+          justifySelf={'flex-end'}
+          fontWeight={'400'}
+        >
+          {renderFeeValue(amount, exchangeRate)}
+          {canExpand && (
+            <IconFont color={'readable.normal'} type={expand ? 'menu-open' : 'menu-close'} w={20} />
+          )}
+        </Flex>
+      </Flex>
+      {canExpand && expand && <Divider borderColor={'readable.disable'} />}
+      {expand && children}
+    </Flex>
+  );
+};

apps/dcellar-web-ui/src/components/common/Tips/index.tsx

@@ -1,7 +1,8 @@
 import { GAShow } from '@/components/common/GATracker';
 import { Flex, FlexProps, Tooltip, TooltipProps } from '@totejs/uikit';
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, memo, useState } from 'react';
 import { IconFont } from '@/components/IconFont';
+import { DCLink } from '../DCLink';
 
 interface Props extends TooltipProps {
   tips: string | ReactElement | null;
@@ -51,3 +52,34 @@ export const Tips = ({
     </Tooltip>
   );
 };
+
+export type LearnMoreTipsProps = {
+  href: string;
+  text: string;
+}
+export const LearnMoreTips = memo<LearnMoreTipsProps>(
+  function LearnMoreTips({href, text}) {
+    return (
+      <Tips
+        placement={'top'}
+        w={'fit-content'}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        tips={
+          <>
+            Learn More about{' '}
+            <DCLink
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {text}
+            </DCLink>
+            .
+          </>
+        }
+      />
+    );
+  },
+);