chore(release): 2025-01-07

README.md

@@ -286,6 +286,21 @@ In case of problems with the service worker cache you force a reset using
 
 `emergency.js` is not cached by browser and loaded before all.
 
+## Vercel preview build
+
+Since this repo includes multiple apps, we do not want to build all of them on each PR because it causes long build queues in Vercel.  
+Some apps (see the list bellow) are not required to be built on each PR so we run them only a PR is labeled with a specific label.  
+This label is defined in the project settings on Vercel in `Settings`/`Git`/`Ignored Build Step` script.  
+For example, the label for the widget-configurator is `preview-widget-cfg`:
+```
+node tools/scripts/ignore-build-step.js --app=preview-widget-cfg
+```
+
+List of applications and their labels:
+- widget-configurator: `preview-widget-cfg`
+- cosmos: `preview-cosmos`
+- sdk-tools: `preview-sdk-tools`
+
 # 📚 Technical Documentation
 
 1. [Oveall Architecture](docs/architecture-overview.md)

apps/cowswap-frontend-e2e/src/e2e/swap.test.ts

@@ -68,7 +68,7 @@ describe('Swap (custom)', () => {
     })
 
     it('should accept buyAmount url param', () => {
-      cy.visit(`/#/${CHAIN_ID}/swap/${SELL_TOKEN}/${BUY_TOKEN}?buyAmount=0.5`)
+      cy.visit(`/#/${CHAIN_ID}/swap/${SELL_TOKEN}/${BUY_TOKEN}?buyAmount=0.5&orderKind=buy`)
       cy.get('#output-currency-input .token-amount-input').should('have.value', '0.5')
     })
 

apps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsx

@@ -4,6 +4,8 @@ import { isTruthy } from '@cowprotocol/common-utils'
 import { TokensByAddress } from '@cowprotocol/tokens'
 import { LpTokenProvider } from '@cowprotocol/types'
 
+import styled from 'styled-components/macro'
+
 import { upToSmall, useMediaQuery } from 'legacy/hooks/useMediaQuery'
 
 import { VampireAttackContext } from 'modules/yield/types'
@@ -17,6 +19,10 @@ import { CoWAmmBannerContext } from './types'
 
 import { useSafeMemoObject } from '../../hooks/useSafeMemo'
 
+const Wrapper = styled.div`
+  z-index: 100;
+`
+
 interface CoWAmmBannerContentProps {
   id: string
   title: string
@@ -139,7 +145,7 @@ export function CoWAmmBannerContent({
   )
 
   return (
-    <div data-banner-id={id}>
+    <Wrapper data-banner-id={id}>
       {isTokenSelectorView ? (
         <TokenSelectorContent isDarkMode={isDarkMode} context={context}>
           {Content}
@@ -159,6 +165,6 @@ export function CoWAmmBannerContent({
           {Content}
         </GlobalContent>
       )}
-    </div>
+    </Wrapper>
   )
 }

apps/cowswap-frontend/src/legacy/state/orders/actions.ts

@@ -107,7 +107,9 @@ export type OrderInfoApi = Pick<
   | 'executedSellAmount'
   | 'executedSellAmountBeforeFees'
   | 'executedFeeAmount'
-  | 'executedSurplusFee'
+  | 'executedFee'
+  | 'executedFeeToken'
+  | 'totalFee'
   | 'invalidated'
   | 'ethflowData'
   | 'onchainOrderData'
@@ -139,6 +141,7 @@ export interface AddPendingOrderParams {
   order: SerializedOrder
   isSafeWallet: boolean
 }
+
 export type ChangeOrderStatusParams = { id: UID; chainId: ChainId }
 export type SetOrderCancellationHashParams = ChangeOrderStatusParams & { hash: string }
 
@@ -177,11 +180,13 @@ export interface BatchOrdersUpdateParams {
 }
 
 export type PresignedOrdersParams = BatchOrdersUpdateParams
+
 export interface UpdatePresignGnosisSafeTxParams {
   orderId: UID
   chainId: ChainId
   safeTransaction: SafeMultisigTransactionResponse
 }
+
 export type ExpireOrdersBatchParams = BatchOrdersUpdateParams
 export type InvalidateOrdersBatchParams = BatchOrdersUpdateParams
 export type CancelOrdersBatchParams = BatchOrdersUpdateParams
@@ -196,7 +201,7 @@ export const fulfillOrdersBatch = createAction<FulfillOrdersBatchParams>('order/
 export const preSignOrders = createAction<PresignedOrdersParams>('order/presignOrders')
 
 export const updatePresignGnosisSafeTx = createAction<UpdatePresignGnosisSafeTxParams>(
-  'order/updatePresignGnosisSafeTx'
+  'order/updatePresignGnosisSafeTx',
 )
 
 export const expireOrdersBatch = createAction<ExpireOrdersBatchParams>('order/expireOrdersBatch')
@@ -214,7 +219,7 @@ export const deleteOrders = createAction<DeleteOrdersParams>('order/deleteOrders
 export const clearOrders = createAction<{ chainId: ChainId }>('order/clearOrders')
 
 export const updateLastCheckedBlock = createAction<{ chainId: ChainId; lastCheckedBlock: number }>(
-  'order/updateLastCheckedBlock'
+  'order/updateLastCheckedBlock',
 )
 
 export const clearOrdersStorage = createAction('order/clearOrdersStorage')

apps/cowswap-frontend/src/legacy/state/orders/reducer.ts

@@ -121,7 +121,7 @@ export function getDefaultNetworkState(chainId: ChainId): OrdersStateNetwork {
 // makes sure there's always an object at state[chainId], state[chainId].pending | .fulfilled
 function prefillState(
   state: Writable<OrdersState>,
-  { payload: { chainId } }: PayloadAction<PrefillStateRequired>
+  { payload: { chainId } }: PayloadAction<PrefillStateRequired>,
 ): asserts state is Required<OrdersState> {
   const stateAtChainId = state[chainId]
 
@@ -174,7 +174,7 @@ function addOrderToState(
   id: string,
   status: OrderTypeKeys,
   order: SerializedOrder,
-  isSafeWallet: boolean
+  isSafeWallet: boolean,
 ): void {
   // Attempt to fix `TypeError: Cannot add property <x>, object is not extensible`
   // seen on https://user-images.githubusercontent.com/34510341/138450105-bb94a2d1-656e-4e15-ae99-df9fb33c8ca4.png
@@ -200,7 +200,7 @@ function cancelOrderInState(
   state: Required<OrdersState>,
   chainId: ChainId,
   orderObject: OrderObject,
-  isSafeWallet: boolean
+  isSafeWallet: boolean,
 ) {
   const id = orderObject.id
 
@@ -368,12 +368,13 @@ export default createReducer(initialState, (builder) =>
 
           orderObject.order.apiAdditionalInfo = {
             creationDate: order.creationDate,
-            availableBalance: order.availableBalance,
             executedBuyAmount: order.executedBuyAmount,
             executedSellAmount: order.executedSellAmount,
             executedSellAmountBeforeFees: order.executedSellAmountBeforeFees,
             executedFeeAmount: order.executedFeeAmount,
-            executedSurplusFee: order.executedSurplusFee,
+            executedFee: order.executedFee,
+            executedFeeToken: order.executedFeeToken,
+            totalFee: order.totalFee,
             invalidated: order.invalidated,
             ethflowData: order.ethflowData,
             onchainOrderData: order.onchainOrderData,
@@ -458,7 +459,7 @@ export default createReducer(initialState, (builder) =>
             const allOrdersMap = flatOrdersStateNetwork(state[chainId])
 
             const children = Object.values(allOrdersMap).filter(
-              (item) => item?.order.composableCowInfo?.parentId === id
+              (item) => item?.order.composableCowInfo?.parentId === id,
             )
 
             children.forEach((child) => {
@@ -544,12 +545,12 @@ export default createReducer(initialState, (builder) =>
           orderListByChain[status] = ordersCleaned
         })
       })
-    })
+    }),
 )
 
 function reClassifyOrder(
   newOrder: SerializedOrder,
-  existingOrder: OrderObject | undefined
+  existingOrder: OrderObject | undefined,
 ): { status: OrderStatus; isCancelling: boolean | undefined } {
   // Onchain cancellations are considered final
   // Still, the order classification at apps/cowswap-frontend/src/legacy/state/orders/utils.ts can't tell

apps/cowswap-frontend/src/modules/application/containers/App/index.tsx

@@ -1,8 +1,7 @@
 import { lazy, PropsWithChildren, Suspense, useMemo } from 'react'
 
 import { ACTIVE_CUSTOM_THEME, CustomTheme } from '@cowprotocol/common-const'
-import { useMediaQuery } from '@cowprotocol/common-hooks'
-import { useFeatureFlags } from '@cowprotocol/common-hooks'
+import { useFeatureFlags, useMediaQuery } from '@cowprotocol/common-hooks'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { Color, Footer, GlobalCoWDAOStyles, Media, MenuBar } from '@cowprotocol/ui'
 
@@ -55,7 +54,10 @@ export function App() {
   useAnalyticsReporterCowSwap()
   useInitializeUtm()
 
-  const { isYieldEnabled, isChristmasEnabled, isHalloweenEnabled } = useFeatureFlags()
+  const { isYieldEnabled, } = useFeatureFlags()
+  // TODO: load them from feature flags when we want to enable again
+  const isChristmasEnabled = false
+  const isHalloweenEnabled = false
 
   const isInjectedWidgetMode = isInjectedWidget()
   const menuItems = useMenuItems()

apps/cowswap-frontend/src/modules/limitOrders/updaters/InitialPriceUpdater/index.tsx

@@ -1,37 +1,37 @@
-import { useSetAtom } from 'jotai'
-import { useLayoutEffect, useState } from 'react'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { useEffect, useLayoutEffect, useState } from 'react'
 
 import { usePrevious } from '@cowprotocol/common-hooks'
 
 import { Writeable } from 'types'
 
-import { useGetInitialPrice } from 'modules/limitOrders/hooks/useGetInitialPrice'
-import { useUpdateActiveRate } from 'modules/limitOrders/hooks/useUpdateActiveRate'
-import { LimitRateState, updateLimitRateAtom } from 'modules/limitOrders/state/limitRateAtom'
-
-import { useLimitOrdersDerivedState } from '../../hooks/useLimitOrdersDerivedState'
+import { useGetInitialPrice } from '../../hooks/useGetInitialPrice'
+import { useLimitOrdersRawState } from '../../hooks/useLimitOrdersRawState'
+import { useUpdateActiveRate } from '../../hooks/useUpdateActiveRate'
+import { limitRateAtom, LimitRateState, updateLimitRateAtom } from '../../state/limitRateAtom'
 
 // Fetch and update initial price for the selected token pair
 export function InitialPriceUpdater() {
-  const { inputCurrency, outputCurrency } = useLimitOrdersDerivedState()
+  const { inputCurrencyId, outputCurrencyId } = useLimitOrdersRawState()
+  const { isTypedValue } = useAtomValue(limitRateAtom)
   const updateLimitRateState = useSetAtom(updateLimitRateAtom)
   const updateRate = useUpdateActiveRate()
 
-  const [isInitialPriceSet, setIsInitialPriceSet] = useState(false)
+  const [isInitialPriceSet, setIsInitialPriceSet] = useState(isTypedValue)
   const { price, isLoading } = useGetInitialPrice()
   const prevPrice = usePrevious(price)
 
+  useEffect(() => {
+    setIsInitialPriceSet(isTypedValue)
+  }, [isTypedValue])
+
   useLayoutEffect(() => {
     const update: Partial<Writeable<LimitRateState>> = {
       initialRate: price,
       // Don't change isLoading flag when price is already set
       isLoading: isInitialPriceSet ? false : isLoading,
     }
 
-    if (!isInitialPriceSet) {
-      update.isTypedValue = false
-    }
-
     updateLimitRateState(update)
   }, [isInitialPriceSet, price, isLoading, updateLimitRateState])
 
@@ -40,6 +40,7 @@ export function InitialPriceUpdater() {
     if (!price || isInitialPriceSet || isLoading || prevPrice?.equalTo(price)) return
 
     setIsInitialPriceSet(true)
+
     updateRate({
       activeRate: price,
       isInitialPriceSet: true,
@@ -53,7 +54,7 @@ export function InitialPriceUpdater() {
   // Reset initial price set flag when any token was changed
   useLayoutEffect(() => {
     setIsInitialPriceSet(false)
-  }, [inputCurrency, outputCurrency])
+  }, [inputCurrencyId, outputCurrencyId])
 
   return null
 }

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/orders.mock.ts

@@ -100,6 +100,19 @@ export const ordersMock: ParsedOrder[] = [
     signingScheme: SigningScheme.EIP712,
     class: OrderClass.MARKET,
     kind: OrderKind.SELL,
+    apiAdditionalInfo: {
+      executedFeeAmount: '1',
+      executedFee: '1',
+      executedFeeToken: USDC[chainId].address,
+      totalFee: '1',
+      creationDate: '2022-11-11T13:15:13.551Z',
+      executedBuyAmount: '23000000000000',
+      executedSellAmount: '5000300000000000',
+      executedSellAmountBeforeFees: '5000300000000000',
+      invalidated: false,
+      class: OrderClass.LIMIT,
+      signingScheme: SigningScheme.EIP712,
+    },
   },
   {
     id: '5',

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

@@ -1,29 +1,30 @@
 import { TokenAmount } from '@cowprotocol/ui'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
+import { getFeeToken } from 'modules/ordersTable/utils/getFeeToken'
+
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 
 import * as styledEl from './styled'
 
 export type Props = { order: ParsedOrder }
 
 export function FeeField({ order }: Props): JSX.Element | null {
-  const { inputToken } = order
-  const { executedFeeAmount, executedSurplusFee } = order.executionData
+  const { totalFee } = order.executionData
+  const feeToken = getFeeToken(order)
 
-  if (!inputToken) return <styledEl.Value></styledEl.Value>
+  if (!feeToken) return <styledEl.Value></styledEl.Value>
 
-  // TODO: use the value from SDK
-  const totalFee = CurrencyAmount.fromRawAmount(inputToken, (executedSurplusFee ?? executedFeeAmount) || 0)
-  const quoteSymbol = inputToken.symbol
+  const totalFeeAmount = CurrencyAmount.fromRawAmount(feeToken, totalFee || 0)
+  const quoteSymbol = feeToken.symbol
 
   return (
     <styledEl.Value>
       {!quoteSymbol || !totalFee ? (
         <span>-</span>
       ) : (
         <span>
-          <TokenAmount amount={totalFee} tokenSymbol={inputToken} />
+          <TokenAmount amount={totalFeeAmount} tokenSymbol={feeToken} />
         </span>
       )}
     </styledEl.Value>

apps/cowswap-frontend/src/modules/ordersTable/utils/getFeeToken.test.ts

@@ -0,0 +1,37 @@
+import { getFeeToken } from './getFeeToken' // Adjust the import path as necessary
+
+import { ordersMock } from '../pure/OrdersTableContainer/orders.mock'
+
+const BASE_ORDER = ordersMock[3]
+
+describe('getFeeToken', () => {
+  it("should return inputToken when that's the fee token", () => {
+    const input = BASE_ORDER
+    const expectedOutput = BASE_ORDER.inputToken
+
+    const result = getFeeToken(input)
+
+    expect(result).toEqual(expectedOutput)
+  })
+
+  it("should return outputToken when that's the fee token", () => {
+    const input = {
+      ...BASE_ORDER,
+      executionData: { ...BASE_ORDER.executionData, executedFeeToken: BASE_ORDER.outputToken.address },
+    }
+    const expectedOutput = BASE_ORDER.outputToken
+
+    const result = getFeeToken(input)
+
+    expect(result).toEqual(expectedOutput)
+  })
+
+  it('should return inputToken when there is no fee token', () => {
+    const input = { ...BASE_ORDER, executionData: { ...BASE_ORDER.executionData, executedFeeToken: null } }
+    const expectedOutput = BASE_ORDER.inputToken
+
+    const result = getFeeToken(input)
+
+    expect(result).toEqual(expectedOutput)
+  })
+})

apps/cowswap-frontend/src/modules/ordersTable/utils/getFeeToken.ts

@@ -0,0 +1,14 @@
+import { ParsedOrder } from 'utils/orderUtils/parseOrder'
+
+export function getFeeToken(order: ParsedOrder) {
+  const { inputToken, outputToken } = order
+  const { executedFeeToken } = order.executionData
+
+  const feeTokenAddress = executedFeeToken?.toLowerCase()
+
+  if (!feeTokenAddress) {
+    return inputToken
+  }
+
+  return [inputToken, outputToken].find((token) => token?.address.toLowerCase() === feeTokenAddress)
+}