fix: unify order summary

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

@@ -1,13 +1,14 @@
 import { useAtomValue } from 'jotai'
-import { ReactNode, useMemo } from 'react'
+import React, { ReactNode, useMemo } from 'react'
 
 import { Command } from '@cowprotocol/types'
 
 import { cancellationModalContextAtom } from 'common/hooks/useCancelOrder/state'
 import { CancellationModal as Pure } from 'common/pure/CancellationModal'
+import { OrderSummary } from 'common/pure/OrderSummary'
 
 import { useUltimateOrder } from '../../hooks/useUltimateOrder'
-import { computeOrderSummary } from '../../updaters/orders/utils'
+import { getUltimateOrderTradeAmounts } from '../../updaters/orders/utils'
 
 export type CancellationModalProps = {
   isOpen: boolean
@@ -22,7 +23,12 @@ export function CancellationModal(props: CancellationModalProps): ReactNode {
 
   const orderSummary = useMemo(() => {
     if (!ultimateOrder) return undefined
-    return computeOrderSummary(ultimateOrder)
+
+    const { inputAmount, outputAmount } = getUltimateOrderTradeAmounts(ultimateOrder)
+
+    return (
+      <OrderSummary inputAmount={inputAmount} outputAmount={outputAmount} kind={ultimateOrder.orderFromStore.kind} />
+    )
   }, [ultimateOrder])
 
   return <Pure isOpen={isOpen} onDismiss={onDismiss} context={context} orderSummary={orderSummary} />

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, useMemo } from 'react'
+import React, { ReactElement, ReactNode, useMemo } from 'react'
 
 import { shortenOrderId } from '@cowprotocol/common-utils'
 import { Command } from '@cowprotocol/types'
@@ -18,7 +18,7 @@ export type CancellationModalProps = {
   isOpen: boolean
   onDismiss: Command
   context: CancellationModalContext
-  orderSummary: string | undefined
+  orderSummary: ReactNode | undefined
 }
 
 export function CancellationModal(props: CancellationModalProps): ReactElement | null {

apps/cowswap-frontend/src/common/pure/CancellationModal/types.ts

@@ -1,11 +1,13 @@
+import { ReactNode } from 'react'
+
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { Command } from '@cowprotocol/types'
 import type { BigNumber } from '@ethersproject/bignumber'
 
 import { CancellationType } from '../../hooks/useCancelOrder/state'
 
 export type RequestCancellationModalProps = {
-  summary?: string
+  summary?: ReactNode
   shortId: string
   defaultType: CancellationType
   onDismiss: Command

apps/cowswap-frontend/src/modules/orders/pure/OrderSummary/index.tsx → apps/cowswap-frontend/src/common/pure/OrderSummary/index.tsx

@@ -9,42 +9,44 @@ import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { BuyForAtMostTemplate, SellForAtLeastTemplate } from './summaryTemplates'
 
-interface OrderSummaryProps {
-  actionTitle?: string
+import { TradeAmounts } from '../../types'
+
+interface TokensAndAmounts {
   inputToken: TokenInfo
   outputToken: TokenInfo
   sellAmount: string
   buyAmount: string
+}
+
+type OrderSummaryProps = {
+  actionTitle?: string
   kind: OrderKind
   srcChainData?: ChainInfo
   dstChainData?: ChainInfo
   children?: ReactElement | string
   customTemplate?: typeof SellForAtLeastTemplate
-}
+} & (TradeAmounts | TokensAndAmounts)
 
 export function OrderSummary(props: OrderSummaryProps): ReactNode {
-  const {
-    kind,
-    sellAmount,
-    buyAmount,
-    outputToken,
-    inputToken,
-    children,
-    customTemplate,
-    actionTitle,
-    srcChainData,
-    dstChainData,
-  } = props
+  const { kind, children, customTemplate, actionTitle, srcChainData, dstChainData } = props
   const isSell = isSellOrder(kind)
   const isBridgeOrder = srcChainData && dstChainData && srcChainData.id !== dstChainData.id
 
   const inputAmount = useMemo(() => {
-    return CurrencyAmount.fromRawAmount(TokenWithLogo.fromToken(inputToken), sellAmount)
-  }, [inputToken, sellAmount])
+    if ('inputAmount' in props) {
+      return props.inputAmount
+    }
+
+    return CurrencyAmount.fromRawAmount(TokenWithLogo.fromToken(props.inputToken), props.sellAmount)
+  }, [props])
 
   const outputAmount = useMemo(() => {
-    return CurrencyAmount.fromRawAmount(TokenWithLogo.fromToken(outputToken), buyAmount)
-  }, [buyAmount, outputToken])
+    if ('outputAmount' in props) {
+      return props.outputAmount
+    }
+
+    return CurrencyAmount.fromRawAmount(TokenWithLogo.fromToken(props.outputToken), props.buyAmount)
+  }, [props])
 
   const inputAmountElement = <TokenAmount amount={inputAmount} tokenSymbol={inputAmount?.currency} />
   const outputAmountElement = <TokenAmount amount={outputAmount} tokenSymbol={outputAmount?.currency} />

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

@@ -1,44 +1,16 @@
-import {
-  areAddressesEqual,
-  formatSymbol,
-  formatTokenAmount,
-  isSellOrder,
-  shortenAddress,
-} from '@cowprotocol/common-utils'
 import { EnrichedOrder, SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
-import { t } from '@lingui/core/macro'
-
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
 import { classifyOrder, OrderTransitionStatus } from 'legacy/state/orders/utils'
 
 import { getOrder } from 'api/cowProtocol'
 import { getIsComposableCowChildOrder } from 'utils/orderUtils/getIsComposableCowChildOrder'
-import { getUiOrderType, getUiOrderTypeTitles, UiOrderTypeParams } from 'utils/orderUtils/getUiOrderType'
 
 import { UltimateOrderData } from '../../hooks/useUltimateOrder'
 import { TradeAmounts } from '../../types'
 
-export function computeOrderSummary(ultimateOrder: UltimateOrderData): string | undefined {
-  const { orderFromStore } = ultimateOrder
-  const orderFromApi = orderFromStore.apiAdditionalInfo
-  const genericOrder = orderFromApi ?? orderFromStore
-
-  const owner = genericOrder?.owner
-  const receiver = genericOrder?.receiver
-  const uiOrderType = getUiOrderType(genericOrder as UiOrderTypeParams)
-  const orderTitle = getUiOrderTypeTitles()[uiOrderType]
-
-  const recipientSuffix = receiver && !areAddressesEqual(receiver, owner) ? t`to` + ` ${shortenAddress(receiver)}` : ''
-
-  const summaryAmounts = getOrderSummary(genericOrder, getOrderTradeAmounts(ultimateOrder))
-
-  // ${Swap} ${10 DAI at least 10 USDC} ${to 0x000..aaa}
-  return `${orderTitle} ${summaryAmounts} ${recipientSuffix}`.trim()
-}
-
-function getOrderTradeAmounts({
+export function getUltimateOrderTradeAmounts({
   orderFromStore,
   bridgeOrderFromStore,
   bridgeOrderFromApi,
@@ -89,33 +61,10 @@ function getOrderTradeAmounts({
   }
 }
 
-function getOrderSummary(genericOrder: EnrichedOrder | Order, { inputAmount, outputAmount }: TradeAmounts): string {
-  const { status, kind } = genericOrder
-
-  const isFulfilled = status === OrderStatus.FULFILLED
-
-  if (isFulfilled) {
-    return `${stringifyAmount(inputAmount)} ` + t`for` + ` ${stringifyAmount(outputAmount)}`
-  } else {
-    const isSell = isSellOrder(kind)
-
-    const inputPrefix = !isSell ? t`at most` + ` ` : ''
-    const outputPrefix = isSell ? t`at least` + ` ` : ''
-
-    return (
-      `${inputPrefix}${stringifyAmount(inputAmount)} ` + t`for` + ` ${outputPrefix}${stringifyAmount(outputAmount)}`
-    )
-  }
-}
-
 function stringToCurrency(amount: string, currency: Currency): CurrencyAmount<Currency> {
   return CurrencyAmount.fromRawAmount(currency, amount)
 }
 
-function stringifyAmount(amount: CurrencyAmount<Currency>): string {
-  return `${formatTokenAmount(amount)} ${formatSymbol(amount.currency.symbol)}`
-}
-
 type PopupData = {
   status: OrderTransitionStatus
   order: EnrichedOrder

apps/cowswap-frontend/src/legacy/state/enhancedTransactions/hooks/index.ts

@@ -45,13 +45,13 @@ export function useTransactionAdder(): TransactionAdder {
             chainId,
             ...addTransactionParams,
             nonce,
-          })
+          }),
         )
       } catch (e) {
         console.error('Cannot add a transaction', e)
       }
     },
-    [dispatch, chainId, account, isSafeWallet, provider]
+    [dispatch, chainId, account, isSafeWallet, provider],
   )
 }
 
@@ -99,47 +99,3 @@ export function useTransactionsByHash({ hashes }: { hashes: string[] }): Enhance
     }, {})
   }, [allTxs, hashes])
 }
-
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function useAllClaimingTransactions() {
-  const transactionsMap = useAllTransactions()
-  const transactions = Object.values(transactionsMap)
-
-  return useMemo(() => {
-    return transactions.filter((tx) => !!tx.claim)
-  }, [transactions])
-}
-
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function useAllClaimingTransactionIndices() {
-  const claimingTransactions = useAllClaimingTransactions()
-  return useMemo(() => {
-    const flattenedClaimingTransactions = claimingTransactions.reduce<number[]>((acc, { claim, receipt }) => {
-      if (claim && claim.indices && !receipt) {
-        acc.push(...claim.indices)
-      }
-      return acc
-    }, [])
-
-    return new Set(flattenedClaimingTransactions)
-  }, [claimingTransactions])
-}
-
-// // watch for submissions to claim
-// // return null if not done loading, return undefined if not found
-// export function useUserHasSubmittedClaim(account?: string): {
-//   claimSubmitted: boolean
-//   claimTxn: EnhancedTransactionDetails | undefined
-// } {
-//   const pendingClaims = useAllClaimingTransactions()
-//   const claimTxn = useMemo(
-//     () =>
-//       // find one that is both the user's claim, AND not mined
-//       pendingClaims.find((claim) => claim.claim?.recipient === account),
-//     [account, pendingClaims]
-//   )
-
-//   return { claimSubmitted: !!claimTxn, claimTxn }
-// }

apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx

@@ -34,7 +34,6 @@ import { isPending } from 'common/hooks/useCategorizeRecentActivity'
 import { useEnhancedActivityDerivedState } from 'common/hooks/useEnhancedActivityDerivedState'
 import { useGetSurplusData } from 'common/hooks/useGetSurplusFiatValue'
 import { useSwapAndBridgeContext } from 'common/hooks/useSwapAndBridgeContext'
-import { useUltimateOrder } from 'common/hooks/useUltimateOrder'
 import { CurrencyLogoPair } from 'common/pure/CurrencyLogoPair'
 import { CustomRecipientWarningBanner } from 'common/pure/CustomRecipientWarningBanner'
 import { IconSpinner } from 'common/pure/IconSpinner'
@@ -46,7 +45,6 @@ import {
   useIsReceiverWalletBannerHidden,
 } from 'common/state/receiverWalletBannerVisibility'
 import { ActivityDerivedState, ActivityStatus } from 'common/types/activity'
-import { computeOrderSummary } from 'common/updaters/orders/utils'
 import { getIsBridgeOrder } from 'common/utils/getIsBridgeOrder'
 import { getIsCustomRecipient } from 'utils/orderUtils/getIsCustomRecipient'
 import { getUiOrderType } from 'utils/orderUtils/getUiOrderType'
@@ -245,7 +243,6 @@ export function ActivityDetails(props: {
   const { isPartialApproveEnabled } = useFeatureFlags()
   const [isPartialApproveEnabledBySettings] = useSwapPartialApprovalToggleState(isPartialApproveEnabled)
   const getShowCancellationModal = useCancelOrder()
-  const ultimateOrder = useUltimateOrder(chainId, order?.id)
 
   const isSwap = order && getUiOrderType(order) === UiOrderType.SWAP
 
@@ -490,6 +487,7 @@ export function ActivityDetails(props: {
         <SummaryInner>
           <b>{activityName}</b>
           {isOrder ? (
+            // Order
             <>
               {order && !skipBridgingDisplay && isBridgeOrder ? (
                 <BridgeActivitySummary
@@ -590,10 +588,7 @@ export function ActivityDetails(props: {
             </>
           ) : (
             // Transaction
-            (activityDerivedState.summary ??
-            // Order
-            (ultimateOrder ? computeOrderSummary(ultimateOrder) : null) ??
-            id)
+            (activityDerivedState.summary ?? id)
           )}
 
           {activityLinkUrl && enhancedTransaction?.replacementType !== 'replaced' && (

apps/cowswap-frontend/src/modules/orders/containers/BridgingSuccessNotification/index.tsx

@@ -5,57 +5,26 @@ import { ExternalLink } from '@cowprotocol/ui'
 
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
-import { useBridgeOrderData } from 'entities/bridgeOrders'
 
-import { getUiOrderType } from 'utils/orderUtils/getUiOrderType'
+import type { OrderSummaryTemplateProps } from 'common/pure/OrderSummary/summaryTemplates'
 
 import { OrderNotification } from '../OrderNotification'
-import { mapBridgingResultToOrderInfo } from '../OrderNotification/utils'
-
-import type { OrderSummaryTemplateProps } from '../../pure/OrderSummary/summaryTemplates'
-
-function summaryTemplate({
-  inputAmount,
-  outputAmount,
-  srcChainData,
-  dstChainData,
-}: OrderSummaryTemplateProps): ReactNode {
-  return (
-    <>
-      <Trans>Sell</Trans> {inputAmount}{' '}
-      {srcChainData && (
-        <>
-          ({srcChainData.label}) <Trans>for a total of</Trans> {outputAmount}{' '}
-          {dstChainData && <> ({dstChainData.label})</>}
-        </>
-      )}
-    </>
-  )
-}
 
 interface BridgingSuccessNotificationProps {
   payload: OnBridgingSuccessPayload
 }
 
 export function BridgingSuccessNotification({ payload }: BridgingSuccessNotificationProps): ReactNode {
   const { chainId, order } = payload
-  const bridgingOrder = useBridgeOrderData(order.uid)
-
-  if (!bridgingOrder) return null
-
-  const orderInfo = mapBridgingResultToOrderInfo(payload, bridgingOrder)
 
   return (
     <OrderNotification
       title={<Trans>Bridging succeeded</Trans>}
       actionTitle={t`Bridge`}
       skipExplorerLink
       chainId={chainId}
-      orderInfo={orderInfo}
       customTemplate={summaryTemplate}
-      orderType={getUiOrderType(order)}
       orderUid={order.uid}
-      receiver={bridgingOrder.recipient}
       messageType={ToastMessageType.ORDER_FULFILLED}
       bottomContent={
         payload.explorerUrl ? (
@@ -70,3 +39,22 @@ export function BridgingSuccessNotification({ payload }: BridgingSuccessNotifica
     />
   )
 }
+
+function summaryTemplate({
+  inputAmount,
+  outputAmount,
+  srcChainData,
+  dstChainData,
+}: OrderSummaryTemplateProps): ReactNode {
+  return (
+    <>
+      <Trans>Sell</Trans> {inputAmount}{' '}
+      {srcChainData && (
+        <>
+          ({srcChainData.label}) <Trans>for a total of</Trans> {outputAmount}{' '}
+          {dstChainData && <> ({dstChainData.label})</>}
+        </>
+      )}
+    </>
+  )
+}