fix(approve): add loading state when approve request is sent

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

@@ -9,6 +9,7 @@ import {
   PartialApproveAmountModal,
   TradeApproveButton,
   TradeApproveToggle,
+  useIsPartialApprovalModeSelected,
   usePartialApproveAmountModalState,
   useUpdatePartialApproveAmountModalState,
 } from 'modules/erc20Approve'
@@ -28,13 +29,19 @@ export function OrderPartialApprove({
 }: OrderPartialApproveProps): ReactNode {
   const { isModalOpen, amountSetByUser } = usePartialApproveAmountModalState() || {}
   const updatePartialApproveAmountModalState = useUpdatePartialApproveAmountModalState()
+  const isPartialApprovalModeSelected = useIsPartialApprovalModeSelected()
+
+  const currency = amountToApprove.currency
 
   const partialAmountToApproveFinal = amountSetByUser ?? amountToApprove
-  const currency = partialAmountToApproveFinal.currency
 
-  const maxAmountToApprove = useMemo(() => {
+  const finalAmountToApprove = useMemo(() => {
+    if (isPartialApproveEnabledBySettings && isPartialApprovalModeSelected) {
+      return partialAmountToApproveFinal
+    }
+
     return CurrencyAmount.fromRawAmount(currency, MAX_APPROVE_AMOUNT.toString())
-  }, [currency])
+  }, [isPartialApprovalModeSelected, isPartialApproveEnabledBySettings, partialAmountToApproveFinal, currency])
 
   if (isModalOpen) {
     return <PartialApproveAmountModal initialAmountToApprove={partialAmountToApproveFinal} />
@@ -44,17 +51,17 @@ export function OrderPartialApprove({
     <OrderActionsWrapper>
       {isPartialApproveEnabledBySettings && (
         <TradeApproveToggle
-          amountToApprove={partialAmountToApproveFinal}
+          amountToApprove={finalAmountToApprove}
           updateModalState={() => updatePartialApproveAmountModalState({ isModalOpen: true })}
         />
       )}
       <ActiveOrdersWithAffectedPermit orderId={orderId} currency={currency} />
       <TradeApproveButton
         enablePartialApprove
         useModals={false}
-        amountToApprove={maxAmountToApprove}
+        amountToApprove={finalAmountToApprove}
         buttonSize={ButtonSize.SMALL}
-        label={'Approve ' + amountToApprove.currency.symbol}
+        label={'Approve ' + currency.symbol}
       />
     </OrderActionsWrapper>
   )

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

@@ -44,7 +44,7 @@ export function TradeApproveButton(props: TradeApproveButtonProps): ReactNode {
   const isCurrentTradeBridging = useIsCurrentTradeBridging()
   const { approvalState } = useApprovalStateForSpender(amountToApprove, spender)
   const approveAndSwap = useApproveAndSwap(props)
-  const approveWithPreventedDoubleExecution = usePreventDoubleExecution(approveAndSwap)
+  const { callback: approveWithPreventedDoubleExecution, isExecuting } = usePreventDoubleExecution(approveAndSwap)
   const { data: cachedPermit, isLoading: cachedPermitLoading } = useHasCachedPermit(amountToApprove)
 
   if (!enablePartialApprove) {
@@ -61,7 +61,7 @@ export function TradeApproveButton(props: TradeApproveButtonProps): ReactNode {
     )
   }
 
-  const isPending = approvalState === ApprovalState.PENDING
+  const isPending = isExecuting || approvalState === ApprovalState.PENDING
   const noCachedPermit = !cachedPermitLoading && !cachedPermit
 
   const label =

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

@@ -1,15 +1,14 @@
-import { useAtomValue } from 'jotai'
 import { ReactNode } from 'react'
 
 import {
   ApproveRequiredReason,
   useGetAmountToSignApprove,
   useGetPartialAmountToSignApprove,
   useIsApprovalOrPermitRequired,
+  useIsPartialApprovalModeSelected,
 } from '../../hooks'
 import { TradeAllowanceDisplay } from '../../pure/TradeAllowanceDisplay'
 import { useSetUserApproveAmountModalState } from '../../state'
-import { isPartialApproveEnabledAtom } from '../../state/isPartialApproveEnabledAtom'
 import { isMaxAmountToApprove } from '../../utils'
 import { ActiveOrdersWithAffectedPermit } from '../ActiveOrdersWithAffectedPermit'
 import { TradeApproveToggle } from '../TradeApproveToggle'
@@ -18,7 +17,7 @@ export function TradeApproveWithAffectedOrderList(): ReactNode {
   const { reason: isApproveRequired, currentAllowance } = useIsApprovalOrPermitRequired({
     isBundlingSupportedOrEnabledForContext: false,
   })
-  const isPartialApprovalEnabledInSettings = useAtomValue(isPartialApproveEnabledAtom)
+  const isPartialApprovalEnabledInSettings = useIsPartialApprovalModeSelected()
 
   const setUserApproveAmountModalState = useSetUserApproveAmountModalState()
 

apps/cowswap-frontend/src/modules/erc20Approve/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './usePendingApprovalModal'
 export * from './useGetPartialAmountToSignApprove'
 export * from './useGetAmountToSignApprove'
 export * from './useGeneratePermitInAdvanceToTrade'
+export * from './useIsPartialApprovalModeSelected'

apps/cowswap-frontend/src/modules/erc20Approve/hooks/useGetAmountToSignApprove.tsx

@@ -1,4 +1,3 @@
-import { useAtomValue } from 'jotai'
 import { useMemo } from 'react'
 
 import { useFeatureFlags } from '@cowprotocol/common-hooks'
@@ -7,10 +6,10 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useNeedsApproval } from 'common/hooks/useNeedsApproval'
 
 import { useGetPartialAmountToSignApprove } from './useGetPartialAmountToSignApprove'
+import { useIsPartialApprovalModeSelected } from './useIsPartialApprovalModeSelected'
 
 import { MAX_APPROVE_AMOUNT } from '../constants'
 import { useIsPartialApproveSelectedByUser } from '../state'
-import { isPartialApproveEnabledAtom } from '../state/isPartialApproveEnabledAtom'
 
 /**
  * Returns the amount to sign for the approval transaction/permit
@@ -24,7 +23,7 @@ export function useGetAmountToSignApprove(): CurrencyAmount<Currency> | null {
   const isApprovalNeeded = useNeedsApproval(partialAmountToSign)
   const isPartialApprovalSelectedByUser = useIsPartialApproveSelectedByUser()
   const { isPartialApproveEnabled } = useFeatureFlags()
-  const isPartialApprovalEnabledInSettings = useAtomValue(isPartialApproveEnabledAtom)
+  const isPartialApprovalEnabledInSettings = useIsPartialApprovalModeSelected()
 
   return useMemo(() => {
     if (!partialAmountToSign) return null

apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsPartialApprovalModeSelected.ts

@@ -0,0 +1,7 @@
+import { useAtomValue } from 'jotai'
+
+import { isPartialApproveEnabledAtom } from '../state/isPartialApproveEnabledAtom'
+
+export function useIsPartialApprovalModeSelected(): boolean {
+  return useAtomValue(isPartialApproveEnabledAtom)
+}