Error display fixes & Hide tokens with 0 balances in Source Asset Picker

wormhole-connect/src/hooks/useAmountValidation.ts

@@ -17,6 +17,7 @@ type Props = {
  quotesMap: Record<string, QuoteResult | undefined>;
  tokenSymbol: string;
  isLoading: boolean;
+ disabled?: boolean;
 };
 
 export const useAmountValidation = (props: Props): HookReturn => {
@@ -57,7 +58,7 @@ export const useAmountValidation = (props: Props): HookReturn => {
  const numAmount = Number.parseFloat(amount);
 
  // Don't show errors when no amount is set or it's loading
- if (!amount || !numAmount || props.isLoading) {
+ if (!amount || !numAmount || props.isLoading || props.disabled) {
  return {};
  }
 

wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx

@@ -83,6 +83,11 @@ const TokenList = (props: Props) => {
  return;
  }
 
+ // Exclude tokens with no balance on source list
+ if (props.isSource && !balance && props.wallet?.address) {
+ return;
+ }
+
  // Exclude wormhole-wrapped tokens with no balance
  if (
  props.isSource &&
@@ -159,14 +164,30 @@ const TokenList = (props: Props) => {
  return tokens;
  }, [balances, props.tokenList, props.sourceToken]);
 
+ const noTokensMessage = useMemo(
+ () => (
+ <Typography variant="body2" color={theme.palette.grey.A400}>
+ No supported tokens found in wallet
+ </Typography>
+ ),
+ [],
+ );
+
+ const shouldShowEmptyMessage =
+ sortedTokens.length === 0 && !isFetchingTokenBalances && !props.isFetching;
+
  const searchList = (
  <SearchableList<TokenConfig>
  searchPlaceholder="Search for a token"
  className={classes.tokenList}
  listTitle={
- <Typography fontSize={14} color={theme.palette.text.secondary}>
- Tokens on {props.selectedChainConfig.displayName}
- </Typography>
+ shouldShowEmptyMessage ? (
+ noTokensMessage
+ ) : (
+ <Typography fontSize={14} color={theme.palette.text.secondary}>
+ Tokens on {props.selectedChainConfig.displayName}
+ </Typography>
+ )
  }
  loading={
  props.isFetching && (

wormhole-connect/src/views/v2/Bridge/Routes/index.tsx

@@ -8,7 +8,6 @@ import { makeStyles } from 'tss-react/mui';
 import config from 'config';
 import { RoutesConfig } from 'config/routes';
 import SingleRoute from 'views/v2/Bridge/Routes/SingleRoute';
-import AlertBannerV2 from 'components/v2/AlertBanner';
 
 import type { RootState } from 'store';
 import { RouteState } from 'store/transferInput';
@@ -130,14 +129,8 @@ const Routes = ({ ...props }: Props) => {
  }, [routes, props.quotes]);
 
  if (walletsConnected && supportedRoutes.length === 0 && Number(amount) > 0) {
- return (
- <AlertBannerV2
- error
- show
- content="No route found for this transaction"
- style={{ justifyContent: 'center' }}
- />
- );
+ // Errors are displayed in AmountInput
+ return;
  }
 
  if (supportedRoutes.length === 0 || !walletsConnected || props.hasError) {

wormhole-connect/src/views/v2/Bridge/index.tsx

@@ -199,13 +199,22 @@ const Bridge = () => {
  sourceTokenArray,
  );
 
+ const disableValidation =
+ !sendingWallet.address ||
+ !receivingWallet.address ||
+ !sourceChain ||
+ !sourceToken ||
+ !destChain ||
+ !destToken;
+
  // Validate amount
  const amountValidation = useAmountValidation({
  balance: balances[sourceToken]?.balance,
  routes: allSupportedRoutes,
  quotesMap,
  tokenSymbol: config.tokens[sourceToken]?.symbol ?? '',
  isLoading: isFetchingBalances || isFetchingQuotes,
+ disabled: disableValidation,
  });
 
  // Get input validation result