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

…ker (#2662) * fix: hide empty balance tokens in source AssetPicker * fix: hide errors when form is not filled
wormhole-foundation · Sep 23, 2024 · f43d006 · f43d006
1 parent 208c5d4
commit f43d006
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/wormhole-connect/src/hooks/useAmountValidation.ts b/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 {};
   }
 

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/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 && (

diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/index.tsx b/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';
@@ -128,14 +127,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) {

diff --git a/wormhole-connect/src/views/v2/Bridge/index.tsx b/wormhole-connect/src/views/v2/Bridge/index.tsx
@@ -204,13 +204,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