feat: To address confirmation

apps/canonical-bridge-ui/core/locales/en.ts

@@ -15,6 +15,8 @@ export const en = {
   'to.section.account.label': 'Destination Address',
   'to.section.account.placeholder': 'Enter {network} Address',
   'to.section.account.invalid': 'Invalid address.',
+  'to.section.confirm.text':
+    'I confirmed the address is correct and not an exchange or contract address. Any tokens sent to an incorrect address will be unrecoverable.',
 
   'you.send.title': 'You Send',
   'you.receive.title': 'You Receive',

packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx

@@ -0,0 +1,69 @@
+import { Checkbox, CheckboxProps, theme, useColorMode } from '@bnb-chain/space';
+
+export const ConfirmCheckbox: React.FC<CheckboxProps> = (props: CheckboxProps) => {
+  const { colorMode } = useColorMode();
+
+  const { isChecked } = props;
+
+  return (
+    <Checkbox
+      _checked={{
+        '& .chakra-checkbox__control': {
+          border: `1px solid ${theme.colors[colorMode].text.brand}`,
+          color: theme.colors[colorMode].text.brand,
+        },
+        '& .chakra-text': {
+          color: theme.colors[colorMode].text.tertiary,
+        },
+      }}
+      // _hover={{
+      //   '& .chakra-text': {
+      //     color: theme.colors[colorMode].text.primary,
+      //   },
+      // }}
+      sx={{
+        alignItems: 'flex-start',
+        '&: hover': {
+          '.chakra-checkbox__control': {
+            border: isChecked
+              ? `1px solid ${theme.colors[colorMode].text.brand}`
+              : `1px solid ${theme.colors[colorMode].text.tertiary}`,
+          },
+        },
+
+        '.chakra-checkbox__control': {
+          border: `1px solid ${theme.colors[colorMode].text.tertiary}`,
+          borderRadius: '3px',
+          w: theme.sizes['4'],
+          h: theme.sizes['4'],
+          visibility: 'visible',
+          pos: 'relative',
+
+          _hover: {
+            bg: isChecked ? 'transpartent' : theme.colors[colorMode].layer['3'].hover,
+
+            '::before': {
+              content: '""',
+              w: theme.sizes['6'],
+              h: theme.sizes['6'],
+              pos: 'absolute',
+              bg: theme.colors[colorMode].layer[3].hover,
+              borderRadius: theme.sizes['2'],
+              zIndex: '-1',
+            },
+          },
+
+          _active: {
+            color: theme.colors[colorMode].text.primary,
+            bg: theme.colors[colorMode].layer['3'].active,
+          },
+
+          svg: {
+            w: '80%',
+          },
+        },
+      }}
+      {...props}
+    />
+  );
+};

packages/canonical-bridge-widget/src/modules/transfer/action.ts

@@ -39,3 +39,7 @@ export const setRouteError = createAction<ITransferState['routeError']>('transfe
 export const setToAccount = createAction<ITransferState['toAccount']>('transfer/setToAccount');
 
 export const setRouteFees = createAction<ITransferState['routeFees']>('transfer/setRouteFees');
+
+export const setIsToAddressChecked = createAction<ITransferState['isToAddressChecked']>(
+  'transfer/setIsToAddressChecked',
+);

packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx

@@ -52,6 +52,7 @@ export function TransferButton({
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const toChain = useAppSelector((state) => state.transfer.toChain);
   const toAccount = useAppSelector((state) => state.transfer.toAccount);
+  const isToAddressChecked = useAppSelector((state) => state.transfer.isToAddressChecked);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const publicClient = usePublicClient({ chainId: fromChain?.id }) as any;
@@ -89,7 +90,8 @@ export function TransferButton({
           selectedToken?.address !== '0x0000000000000000000000000000000000000000') ||
         !isEvmConnected) &&
         fromChain?.chainType !== 'tron') ||
-      (!isTronConnected && fromChain?.chainType === 'tron' && !tronAddress)
+      ((!isTronConnected || !tronAddress || tronAllowance === null) &&
+        fromChain?.chainType === 'tron')
     ) {
       return;
     }
@@ -366,6 +368,7 @@ export function TransferButton({
     address,
     transferActionInfo,
     allowance,
+    tronAllowance,
     setHash,
     setChosenBridge,
     sendValue,
@@ -412,7 +415,8 @@ export function TransferButton({
           !sendValue ||
           !Number(sendValue) ||
           !transferActionInfo ||
-          !isTransferable
+          !isTransferable ||
+          (isTronTransfer && !isToAddressChecked)
         }
       >
         {isApproveNeeded

packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx

@@ -84,7 +84,7 @@ export const SendInput: React.FC = () => {
   };
 
   return (
-    <Flex flexDir={'column'} gap={'12px'} position={'relative'}>
+    <Flex flexDir={'column'} position={'relative'}>
       <Flex flexDir={'row'} justifyContent={'space-between'}>
         <Box color={theme.colors[colorMode].input.title} fontSize={'14px'} fontWeight={400}>
           {formatMessage({ id: 'you.send.title' })}
@@ -93,6 +93,7 @@ export const SendInput: React.FC = () => {
       </Flex>
       <Flex
         flex={1}
+        mt={'12px'}
         flexDir={'row'}
         justifyContent={'space-between'}
         alignItems={'center'}

packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx

@@ -8,15 +8,15 @@ import {
   useIntl,
   InputGroup,
   InputRightElement,
-  Checkbox,
 } from '@bnb-chain/space';
 import { ChangeEvent, useRef, useState } from 'react';
 
-import { setToAccount } from '@/modules/transfer/action';
+import { setIsToAddressChecked, setToAccount } from '@/modules/transfer/action';
 import { useTronTransferInfo } from '@/modules/transfer/hooks/tron/useTronTransferInfo';
 import { ErrorIcon } from '@/core/components/icons/ErrorIcon';
 import { CorrectIcon } from '@/core/components/icons/CorrectIcon';
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
+import { ConfirmCheckbox } from '@/core/components/ConfirmCheckbox';
 
 export function ToAccount(props: FlexProps) {
   const { colorMode } = useColorMode();
@@ -55,8 +55,10 @@ export function ToAccount(props: FlexProps) {
   const onCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked === true) {
       setIsChecked(true);
+      dispatch(setIsToAddressChecked(true));
     } else {
       setIsChecked(false);
+      dispatch(setIsToAddressChecked(false));
     }
   };
 
@@ -104,13 +106,16 @@ export function ToAccount(props: FlexProps) {
         )}
       </InputGroup>
 
-      {/* <Flex flexDir={'row'} alignItems={'flex-start'} gap={'8px'}>
-        <Checkbox onChange={onCheckboxChange} w={'24px'} h={'24px'} border={'1px solid red'} />
-        <Box>
-          I confirmed the address is correct and not an exchange or contract address. Any tokens
-          sent to an incorrect address will be unrecoverable.
-        </Box>
-      </Flex> */}
+      <ConfirmCheckbox
+        isChecked={isChecked}
+        onChange={onCheckboxChange}
+        borderRadius={'2px'}
+        mt={'12px'}
+        mb={'8px'}
+        justifyItems={'flex-start'}
+      >
+        {formatMessage({ id: 'to.section.confirm.text' })}
+      </ConfirmCheckbox>
 
       {isInvalid && (
         <Flex mt={'8px'} color={theme.colors[colorMode].text.danger}>

packages/canonical-bridge-widget/src/modules/transfer/hooks/useLoadingBridgeFees.ts

@@ -145,17 +145,31 @@ export const useLoadingBridgeFees = () => {
                 meson: `Minimum amount is ${error.data.fee} ${selectedToken.symbol}`,
               }),
             );
+          } else {
+            // other error
+            dispatch(setEstimatedAmount({ meson: 'error' }));
+            dispatch(
+              setRouteError({
+                meson: error.message,
+              }),
+            );
           }
         } else {
           const feeSortingRes = await mesonFeeSorting(mesonEst.value.result);
+          const decimals = selectedToken?.meson?.raw?.decimals || 6;
           const receiveMesonAmt =
-            Number(debouncedSendValue) - Number(mesonEst.value.result.totalFee);
+            parseUnits(debouncedSendValue, decimals) -
+            parseUnits(mesonEst.value.result.totalFee, decimals);
           if (feeSortingRes) {
-            dispatch(setEstimatedAmount({ meson: formatNumber(receiveMesonAmt, 8) }));
+            dispatch(
+              setEstimatedAmount({
+                meson: formatNumber(Number(formatUnits(receiveMesonAmt, decimals)), 8),
+              }),
+            );
             // TODO check amount value
             valueArr.push({
               type: 'meson',
-              value: formatNumber(receiveMesonAmt, 8),
+              value: formatNumber(Number(formatUnits(receiveMesonAmt, decimals)), 8),
               isIgnoreSorted: false,
               isDisplayError: false,
             });

packages/canonical-bridge-widget/src/modules/transfer/index.tsx

@@ -67,7 +67,7 @@ export function TransferWidget() {
 
         <NetWorkSection />
         <SendInput />
-        <ToAccount mt={'24px'} />
+        <ToAccount />
         <ReceiveInfo onOpen={onOpen} />
         <Flex flexDir="column">
           <TransferButtonGroup />

packages/canonical-bridge-widget/src/modules/transfer/reducer.ts

@@ -23,6 +23,7 @@ export interface ITransferState {
   isRefreshing?: boolean;
   estimatedAmount?: IEstimatedAmount;
   routeFees?: IRouteFees;
+  isToAddressChecked?: boolean;
   toAccount: {
     address?: string;
   };
@@ -45,6 +46,7 @@ const initStates: ITransferState = {
   isRefreshing: false,
   estimatedAmount: undefined,
   routeFees: undefined,
+  isToAddressChecked: false,
   toAccount: {
     address: '',
   },
@@ -101,6 +103,11 @@ export default createReducer(initStates, (builder) => {
     isRefreshing: payload,
   }));
 
+  builder.addCase(actions.setIsToAddressChecked, (state, { payload }) => ({
+    ...state,
+    isToAddressChecked: payload,
+  }));
+
   builder.addCase(actions.setEstimatedAmount, (state, { payload }) => ({
     ...state,
     estimatedAmount: { ...state.estimatedAmount, ...payload },