feat(approve): adjust partial approves for buy orders

apps/cowswap-frontend/src/common/hooks/useTokenAllowance.ts

@@ -1,23 +1,20 @@
-import { atom, useAtom, useSetAtom } from 'jotai'
-import { useCallback, useEffect } from 'react'
+import { useAtom } from 'jotai'
+import { useEffect, useMemo } from 'react'
 
 import { useTradeSpenderAddress } from '@cowprotocol/balances-and-allowances'
 import { SWR_NO_REFRESH_OPTIONS } from '@cowprotocol/common-const'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Token } from '@uniswap/sdk-core'
 
+import { optimisticAllowancesAtom } from 'entities/optimisticAllowance/optimisticAllowancesAtom'
 import ms from 'ms.macro'
 import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 
 import { useTokenContract } from 'common/hooks/useContract'
 
+import { getOptimisticAllowanceKey } from '../../entities/optimisticAllowance/getOptimisticAllowanceKey'
 
-interface LastApproveParams {
-  blockNumber: number
-  tokenAddress: string
-}
-
-const lastApproveTxBlockNumberAtom = atom<Record<string, number>>({})
+const OPTIMISTIC_ALLOWANCE_TTL = ms`30s`
 
 const SWR_OPTIONS: SWRConfiguration = {
   ...SWR_NO_REFRESH_OPTIONS,
@@ -35,38 +32,57 @@ export function useTokenAllowance(
   const { chainId, account } = useWalletInfo()
   const { contract: erc20Contract } = useTokenContract(tokenAddress)
   const tradeSpender = useTradeSpenderAddress()
-  const [lastApproveTx, setLastApproveTx] = useAtom(lastApproveTxBlockNumberAtom)
+  const [optimisticAllowances, setOptimisticAllowances] = useAtom(optimisticAllowancesAtom)
 
   const targetOwner = owner ?? account
   const targetSpender = spender ?? tradeSpender
-  const lastApproveBlockNumber = tokenAddress ? lastApproveTx[tokenAddress.toLowerCase()] : undefined
 
-  // Reset lastApproveTxBlockNumberAtom on network changes
-  useEffect(() => {
-    setLastApproveTx({})
-  }, [chainId, setLastApproveTx])
+  const optimisticAllowanceKey = useMemo(() => {
+    if (!tokenAddress || !targetOwner || !targetSpender) return null
+    return getOptimisticAllowanceKey({ chainId, tokenAddress, owner: targetOwner, spender: targetSpender })
+  }, [chainId, tokenAddress, targetOwner, targetSpender])
 
-  return useSWR(
+  const optimisticAllowance = optimisticAllowanceKey ? optimisticAllowances[optimisticAllowanceKey] : undefined
+
+  // Important! Do not add erc20Contract to SWR deps, otherwise it will do unwanted node RPC calls!
+  const swrResponse = useSWR(
     erc20Contract && targetOwner && targetSpender
-      ? [erc20Contract, targetOwner, targetSpender, chainId, lastApproveBlockNumber, 'useTokenAllowance']
+      ? [targetOwner, targetSpender, chainId, tokenAddress, 'useTokenAllowance']
       : null,
-    ([erc20Contract, targetOwner, targetSpender]) => {
+    ([targetOwner, targetSpender]) => {
+      if (!erc20Contract) return undefined
+
       return erc20Contract.allowance(targetOwner, targetSpender).then((result) => result.toBigInt())
     },
     SWR_OPTIONS,
   )
-}
 
-export function useUpdateLastApproveTxBlockNumber(): (params: LastApproveParams) => void {
-  const setState = useSetAtom(lastApproveTxBlockNumberAtom)
+  // Reset state on network changes
+  useEffect(() => {
+    setOptimisticAllowances({})
+  }, [chainId, setOptimisticAllowances])
 
-  return useCallback(
-    (params: LastApproveParams) => {
-      setState((state) => ({
-        ...state,
-        [params.tokenAddress.toLowerCase()]: params.blockNumber,
-      }))
-    },
-    [setState],
+  // Clean up expired optimistic allowances
+  useEffect(() => {
+    const now = Date.now()
+    const expiredKeys = Object.keys(optimisticAllowances).filter(
+      (key) => now - optimisticAllowances[key].timestamp > OPTIMISTIC_ALLOWANCE_TTL,
+    )
+
+    if (expiredKeys.length > 0) {
+      setOptimisticAllowances((state) => {
+        const newState = { ...state }
+        expiredKeys.forEach((key) => delete newState[key])
+        return newState
+      })
+    }
+  }, [optimisticAllowances, setOptimisticAllowances, swrResponse.data])
+
+  return useMemo(
+    () => ({
+      ...swrResponse,
+      data: optimisticAllowance?.amount ?? swrResponse.data,
+    }),
+    [optimisticAllowance?.amount, swrResponse],
   )
 }

apps/cowswap-frontend/src/entities/optimisticAllowance/getOptimisticAllowanceKey.ts

@@ -0,0 +1,7 @@
+import { SetOptimisticAllowanceParams } from './useSetOptimisticAllowance'
+
+export function getOptimisticAllowanceKey(
+  params: Omit<SetOptimisticAllowanceParams, 'amount' | 'blockNumber'>,
+): string {
+  return `${params.chainId}-${params.tokenAddress.toLowerCase()}-${params.owner.toLowerCase()}-${params.spender.toLowerCase()}`
+}

apps/cowswap-frontend/src/entities/optimisticAllowance/optimisticAllowancesAtom.ts

@@ -0,0 +1,5 @@
+import { atom } from 'jotai'
+
+import { OptimisticAllowance } from './types'
+
+export const optimisticAllowancesAtom = atom<Record<string, OptimisticAllowance>>({})

apps/cowswap-frontend/src/entities/optimisticAllowance/types.ts

@@ -0,0 +1,5 @@
+export interface OptimisticAllowance {
+  amount: bigint
+  blockNumber: number
+  timestamp: number
+}

apps/cowswap-frontend/src/entities/optimisticAllowance/useSetOptimisticAllowance.ts

@@ -0,0 +1,35 @@
+import { useSetAtom } from 'jotai'
+import { useCallback } from 'react'
+
+import { getOptimisticAllowanceKey } from './getOptimisticAllowanceKey'
+import { optimisticAllowancesAtom } from './optimisticAllowancesAtom'
+
+export interface SetOptimisticAllowanceParams {
+  tokenAddress: string
+  owner: string
+  spender: string
+  amount: bigint
+  blockNumber: number
+  chainId: number
+}
+
+export function useSetOptimisticAllowance(): (params: SetOptimisticAllowanceParams) => void {
+  const setOptimisticAllowances = useSetAtom(optimisticAllowancesAtom)
+
+  return useCallback(
+    (params: SetOptimisticAllowanceParams) => {
+      const key = getOptimisticAllowanceKey(params)
+
+      // Set optimistic allowance immediately
+      setOptimisticAllowances((state) => ({
+        ...state,
+        [key]: {
+          amount: params.amount,
+          blockNumber: params.blockNumber,
+          timestamp: Date.now(),
+        },
+      }))
+    },
+    [setOptimisticAllowances],
+  )
+}

apps/cowswap-frontend/src/modules/account/containers/OrderPartialApprove/OrderPartialApprove.tsx

@@ -48,7 +48,6 @@ export function OrderPartialApprove({
         <ActiveOrdersWithAffectedPermit orderId={orderId} currency={amountToApprove.currency} />
       )}
       <TradeApproveButton
-        ignorePermit
         enablePartialApprove
         useModals={false}
         amountToApprove={amountToApproveFinal}

apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsx

@@ -7,17 +7,16 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Trans } from '@lingui/macro'
 
-import { useTokenSupportsPermit } from 'modules/permit'
-import { TradeType } from 'modules/trade'
+import { useHasCachedPermit } from 'modules/permit'
+import { useIsCurrentTradeBridging } from 'modules/trade'
 
-import { useOnApproveClick } from './hooks/useOnApproveClick'
 import * as styledEl from './styled'
 import { ButtonWrapper } from './styled'
 
 import { MAX_APPROVE_AMOUNT } from '../../constants'
-import { useApprovalStateForSpender, useApproveCurrency, useGeneratePermitInAdvanceToTrade } from '../../hooks'
+import { useApprovalStateForSpender, useApproveCurrency } from '../../hooks'
+import { useApproveAndSwap } from '../../hooks/useApproveAndSwap'
 import { LegacyApproveButton } from '../../pure/LegacyApproveButton'
-import { useIsPartialApproveSelectedByUser } from '../../state'
 import { ApprovalState } from '../../types'
 
 export interface TradeApproveButtonProps {
@@ -26,8 +25,7 @@ export interface TradeApproveButtonProps {
   isDisabled?: boolean
   enablePartialApprove?: boolean
   onApproveConfirm?: (txHash?: string) => void
-  ignorePermit?: boolean
-  label: string
+  label?: string
   buttonSize?: ButtonSize
   useModals?: boolean
 }
@@ -37,31 +35,18 @@ export function TradeApproveButton(props: TradeApproveButtonProps): ReactNode {
     amountToApprove,
     children,
     enablePartialApprove,
-    onApproveConfirm,
-    label,
-    ignorePermit,
     isDisabled,
     buttonSize = ButtonSize.DEFAULT,
     useModals = true,
   } = props
-  const isPartialApproveEnabledByUser = useIsPartialApproveSelectedByUser()
   const handleApprove = useApproveCurrency(amountToApprove, useModals)
 
   const spender = useTradeSpenderAddress()
+  const isCurrentTradeBridging = useIsCurrentTradeBridging()
   const { approvalState } = useApprovalStateForSpender(amountToApprove, spender)
-  const isPermitSupported = useTokenSupportsPermit(amountToApprove.currency, TradeType.SWAP) && !ignorePermit
-  const generatePermitToTrade = useGeneratePermitInAdvanceToTrade(amountToApprove)
-
-  const approveAndSwap = useOnApproveClick({
-    isPermitSupported,
-    onApproveConfirm,
-    isPartialApproveEnabledByUser,
-    amountToApprove,
-    handleApprove,
-    generatePermitToTrade,
-  })
-
+  const approveAndSwap = useApproveAndSwap(props)
   const approveWithPreventedDoubleExecution = usePreventDoubleExecution(approveAndSwap)
+  const { data: cachedPermit, isLoading: cachedPermitLoading } = useHasCachedPermit(amountToApprove)
 
   if (!enablePartialApprove) {
     return (
@@ -78,6 +63,10 @@ export function TradeApproveButton(props: TradeApproveButtonProps): ReactNode {
   }
 
   const isPending = approvalState === ApprovalState.PENDING
+  const noCachedPermit = !cachedPermitLoading && !cachedPermit
+
+  const label =
+    props.label || (noCachedPermit ? (isCurrentTradeBridging ? 'Approve, Swap & Bridge' : 'Approve and Swap') : 'Swap')
 
   return (
     <ButtonWrapper
@@ -88,18 +77,20 @@ export function TradeApproveButton(props: TradeApproveButtonProps): ReactNode {
     >
       <styledEl.ButtonLabelWrapper buttonSize={buttonSize}>
         {label}{' '}
-        <HoverTooltip
-          wrapInContainer
-          content={
-            <Trans>
-              You must give the CoW Protocol smart contracts permission to use your{' '}
-              <TokenSymbol token={amountToApprove.currency} />. If you approve the default amount, you will only have to
-              do this once per token.
-            </Trans>
-          }
-        >
-          {isPending ? <styledEl.StyledLoader /> : <styledEl.StyledAlert size={24} />}
-        </HoverTooltip>
+        {noCachedPermit ? (
+          <HoverTooltip
+            wrapInContainer
+            content={
+              <Trans>
+                You must give the CoW Protocol smart contracts permission to use your{' '}
+                <TokenSymbol token={amountToApprove.currency} />. If you approve the default amount, you will only have
+                to do this once per token.
+              </Trans>
+            }
+          >
+            {isPending ? <styledEl.StyledLoader /> : <styledEl.StyledAlert size={24} />}
+          </HoverTooltip>
+        ) : null}
       </styledEl.ButtonLabelWrapper>
     </ButtonWrapper>
   )