feat(explorer): show network costs and protocol fee breakdown on order details

apps/explorer/src/api/operator/types.ts

@@ -1,4 +1,5 @@
 import {
+  AddressKey,
   CompetitionOrderStatus,
   EnrichedOrder,
   OrderKind,
@@ -101,6 +102,10 @@ export type Order = Pick<
   executedFeeAmount: BigNumber
   executedFee: BigNumber | null
   totalFee: BigNumber
+  // Derived client-side from the trades. Undefined when unknown; `[]` means no fee was charged.
+  protocolFees?: ProtocolFee[]
+  // Native-token wei, from the orderbook. Undefined if unsettled, or settled before it was recorded.
+  gasCost?: BigNumber
   cancelled: boolean
   status: OrderStatus
   partiallyFilled: boolean
@@ -114,8 +119,17 @@ export type Order = Pick<
 
 export type OrderCompetitionStatus = CompetitionOrderStatus
 
-// Raw API response
-export type RawOrder = EnrichedOrder
+/** One fee policy's total across all of an order's fills. */
+export type ProtocolFee = {
+  amount: BigNumber
+  tokenAddress: AddressKey
+  type: ProtocolFeeType
+  // Index in a fill's `executedProtocolFees`; preserves the order the fees were applied in.
+  position: number
+}
+
+// TODO: drop the `gasCost` intersection once `EnrichedOrder` in @cowprotocol/cow-sdk declares it.
+export type RawOrder = EnrichedOrder & { gasCost?: string | null }
 
 export type RawOrderStatusFromAPI = (typeof RAW_ORDER_STATUS)[keyof typeof RAW_ORDER_STATUS]
 
@@ -145,4 +159,11 @@ export type Trade = Pick<RawTrade, 'blockNumber' | 'logIndex' | 'owner' | 'txHas
 
 export type WithNetworkId = { networkId: Network }
 
+export enum ProtocolFeeType {
+  Surplus = 'surplus',
+  Volume = 'volume',
+  PriceImprovement = 'priceImprovement',
+  Unknown = 'unknown',
+}
+
 export type { SolverCompetitionResponse }

apps/explorer/src/components/AppDataRowContent/AppDataRowContent.tsx

@@ -2,10 +2,9 @@ import { ReactNode, useState } from 'react'
 
 import { AppDataWrapper } from 'components/common/AppDataWrapper'
 import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
+import { ShowMoreButton } from 'components/common/ShowMoreButton'
 import { useAppData } from 'hooks/useAppData'
 
-import * as styledEl from './AppDataRowContent.styles'
-
 import { AppDataContent } from '../AppData/AppDataContent'
 
 interface AppDataRowContentProps {
@@ -44,9 +43,9 @@ export function AppDataRowContent({ appData, showExpanded = false, fullAppData }
         )}
          
         {hasAppData && (
-          <styledEl.ShowMoreButton onClick={() => setShowDecodedAppData((state) => !state)}>
+          <ShowMoreButton onClick={() => setShowDecodedAppData((state) => !state)}>
             {showDecodedAppData ? '[-] Show less' : '[+] Show more'}
-          </styledEl.ShowMoreButton>
+          </ShowMoreButton>
         )}
       </>
       <div className={`hidden-content ${appDataError && 'error'}`}>

apps/explorer/src/components/orders/DetailsTable/detailsTableTooltips.tsx

@@ -64,4 +64,6 @@ export const DetailsTableTooltips = {
   filled:
     'Indicates what percentage amount this order has been filled and the amount sold/bought. Amount sold includes the fee.',
   fees: 'The amount of fees paid for this order. This will show a progressive number for orders with partial fills. Might take a few minutes to show the final value.',
+  feesBreakdown:
+    'The costs and fees charged for this order, totaled per token, with a breakdown into the on-chain network costs and each fee applied. Might take a few minutes to show the final value.',
 }

apps/explorer/src/components/orders/DetailsTable/items/CostAndFeesItem.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 
 import { GasFeeDisplay } from 'components/orders/GasFeeDisplay'
+import { useFeeDisplayFeatureFlag } from 'hooks/useFeeDisplayFeatureFlag'
 
 import { Order } from '../../../../api/operator'
 import { DetailRow } from '../../../common/DetailRow'
@@ -11,9 +12,16 @@ interface CostAndFeesItemProps {
 }
 
 export function CostAndFeesItem({ order }: CostAndFeesItemProps): ReactNode {
+  const showBreakdown = useFeeDisplayFeatureFlag()
+
   return (
-    <DetailRow label="Costs & Fees" tooltipText={DetailsTableTooltips.fees}>
-      <GasFeeDisplay order={order} />
+    // The breakdown is a total plus an expandable table, so it stacks; the legacy fee stays inline.
+    <DetailRow
+      label={showBreakdown ? 'Costs and fees' : 'Costs & Fees'}
+      tooltipText={showBreakdown ? DetailsTableTooltips.feesBreakdown : DetailsTableTooltips.fees}
+      stack={showBreakdown}
+    >
+      <GasFeeDisplay order={order} showBreakdown={showBreakdown} />
     </DetailRow>
   )
 }