feat(dcellar-web-ui): add max button to transfer module

apps/dcellar-web-ui/src/components/layout/Nav/index.tsx

@@ -32,6 +32,11 @@ const MENU_ITEMS = [
     text: 'Accounts',
     trackId: 'dc.main.nav.accounts.click',
   },
+  {
+    icon: 'toolbox',
+    text: 'Toolbox',
+    trackId: 'dc.main.nav.toolbox.click',
+  },
 ];
 
 const ASIDE = [

apps/dcellar-web-ui/src/constants/paths.ts

@@ -10,6 +10,7 @@ export const InternalRoutePaths = {
   pricing_calculator: '/pricing-calculator',
   accounts: '/accounts',
   dashboard: '/dashboard',
+  toolbox: '/toolbox',
 };
 
 export const NODEREAL_URL = 'https://nodereal.io';

apps/dcellar-web-ui/src/context/GlobalContext/PageProtect.tsx

@@ -7,8 +7,10 @@ import { isRightChain } from '@/modules/wallet/utils/isRightChain';
 import { BSC_CHAIN_ID, GREENFIELD_CHAIN_ID } from '@/base/env';
 import { WrongNetworkModal } from '@/components/WrongNetworkModal';
 
+// protect: GNFD chain, GNFD & BSC chain and no protect.
 const protectGNFDPaths = ['/buckets', '/buckets/[...path]', '/groups', '/accounts'];
-const noProtectPaths = ['/', '/terms', '/pricing-calculator'];
+const noProtectPaths = ['/', '/terms', '/pricing-calculator', '/tool-box'];
+
 // TODO unify the wallet page protect
 export const PageProtect: React.FC<any> = ({ children }) => {
   const { chain } = useNetwork();

apps/dcellar-web-ui/src/context/GlobalContext/WalletBalanceContext.tsx

@@ -3,6 +3,8 @@ import { Address, useBalance, useNetwork } from 'wagmi';
 
 import { BSC_CHAIN_ID, GREENFIELD_CHAIN_ID } from '@/base/env';
 import { useAppSelector } from '@/store';
+import { CRYPTOCURRENCY_DISPLAY_PRECISION } from '@/modules/wallet/constants';
+import { BN } from '@/utils/math';
 
 type TChainBalance = {
   chainId: number;
@@ -51,13 +53,13 @@ export const WalletBalanceProvider: React.FC<any> = ({ children }) => {
         chainId: BSC_CHAIN_ID,
         isLoading: isBscLoading,
         isError: isBscError,
-        availableBalance: bscBalance?.formatted,
+        availableBalance: BN(bscBalance?.formatted ?? 0).dp(CRYPTOCURRENCY_DISPLAY_PRECISION, 1).toString(),
       },
       {
         chainId: GREENFIELD_CHAIN_ID,
         isLoading: isGnfdLoading,
         isError: isGnfdError,
-        availableBalance: gnfdBalance?.formatted,
+        availableBalance: BN(gnfdBalance?.formatted ?? 0).dp(CRYPTOCURRENCY_DISPLAY_PRECISION, 1).toString(),
       },
     ],
   };

apps/dcellar-web-ui/src/facade/wallet.ts

@@ -1,9 +1,66 @@
 import { Connector } from 'wagmi';
 import { signTypedDataV4 } from '@/utils/coder';
+import { ethers } from 'ethers';
+import { ErrorResponse, commonFault } from './error';
+import { resolve } from './common';
+import { BN } from '@/utils/math';
+import BigNumber from 'bignumber.js';
 
 export const signTypedDataCallback = (connector: Connector) => {
   return async (addr: string, message: string) => {
     const provider = await connector.getProvider();
     return await signTypedDataV4(provider, addr, message);
   };
 };
+
+export const calTransferInFee = async (
+  params: {
+    amount: string,
+    crossChainContractAddress: string;
+    tokenHubContract: string
+    crossChainAbi: any;
+    tokenHubAbi: any;
+    address: string;
+  },
+  signer: ethers.providers.JsonRpcSigner,
+  provider: ethers.providers.JsonRpcProvider | ethers.providers.FallbackProvider,
+): Promise<ErrorResponse | [{ relayerFee: BigNumber, gasFee: BigNumber }, null]> => {
+  const crossChainContract = new ethers.Contract(
+    params.crossChainContractAddress,
+    params.crossChainAbi,
+    signer!,
+  );
+  const [fee, error1] = await crossChainContract.getRelayFees().then(resolve, commonFault);
+  if (error1) return [null, error1];
+  const [relayFee, ackRelayFee] = fee;
+  const relayerFee = relayFee.add(ackRelayFee);
+  const fData = await provider.getFeeData();
+  const amountInFormat = ethers.utils.parseEther(String(params.amount));
+  const transferInAmount = amountInFormat;
+
+  const totalAmount = amountInFormat.add(ackRelayFee).add(relayFee);
+
+  const tokenHubContract = new ethers.Contract(
+    params.tokenHubContract,
+    params.tokenHubAbi,
+    signer!,
+  );
+
+  const [estimateGas, error2] = await tokenHubContract.estimateGas.transferOut(
+    params.address,
+    transferInAmount,
+    {
+      value: totalAmount,
+    },
+  ).then(resolve, commonFault);
+  if (!estimateGas || error2) return [null, error2];
+
+  const gasFee = fData.gasPrice && estimateGas.mul(fData.gasPrice);
+
+  const finalData = {
+    gasFee: BN(gasFee ? ethers.utils.formatEther(gasFee) : '0'),
+    relayerFee: BN(ethers.utils.formatEther(relayerFee)),
+  };
+
+  return [finalData, null];
+}

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

@@ -0,0 +1,44 @@
+import { Center, CircleProps, Flex, FlexProps, LinkProps, Tooltip } from '@totejs/uikit';
+
+export const Card = ({ children, ...props }: FlexProps) => {
+  return (
+    <Flex
+      p={'24px 20px'}
+      maxW={375}
+      gap={16}
+      border={'1px solid readable.border'}
+      borderRadius={4}
+      flexDirection={'column'}
+      _hover={{
+        border: '1px solid brand.brand6',
+        cursor: 'pointer',
+      }}
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export const CircleLink = ({ children, href, title, ...props }: CircleProps & LinkProps) => {
+  return (
+    <Tooltip content={title}>
+      <Center
+        w={24}
+        h={24}
+        href={href}
+        as={'a'}
+        target={'_blank'}
+        border={'1px solid readable.border'}
+        borderRadius={12}
+        _hover={{
+          borderColor: 'brand.brand6',
+          color: 'brand.brand6',
+        }}
+        {...props}
+      >
+        {children}
+      </Center>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Card } from './Common';
+import { Box, Text, Tooltip } from '@totejs/uikit';
+import { DCButton } from '@/components/common/DCButton';
+import { assetPrefix } from '@/base/env';
+
+export const TellUsCard = () => {
+  const onNavigateExternal = (url: string) => {
+    window.open(url, '_blank', 'noreferrer');
+  };
+  return (
+    <Card
+      _hover={{}}
+      position={'relative'}
+      overflow={'hidden'}
+      border={'none'}
+      background={`url(${assetPrefix}/images/toolbox/icon-toolbox-bg-1.svg) no-repeat left 0 top 0, url(${assetPrefix}/images/toolbox/icon-toolbox-bg-2.svg) no-repeat right 0 top 10%, url(${assetPrefix}/images/toolbox/icon-toolbox-bg-3.svg) no-repeat left 10% bottom 0%`}
+      bgColor={'#f9f9f9'}
+      justifyContent={'center'}
+    >
+      <Text fontSize={18} fontWeight={600} color={'readable.normal'} textAlign={'center'}>
+        Start Building with DCellar Now
+      </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.
+        </Text>
+      </Box>
+      <Tooltip content="Upcoming">
+        <DCButton
+          margin={'16px auto 0'}
+          variant="brand"
+          w={'fit-content'}
+          onClick={() => onNavigateExternal('#')}
+        >
+          Explorer
+        </DCButton>
+      </Tooltip>
+    </Card>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { IconFont } from '@/components/IconFont';
+import { Badge, Flex, Text } from '@totejs/uikit';
+import { Card, CircleLink } from './Common';
+
+export const UploadKitCard = () => {
+  return (
+    <Card>
+      <IconFont type="upload" w={48} />
+      <Flex justifyContent={'space-between'} gap={8}>
+        <Text fontSize={16} fontWeight={600} flex={1}>
+          Greenfield UploadKit
+        </Text>
+        <CircleLink title="github" href="https://github.com/node-real/greenfield-toolkit/tree/main/packages/uploadkit">
+          <IconFont type="line-github" w={16} />
+        </CircleLink>
+        <CircleLink title="doc" href="https://node-real.github.io/greenfield-toolkit">
+          <IconFont type="doc" w={16} ml={2} />
+        </CircleLink>
+        <CircleLink
+          title="npm"
+          href="https://www.npmjs.com/package/@node-real/greenfield-uploadkit"
+        >
+          <IconFont type="npm" w={16} />
+        </CircleLink>
+      </Flex>
+
+      <Badge colorScheme="primary" width={'fit-content'} borderRadius={4}>
+        Component
+      </Badge>
+      <Text color={'readable.secondary'}>
+        Greenfield Upload UIKit is offered by NodeReal, it's fully open sourced, developers can
+        easily integrate into their WebUI dApps.
+      </Text>
+    </Card>
+  );
+};

apps/dcellar-web-ui/src/modules/toolbox/page/index.tsx

@@ -0,0 +1,19 @@
+import { Box, Flex, Text } from '@totejs/uikit';
+import { TellUsCard } from '../components/TellUsCard';
+import { UploadKitCard } from '../components/UploadkitCard';
+
+export const ToolBoxPage = () => {
+  return (
+    <>
+      <Box>
+        <Text as="h1" fontSize={24} fontWeight={700} mb={16}>
+          Toolbox
+        </Text>
+        <Flex gap={16} flexWrap={'wrap'}>
+          <UploadKitCard/>
+          <TellUsCard />
+        </Flex>
+      </Box>
+    </>
+  );
+};

apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx

@@ -414,8 +414,10 @@ export const Send = memo<SendProps>(function Send() {
             register={register}
             disabled={isSubmitting}
             watch={watch}
+            bankBalance={bankBalance}
             feeData={feeData}
             setValue={setValue}
+            settlementFee={settlementFee}
             maxDisabled={isLoading}
           />
           {isShowFee() ? (