fix: correctly disable button if form is not valid

packages/widget/src/components/SwapButton/SwapButton.tsx

@@ -1,22 +1,21 @@
 import { ChainId } from '@lifi/sdk';
-import { useFormState, useWatch } from 'react-hook-form';
+import { Button } from '@mui/material';
+import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChains, useGasSufficiency } from '../../hooks';
 import { SwapFormKeyHelper, useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-import { Button } from './SwapButton.style';
 import type { SwapButtonProps } from './types';
 
 export const SwapButton: React.FC<SwapButtonProps> = ({
   onClick,
   currentRoute,
   text,
-  loading,
+  disable,
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { isValid, isValidating } = useFormState();
   const { getChainById } = useChains();
   const config = useWidgetConfig();
   const { account, switchChain, connect: walletConnect } = useWallet();
@@ -67,15 +66,10 @@ export const SwapButton: React.FC<SwapButtonProps> = ({
       variant="contained"
       color={account.isActive ? 'primary' : 'success'}
       onClick={handleSwapButtonClick}
-      // loading={isLoading || isFetching}
       disabled={
-        (insufficientFunds ||
-          !!insufficientGas.length ||
-          loading ||
-          isValidating ||
-          !isValid) &&
         currentRoute &&
-        !switchChainAllowed
+        !switchChainAllowed &&
+        (insufficientFunds || !!insufficientGas.length || disable)
       }
       fullWidth
     >

packages/widget/src/pages/MainPage/MainSwapButton.tsx

@@ -1,3 +1,4 @@
+import { useFormState } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapButton } from '../../components/SwapButton';
 import { useSwapRoutes } from '../../hooks';
@@ -6,6 +7,7 @@ import { navigationRoutes } from '../../utils';
 
 export const MainSwapButton: React.FC = () => {
   const navigate = useNavigate();
+  const { isValid, isValidating } = useFormState();
   const setExecutableRoute = useSetExecutableRoute();
 
   const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
@@ -25,7 +27,9 @@ export const MainSwapButton: React.FC = () => {
     <SwapButton
       onClick={handleClick}
       currentRoute={currentRoute}
-      loading={isLoading || isFetching || !currentRoute}
+      disable={
+        isLoading || isFetching || !currentRoute || isValidating || !isValid
+      }
     />
   );
 };

packages/widget/src/pages/MainPage/SwapRoutes.tsx

@@ -3,6 +3,7 @@ import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-materia
 import type { BoxProps } from '@mui/material';
 import { Box, IconButton } from '@mui/material';
 import { useCallback } from 'react';
+import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Card, CardTitle } from '../../components/Card';
@@ -21,6 +22,7 @@ import { Stack } from './SwapRoutes.style';
 export const SwapRoutes: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { isValid, isValidating } = useFormState();
   const {
     routes,
     isLoading,
@@ -100,6 +102,7 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
                   onClick={handleCardClick}
                   size="medium"
                   aria-label="swap-routes"
+                  disabled={isValidating || !isValid}
                 >
                   <KeyboardArrowRightIcon />
                 </IconButton>

packages/widget/src/pages/SwapPage/SwapPage.tsx

@@ -1,5 +1,6 @@
 import { Box, Button } from '@mui/material';
 import { Fragment } from 'react';
+import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
@@ -14,6 +15,7 @@ export const SwapPage: React.FC = () => {
   const { t } = useTranslation();
   const { state }: any = useLocation();
   const { navigateBack } = useNavigateBack();
+  const { isValid, isValidating } = useFormState();
   const { route, status, executeRoute, restartRoute, deleteRoute } =
     useRouteExecution(state?.routeId);
 
@@ -75,6 +77,7 @@ export const SwapPage: React.FC = () => {
             text={getSwapButtonText()}
             onClick={handleSwapClick}
             currentRoute={route}
+            disable={status === 'idle' && (isValidating || !isValid)}
           />
         </Box>
       ) : null}