feat: updated rate/routing tooltips (#7412)

* feat: updated routing tooltips

* refactor: gas price formatting

* fit: boolean rendering

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -14,7 +14,7 @@ import { Z_INDEX } from 'theme/zIndex'
 import { RoutingDiagramEntry } from 'utils/getRoutingDiagramEntries'
 
 import { ReactComponent as DotLine } from '../../assets/svg/dot_line.svg'
-import { MouseoverTooltip } from '../Tooltip'
+import { MouseoverTooltip, TooltipSize } from '../Tooltip'
 
 const Wrapper = styled(Box)`
   align-items: center;
@@ -142,6 +142,7 @@ function Pool({ currency0, currency1, feeAmount }: { currency0: Currency; curren
   return (
     <MouseoverTooltip
       text={<Trans>{tokenInfo0?.symbol + '/' + tokenInfo1?.symbol + ' ' + feeAmount / 10000}% pool</Trans>}
+      size={TooltipSize.ExtraSmall}
     >
       <PoolBadge>
         <Box margin="0 4px 0 12px">

src/components/swap/SwapLineItem.tsx

@@ -20,7 +20,8 @@ import { getPriceImpactColor } from 'utils/prices'
 
 import { GasBreakdownTooltip, UniswapXDescription } from './GasBreakdownTooltip'
 import { MaxSlippageTooltip } from './MaxSlippageTooltip'
-import SwapRoute from './SwapRoute'
+import { RoutingTooltip, SwapRoute } from './SwapRoute'
+import TradePrice from './TradePrice'
 
 export enum SwapLineItemType {
   EXCHANGE_RATE,
@@ -76,15 +77,6 @@ function Loading({ width = 50 }: { width?: number }) {
   return <LoadingRow data-testid="loading-row" height={15} width={width} />
 }
 
-function ExchangeRateRow({ trade }: { trade: InterfaceTrade }) {
-  const { formatNumber } = useFormatter()
-  const rate = `1 ${trade.executionPrice.quoteCurrency.symbol} = ${formatNumber({
-    input: parseFloat(trade.executionPrice.toFixed(9)),
-    type: NumberType.TokenTx,
-  })} ${trade.executionPrice.baseCurrency.symbol}`
-  return <>{rate}</>
-}
-
 function ColoredPercentRow({ percent }: { percent: Percent }) {
   const { formatSlippage } = useFormatter()
   return <ColorWrapper textColor={getPriceImpactColor(percent)}>{formatSlippage(percent)}</ColorWrapper>
@@ -122,8 +114,10 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
   switch (type) {
     case SwapLineItemType.EXCHANGE_RATE:
       return {
-        Label: () => <Trans>Exchange rate</Trans>,
-        Value: () => <ExchangeRateRow trade={trade} />,
+        Label: () => <Trans>Rate</Trans>,
+        Value: () => <TradePrice price={trade.executionPrice} />,
+        TooltipBody: !isPreview ? () => <RoutingTooltip trade={trade} /> : undefined,
+        tooltipSize: isUniswapX ? TooltipSize.Small : TooltipSize.Large,
       }
     case SwapLineItemType.NETWORK_COST:
       if (!SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)) return
@@ -185,12 +179,12 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
         loaderWidth: 70,
       }
     case SwapLineItemType.ROUTING_INFO:
-      if (isPreview) return { Label: () => <Trans>Order routing</Trans>, Value: () => <Loading /> }
+      if (isPreview || syncing) return { Label: () => <Trans>Order routing</Trans>, Value: () => <Loading /> }
       return {
         Label: () => <Trans>Order routing</Trans>,
         TooltipBody: () => {
           if (isUniswapX) return <UniswapXDescription />
-          return <SwapRoute data-testid="swap-route-info" trade={trade} syncing={syncing} />
+          return <SwapRoute data-testid="swap-route-info" trade={trade} />
         },
         tooltipSize: isUniswapX ? TooltipSize.Small : TooltipSize.Large,
         Value: () => <RouterLabel trade={trade} />,

src/components/swap/SwapRoute.tsx

 import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
 import Column from 'components/Column'
-import { LoadingRows } from 'components/Loader/styled'
 import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
+import { RowBetween } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
-import { ClassicTrade } from 'state/routing/types'
+import { ClassicTrade, SubmittableTrade } from 'state/routing/types'
+import { isClassicTrade } from 'state/routing/utils'
 import { Separator, ThemedText } from 'theme/components'
+import { NumberType, useFormatter } from 'utils/formatNumbers'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 
 import RouterLabel from '../RouterLabel'
+import { UniswapXDescription } from './GasBreakdownTooltip'
 
-export default function SwapRoute({ trade, syncing }: { trade: ClassicTrade; syncing: boolean }) {
-  const { chainId } = useWeb3React()
-  const autoRouterSupported = useAutoRouterSupported()
+// TODO(WEB-2022)
+// Can `trade.gasUseEstimateUSD` be defined when `chainId` is not in `SUPPORTED_GAS_ESTIMATE_CHAIN_IDS`?
+function useGasPrice({ gasUseEstimateUSD, inputAmount }: ClassicTrade) {
+  const { formatNumber } = useFormatter()
+  if (!gasUseEstimateUSD || !SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(inputAmount.currency.chainId)) return undefined
 
-  const routes = getRoutingDiagramEntries(trade)
+  return gasUseEstimateUSD === 0 ? '<$0.01' : formatNumber({ input: gasUseEstimateUSD, type: NumberType.FiatGasPrice })
+}
 
-  const gasPrice =
-    // TODO(WEB-2022)
-    // Can `trade.gasUseEstimateUSD` be defined when `chainId` is not in `SUPPORTED_GAS_ESTIMATE_CHAIN_IDS`?
-    trade.gasUseEstimateUSD && chainId && SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId)
-      ? trade.gasUseEstimateUSD === 0
-        ? '<$0.01'
-        : '$' + trade.gasUseEstimateUSD.toFixed(2)
-      : undefined
+function RouteLabel({ trade }: { trade: SubmittableTrade }) {
+  return (
+    <RowBetween>
+      <ThemedText.BodySmall color="neutral2">Order Routing</ThemedText.BodySmall>
+      <RouterLabel trade={trade} color="neutral1" />
+    </RowBetween>
+  )
+}
 
+function PriceImpactRow({ trade }: { trade: ClassicTrade }) {
+  const { formatPriceImpact } = useFormatter()
   return (
+    <ThemedText.BodySmall color="neutral2">
+      <RowBetween>
+        <Trans>Price Impact</Trans>
+        <div>{formatPriceImpact(trade.priceImpact)}</div>
+      </RowBetween>
+    </ThemedText.BodySmall>
+  )
+}
+
+export function RoutingTooltip({ trade }: { trade: SubmittableTrade }) {
+  return isClassicTrade(trade) ? (
+    <Column gap="md">
+      <PriceImpactRow trade={trade} />
+      <Separator />
+      <RouteLabel trade={trade} />
+      <SwapRoute trade={trade} />
+    </Column>
+  ) : (
     <Column gap="md">
-      <RouterLabel trade={trade} color="neutral2" />
+      <RouteLabel trade={trade} />
       <Separator />
-      {syncing ? (
-        <LoadingRows>
-          <div style={{ width: '100%', height: '30px' }} />
-        </LoadingRows>
-      ) : (
-        <RoutingDiagram
-          currencyIn={trade.inputAmount.currency}
-          currencyOut={trade.outputAmount.currency}
-          routes={routes}
-        />
-      )}
-      {autoRouterSupported && (
-        <>
-          <Separator />
-          {syncing ? (
-            <LoadingRows>
-              <div style={{ width: '100%', height: '15px' }} />
-            </LoadingRows>
-          ) : (
-            <ThemedText.Caption color="neutral2">
-              {gasPrice ? <Trans>Best price route costs ~{gasPrice} in gas.</Trans> : null}{' '}
-              <Trans>
-                This route optimizes your total output by considering split routes, multiple hops, and the gas cost of
-                each step.
-              </Trans>
-            </ThemedText.Caption>
-          )}
-        </>
-      )}
+      <UniswapXDescription />
+    </Column>
+  )
+}
+
+export function SwapRoute({ trade }: { trade: ClassicTrade }) {
+  const { inputAmount, outputAmount } = trade
+  const routes = getRoutingDiagramEntries(trade)
+  const gasPrice = useGasPrice(trade)
+
+  return useAutoRouterSupported() ? (
+    <Column gap="md">
+      <RoutingDiagram routes={routes} currencyIn={inputAmount.currency} currencyOut={outputAmount.currency} />
+      <ThemedText.Caption color="neutral2">
+        {Boolean(gasPrice) && <Trans>Best price route costs ~{gasPrice} in gas. </Trans>}
+        {Boolean(gasPrice) && ' '}
+        <Trans>
+          This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each
+          step.
+        </Trans>
+      </ThemedText.Caption>
     </Column>
+  ) : (
+    <RoutingDiagram routes={routes} currencyIn={inputAmount.currency} currencyOut={outputAmount.currency} />
   )
 }

src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap

@@ -146,28 +146,6 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
   fill: #7D7D7D;
 }
 
-.c20 {
-  text-align: right;
-  overflow-wrap: break-word;
-}
-
-.c19 {
-  cursor: help;
-  color: #7D7D7D;
-}
-
-.c22 {
-  background: #22222212;
-  border-radius: 8px;
-  color: #7D7D7D;
-  height: 20px;
-  padding: 0 6px;
-}
-
-.c22::after {
-  content: 'Auto';
-}
-
 .c8 {
   background-color: transparent;
   border: none;
@@ -200,6 +178,28 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
   user-select: text;
 }
 
+.c20 {
+  text-align: right;
+  overflow-wrap: break-word;
+}
+
+.c19 {
+  cursor: help;
+  color: #7D7D7D;
+}
+
+.c22 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c22::after {
+  content: 'Auto';
+}
+
 .c5 {
   padding: 0;
   -webkit-align-items: center;

src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap

@@ -1884,7 +1884,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   min-width: 0;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1908,7 +1908,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c24 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1933,14 +1933,14 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   justify-content: space-between;
 }
 
-.c26 {
+.c25 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: -1px;
 }
 
-.c26 > * {
+.c25 > * {
   margin: 1px !important;
 }
 
@@ -1952,12 +1952,6 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   color: #7D7D7D;
 }
 
-.c11 {
-  width: 100%;
-  height: 1px;
-  background-color: #22222212;
-}
-
 .c7 {
   z-index: 1070;
   pointer-events: none;
@@ -1973,13 +1967,13 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   height: inherit;
 }
 
-.c32 {
+.c31 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c32::before {
+.c31::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -1993,47 +1987,47 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   background: #FFFFFF;
 }
 
-.c32.arrow-top {
+.c31.arrow-top {
   bottom: -4px;
 }
 
-.c32.arrow-top::before {
+.c31.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c32.arrow-bottom {
+.c31.arrow-bottom {
   top: -4px;
 }
 
-.c32.arrow-bottom::before {
+.c31.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c32.arrow-left {
+.c31.arrow-left {
   right: -4px;
 }
 
-.c32.arrow-left::before {
+.c31.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c32.arrow-right {
+.c31.arrow-right {
   left: -4px;
 }
 
-.c32.arrow-right::before {
+.c31.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c31 {
-  max-width: 256px;
+.c8 {
+  max-width: 400px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 12px;
+  padding: 16px 20px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -2046,11 +2040,11 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
-.c8 {
-  max-width: 400px;
+.c30 {
+  max-width: 200px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 16px 20px;
+  padding: 8px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -2078,7 +2072,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   gap: 12px;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2099,7 +2093,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   font-weight: 535;
 }
 
-.c16 {
+.c15 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -2108,7 +2102,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   border-radius: 50%;
 }
 
-.c15 {
+.c14 {
   width: 20px;
   height: 20px;
   background: #22222212;
@@ -2118,7 +2112,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   border-radius: 50%;
 }
 
-.c14 {
+.c13 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2126,7 +2120,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   display: flex;
 }
 
-.c28 {
+.c27 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2137,16 +2131,16 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   flex-direction: row;
 }
 
-.c29 {
+.c28 {
   z-index: 1;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   left: -10px !important;
 }
 
-.c12 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2154,12 +2148,12 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: 24px 1fr 24px;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2176,7 +2170,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   position: relative;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2184,7 +2178,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   padding: 4px 4px;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2199,11 +2193,11 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   opacity: 0.5;
 }
 
-.c19 path {
+.c18 path {
   stroke: #22222212;
 }
 
-.c21 {
+.c20 {
   background-color: #F9F9F9;
   border-radius: 8px;
   display: grid;
@@ -2217,7 +2211,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   z-index: 1020;
 }
 
-.c22 {
+.c21 {
   background-color: #F9F9F9;
   border-radius: 4px;
   color: #7D7D7D;
@@ -2226,7 +2220,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   z-index: 1021;
 }
 
-.c23 {
+.c22 {
   word-break: normal;
 }
 
@@ -2278,66 +2272,58 @@ exports[`SwapLineItem.tsx exact input 1`] = `
             class="c10"
           >
             <div
-              class="c9 css-142zc9n"
-            >
-              Uniswap Client
-            </div>
-            <div
-              class="c11"
-            />
-            <div
-              class="c12 css-vurnku"
+              class="c11 css-vurnku"
             >
               <div
-                class="c0 c1 c13"
+                class="c0 c1 c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="ABC logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                     />
                   </div>
                 </div>
                 <div
-                  class="c0 c1 c17"
+                  class="c0 c1 c16"
                 >
                   <div
-                    class="c18"
+                    class="c17"
                   >
                     <svg
-                      class="c19"
+                      class="c18"
                     >
                       dot_line.svg
                     </svg>
                   </div>
                   <div
-                    class="c20 c21"
+                    class="c19 c20"
                   >
                     <div
-                      class="c20 c22"
+                      class="c19 c21"
                     >
                       <div
-                        class="c3 c23 css-1m65e73"
+                        class="c3 c22 css-1m65e73"
                       >
                         V3
                       </div>
                     </div>
                     <div
-                      class="c9 c23 css-1m65e73"
+                      class="c9 c22 css-1m65e73"
                       style="min-width: auto;"
                     >
                       100%
                     </div>
                   </div>
                   <div
-                    class="c24 c25 c26"
+                    class="c23 c24 c25"
                     style="justify-content: space-evenly; z-index: 2;"
                     width="100%"
                   >
@@ -2346,45 +2332,45 @@ exports[`SwapLineItem.tsx exact input 1`] = `
                     >
                       <div>
                         <div
-                          class="c20 c27"
+                          class="c19 c26"
                         >
                           <div
                             class="css-mbnpt3"
                           >
                             <div
-                              class="c28"
+                              class="c27"
                             >
                               <div
-                                class="c29"
+                                class="c28"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="DEF logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                     />
                                   </div>
                                 </div>
                               </div>
                               <div
-                                class="c30"
+                                class="c29"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="ABC logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                     />
                                   </div>
@@ -2393,7 +2379,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9 c23 css-1m65e73"
+                            class="c9 c22 css-1m65e73"
                           >
                             1%
                           </div>
@@ -2405,36 +2391,33 @@ exports[`SwapLineItem.tsx exact input 1`] = `
                       style="position: fixed; left: 0px; top: 0px;"
                     >
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         ABC/DEF 1% pool
                       </div>
                       <div
-                        class="c32 arrow-"
+                        class="c31 arrow-"
                         style="position: absolute;"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="DEF logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                     />
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="c11"
-            />
             <div
               class="c9 css-obwv3p"
             >
@@ -2444,7 +2427,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
         </div>
       </div>
       <div
-        class="c32 arrow-"
+        class="c31 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -3331,7 +3314,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   min-width: 0;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3355,7 +3338,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c24 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3380,14 +3363,14 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   justify-content: space-between;
 }
 
-.c26 {
+.c25 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: -1px;
 }
 
-.c26 > * {
+.c25 > * {
   margin: 1px !important;
 }
 
@@ -3399,12 +3382,6 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   color: #7D7D7D;
 }
 
-.c11 {
-  width: 100%;
-  height: 1px;
-  background-color: #22222212;
-}
-
 .c7 {
   z-index: 1070;
   pointer-events: none;
@@ -3420,13 +3397,13 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   height: inherit;
 }
 
-.c32 {
+.c31 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c32::before {
+.c31::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -3440,47 +3417,47 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   background: #FFFFFF;
 }
 
-.c32.arrow-top {
+.c31.arrow-top {
   bottom: -4px;
 }
 
-.c32.arrow-top::before {
+.c31.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c32.arrow-bottom {
+.c31.arrow-bottom {
   top: -4px;
 }
 
-.c32.arrow-bottom::before {
+.c31.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c32.arrow-left {
+.c31.arrow-left {
   right: -4px;
 }
 
-.c32.arrow-left::before {
+.c31.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c32.arrow-right {
+.c31.arrow-right {
   left: -4px;
 }
 
-.c32.arrow-right::before {
+.c31.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c31 {
-  max-width: 256px;
+.c8 {
+  max-width: 400px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 12px;
+  padding: 16px 20px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -3493,11 +3470,11 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
-.c8 {
-  max-width: 400px;
+.c30 {
+  max-width: 200px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 16px 20px;
+  padding: 8px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -3525,7 +3502,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   gap: 12px;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3546,7 +3523,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   font-weight: 535;
 }
 
-.c16 {
+.c15 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -3555,7 +3532,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   border-radius: 50%;
 }
 
-.c15 {
+.c14 {
   width: 20px;
   height: 20px;
   background: #22222212;
@@ -3565,7 +3542,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   border-radius: 50%;
 }
 
-.c14 {
+.c13 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3573,7 +3550,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   display: flex;
 }
 
-.c28 {
+.c27 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3584,16 +3561,16 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   flex-direction: row;
 }
 
-.c29 {
+.c28 {
   z-index: 1;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   left: -10px !important;
 }
 
-.c12 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3601,12 +3578,12 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: 24px 1fr 24px;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3623,7 +3600,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   position: relative;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3631,7 +3608,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   padding: 4px 4px;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3646,11 +3623,11 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   opacity: 0.5;
 }
 
-.c19 path {
+.c18 path {
   stroke: #22222212;
 }
 
-.c21 {
+.c20 {
   background-color: #F9F9F9;
   border-radius: 8px;
   display: grid;
@@ -3664,7 +3641,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   z-index: 1020;
 }
 
-.c22 {
+.c21 {
   background-color: #F9F9F9;
   border-radius: 4px;
   color: #7D7D7D;
@@ -3673,7 +3650,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   z-index: 1021;
 }
 
-.c23 {
+.c22 {
   word-break: normal;
 }
 
@@ -3725,66 +3702,58 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
             class="c10"
           >
             <div
-              class="c9 css-142zc9n"
-            >
-              Uniswap API
-            </div>
-            <div
-              class="c11"
-            />
-            <div
-              class="c12 css-vurnku"
+              class="c11 css-vurnku"
             >
               <div
-                class="c0 c1 c13"
+                class="c0 c1 c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="ABC logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                     />
                   </div>
                 </div>
                 <div
-                  class="c0 c1 c17"
+                  class="c0 c1 c16"
                 >
                   <div
-                    class="c18"
+                    class="c17"
                   >
                     <svg
-                      class="c19"
+                      class="c18"
                     >
                       dot_line.svg
                     </svg>
                   </div>
                   <div
-                    class="c20 c21"
+                    class="c19 c20"
                   >
                     <div
-                      class="c20 c22"
+                      class="c19 c21"
                     >
                       <div
-                        class="c3 c23 css-1m65e73"
+                        class="c3 c22 css-1m65e73"
                       >
                         V3
                       </div>
                     </div>
                     <div
-                      class="c9 c23 css-1m65e73"
+                      class="c9 c22 css-1m65e73"
                       style="min-width: auto;"
                     >
                       100%
                     </div>
                   </div>
                   <div
-                    class="c24 c25 c26"
+                    class="c23 c24 c25"
                     style="justify-content: space-evenly; z-index: 2;"
                     width="100%"
                   >
@@ -3793,45 +3762,45 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
                     >
                       <div>
                         <div
-                          class="c20 c27"
+                          class="c19 c26"
                         >
                           <div
                             class="css-mbnpt3"
                           >
                             <div
-                              class="c28"
+                              class="c27"
                             >
                               <div
-                                class="c29"
+                                class="c28"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="DEF logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                     />
                                   </div>
                                 </div>
                               </div>
                               <div
-                                class="c30"
+                                class="c29"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="ABC logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                     />
                                   </div>
@@ -3840,7 +3809,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9 c23 css-1m65e73"
+                            class="c9 c22 css-1m65e73"
                           >
                             1%
                           </div>
@@ -3852,36 +3821,33 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
                       style="position: fixed; left: 0px; top: 0px;"
                     >
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         ABC/DEF 1% pool
                       </div>
                       <div
-                        class="c32 arrow-"
+                        class="c31 arrow-"
                         style="position: absolute;"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="DEF logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                     />
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="c11"
-            />
             <div
               class="c9 css-obwv3p"
             >
@@ -3891,7 +3857,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
         </div>
       </div>
       <div
-        class="c32 arrow-"
+        class="c31 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -4778,7 +4744,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   min-width: 0;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4802,7 +4768,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c24 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4827,14 +4793,14 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   justify-content: space-between;
 }
 
-.c26 {
+.c25 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: -1px;
 }
 
-.c26 > * {
+.c25 > * {
   margin: 1px !important;
 }
 
@@ -4846,12 +4812,6 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   color: #7D7D7D;
 }
 
-.c11 {
-  width: 100%;
-  height: 1px;
-  background-color: #22222212;
-}
-
 .c7 {
   z-index: 1070;
   pointer-events: none;
@@ -4867,13 +4827,13 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   height: inherit;
 }
 
-.c32 {
+.c31 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c32::before {
+.c31::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -4887,47 +4847,47 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   background: #FFFFFF;
 }
 
-.c32.arrow-top {
+.c31.arrow-top {
   bottom: -4px;
 }
 
-.c32.arrow-top::before {
+.c31.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c32.arrow-bottom {
+.c31.arrow-bottom {
   top: -4px;
 }
 
-.c32.arrow-bottom::before {
+.c31.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c32.arrow-left {
+.c31.arrow-left {
   right: -4px;
 }
 
-.c32.arrow-left::before {
+.c31.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c32.arrow-right {
+.c31.arrow-right {
   left: -4px;
 }
 
-.c32.arrow-right::before {
+.c31.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c31 {
-  max-width: 256px;
+.c8 {
+  max-width: 400px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 12px;
+  padding: 16px 20px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -4940,11 +4900,11 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
-.c8 {
-  max-width: 400px;
+.c30 {
+  max-width: 200px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 16px 20px;
+  padding: 8px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -4972,7 +4932,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   gap: 12px;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4993,7 +4953,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   font-weight: 535;
 }
 
-.c16 {
+.c15 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -5002,7 +4962,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   border-radius: 50%;
 }
 
-.c15 {
+.c14 {
   width: 20px;
   height: 20px;
   background: #22222212;
@@ -5012,7 +4972,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   border-radius: 50%;
 }
 
-.c14 {
+.c13 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5020,7 +4980,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   display: flex;
 }
 
-.c28 {
+.c27 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5031,16 +4991,16 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   flex-direction: row;
 }
 
-.c29 {
+.c28 {
   z-index: 1;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   left: -10px !important;
 }
 
-.c12 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -5048,12 +5008,12 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: 24px 1fr 24px;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -5070,7 +5030,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   position: relative;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5078,7 +5038,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   padding: 4px 4px;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5093,11 +5053,11 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   opacity: 0.5;
 }
 
-.c19 path {
+.c18 path {
   stroke: #22222212;
 }
 
-.c21 {
+.c20 {
   background-color: #F9F9F9;
   border-radius: 8px;
   display: grid;
@@ -5111,7 +5071,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   z-index: 1020;
 }
 
-.c22 {
+.c21 {
   background-color: #F9F9F9;
   border-radius: 4px;
   color: #7D7D7D;
@@ -5120,7 +5080,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   z-index: 1021;
 }
 
-.c23 {
+.c22 {
   word-break: normal;
 }
 
@@ -5172,66 +5132,58 @@ exports[`SwapLineItem.tsx exact output 1`] = `
             class="c10"
           >
             <div
-              class="c9 css-142zc9n"
-            >
-              Uniswap Client
-            </div>
-            <div
-              class="c11"
-            />
-            <div
-              class="c12 css-vurnku"
+              class="c11 css-vurnku"
             >
               <div
-                class="c0 c1 c13"
+                class="c0 c1 c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="ABC logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                     />
                   </div>
                 </div>
                 <div
-                  class="c0 c1 c17"
+                  class="c0 c1 c16"
                 >
                   <div
-                    class="c18"
+                    class="c17"
                   >
                     <svg
-                      class="c19"
+                      class="c18"
                     >
                       dot_line.svg
                     </svg>
                   </div>
                   <div
-                    class="c20 c21"
+                    class="c19 c20"
                   >
                     <div
-                      class="c20 c22"
+                      class="c19 c21"
                     >
                       <div
-                        class="c3 c23 css-1m65e73"
+                        class="c3 c22 css-1m65e73"
                       >
                         V3
                       </div>
                     </div>
                     <div
-                      class="c9 c23 css-1m65e73"
+                      class="c9 c22 css-1m65e73"
                       style="min-width: auto;"
                     >
                       100%
                     </div>
                   </div>
                   <div
-                    class="c24 c25 c26"
+                    class="c23 c24 c25"
                     style="justify-content: space-evenly; z-index: 2;"
                     width="100%"
                   >
@@ -5240,45 +5192,45 @@ exports[`SwapLineItem.tsx exact output 1`] = `
                     >
                       <div>
                         <div
-                          class="c20 c27"
+                          class="c19 c26"
                         >
                           <div
                             class="css-mbnpt3"
                           >
                             <div
-                              class="c28"
+                              class="c27"
                             >
                               <div
-                                class="c29"
+                                class="c28"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="GHI logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
                                     />
                                   </div>
                                 </div>
                               </div>
                               <div
-                                class="c30"
+                                class="c29"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="ABC logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                     />
                                   </div>
@@ -5287,7 +5239,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9 c23 css-1m65e73"
+                            class="c9 c22 css-1m65e73"
                           >
                             0.3%
                           </div>
@@ -5299,46 +5251,43 @@ exports[`SwapLineItem.tsx exact output 1`] = `
                       style="position: fixed; left: 0px; top: 0px;"
                     >
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         ABC/GHI 0.3% pool
                       </div>
                       <div
-                        class="c32 arrow-"
+                        class="c31 arrow-"
                         style="position: absolute;"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="GHI logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
                     />
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="c11"
-            />
             <div
               class="c9 css-obwv3p"
             >
-               This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
+              This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
             </div>
           </div>
         </div>
       </div>
       <div
-        class="c32 arrow-"
+        class="c31 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -6431,7 +6380,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   min-width: 0;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -6455,7 +6404,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c24 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6480,14 +6429,14 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   justify-content: space-between;
 }
 
-.c26 {
+.c25 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: -1px;
 }
 
-.c26 > * {
+.c25 > * {
   margin: 1px !important;
 }
 
@@ -6499,12 +6448,6 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   color: #7D7D7D;
 }
 
-.c11 {
-  width: 100%;
-  height: 1px;
-  background-color: #22222212;
-}
-
 .c7 {
   z-index: 1070;
   pointer-events: none;
@@ -6520,13 +6463,13 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   height: inherit;
 }
 
-.c32 {
+.c31 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c32::before {
+.c31::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -6540,47 +6483,47 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   background: #FFFFFF;
 }
 
-.c32.arrow-top {
+.c31.arrow-top {
   bottom: -4px;
 }
 
-.c32.arrow-top::before {
+.c31.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c32.arrow-bottom {
+.c31.arrow-bottom {
   top: -4px;
 }
 
-.c32.arrow-bottom::before {
+.c31.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c32.arrow-left {
+.c31.arrow-left {
   right: -4px;
 }
 
-.c32.arrow-left::before {
+.c31.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c32.arrow-right {
+.c31.arrow-right {
   left: -4px;
 }
 
-.c32.arrow-right::before {
+.c31.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c31 {
-  max-width: 256px;
+.c8 {
+  max-width: 400px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 12px;
+  padding: 16px 20px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -6593,11 +6536,11 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
-.c8 {
-  max-width: 400px;
+.c30 {
+  max-width: 200px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 16px 20px;
+  padding: 8px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -6625,7 +6568,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   gap: 12px;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -6646,7 +6589,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   font-weight: 535;
 }
 
-.c16 {
+.c15 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -6655,7 +6598,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   border-radius: 50%;
 }
 
-.c15 {
+.c14 {
   width: 20px;
   height: 20px;
   background: #22222212;
@@ -6665,7 +6608,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   border-radius: 50%;
 }
 
-.c14 {
+.c13 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6673,7 +6616,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   display: flex;
 }
 
-.c28 {
+.c27 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6684,16 +6627,16 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   flex-direction: row;
 }
 
-.c29 {
+.c28 {
   z-index: 1;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   left: -10px !important;
 }
 
-.c12 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -6701,12 +6644,12 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: 24px 1fr 24px;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -6723,7 +6666,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   position: relative;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6731,7 +6674,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   padding: 4px 4px;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6746,11 +6689,11 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   opacity: 0.5;
 }
 
-.c19 path {
+.c18 path {
   stroke: #22222212;
 }
 
-.c21 {
+.c20 {
   background-color: #F9F9F9;
   border-radius: 8px;
   display: grid;
@@ -6764,7 +6707,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   z-index: 1020;
 }
 
-.c22 {
+.c21 {
   background-color: #F9F9F9;
   border-radius: 4px;
   color: #7D7D7D;
@@ -6773,7 +6716,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   z-index: 1021;
 }
 
-.c23 {
+.c22 {
   word-break: normal;
 }
 
@@ -6825,66 +6768,58 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
             class="c10"
           >
             <div
-              class="c9 css-142zc9n"
-            >
-              Uniswap API
-            </div>
-            <div
-              class="c11"
-            />
-            <div
-              class="c12 css-vurnku"
+              class="c11 css-vurnku"
             >
               <div
-                class="c0 c1 c13"
+                class="c0 c1 c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="ABC logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                     />
                   </div>
                 </div>
                 <div
-                  class="c0 c1 c17"
+                  class="c0 c1 c16"
                 >
                   <div
-                    class="c18"
+                    class="c17"
                   >
                     <svg
-                      class="c19"
+                      class="c18"
                     >
                       dot_line.svg
                     </svg>
                   </div>
                   <div
-                    class="c20 c21"
+                    class="c19 c20"
                   >
                     <div
-                      class="c20 c22"
+                      class="c19 c21"
                     >
                       <div
-                        class="c3 c23 css-1m65e73"
+                        class="c3 c22 css-1m65e73"
                       >
                         V3
                       </div>
                     </div>
                     <div
-                      class="c9 c23 css-1m65e73"
+                      class="c9 c22 css-1m65e73"
                       style="min-width: auto;"
                     >
                       100%
                     </div>
                   </div>
                   <div
-                    class="c24 c25 c26"
+                    class="c23 c24 c25"
                     style="justify-content: space-evenly; z-index: 2;"
                     width="100%"
                   >
@@ -6893,45 +6828,45 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
                     >
                       <div>
                         <div
-                          class="c20 c27"
+                          class="c19 c26"
                         >
                           <div
                             class="css-mbnpt3"
                           >
                             <div
-                              class="c28"
+                              class="c27"
                             >
                               <div
-                                class="c29"
+                                class="c28"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="DEF logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                     />
                                   </div>
                                 </div>
                               </div>
                               <div
-                                class="c30"
+                                class="c29"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="ABC logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                     />
                                   </div>
@@ -6940,7 +6875,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9 c23 css-1m65e73"
+                            class="c9 c22 css-1m65e73"
                           >
                             1%
                           </div>
@@ -6952,36 +6887,33 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
                       style="position: fixed; left: 0px; top: 0px;"
                     >
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         ABC/DEF 1% pool
                       </div>
                       <div
-                        class="c32 arrow-"
+                        class="c31 arrow-"
                         style="position: absolute;"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="DEF logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                     />
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="c11"
-            />
             <div
               class="c9 css-obwv3p"
             >
@@ -6991,7 +6923,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
         </div>
       </div>
       <div
-        class="c32 arrow-"
+        class="c31 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -8084,7 +8016,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   min-width: 0;
 }
 
-.c24 {
+.c23 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -8108,7 +8040,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c24 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8133,14 +8065,14 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   justify-content: space-between;
 }
 
-.c26 {
+.c25 {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: -1px;
 }
 
-.c26 > * {
+.c25 > * {
   margin: 1px !important;
 }
 
@@ -8152,12 +8084,6 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   color: #7D7D7D;
 }
 
-.c11 {
-  width: 100%;
-  height: 1px;
-  background-color: #22222212;
-}
-
 .c7 {
   z-index: 1070;
   pointer-events: none;
@@ -8173,13 +8099,13 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   height: inherit;
 }
 
-.c32 {
+.c31 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c32::before {
+.c31::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -8193,47 +8119,47 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   background: #FFFFFF;
 }
 
-.c32.arrow-top {
+.c31.arrow-top {
   bottom: -4px;
 }
 
-.c32.arrow-top::before {
+.c31.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c32.arrow-bottom {
+.c31.arrow-bottom {
   top: -4px;
 }
 
-.c32.arrow-bottom::before {
+.c31.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c32.arrow-left {
+.c31.arrow-left {
   right: -4px;
 }
 
-.c32.arrow-left::before {
+.c31.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c32.arrow-right {
+.c31.arrow-right {
   left: -4px;
 }
 
-.c32.arrow-right::before {
+.c31.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c31 {
-  max-width: 256px;
+.c8 {
+  max-width: 400px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 12px;
+  padding: 16px 20px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -8246,11 +8172,11 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
-.c8 {
-  max-width: 400px;
+.c30 {
+  max-width: 200px;
   width: calc(100vw - 16px);
   cursor: default;
-  padding: 16px 20px;
+  padding: 8px;
   pointer-events: auto;
   color: #222222;
   font-weight: 485;
@@ -8278,7 +8204,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   gap: 12px;
 }
 
-.c20 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8299,7 +8225,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   font-weight: 535;
 }
 
-.c16 {
+.c15 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -8308,7 +8234,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   border-radius: 50%;
 }
 
-.c15 {
+.c14 {
   width: 20px;
   height: 20px;
   background: #22222212;
@@ -8318,7 +8244,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   border-radius: 50%;
 }
 
-.c14 {
+.c13 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8326,7 +8252,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   display: flex;
 }
 
-.c28 {
+.c27 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -8337,16 +8263,16 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   flex-direction: row;
 }
 
-.c29 {
+.c28 {
   z-index: 1;
 }
 
-.c30 {
+.c29 {
   position: absolute;
   left: -10px !important;
 }
 
-.c12 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8354,12 +8280,12 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   width: 100%;
 }
 
-.c13 {
+.c12 {
   display: grid;
   grid-template-columns: 24px 1fr 24px;
 }
 
-.c17 {
+.c16 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -8376,7 +8302,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   position: relative;
 }
 
-.c27 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8384,7 +8310,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   padding: 4px 4px;
 }
 
-.c18 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8399,11 +8325,11 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   opacity: 0.5;
 }
 
-.c19 path {
+.c18 path {
   stroke: #22222212;
 }
 
-.c21 {
+.c20 {
   background-color: #F9F9F9;
   border-radius: 8px;
   display: grid;
@@ -8417,7 +8343,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   z-index: 1020;
 }
 
-.c22 {
+.c21 {
   background-color: #F9F9F9;
   border-radius: 4px;
   color: #7D7D7D;
@@ -8426,7 +8352,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   z-index: 1021;
 }
 
-.c23 {
+.c22 {
   word-break: normal;
 }
 
@@ -8478,66 +8404,58 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
             class="c10"
           >
             <div
-              class="c9 css-142zc9n"
-            >
-              Uniswap API
-            </div>
-            <div
-              class="c11"
-            />
-            <div
-              class="c12 css-vurnku"
+              class="c11 css-vurnku"
             >
               <div
-                class="c0 c1 c13"
+                class="c0 c1 c12"
               >
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="ABC logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                     />
                   </div>
                 </div>
                 <div
-                  class="c0 c1 c17"
+                  class="c0 c1 c16"
                 >
                   <div
-                    class="c18"
+                    class="c17"
                   >
                     <svg
-                      class="c19"
+                      class="c18"
                     >
                       dot_line.svg
                     </svg>
                   </div>
                   <div
-                    class="c20 c21"
+                    class="c19 c20"
                   >
                     <div
-                      class="c20 c22"
+                      class="c19 c21"
                     >
                       <div
-                        class="c3 c23 css-1m65e73"
+                        class="c3 c22 css-1m65e73"
                       >
                         V3
                       </div>
                     </div>
                     <div
-                      class="c9 c23 css-1m65e73"
+                      class="c9 c22 css-1m65e73"
                       style="min-width: auto;"
                     >
                       100%
                     </div>
                   </div>
                   <div
-                    class="c24 c25 c26"
+                    class="c23 c24 c25"
                     style="justify-content: space-evenly; z-index: 2;"
                     width="100%"
                   >
@@ -8546,45 +8464,45 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
                     >
                       <div>
                         <div
-                          class="c20 c27"
+                          class="c19 c26"
                         >
                           <div
                             class="css-mbnpt3"
                           >
                             <div
-                              class="c28"
+                              class="c27"
                             >
                               <div
-                                class="c29"
+                                class="c28"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="DEF logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                     />
                                   </div>
                                 </div>
                               </div>
                               <div
-                                class="c30"
+                                class="c29"
                               >
                                 <div
-                                  class="c14"
+                                  class="c13"
                                   style="height: 20px; width: 20px;"
                                 >
                                   <div
-                                    class="c15"
+                                    class="c14"
                                   >
                                     <img
                                       alt="ABC logo"
-                                      class="c16"
+                                      class="c15"
                                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                     />
                                   </div>
@@ -8593,7 +8511,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
                             </div>
                           </div>
                           <div
-                            class="c9 c23 css-1m65e73"
+                            class="c9 c22 css-1m65e73"
                           >
                             1%
                           </div>
@@ -8605,36 +8523,33 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
                       style="position: fixed; left: 0px; top: 0px;"
                     >
                       <div
-                        class="c31"
+                        class="c30"
                       >
                         ABC/DEF 1% pool
                       </div>
                       <div
-                        class="c32 arrow-"
+                        class="c31 arrow-"
                         style="position: absolute;"
                       />
                     </div>
                   </div>
                 </div>
                 <div
-                  class="c14"
+                  class="c13"
                   style="height: 20px; width: 20px;"
                 >
                   <div
-                    class="c15"
+                    class="c14"
                   >
                     <img
                       alt="DEF logo"
-                      class="c16"
+                      class="c15"
                       src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                     />
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="c11"
-            />
             <div
               class="c9 css-obwv3p"
             >
@@ -8644,7 +8559,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
         </div>
       </div>
       <div
-        class="c32 arrow-"
+        class="c31 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -9931,7 +9846,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
 }
 
 .c4 {
-  cursor: help;
+  cursor: auto;
   color: #7D7D7D;
 }
 

src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap

@@ -91,22 +91,49 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
   gap: 12px;
 }
 
-.c9 {
+.c7 {
   display: inline-block;
   height: inherit;
 }
 
-.c7 {
+.c9 {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  padding: 0;
+  grid-template-columns: 1fr auto;
+  grid-gap: 0.25rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  text-align: left;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.c8 {
   text-align: right;
   overflow-wrap: break-word;
 }
 
 .c6 {
-  cursor: auto;
-  color: #7D7D7D;
-}
-
-.c8 {
   cursor: help;
   color: #7D7D7D;
 }
@@ -137,29 +164,45 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
         class="c5 c6 css-142zc9n"
         data-testid="swap-li-label"
       >
-        Exchange rate
+        Rate
       </div>
       <div
-        class="c5 c7 css-142zc9n"
+        class="c7"
       >
-        1 DEF = 1.00 ABC
+        <div>
+          <div
+            class="c5 c8 css-142zc9n"
+          >
+            <button
+              class="c9"
+              title="1 DEF = 1.00 ABC "
+            >
+              <div
+                class="c5 css-142zc9n"
+              >
+                1 DEF = 1.00 ABC 
+              </div>
+               
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     <div
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c6 css-142zc9n"
         data-testid="swap-li-label"
       >
         Price impact
       </div>
       <div
-        class="c9"
+        class="c7"
       >
         <div>
           <div
-            class="c5 c7 css-142zc9n"
+            class="c5 c8 css-142zc9n"
           >
             <span
               class=""
@@ -174,17 +217,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c6 css-142zc9n"
         data-testid="swap-li-label"
       >
         Max. slippage
       </div>
       <div
-        class="c9"
+        class="c7"
       >
         <div>
           <div
-            class="c5 c7 css-142zc9n"
+            class="c5 c8 css-142zc9n"
           >
             <div
               class="c2 c10"
@@ -202,17 +245,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c6 css-142zc9n"
         data-testid="swap-li-label"
       >
         Receive at least
       </div>
       <div
-        class="c9"
+        class="c7"
       >
         <div>
           <div
-            class="c5 c7 css-142zc9n"
+            class="c5 c8 css-142zc9n"
           >
             0.00000000000000098 DEF
           </div>
@@ -223,17 +266,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c6 css-142zc9n"
         data-testid="swap-li-label"
       >
         Network cost
       </div>
       <div
-        class="c9"
+        class="c7"
       >
         <div>
           <div
-            class="c5 c7 css-142zc9n"
+            class="c5 c8 css-142zc9n"
           >
             <div
               class="c2 c13"
@@ -447,7 +490,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   justify-content: flex-start;
 }
 
-.c11 {
+.c12 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -476,7 +519,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   color: #222222;
 }
 
-.c12 {
+.c13 {
   color: #7D7D7D;
 }
 
@@ -495,7 +538,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   gap: 12px;
 }
 
-.c10 {
+.c11 {
   -webkit-animation: fAQEyV 1.5s infinite;
   animation: fAQEyV 1.5s infinite;
   -webkit-animation-fill-mode: both;
@@ -508,11 +551,43 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   width: 50px;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   height: inherit;
 }
 
+.c8 {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  padding: 0;
+  grid-template-columns: 1fr auto;
+  grid-gap: 0.25rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  text-align: left;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
 .c7 {
   text-align: right;
   overflow-wrap: break-word;
@@ -523,12 +598,12 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   color: #7D7D7D;
 }
 
-.c8 {
+.c9 {
   cursor: help;
   color: #7D7D7D;
 }
 
-.c13 {
+.c14 {
   background: #22222212;
   border-radius: 8px;
   color: #7D7D7D;
@@ -536,7 +611,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   padding: 0 6px;
 }
 
-.c13::after {
+.c14::after {
   content: 'Auto';
 }
 
@@ -558,32 +633,42 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
         class="c5 c6 css-142zc9n"
         data-testid="swap-li-label"
       >
-        Exchange rate
+        Rate
       </div>
       <div
         class="c5 c7 css-142zc9n"
       >
-        1 DEF = 1.00 ABC
+        <button
+          class="c8"
+          title="1 DEF = 1.00 ABC "
+        >
+          <div
+            class="c5 css-142zc9n"
+          >
+            1 DEF = 1.00 ABC 
+          </div>
+           
+        </button>
       </div>
     </div>
     <div
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c9 css-142zc9n"
         data-testid="swap-li-label"
       >
         Price impact
       </div>
       <div
-        class="c9"
+        class="c10"
       >
         <div>
           <div
             class="c5 c7 css-142zc9n"
           >
             <div
-              class="c10"
+              class="c11"
               data-testid="loading-row"
               height="15"
               width="50"
@@ -596,23 +681,23 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c9 css-142zc9n"
         data-testid="swap-li-label"
       >
         Max. slippage
       </div>
       <div
-        class="c9"
+        class="c10"
       >
         <div>
           <div
             class="c5 c7 css-142zc9n"
           >
             <div
-              class="c2 c11"
+              class="c2 c12"
             >
               <div
-                class="c12 c13 css-1lgneq0"
+                class="c13 c14 css-1lgneq0"
               />
                2%
             </div>
@@ -624,13 +709,13 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c9 css-142zc9n"
         data-testid="swap-li-label"
       >
         Receive at least
       </div>
       <div
-        class="c9"
+        class="c10"
       >
         <div>
           <div
@@ -645,20 +730,20 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
       class="c2 c3 c4"
     >
       <div
-        class="c5 c8 css-142zc9n"
+        class="c5 c9 css-142zc9n"
         data-testid="swap-li-label"
       >
         Network cost
       </div>
       <div
-        class="c9"
+        class="c10"
       >
         <div>
           <div
             class="c5 c7 css-142zc9n"
           >
             <div
-              class="c10"
+              class="c11"
               data-testid="loading-row"
               height="15"
               width="50"