fix(limit-twap): disable confirm when balance is insufficient (#7804)

Fixes #5645.

Author: tenderdeve

apps/cowswap-frontend/src/modules/combinedBalances/hooks/useHasEnoughBalanceForAmount.test.ts

@@ -0,0 +1,69 @@
+import { TokenWithLogo } from '@cowprotocol/common-const'
+import { getCurrencyAddress } from '@cowprotocol/common-utils'
+import { getAddressKey, SupportedChainId } from '@cowprotocol/cow-sdk'
+import { CurrencyAmount } from '@cowprotocol/currency'
+
+import { renderHook } from '@testing-library/react'
+
+import { useHasEnoughBalanceForAmount } from './useHasEnoughBalanceForAmount'
+import { useTokensBalancesCombined } from './useTokensBalancesCombined'
+
+jest.mock('./useTokensBalancesCombined', () => ({
+  useTokensBalancesCombined: jest.fn(),
+}))
+
+const mockUseTokensBalancesCombined = useTokensBalancesCombined as jest.MockedFunction<typeof useTokensBalancesCombined>
+
+const token = {
+  address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  chainId: SupportedChainId.MAINNET,
+  decimals: 6,
+  symbol: 'USDC',
+  name: 'USD Coin',
+} as TokenWithLogo
+
+const balanceKey = getAddressKey(getCurrencyAddress(token))
+
+function mockBalance(raw: string | null): void {
+  mockUseTokensBalancesCombined.mockReturnValue({
+    values: raw === null ? {} : { [balanceKey]: BigInt(raw) },
+  } as unknown as ReturnType<typeof useTokensBalancesCombined>)
+}
+
+// 1 USDC and 2 USDC
+const oneUsdc = CurrencyAmount.fromRawAmount(token, '1000000')
+const twoUsdc = CurrencyAmount.fromRawAmount(token, '2000000')
+
+describe('useHasEnoughBalanceForAmount()', () => {
+  it('returns true when there is no amount to check', () => {
+    mockBalance('0')
+
+    const { result } = renderHook(() => useHasEnoughBalanceForAmount(null))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns true when the balance is greater than the amount', () => {
+    mockBalance('2000000')
+
+    const { result } = renderHook(() => useHasEnoughBalanceForAmount(oneUsdc))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns true when the balance equals the amount', () => {
+    mockBalance('1000000')
+
+    const { result } = renderHook(() => useHasEnoughBalanceForAmount(oneUsdc))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns false when the balance is less than the amount', () => {
+    mockBalance('1000000')
+
+    const { result } = renderHook(() => useHasEnoughBalanceForAmount(twoUsdc))
+
+    expect(result.current).toBe(false)
+  })
+})

apps/cowswap-frontend/src/modules/combinedBalances/hooks/useHasEnoughBalanceForAmount.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+
+import { getCurrencyAddress } from '@cowprotocol/common-utils'
+import { getAddressKey } from '@cowprotocol/cow-sdk'
+import { Currency, CurrencyAmount } from '@cowprotocol/currency'
+import { Nullish } from '@cowprotocol/types'
+
+import { useTokensBalancesCombined } from './useTokensBalancesCombined'
+
+/**
+ * Re-checks, against live combined balances, whether the given amount can still be afforded.
+ *
+ * The confirmation modals freeze their amounts when opened, but the balance can still change
+ * underneath them (e.g. a previous order fills and spends it). This lets those modals disable
+ * the Confirm button when the order became unaffordable while the modal was open (issue #5645).
+ *
+ * Returns `true` when there is no amount to check, so the button is not blocked during loading.
+ */
+export function useHasEnoughBalanceForAmount(inputAmount: Nullish<CurrencyAmount<Currency>>): boolean {
+  const { values: balances } = useTokensBalancesCombined()
+
+  return useMemo(() => {
+    const currency = inputAmount?.currency
+
+    if (!currency || !inputAmount) return true
+
+    const balanceRaw = balances[getAddressKey(getCurrencyAddress(currency))]
+    const balance = CurrencyAmount.fromRawAmount(currency, balanceRaw?.toString() ?? '0')
+
+    return inputAmount.equalTo(balance) || inputAmount.lessThan(balance)
+  }, [balances, inputAmount])
+}

apps/cowswap-frontend/src/modules/combinedBalances/hooks/useIsZeroBalance.test.ts

@@ -0,0 +1,73 @@
+import { TokenWithLogo } from '@cowprotocol/common-const'
+import { getCurrencyAddress } from '@cowprotocol/common-utils'
+import { getAddressKey, SupportedChainId } from '@cowprotocol/cow-sdk'
+
+import { renderHook } from '@testing-library/react'
+
+import { useIsZeroBalance } from './useIsZeroBalance'
+import { useTokensBalancesCombined } from './useTokensBalancesCombined'
+
+jest.mock('./useTokensBalancesCombined', () => ({
+  useTokensBalancesCombined: jest.fn(),
+}))
+
+const mockUseTokensBalancesCombined = useTokensBalancesCombined as jest.MockedFunction<typeof useTokensBalancesCombined>
+
+const token = {
+  address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  chainId: SupportedChainId.MAINNET,
+  decimals: 6,
+  symbol: 'USDC',
+  name: 'USD Coin',
+} as TokenWithLogo
+
+const balanceKey = getAddressKey(getCurrencyAddress(token))
+
+function mockBalance(raw: string | null, hasFirstLoad = true): void {
+  mockUseTokensBalancesCombined.mockReturnValue({
+    values: raw === null ? {} : { [balanceKey]: BigInt(raw) },
+    hasFirstLoad,
+  } as unknown as ReturnType<typeof useTokensBalancesCombined>)
+}
+
+describe('useIsZeroBalance()', () => {
+  it('returns false when there is no currency to check', () => {
+    mockBalance('0')
+
+    const { result } = renderHook(() => useIsZeroBalance(null))
+
+    expect(result.current).toBe(false)
+  })
+
+  it('returns true when the balance is exactly zero', () => {
+    mockBalance('0')
+
+    const { result } = renderHook(() => useIsZeroBalance(token))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns true when the token has no balance entry at all', () => {
+    mockBalance(null)
+
+    const { result } = renderHook(() => useIsZeroBalance(token))
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns false before balances have loaded, even with no balance entry', () => {
+    mockBalance(null, false)
+
+    const { result } = renderHook(() => useIsZeroBalance(token))
+
+    expect(result.current).toBe(false)
+  })
+
+  it('returns false when the balance is greater than zero (amount > balance is allowed for limit orders)', () => {
+    mockBalance('1')
+
+    const { result } = renderHook(() => useIsZeroBalance(token))
+
+    expect(result.current).toBe(false)
+  })
+})

apps/cowswap-frontend/src/modules/combinedBalances/hooks/useIsZeroBalance.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+
+import { getCurrencyAddress } from '@cowprotocol/common-utils'
+import { getAddressKey } from '@cowprotocol/cow-sdk'
+import { Currency, CurrencyAmount } from '@cowprotocol/currency'
+import { Nullish } from '@cowprotocol/types'
+
+import { useTokensBalancesCombined } from './useTokensBalancesCombined'
+
+/**
+ * Whether the given currency's live combined balance is exactly zero.
+ *
+ * Limit orders may be placed with an amount greater than the balance, so the confirm modal must
+ * only block when the sell token balance drops to 0 (e.g. a previous order fully filled while the
+ * modal was open), not whenever amount > balance (issue #5645).
+ *
+ * Returns `false` when there is no currency yet or before balances have loaded, so the button is
+ * not blocked by a transient zero while `values` is still empty (issue #5645).
+ */
+export function useIsZeroBalance(currency: Nullish<Currency>): boolean {
+  const { values: balances, hasFirstLoad } = useTokensBalancesCombined()
+
+  return useMemo(() => {
+    if (!currency || !hasFirstLoad) return false
+
+    const balanceRaw = balances[getAddressKey(getCurrencyAddress(currency))]
+    const balance = CurrencyAmount.fromRawAmount(currency, balanceRaw?.toString() ?? '0')
+
+    return balance.equalTo(0)
+  }, [balances, hasFirstLoad, currency])
+}

apps/cowswap-frontend/src/modules/combinedBalances/index.ts

@@ -1,3 +1,5 @@
 export * from './hooks/useCurrencyAmountBalanceCombined'
+export * from './hooks/useHasEnoughBalanceForAmount'
+export * from './hooks/useIsZeroBalance'
 export * from './hooks/useTokensBalancesCombined'
 export { BalancesCombinedUpdater } from './updater/BalancesCombinedUpdater'

apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersConfirmModal/index.tsx

@@ -9,6 +9,7 @@ import { Trans } from '@lingui/react/macro'
 
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
+import { useIsZeroBalance } from 'modules/combinedBalances'
 import { LimitOrdersWarnings } from 'modules/limitOrders/containers/LimitOrdersWarnings'
 import { useHandleOrderPlacement } from 'modules/limitOrders/hooks/useHandleOrderPlacement'
 import { useLimitOrdersWarningsAccepted } from 'modules/limitOrders/hooks/useLimitOrdersWarningsAccepted'
@@ -70,10 +71,17 @@ export function LimitOrdersConfirmModal(props: LimitOrdersConfirmModalProps): Re
 
   const doTrade = useHandleOrderPlacement(tradeContext, priceImpact, settingsState, tradeConfirmActions)
   const isTooLowRate = rateImpact < LOW_RATE_THRESHOLD_PERCENT
-  const isConfirmDisabled = isTooLowRate ? !warningsAccepted : false
 
+  // Limit orders may be placed with amount > balance, so only block when the sell token balance
+  // dropped to 0 while the modal was open (e.g. a previous order fully filled) — see issue #5645.
+  const isInsufficientBalance = useIsZeroBalance(inputAmount?.currency)
+  const isConfirmDisabled = (isTooLowRate ? !warningsAccepted : false) || isInsufficientBalance
+
+  const inputSymbol = inputAmount?.currency?.symbol || t`token`
   const isSafeApprovalBundle = useIsSafeApprovalBundle(inputAmount)
-  const buttonText = isSafeApprovalBundle ? (
+  const buttonText = isInsufficientBalance ? (
+    t`Insufficient ${inputSymbol} balance`
+  ) : isSafeApprovalBundle ? (
     <>
       <Trans>Confirm</Trans> (<Trans>Approve</Trans>&nbsp;
       <TokenSymbol token={inputAmount && getWrappedToken(inputAmount.currency)} length={6} />

apps/cowswap-frontend/src/modules/twap/containers/TwapConfirmModal/index.tsx

@@ -7,6 +7,7 @@ import { Trans } from '@lingui/react/macro'
 
 import { useAdvancedOrdersDerivedState } from 'modules/advancedOrders'
 import { AffiliateTraderRewardsRow, useIsRewardsRowEnabled } from 'modules/affiliate'
+import { useHasEnoughBalanceForAmount } from 'modules/combinedBalances'
 import {
   TradeConfirmation,
   TradeConfirmModal,
@@ -97,7 +98,10 @@ export function TwapConfirmModal() {
   const tradeConfirmActions = useTradeConfirmActions()
   const createTwapOrder = useCreateTwapOrder()
 
-  const isConfirmDisabled = !!localFormValidation
+  // Re-check the balance against the (frozen) sell amount in case it changed while the modal was open
+  const isInsufficientBalance = !useHasEnoughBalanceForAmount(inputCurrencyAmount)
+  const isConfirmDisabled = !!localFormValidation || isInsufficientBalance
+  const inputSymbol = inputCurrencyAmount?.currency?.symbol || t`token`
 
   const priceImpact = useTradePriceImpact()
   const fallbackHandlerIsNotSet = useIsFallbackHandlerRequired()
@@ -134,7 +138,7 @@ export function TwapConfirmModal() {
         onDismiss={tradeConfirmActions.onDismiss}
         isConfirmDisabled={isConfirmDisabled}
         priceImpact={priceImpact}
-        buttonText={t`Place TWAP order`}
+        buttonText={isInsufficientBalance ? t`Insufficient ${inputSymbol} balance` : t`Place TWAP order`}
         recipient={recipient}
       >
         {(warnings) => (