Fix 'No bridge available' message condition (#2410)

Fix condition in route validation.
Unselect route when there is no supported option or available option.
In case of automatic connection, if it is not a manual wallet, we assign false to manualAddressTarget value.

wormhole-connect/src/utils/transferValidation.ts

@@ -24,8 +24,9 @@ import { PorticoBridgeState } from 'store/porticoBridge';
 import { DataWrapper } from 'store/helpers';
 import { CCTPManual_CHAINS as CCTP_CHAINS } from 'routes/cctpManual';
 import { CCTP_MAX_TRANSFER_LIMIT } from 'consts';
-import { isNttRoute } from 'routes';
+import { isNttRoute, RouteAvailability } from 'routes';
 import { isValidAddress } from './wallet/validAddress';
+import { isAutomatic as automatic } from './route';
 
 export const MANUAL_WALLET_NAME = 'Manual Wallet';
 
@@ -293,6 +294,7 @@ export const validateAll = async (
     supportedDestTokens,
     routeStates,
     receiveAmount,
+    manualAddressTarget,
   } = transferData;
   const { maxSwapAmt, toNativeToken } = relayData;
   const { sending, receiving } = walletData;
@@ -304,8 +306,11 @@ export const validateAll = async (
     token,
   );
   const maxSendAmount = getMaxAmt(route);
+  const isDisabled = (routeName: string, availability: RouteAvailability) =>
+    !availability.isAvailable ||
+    (manualAddressTarget && !automatic(routeName || '', toChain));
   const availableRoutes = routeStates
-    ?.filter((rs) => rs.supported)
+    ?.filter((rs) => rs.supported && !isDisabled(rs.name, rs.availability))
     .map((val) => val.name);
   const isCctpTx = isCctp(token, destToken, toChain, fromChain);
   const baseValidations = {

wormhole-connect/src/views/Bridge/RouteOptions.tsx

@@ -4,7 +4,12 @@ import { makeStyles } from 'tss-react/mui';
 import { Chip, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import { useDebounce } from 'use-debounce';
 import { RootState } from 'store';
-import { RouteState, setRoutes, setTransferRoute } from 'store/transferInput';
+import {
+  RouteState,
+  setManualAddressTarget,
+  setRoutes,
+  setTransferRoute,
+} from 'store/transferInput';
 import { LINK, joinClass } from 'utils/style';
 import { toFixedDecimals } from 'utils/balance';
 import { millisToMinutesAndSeconds } from 'utils/transferValidation';
@@ -25,6 +30,7 @@ import { finality, chainIdToChain } from '@wormhole-foundation/sdk-base';
 import { isNttRoute, RouteAvailability } from 'routes';
 import { getNttDisplayName } from 'utils/ntt';
 import { isAutomatic } from 'utils/route';
+import { MANUAL_WALLET_NAME } from 'utils/wallet/manual';
 
 export const REASON_AMOUNT_TOO_LOW = 'Transfer amount too low';
 export const REASON_MANUAL_ADDRESS_NOT_SUPPORTED =
@@ -405,15 +411,15 @@ function RouteOptions() {
         const route = routeStates.find((rs) => rs.name === value);
         if (route?.name && !isDisabled(route?.name, route?.availability)) {
           dispatch(setTransferRoute(value));
-        } else {
-          dispatch(setTransferRoute());
         }
       }
     },
     [routeStates, manualAddressTarget, dispatch],
   );
   const [debouncedAmount] = useDebounce(amount, 500);
 
+  const { receiving } = useSelector((state: RootState) => state.wallet);
+
   useEffect(() => {
     let isActive = true;
 
@@ -454,18 +460,24 @@ function RouteOptions() {
   }, [dispatch, token, destToken, debouncedAmount, fromChain, toChain]);
 
   useEffect(() => {
-    const routeState = routeStates?.find((rs) => rs.name === route);
+    const routeState = routeStates?.find(
+      (rs) => rs.name === route && !isDisabled(rs.name, rs.availability),
+    );
     if (!routeState) {
-      const first = routeStates?.find(
+      const firstOption = routeStates?.find(
         (rs) => rs.supported && !isDisabled(rs.name, rs.availability),
       );
-      if (first) dispatch(setTransferRoute(first.name as Route));
-      return;
+      if (firstOption) dispatch(setTransferRoute(firstOption.name as Route));
+      else dispatch(setTransferRoute());
     }
-    if (routeState && isDisabled(routeState.name, routeState?.availability))
-      dispatch(setTransferRoute());
   }, [manualAddressTarget, toChain, fromChain, dispatch]);
 
+  useEffect(() => {
+    if (receiving.name !== MANUAL_WALLET_NAME) {
+      dispatch(setManualAddressTarget(false));
+    }
+  }, [receiving]);
+
   const allRoutes = useMemo(() => {
     if (!routeStates) return [];
     const routes = routeStates.filter((rs) => rs.supported);