feat: make fills at tooltip more explicit

cowprotocol · Jan 17, 2025 · ec992a6 · ec992a6
1 parent 33e9b87
commit ec992a6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/...nd/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/EstimatedExecutionPrice.tsx b/...nd/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/EstimatedExecutionPrice.tsx
@@ -2,14 +2,15 @@ import AlertTriangle from '@cowprotocol/assets/cow-swap/alert.svg'
 import allowanceIcon from '@cowprotocol/assets/images/icon-allowance.svg'
 import { ZERO_FRACTION } from '@cowprotocol/common-const'
 import { Command } from '@cowprotocol/types'
-import { UI, SymbolElement, TokenAmount, TokenAmountProps, HoverTooltip, ButtonSecondary } from '@cowprotocol/ui'
-import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk-core'
+import { ButtonSecondary, HoverTooltip, SymbolElement, TokenAmount, TokenAmountProps, UI } from '@cowprotocol/ui'
+import { Currency, CurrencyAmount, Fraction, Percent, Price } from '@uniswap/sdk-core'
 
 import { darken } from 'color2k'
 import SVG from 'react-inlinesvg'
 import styled from 'styled-components/macro'
+import { Nullish } from 'types'
 
-import { PENDING_EXECUTION_THRESHOLD_PERCENTAGE, HIGH_FEE_WARNING_PERCENTAGE } from 'common/constants/common'
+import { HIGH_FEE_WARNING_PERCENTAGE, PENDING_EXECUTION_THRESHOLD_PERCENTAGE } from 'common/constants/common'
 
 import * as styledEl from './styled'
 
@@ -28,6 +29,7 @@ export const EstimatedExecutionPriceWrapper = styled.span<{ hasWarning: boolean;
   }
 
   // Popover container override
+
   > div > div,
   > span {
     display: flex;
@@ -92,6 +94,8 @@ export type EstimatedExecutionPriceProps = TokenAmountProps & {
   amountDifference?: CurrencyAmount<Currency>
   percentageFee?: Percent
   amountFee?: CurrencyAmount<Currency>
+  marketPrice?: Nullish<Price<Currency, Currency>>
+  executesAtPrice?: Nullish<Price<Currency, Currency>>
   warningText?: string
   WarningTooltip?: React.FC<{ children: React.ReactNode; showIcon: boolean }>
   onApprove?: Command
@@ -107,6 +111,8 @@ export function EstimatedExecutionPrice(props: EstimatedExecutionPriceProps) {
     percentageDifference,
     amountDifference,
     percentageFee,
+    marketPrice,
+    executesAtPrice,
     amountFee,
     warningText,
     WarningTooltip,
@@ -186,15 +192,28 @@ export function EstimatedExecutionPrice(props: EstimatedExecutionPriceProps) {
                 <>The fill price of this order is close or at the market price and is expected to fill soon</>
               ) : (
                 <>
-                  Market price needs to go {marketPriceNeedsToGoDown ? 'down 📉' : 'up 📈'} by&nbsp;
+                  Current market price is&nbsp;
+                  <b>
+                    <TokenAmount amount={marketPrice} {...rest} round={false} tokenSymbol={marketPrice?.baseCurrency} />
+                  </b>
+                  and needs to go {marketPriceNeedsToGoDown ? 'down 📉' : 'up 📈'} by&nbsp;
                   <b>
                     <TokenAmount {...rest} amount={absoluteDifferenceAmount} round={false} />
                   </b>
                   &nbsp;
                   <span>
                     (<i>{percentageDifferenceInverted?.toFixed(2)}%</i>)
                   </span>
-                  &nbsp;to execute your order.
+                  to execute your order at&nbsp;
+                  <b>
+                    <TokenAmount
+                      amount={executesAtPrice}
+                      {...rest}
+                      round={false}
+                      tokenSymbol={executesAtPrice?.baseCurrency}
+                    />
+                  </b>
+                  .
                 </>
               )}
             </styledEl.ExecuteInformationTooltip>

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
@@ -3,16 +3,15 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import orderPresignaturePending from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg'
 import { ZERO_FRACTION } from '@cowprotocol/common-const'
 import { useTimeAgo } from '@cowprotocol/common-hooks'
-import { getAddress, getEtherscanLink, formatDateWithTimezone } from '@cowprotocol/common-utils'
+import { formatDateWithTimezone, getAddress, getEtherscanLink } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenLogo } from '@cowprotocol/tokens'
 import { Command, UiOrderType } from '@cowprotocol/types'
-import { UI, TokenAmount, Loader, HoverTooltip } from '@cowprotocol/ui'
-import { PercentDisplay, percentIsAlmostHundred } from '@cowprotocol/ui'
+import { HoverTooltip, Loader, PercentDisplay, percentIsAlmostHundred, TokenAmount, UI } from '@cowprotocol/ui'
 import { useIsSafeWallet } from '@cowprotocol/wallet'
 import { Currency, CurrencyAmount, Percent, Price } from '@uniswap/sdk-core'
 
-import { Clock, Zap, Check, X } from 'react-feather'
+import { Check, Clock, X, Zap } from 'react-feather'
 import SVG from 'react-inlinesvg'
 
 import { OrderStatus } from 'legacy/state/orders/actions'
@@ -21,9 +20,9 @@ import { PendingOrderPrices } from 'modules/orders/state/pendingOrdersPricesAtom
 import { getIsEthFlowOrder } from 'modules/swap/containers/EthFlowStepper'
 
 import {
-  PENDING_EXECUTION_THRESHOLD_PERCENTAGE,
-  GOOD_PRICE_THRESHOLD_PERCENTAGE,
   FAIR_PRICE_THRESHOLD_PERCENTAGE,
+  GOOD_PRICE_THRESHOLD_PERCENTAGE,
+  PENDING_EXECUTION_THRESHOLD_PERCENTAGE,
 } from 'common/constants/common'
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
 import { RateInfo } from 'common/pure/RateInfo'
@@ -289,6 +288,8 @@ export function OrderRow({
               percentageDifference={priceDiffs?.percentage}
               amountDifference={priceDiffs?.amount}
               percentageFee={feeDifference}
+              marketPrice={spotPriceInverted}
+              executesAtPrice={executionPriceInverted}
               amountFee={feeAmount}
               canShowWarning={getUiOrderType(order) !== UiOrderType.SWAP && !isUnfillable}
               isUnfillable={withWarning}