feat: Solana insufficient SOL message refactory

bnb-chain · Dec 31, 2024 · 8fe363f · 8fe363f
1 parent 87f1692
commit 8fe363f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/packages/canonical-bridge-widget/src/core/components/icons/InfoIcon.tsx b/packages/canonical-bridge-widget/src/core/components/icons/InfoIcon.tsx
@@ -1,6 +1,11 @@
 import { Icon, IconProps } from '@bnb-chain/space';
 
-export function InfoIcon(props: IconProps) {
+interface InfoIconProps extends IconProps {
+  iconColor?: string;
+  iconBgColor?: string;
+}
+
+export function InfoIcon(props: InfoIconProps) {
   return (
     <Icon
       width="24px"
@@ -12,11 +17,11 @@ export function InfoIcon(props: IconProps) {
     >
       <path
         d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"
-        fill="#E1E2E5"
+        fill={props.iconBgColor ?? '#E1E2E5'}
       />
       <path
         d="M11.9982 8.59998C11.7513 8.59998 11.5454 8.51695 11.3806 8.35088C11.2158 8.18483 11.1334 7.97835 11.1334 7.73145C11.1334 7.48455 11.2164 7.27869 11.3825 7.11387C11.5485 6.94906 11.755 6.86665 12.0019 6.86665C12.2488 6.86665 12.4547 6.94968 12.6195 7.11573C12.7843 7.2818 12.8667 7.48828 12.8667 7.73518C12.8667 7.98208 12.7837 8.18794 12.6176 8.35277C12.4516 8.51758 12.2451 8.59998 11.9982 8.59998ZM12.0001 17.1333C11.8519 17.1333 11.726 17.0815 11.6223 16.9778C11.5186 16.8741 11.4667 16.7481 11.4667 16.6V11.2C11.4667 11.0518 11.5186 10.9259 11.6223 10.8222C11.726 10.7185 11.8519 10.6667 12.0001 10.6667C12.1482 10.6667 12.2741 10.7185 12.3778 10.8222C12.4815 10.9259 12.5334 11.0518 12.5334 11.2V16.6C12.5334 16.7481 12.4815 16.8741 12.3778 16.9778C12.2741 17.0815 12.1482 17.1333 12.0001 17.1333Z"
-        fill="#373943"
+        fill={props.iconColor ?? '#373943'}
       />
     </Icon>
   );

diff --git a/packages/canonical-bridge-widget/src/modules/transfer/BridgeTransfer.tsx b/packages/canonical-bridge-widget/src/modules/transfer/BridgeTransfer.tsx
@@ -10,6 +10,7 @@ import { ToAccount } from '@/modules/transfer/components/ToAccount';
 import { SvgDefs } from '@/core/components/icons/defs.tsx';
 import { useAppDispatch } from '@/modules/store/StoreProvider';
 import { setIsRoutesModalOpen } from '@/modules/transfer/action';
+import { TransferWarningMessage } from '@/modules/transfer/components/TransferWarningMessage';
 
 export function BridgeTransfer() {
   const { colorMode } = useColorMode();
@@ -57,6 +58,7 @@ export function BridgeTransfer() {
         <ReceiveInfo onOpen={() => dispatch(setIsRoutesModalOpen(true))} />
         <Flex flexDir="column">
           <TransferButtonGroup />
+          <TransferWarningMessage />
         </Flex>
         {routeContentBottom && (
           <Box display={{ base: 'block', lg: 'none' }}>{routeContentBottom}</Box>

diff --git a/.../canonical-bridge-widget/src/modules/transfer/components/TransferWarningMessage/index.tsx b/.../canonical-bridge-widget/src/modules/transfer/components/TransferWarningMessage/index.tsx
@@ -0,0 +1,38 @@
+import { Flex, theme, useColorMode } from '@bnb-chain/space';
+import { rgba } from 'polished';
+
+import { MIN_SOL_TO_ENABLED_TX } from '@/core/constants';
+import { InfoIcon } from '@/core/components/icons/InfoIcon';
+import { useAppSelector } from '@/modules/store/StoreProvider';
+import { useSolanaBalance } from '@/modules/wallet/hooks/useSolanaBalance';
+
+export const TransferWarningMessage = () => {
+  const { colorMode } = useColorMode();
+  const { data } = useSolanaBalance();
+  const solBalance = Number(data?.formatted);
+  const fromChain = useAppSelector((state) => state.transfer.fromChain);
+
+  if (fromChain?.chainType === 'solana' && solBalance < MIN_SOL_TO_ENABLED_TX) {
+    return (
+      <Flex
+        mt={'12px'}
+        px={'8px'}
+        py={'4px'}
+        gap={'8px'}
+        borderRadius={'8px'}
+        alignItems={'center'}
+        bg={rgba(theme.colors[colorMode].support.warning[4], 0.24)}
+        color={theme.colors[colorMode].support.warning[2]}
+      >
+        <InfoIcon
+          iconColor={theme.colors[colorMode].text.warning}
+          iconBgColor={theme.colors[colorMode].support.warning[4]}
+          fontSize={'12px'}
+          fontWeight={400}
+        />
+        {`At least ${MIN_SOL_TO_ENABLED_TX} SOL is required to proceed with this transaction.`}
+      </Flex>
+    );
+  }
+  return null;
+};
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts b/packages/canonical-bridge-widget/src/modules/transfer/hooks/useInputValidation.ts
@@ -3,16 +3,10 @@ import { BridgeType } from '@bnb-chain/canonical-bridge-sdk';
 import { useCallback } from 'react';
 
 import { formatNumber } from '@/core/utils/number';
-import { useAppSelector } from '@/modules/store/StoreProvider';
-import { useSolanaBalance } from '@/modules/wallet/hooks/useSolanaBalance';
-import { MIN_SOL_TO_ENABLED_TX } from '@/core/constants';
 import { useIsWalletCompatible } from '@/modules/wallet/hooks/useIsWalletCompatible';
 
 export const useInputValidation = () => {
-  const { data } = useSolanaBalance();
   const isWalletCompatible = useIsWalletCompatible();
-  const solBalance = Number(data?.formatted);
-  const fromChain = useAppSelector((state) => state.transfer.fromChain);
   const validateInput = useCallback(
     ({
       balance,
@@ -32,15 +26,18 @@ export const useInputValidation = () => {
         if (!decimal || !value) {
           return null;
         }
+        // check if send amount is smaller than lowest possible token amount
         if (Number(value) < Math.pow(10, -decimal)) {
           return {
             text: `The amount is too small. Please enter a valid amount to transfer.`,
             isError: true,
           };
         }
+        // check if send amount is greater than token balance
         if (!!balance && value > balance) {
           return { text: `You have insufficient balance`, isError: true };
         }
+        // check Stargate max amount
         if (estimatedAmount?.stargate && bridgeType === 'stargate' && value) {
           const stargateMax = formatUnits(estimatedAmount.stargate[0].maxAmountLD, decimal);
           if (value > Number(stargateMax)) {
@@ -52,14 +49,7 @@ export const useInputValidation = () => {
         }
 
         if (!!balance) {
-          if (fromChain?.chainType === 'solana' && solBalance < MIN_SOL_TO_ENABLED_TX) {
-            return {
-              text: `You should have at least ${MIN_SOL_TO_ENABLED_TX} SOL in your balance to perform this trade.`,
-              isError: true,
-            };
-          } else {
-            return { text: `${formatNumber(balance)}`, isError: false };
-          }
+          return { text: `${formatNumber(balance)}`, isError: false };
         } else if (isWalletCompatible) {
           return { isError: true, text: 'You have insufficient balance' };
         }
@@ -68,7 +58,7 @@ export const useInputValidation = () => {
         console.log(e);
       }
     },
-    [fromChain?.chainType, solBalance, isWalletCompatible],
+    [isWalletCompatible],
   );
 
   return {