Form bug fixes

src/features/tokens/TokenSelectField.tsx

@@ -23,18 +23,28 @@ export function TokenSelectField({ name, disabled, setIsNft }: Props) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isAutomaticSelection, setIsAutomaticSelection] = useState(false);
 
-  useEffect(() => {
   const { origin, destination } = values;
+  useEffect(() => {
     const tokensWithRoute = getWarpCore().getTokensForRoute(origin, destination);
-    let newFieldValue: number | undefined = undefined;
-    let newIsAutomatic = false;
-    if (tokensWithRoute.length === 1) {
+    let newFieldValue: number | undefined;
+    let newIsAutomatic: boolean;
+    // No tokens available for this route
+    if (tokensWithRoute.length === 0) {
+      newFieldValue = undefined;
+      newIsAutomatic = true;
+    }
+    // Exactly one found
+    else if (tokensWithRoute.length === 1) {
       newFieldValue = getIndexForToken(tokensWithRoute[0]);
       newIsAutomatic = true;
+      // Multiple possibilities
+    } else {
+      newFieldValue = undefined;
+      newIsAutomatic = false;
     }
     helpers.setValue(newFieldValue);
     setIsAutomaticSelection(newIsAutomatic);
-  }, [values, helpers]);
+  }, [origin, destination, helpers]);
 
   const onSelectToken = (newToken: IToken) => {
     // Set the token address value in formik state

src/features/transfer/TransferTokenForm.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import { TokenAmount } from '@hyperlane-xyz/sdk';
-import { ProtocolType, toWei } from '@hyperlane-xyz/utils';
+import { ProtocolType, errorToString, toWei } from '@hyperlane-xyz/utils';
 
 import { SmallSpinner } from '../../components/animation/SmallSpinner';
 import { ConnectAwareSubmitButton } from '../../components/buttons/ConnectAwareSubmitButton';
@@ -317,7 +317,7 @@ function ReviewDetails({ visible }: { visible: boolean }) {
     amountWei,
     visible,
   );
-  const { isLoading: isQuoteLoading, igpQuote } = useIgpQuote(originToken, destination);
+  const { isLoading: isQuoteLoading, igpQuote } = useIgpQuote(originToken, destination, visible);
 
   const isLoading = isApproveLoading || isQuoteLoading;
 
@@ -365,12 +365,14 @@ function ReviewDetails({ visible }: { visible: boolean }) {
                     <span className="min-w-[7rem]">Amount</span>
                     <span>{`${amount} ${originTokenSymbol}`}</span>
                   </p>
+                  {igpQuote && igpQuote.amount > 0n && (
                     <p className="flex">
                       <span className="min-w-[7rem]">Interchain Gas</span>
                       <span>{`${igpQuote?.getDecimalFormattedAmount().toFixed(4) || '0'} ${
                         igpQuote?.token?.symbol || ''
                       }`}</span>
                     </p>
+                  )}
                 </>
               )}
             </div>
@@ -395,11 +397,25 @@ function useFormInitialValues(): TransferFormValues {
   }, []);
 }
 
-function validateForm(values: TransferFormValues, accounts: Record<ProtocolType, AccountInfo>) {
+async function validateForm(
+  values: TransferFormValues,
+  accounts: Record<ProtocolType, AccountInfo>,
+) {
+  try {
     const { origin, destination, tokenIndex, amount, recipient } = values;
     const token = getTokenByIndex(tokenIndex);
     if (!token) return { token: 'Token is required' };
     const amountWei = toWei(amount, token.decimals);
     const sender = getAccountAddressForChain(origin, accounts) || '';
-  return getWarpCore().validateTransfer(token.amount(amountWei), destination, sender, recipient);
+    const result = await getWarpCore().validateTransfer(
+      token.amount(amountWei),
+      destination,
+      sender,
+      recipient,
+    );
+    return result;
+  } catch (error) {
+    logger.error('Error validating form', error);
+    return { form: errorToString(error) };
+  }
 }

src/features/transfer/useIgpQuote.ts

@@ -5,13 +5,14 @@ import { IToken } from '@hyperlane-xyz/sdk';
 import { useToastError } from '../../components/toast/useToastError';
 import { getWarpCore } from '../../context/context';
 
-export function useIgpQuote(token?: IToken, destination?: ChainName) {
+export function useIgpQuote(token?: IToken, destination?: ChainName, enabled = true) {
   const { isLoading, isError, error, data } = useQuery({
     queryKey: ['useIgpQuote', destination, token?.addressOrDenom],
     queryFn: () => {
       if (!token || !destination) return null;
       return getWarpCore().getTransferGasQuote(token, destination);
     },
+    enabled,
   });
 
   useToastError(error, 'Error fetching IGP quote');