chore: merge pull request #3501 from cowprotocol/release/1.52.0

chore(release): 1.52.0

apps/cowswap-frontend/src/common/containers/FeatureGuard/index.tsx

@@ -5,14 +5,15 @@ import { useFeatureFlags } from 'common/hooks/featureFlags/useFeatureFlags'
 interface FeatureGuardProps {
   featureFlag: string
   children: ReactNode
+  defaultContent?: ReactNode
 }
 
-export function FeatureGuard({ featureFlag, children }: FeatureGuardProps) {
+export function FeatureGuard({ featureFlag, children, defaultContent }: FeatureGuardProps) {
   const flags = useFeatureFlags()
 
   if (flags[featureFlag]) {
     return <>{children}</>
   }
 
-  return null
+  return defaultContent || null
 }

apps/cowswap-frontend/src/common/updaters/orders/GpOrdersUpdater.ts

@@ -3,9 +3,8 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { NATIVE_CURRENCY_BUY_TOKEN } from '@cowprotocol/common-const'
 import { EnrichedOrder, EthflowData, OrderClass, SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
-import { useAllTokens } from '@cowprotocol/tokens'
+import { TokensByAddress, useAllTokens } from '@cowprotocol/tokens'
 import { useWalletInfo } from '@cowprotocol/wallet'
-import { Token } from '@uniswap/sdk-core'
 
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
 import { useAddOrUpdateOrders, useClearOrdersStorage } from 'legacy/state/orders/hooks'
@@ -33,7 +32,7 @@ const statusMapping: Record<OrderTransitionStatus, OrderStatus | undefined> = {
 function _transformGpOrderToStoreOrder(
   order: EnrichedOrder,
   chainId: ChainId,
-  allTokens: { [address: string]: Token }
+  allTokens: TokensByAddress
 ): Order | undefined {
   const {
     uid: id,
@@ -111,12 +110,12 @@ function _getInputToken(
   isEthFlow: boolean,
   chainId: ChainId,
   sellToken: string,
-  allTokens: { [address: string]: Token }
+  allTokens: TokensByAddress
 ): ReturnType<typeof getTokenFromMapping> {
   return isEthFlow ? NATIVE_CURRENCY_BUY_TOKEN[chainId] : getTokenFromMapping(sellToken, chainId, allTokens)
 }
 
-function _filterOrders(orders: EnrichedOrder[], tokens: Record<string, Token>, chainId: ChainId): Order[] {
+function _filterOrders(orders: EnrichedOrder[], tokens: TokensByAddress, chainId: ChainId): Order[] {
   return orders.reduce<Order[]>((acc, order) => {
     const storeOrder = _transformGpOrderToStoreOrder(order, chainId, tokens)
     if (storeOrder) {

apps/cowswap-frontend/src/legacy/hooks/useWrapCallback.ts

@@ -1,6 +1,5 @@
 import { wrapAnalytics } from '@cowprotocol/analytics'
-import { RADIX_HEX } from '@cowprotocol/common-const'
-import { getChainCurrencySymbols } from '@cowprotocol/common-const'
+import { getChainCurrencySymbols, RADIX_HEX } from '@cowprotocol/common-const'
 import {
   calculateGasMargin,
   formatTokenAmount,
@@ -15,8 +14,6 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { useTransactionAdder } from 'legacy/state/enhancedTransactions/hooks'
 
-import { ExtendedTradeRawState, TradeRawState } from 'modules/trade/types/TradeRawState'
-
 import { getOperationMessage } from '../components/TransactionConfirmationModal/LegacyConfirmationPendingContent'
 import { ConfirmOperationType } from '../state/types'
 
@@ -44,8 +41,6 @@ export interface WrapUnwrapContext {
   wethContract: Contract
   amount: CurrencyAmount<Currency>
   addTransaction: TransactionAdder
-  tradeState: TradeRawState
-  updateTradeState: (update: Partial<ExtendedTradeRawState>) => void
   closeModals: () => void
   openTransactionConfirmationModal: OpenSwapConfirmModalCallback
 }
@@ -54,16 +49,7 @@ export async function wrapUnwrapCallback(
   context: WrapUnwrapContext,
   params: WrapUnwrapCallbackParams = { useModals: true }
 ): Promise<TransactionResponse | null> {
-  const {
-    chainId,
-    amount,
-    wethContract,
-    addTransaction,
-    openTransactionConfirmationModal,
-    closeModals,
-    updateTradeState,
-    tradeState,
-  } = context
+  const { chainId, amount, wethContract, addTransaction, openTransactionConfirmationModal, closeModals } = context
   const isNativeIn = getIsNativeToken(amount.currency)
   const amountHex = `0x${amount.quotient.toString(RADIX_HEX)}`
   const operationType = isNativeIn ? ConfirmOperationType.WRAP_ETHER : ConfirmOperationType.UNWRAP_WETH
@@ -85,9 +71,6 @@ export async function wrapUnwrapCallback(
     })
     useModals && closeModals()
 
-    // Clean up form fields after successful wrap/unwrap
-    updateTradeState({ ...tradeState, inputCurrencyAmount: '', outputCurrencyAmount: '' })
-
     return txReceipt
   } catch (error: any) {
     useModals && closeModals()

apps/cowswap-frontend/src/legacy/utils/trade.ts

@@ -40,6 +40,9 @@ export type PostOrderParams = {
   appData: AppDataInfo
   class: OrderClass
   partiallyFillable: boolean
+  featureFlags: {
+    swapZeroFee: boolean | undefined
+  }
   quoteId?: number
 }
 
@@ -95,24 +98,28 @@ export function getSignOrderParams(params: PostOrderParams): SignOrderParams {
   const {
     kind,
     inputAmount,
+    sellAmountBeforeFee,
     outputAmount,
     sellToken,
     buyToken,
-    feeAmount,
     validTo,
     recipient,
     partiallyFillable,
     appData,
     quoteId,
+    feeAmount,
+    featureFlags: { swapZeroFee },
   } = params
   const sellTokenAddress = sellToken.address
 
   if (!sellTokenAddress) {
     throw new Error(`Order params invalid sellToken address for token: ${JSON.stringify(sellToken, undefined, 2)}`)
   }
 
+  const isSellTrade = kind === OrderKind.SELL
+
   // fee adjusted input amount
-  const sellAmount = inputAmount.quotient.toString(RADIX_DECIMAL)
+  const sellAmount = (swapZeroFee && isSellTrade ? sellAmountBeforeFee : inputAmount).quotient.toString(RADIX_DECIMAL)
   // slippage adjusted output amount
   const buyAmount = outputAmount.quotient.toString(RADIX_DECIMAL)
 
@@ -130,7 +137,7 @@ export function getSignOrderParams(params: PostOrderParams): SignOrderParams {
       buyAmount,
       validTo,
       appData: appData.appDataKeccak256,
-      feeAmount: feeAmount?.quotient.toString() || '0',
+      feeAmount: (swapZeroFee ? '0' : feeAmount?.quotient.toString()) || '0',
       kind,
       receiver,
       partiallyFillable,

apps/cowswap-frontend/src/mocks/tradeStateMock.ts

@@ -68,6 +68,7 @@ export const tradeContextMock: TradeFlowContext = {
     allowsOffchainSigning: true,
     partiallyFillable: true,
     appData: getAppData(),
+    featureFlags: { swapZeroFee: false },
   },
   rateImpact: 0,
   provider: {} as any,

apps/cowswap-frontend/src/modules/appData/updater/AppDataHooksUpdater.ts

@@ -5,23 +5,19 @@ import { PermitHookData } from '@cowprotocol/permit-utils'
 import { useAccountAgnosticPermitHookData } from 'modules/permit'
 import { useDerivedSwapInfo } from 'modules/swap/hooks/useSwapState'
 
-import { useLimitHasEnoughAllowance } from '../../limitOrders/hooks/useTradeFlowContext'
+import { useLimitHasEnoughAllowance } from '../../limitOrders/hooks/useLimitHasEnoughAllowance'
 import { useSwapEnoughAllowance } from '../../swap/hooks/useSwapFlowContext'
 import { useUpdateAppDataHooks } from '../hooks'
 import { buildAppDataHooks } from '../utils/buildAppDataHooks'
 
-// const count = 0
-
 function usePermitDataIfNotAllowance(): PermitHookData | undefined {
-  const permitHookData = useAccountAgnosticPermitHookData() || {}
+  const { target, callData, gasLimit } = useAccountAgnosticPermitHookData() || {}
 
   // Remove permitData if the user has enough allowance for the current trade
   const swapHasEnoughAllowance = useSwapEnoughAllowance()
   const limitHasEnoughAllowance = useLimitHasEnoughAllowance()
   const shouldUsePermit = swapHasEnoughAllowance === false || limitHasEnoughAllowance === false
 
-  const { target, callData, gasLimit }: Partial<PermitHookData> = permitHookData || {}
-
   return useMemo(() => {
     if (!target || !callData || !gasLimit) {
       return undefined

apps/cowswap-frontend/src/modules/limitOrders/hooks/useLimitHasEnoughAllowance.ts

@@ -0,0 +1,19 @@
+import { GP_VAULT_RELAYER } from '@cowprotocol/common-const'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import { useEnoughBalanceAndAllowance } from 'modules/tokens'
+
+import { useLimitOrdersDerivedState } from './useLimitOrdersDerivedState'
+
+export function useLimitHasEnoughAllowance(): boolean | undefined {
+  const state = useLimitOrdersDerivedState()
+  const { chainId, account } = useWalletInfo()
+
+  const checkAllowanceAddress = GP_VAULT_RELAYER[chainId]
+  const { enoughAllowance } = useEnoughBalanceAndAllowance({
+    account,
+    amount: state.slippageAdjustedSellAmount || undefined,
+    checkAllowanceAddress,
+  })
+  return enoughAllowance
+}

apps/cowswap-frontend/src/modules/limitOrders/hooks/useTradeFlowContext.ts

@@ -20,20 +20,9 @@ import { useEnoughBalanceAndAllowance } from 'modules/tokens'
 import { TradeType } from 'modules/trade'
 import { useTradeQuote } from 'modules/tradeQuote'
 
-import { useLimitOrdersDerivedState } from './useLimitOrdersDerivedState'
-
-export function useLimitHasEnoughAllowance(): boolean | undefined {
-  const state = useLimitOrdersDerivedState()
-  const { chainId, account } = useWalletInfo()
+import { useFeatureFlags } from 'common/hooks/featureFlags/useFeatureFlags'
 
-  const checkAllowanceAddress = GP_VAULT_RELAYER[chainId]
-  const { enoughAllowance } = useEnoughBalanceAndAllowance({
-    account,
-    amount: state.slippageAdjustedSellAmount || undefined,
-    checkAllowanceAddress,
-  })
-  return enoughAllowance
-}
+import { useLimitOrdersDerivedState } from './useLimitOrdersDerivedState'
 
 export function useTradeFlowContext(): TradeFlowContext | null {
   const { provider } = useWeb3React()
@@ -48,6 +37,7 @@ export function useTradeFlowContext(): TradeFlowContext | null {
   const rateImpact = useRateImpact()
   const settingsState = useAtomValue(limitOrdersSettingsAtom)
   const permitInfo = usePermitInfo(state.inputCurrency, TradeType.LIMIT_ORDER)
+  const { swapZeroFee } = useFeatureFlags()
 
   const checkAllowanceAddress = GP_VAULT_RELAYER[chainId]
   const { enoughAllowance } = useEnoughBalanceAndAllowance({
@@ -108,6 +98,9 @@ export function useTradeFlowContext(): TradeFlowContext | null {
       partiallyFillable,
       appData,
       quoteId,
+      featureFlags: {
+        swapZeroFee,
+      },
     },
   }
 }

apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.cosmos.tsx

@@ -34,6 +34,7 @@ const tradeContext: TradeFlowContext = {
     allowsOffchainSigning: true,
     partiallyFillable: true,
     appData: getAppData(),
+    featureFlags: { swapZeroFee: false },
   },
   rateImpact: 0,
   provider: {} as any,

apps/cowswap-frontend/src/modules/orders/hooks/useTokensForOrdersList.ts

@@ -1,7 +1,8 @@
 import { useCallback, useRef } from 'react'
 
 import { TokenWithLogo } from '@cowprotocol/common-const'
-import { fetchTokenFromBlockchain, TokensByAddress, useTokensByAddressMap } from '@cowprotocol/tokens'
+import { isTruthy } from '@cowprotocol/common-utils'
+import { fetchTokenFromBlockchain, TokensByAddress, useAddUserToken, useTokensByAddressMap } from '@cowprotocol/tokens'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
@@ -12,6 +13,7 @@ export function useTokensForOrdersList(): (tokensToFetch: string[]) => Promise<T
   const { chainId } = useWalletInfo()
   const { provider } = useWeb3React()
   const allTokens = useTokensByAddressMap()
+  const addUserTokens = useAddUserToken()
 
   const getToken = useCallback(
     async (address: string) => {
@@ -42,10 +44,13 @@ export function useTokensForOrdersList(): (tokensToFetch: string[]) => Promise<T
 
       const fetchedTokens = await _fetchTokens(tokensToFetch, getToken)
 
+      // Add fetched tokens to the user-added tokens store to avoid re-fetching them
+      addUserTokens(Object.values(fetchedTokens).filter(isTruthy))
+
       // Merge fetched tokens with what's currently loaded
       return { ...tokens, ...fetchedTokens }
     },
-    [chainId, getToken]
+    [chainId, getToken, addUserTokens]
   )
 }
 

apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/index.tsx

@@ -49,14 +49,17 @@ interface ReceiptProps {
   estimatedExecutionPrice: Fraction | null
 }
 
+const FILLED_COMMON_TOOLTIP = 'How much of the order has been filled.'
+
 const tooltips: { [key: string]: string | JSX.Element } = {
   LIMIT_PRICE: 'You will receive this price or better for your tokens.',
   EXECUTION_PRICE: 'An order’s actual execution price will vary based on the market price and network fees.',
   EXECUTES_AT:
     'Fees (incl. gas) are covered by filling your order when the market price is better than your limit price.',
+  FILLED_TWAP: FILLED_COMMON_TOOLTIP,
   FILLED: (
     <span>
-      How much of the order has been filled.
+      {FILLED_COMMON_TOOLTIP}
       <br />
       Market orders are always <i>Fill or kill</i>, while limit orders are by default <i>Partially fillable</i>, but can
       also be changed to <i>Fill or kill</i> through your order settings.
@@ -191,20 +194,20 @@ export function ReceiptModal({
               </styledEl.Field>
             )}
 
+            <styledEl.Field>
+              <FieldLabel label="Filled" tooltip={twapOrder ? tooltips.FILLED_TWAP : tooltips.FILLED} />
+              <FilledField order={order} />
+            </styledEl.Field>
+
+            <styledEl.Field>
+              <FieldLabel label="Order surplus" tooltip={tooltips.SURPLUS} />
+              <SurplusField order={order} />
+            </styledEl.Field>
+
             {/*TODO: Currently, we don't have this information for parent TWAP orders*/}
             {/*The condition should be removed once we have the data*/}
             {(!twapOrder || isTwapPartOrder) && (
               <>
-                <styledEl.Field>
-                  <FieldLabel label="Filled" tooltip={tooltips.FILLED} />
-                  <FilledField order={order} />
-                </styledEl.Field>
-
-                <styledEl.Field>
-                  <FieldLabel label="Order surplus" tooltip={tooltips.SURPLUS} />
-                  <SurplusField order={order} />
-                </styledEl.Field>
-
                 <styledEl.Field>
                   <FieldLabel label="Fee" tooltip={tooltips.FEE} />
                   <FeeField order={order} />