feat: add text tooltips to price change and expando fields (#566)

src/components/Swap/Input.tsx

@@ -164,7 +164,10 @@ export function FieldWrapper({
           <Row>
             <USDC isLoading={isRouteLoading}>
               {usdc && `${formatCurrencyAmount(usdc, NumberType.FiatTokenQuantity)}`}
-              <PriceImpactRow impact={fiatValueChange} />
+              <PriceImpactRow
+                impact={fiatValueChange}
+                tooltipText={t`The estimated difference between the USD values of input and output amounts.`}
+              />
             </USDC>
             {balance && (
               <Row gap={0.5}>

src/components/Swap/PriceImpactRow.tsx

@@ -1,24 +1,25 @@
 import { Trans } from '@lingui/macro'
 import { formatPriceImpact } from '@uniswap/conedison/format'
 import Row from 'components/Row'
-import Tooltip, { SmallToolTipBody } from 'components/Tooltip'
+import Tooltip, { SmallToolTipBody, TooltipText } from 'components/Tooltip'
 import { PriceImpact } from 'hooks/usePriceImpact'
 import { AlertTriangle } from 'icons'
 import { ThemedText } from 'theme'
 
 interface PriceImpactProps {
   impact: PriceImpact | undefined | null
+  tooltipText?: string
   reverse?: boolean
 }
 
-export function PriceImpactRow({ impact, reverse }: PriceImpactProps) {
+export function PriceImpactRow({ impact, reverse, tooltipText }: PriceImpactProps) {
   if (!impact) {
     return null
   }
   return (
     <Row gap={0.25} flex align="center" flow={reverse ? 'row-reverse' : 'row wrap'}>
       <ThemedText.Body2 userSelect={false} color={impact.warning ?? 'hint'}>
-        ({formatPriceImpact(impact?.percent)})
+        <TooltipText text={`(${formatPriceImpact(impact?.percent)})`}>{tooltipText}</TooltipText>
       </ThemedText.Body2>
       {impact?.warning && (
         <Tooltip icon={AlertTriangle} iconProps={{ color: impact.warning }} data-testid="alert-tooltip">

src/components/Swap/Toolbar/ToolbarTradeSummary.tsx

@@ -1,6 +1,6 @@
 import Column from 'components/Column'
 import Row from 'components/Row'
-import Tooltip from 'components/Tooltip'
+import Tooltip, { TooltipText } from 'components/Tooltip'
 import { Icon } from 'icons'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
@@ -31,7 +31,6 @@ export interface SummaryRowProps {
   color?: Color
   nameTooltip?: {
     content: ReactNode
-    icon: Icon
   }
   valueTooltip?: {
     content: ReactNode
@@ -44,10 +43,11 @@ function SummaryRow({ name, value, color, nameTooltip, valueTooltip }: SummaryRo
     <Row>
       {nameTooltip ? (
         <Row gap={0.25}>
-          <TradeAttributeName color={color}>{name}</TradeAttributeName>
-          <Tooltip icon={nameTooltip.icon} iconProps={{ color }} placement="auto">
-            {nameTooltip.content}
-          </Tooltip>
+          <TradeAttributeName color={color}>
+            <TooltipText text={name} placement="top">
+              <ThemedText.Caption>{nameTooltip.content}</ThemedText.Caption>
+            </TooltipText>
+          </TradeAttributeName>
         </Row>
       ) : (
         <TradeAttributeName color={color}>{name}</TradeAttributeName>

src/components/Swap/Toolbar/index.tsx

@@ -5,14 +5,14 @@ import Column from 'components/Column'
 import Expando from 'components/Expando'
 import { ChainError, useIsAmountPopulated, useSwapInfo } from 'hooks/swap'
 import { useIsWrap } from 'hooks/swap/useWrapCallback'
-import { AlertTriangle, Info } from 'icons'
+import { AlertTriangle } from 'icons'
 import { memo, ReactNode, useCallback, useContext, useMemo } from 'react'
 import { TradeState } from 'state/routing/types'
 import { Field } from 'state/swap'
 import styled from 'styled-components/macro'
 
 import Row from '../../Row'
-import SwapInputOutputEstimate, { getEstimateMessage } from '../Summary/Estimate'
+import { getEstimateMessage } from '../Summary/Estimate'
 import SwapActionButton from '../SwapActionButton'
 import * as Caption from './Caption'
 import { Context as ToolbarContext, Provider as ToolbarContextProvider } from './ToolbarContext'
@@ -113,15 +113,17 @@ function CaptionRow() {
 
   const tradeSummaryRows: SummaryRowProps[] = useMemo(() => {
     const currencySymbol = trade?.outputAmount?.currency.symbol ?? ''
-    const { descriptor, value } = getEstimateMessage(trade, slippage)
+    const { descriptor, value, estimateMessage } = getEstimateMessage(trade, slippage)
     const rows: SummaryRowProps[] = [
       {
         name: t`Network fee`,
+        nameTooltip: { content: t`The fee paid to miners to process your transaction. This must be paid in ETH.` },
         value: gasUseEstimateUSD ? `~${formatCurrencyAmount(gasUseEstimateUSD, NumberType.FiatGasPrice)}` : '-',
       },
       {
         color: impact?.warning,
         name: t`Price impact`,
+        nameTooltip: { content: t`The impact your trade has on the market price of this pool.` },
         value: impact?.percent ? formatPriceImpact(impact.percent) : '-',
         valueTooltip: impact?.warning
           ? {
@@ -134,14 +136,14 @@ function CaptionRow() {
         // min/max output/input after slippage
         name: <div style={{ marginRight: '0.5em' }}>{descriptor}</div>,
         value,
+        nameTooltip: { content: estimateMessage },
       },
       {
         name: t`Expected output`,
         value: trade ? `${formatCurrencyAmount(trade?.outputAmount)} ${currencySymbol}` : '-',
         nameTooltip: trade
           ? {
-              icon: Info,
-              content: <SwapInputOutputEstimate trade={trade} slippage={slippage} />,
+              content: t`The amount you expect to receive at the current market price. You may receive less or more if the market price changes while your transaction is pending.`,
             }
           : undefined,
       },