fix: hide couldnt load balances msg when balances are loading

apps/cowswap-frontend/src/locales/en-US.po

@@ -5626,6 +5626,10 @@ msgstr "Order cannot be filled due to insufficient balance on the current accoun
 msgid "required"
 msgstr "required"
 
+#: apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx
+msgid "Fetching balances"
+msgstr "Fetching balances"
+
 #: apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
 msgid "Wallet"
 msgstr "Wallet"

apps/cowswap-frontend/src/modules/tradeFormValidation/hooks/useTradeFormValidationContext.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 
+import { useTokensBalances } from '@cowprotocol/balances-and-allowances'
 import { useIsOnline } from '@cowprotocol/common-hooks'
 import { useENSAddress } from '@cowprotocol/ens'
 import { useIsTradeUnsupported, useTryFindToken } from '@cowprotocol/tokens'
@@ -21,12 +22,14 @@ import { useTokenCustomTradeError } from './useTokenCustomTradeError'
 
 import { TradeFormValidationCommonContext } from '../types'
 
+// eslint-disable-next-line max-lines-per-function
 export function useTradeFormValidationContext(): TradeFormValidationCommonContext | null {
   const { account } = useWalletInfo()
   const derivedTradeState = useDerivedTradeState()
   const tradeQuote = useTradeQuote()
   const isProviderNetworkUnsupported = useIsProviderNetworkUnsupported()
   const isOnline = useIsOnline()
+  const { isLoading: isBalancesLoading } = useTokensBalances()
 
   const { inputCurrency, outputCurrency, recipient, tradeType } = derivedTradeState || {}
   const customTokenError = useTokenCustomTradeError(inputCurrency, outputCurrency, tradeQuote.error)
@@ -86,6 +89,7 @@ export function useTradeFormValidationContext(): TradeFormValidationCommonContex
       isProxySetupValid,
       customTokenError,
       isRestrictedForCountry,
+      isBalancesLoading,
     }
   }, [
     account,
@@ -102,6 +106,7 @@ export function useTradeFormValidationContext(): TradeFormValidationCommonContex
     isRestrictedForCountry,
     isSafeReadonlyUser,
     isSupportedWallet,
+    isBalancesLoading,
     isSwapUnsupported,
     isWrapUnwrap,
     isProxySetupValid,

apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormButtons/tradeButtonsMap.tsx

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react'
 
 import { getIsNativeToken, getWrappedToken } from '@cowprotocol/common-utils'
 import { BridgeProviderQuoteError, BridgeQuoteErrors } from '@cowprotocol/sdk-bridging'
-import { HelpTooltip, InfoTooltip, TokenSymbol } from '@cowprotocol/ui'
+import { CenteredDots, HelpTooltip, InfoTooltip, TokenSymbol } from '@cowprotocol/ui'
 
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
@@ -254,6 +254,14 @@ export const tradeButtonsMap: Record<TradeFormValidation, ButtonErrorConfig | Bu
   [TradeFormValidation.QuoteLoading]: {
     text: <TradeLoadingButton />,
   },
+  [TradeFormValidation.BalancesLoading]: {
+    text: (
+      <>
+        <Trans>Fetching balances</Trans>
+        <CenteredDots smaller />
+      </>
+    ),
+  },
   [TradeFormValidation.BalancesNotLoaded]: {
     text: <Trans>Couldn't load balances</Trans>,
   },

apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts

@@ -27,6 +27,7 @@ export function validateTradeForm(context: TradeFormValidationContext): TradeFor
     isProxySetupValid,
     customTokenError,
     isRestrictedForCountry,
+    isBalancesLoading,
   } = context
 
   const {
@@ -143,12 +144,16 @@ export function validateTradeForm(context: TradeFormValidationContext): TradeFor
   }
 
   if (!canPlaceOrderWithoutBalance) {
-    if (!inputCurrencyBalance) {
-      validations.push(TradeFormValidation.BalancesNotLoaded)
-    }
+    if (isBalancesLoading) {
+      validations.push(TradeFormValidation.BalancesLoading)
+    } else {
+      if (!inputCurrencyBalance) {
+        validations.push(TradeFormValidation.BalancesNotLoaded)
+      }
 
-    if (inputCurrencyBalance && inputCurrencyAmount && inputCurrencyBalance.lessThan(inputCurrencyAmount)) {
-      validations.push(TradeFormValidation.BalanceInsufficient)
+      if (inputCurrencyBalance && inputCurrencyAmount && inputCurrencyBalance.lessThan(inputCurrencyAmount)) {
+        validations.push(TradeFormValidation.BalanceInsufficient)
+      }
     }
   }
 

apps/cowswap-frontend/src/modules/tradeFormValidation/types.ts

@@ -30,6 +30,7 @@ export enum TradeFormValidation {
   QuoteExpired,
 
   // Balances
+  BalancesLoading,
   BalancesNotLoaded,
   BalanceInsufficient,
 
@@ -72,6 +73,7 @@ export interface TradeFormValidationCommonContext {
   isProxySetupValid: boolean | null | undefined
   customTokenError?: string
   isRestrictedForCountry: boolean
+  isBalancesLoading: boolean
 }
 
 export interface TradeFormValidationContext extends TradeFormValidationCommonContext {}