feat(twap): add missing tooltips

src/modules/ordersTable/pure/ReceiptModal/fields/SafeTxFields.tsx

@@ -31,20 +31,28 @@ export function SafeTxFields(props: SafeTxFieldsProps) {
   return (
     <>
       <Field>
-        <FieldLabel label="Safe transaction" tooltip="TODO: set tooltip" prefix={safeLogoImg} />
+        <FieldLabel label="Safe transaction" tooltip="The hash for this Safe transaction." prefix={safeLogoImg} />
         <div>
           <span>{safeTxHash.slice(0, 8)}</span> {' - '}
           <SafeWalletLink chainId={chainId} safeTransaction={safeTransaction} />
         </div>
       </Field>
 
       <Field>
-        <FieldLabel label="Safe nonce" tooltip="TODO: set tooltip" prefix={safeLogoImg} />
+        <FieldLabel
+          label="Safe nonce"
+          tooltip='Safe contracts have a so-called "nonce." This is to ensure that each transaction can be executed only once so no replay attacks are possible.'
+          prefix={safeLogoImg}
+        />
         <span>{nonce}</span>
       </Field>
 
       <Field>
-        <FieldLabel label="Safe confirmed signatures" tooltip="TODO: set tooltip" prefix={safeLogoImg} />
+        <FieldLabel
+          label="Safe confirmed signatures"
+          tooltip="The number of signers who have confirmed this transaction versus the number of signer confirmations needed."
+          prefix={safeLogoImg}
+        />
         <span>
           {confirmations} / {confirmationsRequired}
         </span>

src/modules/trade/containers/TradeBasicConfirmDetails/LimitPriceRow.tsx

@@ -12,15 +12,17 @@ import { RateWrapper } from 'common/pure/RateInfo'
 type Props = {
   price: Nullish<Price<Currency, Currency>>
   isInvertedState: [boolean, Dispatch<SetStateAction<boolean>>]
+  limitPriceLabel?: React.ReactNode
+  limitPriceTooltip?: React.ReactNode
 }
 
 export function LimitPriceRow(props: Props) {
-  const { price, isInvertedState } = props
+  const { price, isInvertedState, limitPriceLabel = 'Limit price', limitPriceTooltip = 'The limit price' } = props
   const [isInverted, setIsInverted] = isInvertedState
 
   return (
     <RateWrapper onClick={() => setIsInverted((curr) => !curr)}>
-      <ConfirmDetailsItem tooltip="TODO: limit price tooltip text" label="Limit price (incl fee/slippage)">
+      <ConfirmDetailsItem label={limitPriceLabel} tooltip={limitPriceTooltip}>
         {price ? (
           <ExecutionPrice executionPrice={price} isInverted={isInverted} showBaseCurrency separatorSymbol="=" />
         ) : (

src/modules/trade/containers/TradeBasicConfirmDetails/index.tsx

@@ -25,14 +25,20 @@ type Props = {
 }
 
 type AdditionalProps = {
-  priceLabel?: string | undefined
+  priceLabel?: React.ReactNode
+  minReceivedLabel?: React.ReactNode
+  minReceivedTooltip?: React.ReactNode
+  limitPriceLabel?: React.ReactNode
+  limitPriceTooltip?: React.ReactNode
 }
 
 export function TradeBasicConfirmDetails(props: Props) {
   const { rateInfoParams, minReceiveAmount, isInvertedState, slippage, additionalProps } = props
   const { inputCurrencyAmount } = rateInfoParams
 
   const priceLabel = additionalProps?.priceLabel || 'Price'
+  const minReceivedLabel = additionalProps?.minReceivedLabel || 'Min received (incl. fee)'
+  const minReceivedTooltip = additionalProps?.minReceivedTooltip || 'This is the minimum amount that you will receive.'
 
   const minReceivedUsdAmount = useHigherUSDValue(minReceiveAmount)
 
@@ -53,14 +59,14 @@ export function TradeBasicConfirmDetails(props: Props) {
       <SlippageRow slippage={slippage} />
 
       {/* Limit Price */}
-      <LimitPriceRow price={limitPrice} isInvertedState={isInvertedState} />
+      <LimitPriceRow price={limitPrice} isInvertedState={isInvertedState} {...additionalProps} />
 
       {/* Min received */}
       <ReviewOrderModalAmountRow
         amount={minReceiveAmount}
         fiatAmount={minReceivedUsdAmount}
-        tooltip="TODO: Min received tooltip"
-        label="Min received (incl. fee/slippage)"
+        tooltip={minReceivedTooltip}
+        label={minReceivedLabel}
       />
     </styledEl.Wrapper>
   )

src/modules/trade/pure/ConfirmDetailsItem/index.tsx

@@ -11,7 +11,7 @@ import { Content, Row, Wrapper } from './styled'
 
 export type ConfirmDetailsItemProps = {
   children: ReactNode
-  label?: string
+  label?: ReactNode
   tooltip?: ReactNode
   withArrow?: boolean
   fiatAmount?: string

src/modules/trade/pure/ReviewOrderModalAmountRow/index.tsx

@@ -13,7 +13,7 @@ export type ReviewOrderAmountRowProps = {
   amount: Nullish<CurrencyAmount<Currency>>
   fiatAmount?: Nullish<CurrencyAmount<Currency>>
   tooltip?: ReactNode
-  label: string
+  label: ReactNode
   isAmountAccurate?: boolean
 }
 

src/modules/twap/containers/TwapConfirmModal/TwapConfirmDetails.tsx

@@ -47,31 +47,43 @@ export const TwapConfirmDetails = React.memo(function TwapConfirmDetails(props:
       <ReviewOrderModalAmountRow
         amount={inputPartAmount}
         fiatAmount={inputFiatAmount}
-        tooltip="TODO: add tooltip"
+        tooltip="This is the amount that will be sold in each part of the TWAP order."
         label={'Sell' + amountLabelSuffix}
       />
 
       {/* Buy amount per part */}
       <ReviewOrderModalAmountRow
         amount={outputPartAmount}
         fiatAmount={outputFiatAmount}
-        tooltip="TODO: add tooltip"
+        tooltip="This is the estimated amount you will receive for each part of the TWAP order."
         label={'Buy' + amountLabelSuffix}
         isAmountAccurate={false}
       />
 
       {/* Start time */}
-      <ConfirmDetailsItem tooltip="TODO: add tooltip" label={'Start time first' + partsSuffix} withArrow={false}>
+      <ConfirmDetailsItem
+        tooltip="The first part of your TWAP order will become active as soon as you confirm the order below."
+        label={'Start time first' + partsSuffix}
+        withArrow={false}
+      >
         Now
       </ConfirmDetailsItem>
 
       {/* Part duration */}
-      <ConfirmDetailsItem tooltip="TODO: add tooltip" label="Part duration" withArrow={false}>
+      <ConfirmDetailsItem
+        tooltip="The time each part of your TWAP order will remain active."
+        label="Part duration"
+        withArrow={false}
+      >
         {partDurationDisplay}
       </ConfirmDetailsItem>
 
       {/* Total duration */}
-      <ConfirmDetailsItem tooltip="TODO: add tooltip" label="Total duration" withArrow={false}>
+      <ConfirmDetailsItem
+        tooltip="The time before your total TWAP order ends."
+        label="Total duration"
+        withArrow={false}
+      >
         {totalDurationDisplay}
       </ConfirmDetailsItem>
     </Wrapper>

src/modules/twap/containers/TwapConfirmModal/index.tsx

@@ -89,7 +89,19 @@ export function TwapConfirmModal({ fallbackHandlerIsNotSet }: TwapConfirmModalPr
             minReceiveAmount={minReceivedAmount}
             isInvertedState={isInvertedState}
             slippage={slippage}
-            additionalProps={{ priceLabel: 'Price (incl. fee)' }}
+            additionalProps={{
+              priceLabel: 'Price (incl. fee)',
+              minReceivedLabel: 'Min received (incl. fee/slippage)',
+              minReceivedTooltip:
+                'This is the minimum amount that you will receive across your entire TWAP order, assuming all parts of the order execute.',
+              limitPriceLabel: 'Limit price (incl fee/slippage)',
+              limitPriceTooltip: (
+                <>
+                  If CoW Swap cannot get this price or better after fees and slippage are taken into account, your TWAP
+                  will not execute. CoW Swap will <strong>always</strong> improve on this price if possible.
+                </>
+              ),
+            }}
           />
           <TwapConfirmDetails
             startTime={twapOrder?.startTime}