feat(twap): add recipient to summary in cancel modal

src/common/pure/CancellationModal/RequestCancellationModal.tsx

@@ -64,6 +64,7 @@ const CancellationSummary = styled.span`
   margin: 0;
   border-radius: 6px;
   background: ${({ theme }) => theme.grey1};
+  line-height: 1.6;
 `
 
 const OrderTypeDetails = styled.div`

src/legacy/state/orders/updaters/utils.ts

@@ -4,6 +4,7 @@ import { EnrichedOrder, OrderKind } from '@cowprotocol/cow-sdk'
 import { Order, OrderFulfillmentData, OrderStatus } from 'legacy/state/orders/actions'
 import { classifyOrder, OrderTransitionStatus } from 'legacy/state/orders/utils'
 import { stringToCurrency } from 'legacy/state/swap/extension'
+import { shortenAddress } from 'legacy/utils'
 
 import { getOrder, OrderID } from 'api/gnosisProtocol'
 import { formatTokenAmount } from 'utils/amountFormat'
@@ -25,8 +26,17 @@ export function computeOrderSummary({
   // if we can find the order from the API
   // and our specific order exists in our state, let's use that
   if (orderFromApi) {
-    const { buyToken, sellToken, sellAmount, feeAmount, buyAmount, executedBuyAmount, executedSellAmount } =
-      orderFromApi
+    const {
+      buyToken,
+      sellToken,
+      sellAmount,
+      feeAmount,
+      buyAmount,
+      executedBuyAmount,
+      executedSellAmount,
+      owner,
+      receiver,
+    } = orderFromApi
 
     if (orderFromStore) {
       const { inputToken, outputToken, status, kind } = orderFromStore
@@ -49,6 +59,10 @@ export function computeOrderSummary({
       // We only have the API order info, let's at least use that
       summary = `Swap ${sellToken} for ${buyToken}`
     }
+
+    if (owner && receiver && receiver !== owner) {
+      summary += ` to ${shortenAddress(receiver)}`
+    }
   } else {
     console.log(`[state:orders:updater] computeFulfilledSummary::API data not yet in sync with blockchain`)
   }

src/modules/twap/utils/emulateTwapAsOrder.ts

@@ -13,7 +13,7 @@ const statusMap: Record<TwapOrderStatus, OrderStatus> = {
 
 export function emulateTwapAsOrder(item: TwapOrderItem): EnrichedOrder {
   const { safeAddress, id, status, executionInfo } = item
-  const { sellToken, buyToken, partSellAmount, minPartLimit, n, t, appData } = item.order
+  const { sellToken, buyToken, partSellAmount, minPartLimit, n, t, appData, receiver } = item.order
   const numOfParts = BigInt(n)
   const sellAmountValue = BigInt(partSellAmount) * numOfParts
   const buyAmount = BigInt(minPartLimit) * numOfParts
@@ -47,5 +47,6 @@ export function emulateTwapAsOrder(item: TwapOrderItem): EnrichedOrder {
     executedBuyAmount,
     executedFeeAmount,
     invalidated: status === TwapOrderStatus.Cancelling,
+    receiver,
   }
 }