feat: updated slippage ui (#7409)

* feat: updated slippage ui

* fix: update settings to also have period in max slippage string

* test: update e2e test search string

cypress/e2e/swap/settings.test.ts

@@ -6,7 +6,7 @@ describe('Swap settings', () => {
     cy.contains('Settings').should('not.exist')
     cy.get(getTestSelector('open-settings-dialog-button')).click()
     cy.get(getTestSelector('mobile-settings-menu')).should('not.exist')
-    cy.contains('Max slippage').should('exist')
+    cy.contains('Max. slippage').should('exist')
     cy.contains('Transaction deadline').should('exist')
     cy.contains('UniswapX').should('exist')
     cy.contains('Local routing').should('exist')
@@ -26,7 +26,7 @@ describe('Swap settings', () => {
     cy.get(getTestSelector('mobile-settings-menu'))
       .should('exist')
       .within(() => {
-        cy.contains('Max slippage').should('exist')
+        cy.contains('Max. slippage').should('exist')
         cy.contains('UniswapX').should('exist')
         cy.contains('Local routing').should('exist')
         cy.contains('Transaction deadline').should('exist')

src/components/Settings/MaxSlippageSettings/index.test.tsx

@@ -46,7 +46,7 @@ describe('MaxSlippageSettings', () => {
 
       fireEvent.change(getSlippageInput(), { target: { value: '0.5' } })
 
-      expect(screen.queryAllByText('0.50%').length).toEqual(1)
+      expect(screen.queryAllByText('0.5%').length).toEqual(1)
     })
     it('updates input value on blur with the slippage in store', () => {
       renderSlippageSettings()
@@ -56,7 +56,7 @@ describe('MaxSlippageSettings', () => {
       fireEvent.change(input, { target: { value: '0.5' } })
       fireEvent.blur(input)
 
-      expect(input.value).toBe('0.50')
+      expect(input.value).toBe('0.5')
     })
     it('clears errors on blur and overwrites incorrect value with the latest correct value', () => {
       renderSlippageSettings()
@@ -68,7 +68,7 @@ describe('MaxSlippageSettings', () => {
       fireEvent.change(input, { target: { value: '500' } })
       fireEvent.blur(input)
 
-      expect(input.value).toBe('50.00')
+      expect(input.value).toBe('50')
     })
     it('does not allow to enter more than 2 digits after the decimal point', () => {
       renderSlippageSettings()

src/components/Settings/MaxSlippageSettings/index.tsx

@@ -8,6 +8,7 @@ import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components'
 import { CautionTriangle, ThemedText } from 'theme/components'
+import { useFormatter } from 'utils/formatNumbers'
 
 import { Input, InputContainer } from '../Input'
 
@@ -37,15 +38,23 @@ const NUMBER_WITH_MAX_TWO_DECIMAL_PLACES = /^(?:\d*\.\d{0,2}|\d+)$/
 const MINIMUM_RECOMMENDED_SLIPPAGE = new Percent(5, 10_000)
 const MAXIMUM_RECOMMENDED_SLIPPAGE = new Percent(1, 100)
 
+function useFormatSlippageInput() {
+  const { formatSlippage } = useFormatter()
+
+  return (slippage: Percent) => formatSlippage(slippage).slice(0, -1) // remove % sign
+}
+
 export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: Percent }) {
   const [userSlippageTolerance, setUserSlippageTolerance] = useUserSlippageTolerance()
+  const { formatSlippage } = useFormatter()
+  const formatSlippageInput = useFormatSlippageInput()
 
   // In order to trigger `custom` mode, we need to set `userSlippageTolerance` to a value that is not `auto`.
   // To do so, we use `autoSlippage` value. However, since users are likely to change that value,
   // we render it as a placeholder instead of a value.
   const defaultSlippageInputValue =
     userSlippageTolerance !== SlippageTolerance.Auto && !userSlippageTolerance.equalTo(autoSlippage)
-      ? userSlippageTolerance.toFixed(2)
+      ? formatSlippageInput(userSlippageTolerance)
       : ''
 
   // If user has previously entered a custom slippage, we want to show that value in the input field
@@ -101,7 +110,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: Pe
       header={
         <Row width="auto">
           <ThemedText.BodySecondary>
-            <Trans>Max slippage</Trans>
+            <Trans>Max. slippage</Trans>
           </ThemedText.BodySecondary>
           <QuestionHelper
             text={
@@ -115,7 +124,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: Pe
           {userSlippageTolerance === SlippageTolerance.Auto ? (
             <Trans>Auto</Trans>
           ) : (
-            `${userSlippageTolerance.toFixed(2)}%`
+            formatSlippage(userSlippageTolerance)
           )}
         </ThemedText.BodyPrimary>
       }
@@ -149,7 +158,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: Pe
         <InputContainer gap="md" error={!!slippageError}>
           <Input
             data-testid="slippage-input"
-            placeholder={autoSlippage.toFixed(2)}
+            placeholder={formatSlippageInput(autoSlippage)}
             value={slippageInput}
             onChange={(e) => parseSlippageInput(e.target.value)}
             onBlur={() => {
@@ -167,7 +176,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: Pe
           <ThemedText.BodySmall color="deprecated_accentWarning">
             {tooLow ? (
               <Trans>
-                Slippage below {MINIMUM_RECOMMENDED_SLIPPAGE.toFixed(2)}% may result in a failed transaction
+                Slippage below {formatSlippage(MINIMUM_RECOMMENDED_SLIPPAGE)} may result in a failed transaction
               </Trans>
             ) : (
               <Trans>Your transaction may be frontrun and result in an unfavorable trade.</Trans>

src/components/Settings/MenuButton/index.tsx

@@ -5,6 +5,7 @@ import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components'
 import { ThemedText } from 'theme/components'
+import { useFormatter } from 'utils/formatNumbers'
 import validateUserSlippageTolerance, { SlippageValidationResult } from 'utils/validateUserSlippageTolerance'
 
 const Icon = styled(Settings)`
@@ -46,6 +47,7 @@ const IconContainerWithSlippage = styled(IconContainer)<{ displayWarning?: boole
 
 const ButtonContent = () => {
   const [userSlippageTolerance] = useUserSlippageTolerance()
+  const { formatSlippage } = useFormatter()
 
   if (userSlippageTolerance === SlippageTolerance.Auto) {
     return (
@@ -60,7 +62,7 @@ const ButtonContent = () => {
   return (
     <IconContainerWithSlippage data-testid="settings-icon-with-slippage" gap="sm" displayWarning={isInvalidSlippage}>
       <ThemedText.BodySmall>
-        <Trans>{userSlippageTolerance.toFixed(2)}% slippage</Trans>
+        <Trans>{formatSlippage(userSlippageTolerance)} slippage</Trans>
       </ThemedText.BodySmall>
       <Icon />
     </IconContainerWithSlippage>

src/components/swap/MaxSlippageTooltip.tsx

+import { Trans } from '@lingui/macro'
+import { Percent, TradeType } from '@uniswap/sdk-core'
+import Column from 'components/Column'
+import { RowBetween } from 'components/Row'
+import { InterfaceTrade } from 'state/routing/types'
+import { ExternalLink, Separator, ThemedText } from 'theme/components'
+import { NumberType, useFormatter } from 'utils/formatNumbers'
+
+const ExactInMessage = ({ amount }: { amount: string }) => (
+  <Trans>
+    If the price moves so that you will receive less than {amount}, your transaction will be reverted. This is the
+    minimum amount you are guaranteed to receive.
+  </Trans>
+)
+
+const ExactOutMessage = ({ amount }: { amount: string }) => (
+  <Trans>
+    If the price moves so that you will pay more than {amount}, your transaction will be reverted. This is the maximum
+    amount you are guaranteed to pay.
+  </Trans>
+)
+
+function SlippageHeader({ amount, isExactIn }: { amount: string; isExactIn: boolean }) {
+  return (
+    <RowBetween>
+      <ThemedText.Caption color="neutral1">
+        {isExactIn ? <Trans>Receive at least</Trans> : <Trans>Pay at most</Trans>}
+      </ThemedText.Caption>
+      <ThemedText.Caption color="neutral1">{amount}</ThemedText.Caption>
+    </RowBetween>
+  )
+}
+
+export function MaxSlippageTooltip({ trade, allowedSlippage }: { trade: InterfaceTrade; allowedSlippage: Percent }) {
+  const isExactIn = trade.tradeType === TradeType.EXACT_INPUT
+  const amount = isExactIn ? trade.minimumAmountOut(allowedSlippage) : trade.maximumAmountIn(allowedSlippage)
+
+  const formattedAmount = useFormatter().formatCurrencyAmount({ amount, type: NumberType.SwapDetailsAmount })
+  const displayAmount = `${formattedAmount} ${amount.currency.symbol}`
+
+  return (
+    <Column gap="xs">
+      <SlippageHeader amount={displayAmount} isExactIn={isExactIn} />
+      <Separator />
+      <div>
+        {isExactIn ? <ExactInMessage amount={displayAmount} /> : <ExactOutMessage amount={displayAmount} />}{' '}
+        <ExternalLink href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-">
+          Learn more
+        </ExternalLink>
+      </div>
+    </Column>
+  )
+}

src/components/swap/SwapDetailsDropdown.tsx

@@ -108,11 +108,9 @@ function AdvancedSwapDetails(props: SwapDetailsProps & { open: boolean }) {
       <SwapDetailsWrapper gap="md" data-testid="advanced-swap-details">
         <Separator />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
+        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.EXPECTED_OUTPUT} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_COST} />
         <Separator />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.ROUTING_INFO} />

src/components/swap/SwapLineItem.tsx

@@ -11,12 +11,15 @@ import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useEffect, useState } from 'react'
 import { InterfaceTrade, TradeFillType } from 'state/routing/types'
 import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils'
+import { useUserSlippageTolerance } from 'state/user/hooks'
+import { SlippageTolerance } from 'state/user/types'
 import styled, { DefaultTheme } from 'styled-components'
 import { ExternalLink, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { getPriceImpactColor } from 'utils/prices'
 
 import { GasBreakdownTooltip, UniswapXDescription } from './GasBreakdownTooltip'
+import { MaxSlippageTooltip } from './MaxSlippageTooltip'
 import SwapRoute from './SwapRoute'
 
 export enum SwapLineItemType {
@@ -25,9 +28,9 @@ export enum SwapLineItemType {
   INPUT_TOKEN_FEE_ON_TRANSFER,
   OUTPUT_TOKEN_FEE_ON_TRANSFER,
   PRICE_IMPACT,
+  MAX_SLIPPAGE,
   MAXIMUM_INPUT,
   MINIMUM_OUTPUT,
-  EXPECTED_OUTPUT,
   ROUTING_INFO,
 }
 
@@ -43,6 +46,18 @@ const ColorWrapper = styled.span<{ textColor?: keyof DefaultTheme }>`
   ${({ textColor, theme }) => textColor && `color: ${theme[textColor]};`}
 `
 
+const AutoBadge = styled(ThemedText.LabelMicro).attrs({ fontWeight: 535 })`
+  background: ${({ theme }) => theme.surface3};
+  border-radius: 8px;
+  color: ${({ theme }) => theme.neutral2};
+  height: 20px;
+  padding: 0 6px;
+
+  ::after {
+    content: '${t`Auto`}';
+  }
+`
+
 function FOTTooltipContent() {
   return (
     <>
@@ -91,7 +106,8 @@ type LineItemData = {
 
 function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
   const { trade, syncing, allowedSlippage, type } = props
-  const { formatNumber } = useFormatter()
+  const { formatNumber, formatSlippage } = useFormatter()
+  const isAutoSlippage = useUserSlippageTolerance()[0] === SlippageTolerance.Auto
 
   const isUniswapX = isUniswapXTrade(trade)
   const isPreview = isPreviewTrade(trade)
@@ -132,10 +148,20 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
         TooltipBody: () => <Trans>The impact your trade has on the market price of this pool.</Trans>,
         Value: () => (isPreview ? <Loading /> : <ColoredPercentRow percent={trade.priceImpact} />),
       }
+    case SwapLineItemType.MAX_SLIPPAGE:
+      return {
+        Label: () => <Trans>Max. slippage</Trans>,
+        TooltipBody: () => <MaxSlippageTooltip {...props} />,
+        Value: () => (
+          <Row gap="8px">
+            {isAutoSlippage && <AutoBadge />} {formatSlippage(allowedSlippage)}
+          </Row>
+        ),
+      }
     case SwapLineItemType.MAXIMUM_INPUT:
       if (trade.tradeType === TradeType.EXACT_INPUT) return
       return {
-        Label: () => <Trans>Maximum input</Trans>,
+        Label: () => <Trans>Pay at most</Trans>,
         TooltipBody: () => (
           <Trans>
             The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will
@@ -148,7 +174,7 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
     case SwapLineItemType.MINIMUM_OUTPUT:
       if (trade.tradeType === TradeType.EXACT_OUTPUT) return
       return {
-        Label: () => <Trans>Minimum output</Trans>,
+        Label: () => <Trans>Receive at least</Trans>,
         TooltipBody: () => (
           <Trans>
             The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will
@@ -158,18 +184,6 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
         Value: () => <CurrencyAmountRow amount={trade.minimumAmountOut(allowedSlippage)} />,
         loaderWidth: 70,
       }
-    case SwapLineItemType.EXPECTED_OUTPUT:
-      return {
-        Label: () => <Trans>Expected output</Trans>,
-        TooltipBody: () => (
-          <Trans>
-            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.
-          </Trans>
-        ),
-        Value: () => <CurrencyAmountRow amount={trade.postTaxOutputAmount} />,
-        loaderWidth: 65,
-      }
     case SwapLineItemType.ROUTING_INFO:
       if (isPreview) return { Label: () => <Trans>Order routing</Trans>, Value: () => <Loading /> }
       return {

src/components/swap/SwapModalFooter.tsx

@@ -74,10 +74,11 @@ export default function SwapModalFooter({
       <DetailsContainer gap="md">
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.EXCHANGE_RATE} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
+        <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} />
+        <SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
+        <SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
         <SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_COST} />
       </DetailsContainer>
       {showAcceptChanges ? (

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

@@ -43,6 +43,24 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
   gap: 4px;
 }
 
+.c21 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c4 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -138,6 +156,18 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
   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;
@@ -329,28 +359,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
               class="c9 c19 css-142zc9n"
               data-testid="swap-li-label"
             >
-              Minimum output
-            </div>
-            <div
-              class="c12"
-            >
-              <div>
-                <div
-                  class="c9 c20 css-142zc9n"
-                >
-                  0.00000000000000098 DEF
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="c2 c3 c4"
-          >
-            <div
-              class="c9 c19 css-142zc9n"
-              data-testid="swap-li-label"
-            >
-              Expected output
+              Max. slippage
             </div>
             <div
               class="c12"
@@ -359,7 +368,14 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
                 <div
                   class="c9 c20 css-142zc9n"
                 >
-                  0.000000000000001 DEF
+                  <div
+                    class="c2 c21"
+                  >
+                    <div
+                      class="c14 c22 css-1lgneq0"
+                    />
+                     2%
+                  </div>
                 </div>
               </div>
             </div>

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

@@ -263,6 +263,24 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -274,11 +292,36 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -293,13 +336,13 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -313,43 +356,43 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -366,6 +409,21 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -376,6 +434,18 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 @supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
 
 }
@@ -387,7 +457,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -396,25 +466,63 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.0000000000000009 DEF
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.0000000000000009 DEF
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -566,7 +674,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
@@ -575,7 +683,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000001 DEF
+          0.0000000000000009 DEF
         </div>
       </div>
     </div>
@@ -589,7 +697,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -1335,6 +1443,24 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -1346,11 +1472,36 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -1365,13 +1516,13 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -1385,43 +1536,43 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -1438,6 +1589,21 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -1448,6 +1614,18 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 <div
     class="c0 c1 c2"
   >
@@ -1455,7 +1633,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -1464,25 +1642,63 @@ exports[`SwapLineItem.tsx exact input 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.00000000000000098 DEF
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.00000000000000098 DEF
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -1630,7 +1846,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
@@ -1639,7 +1855,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000001 DEF
+          0.00000000000000098 DEF
         </div>
       </div>
     </div>
@@ -1653,7 +1869,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -2674,6 +2890,24 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -2685,11 +2919,36 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -2704,13 +2963,13 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -2724,43 +2983,43 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -2777,6 +3036,21 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -2787,6 +3061,18 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 <div
     class="c0 c1 c2"
   >
@@ -2794,7 +3080,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -2803,25 +3089,63 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.00000000000000098 DEF
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.00000000000000098 DEF
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -2969,7 +3293,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
@@ -2978,7 +3302,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000001 DEF
+          0.00000000000000098 DEF
         </div>
       </div>
     </div>
@@ -2992,7 +3316,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -4013,6 +4337,24 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -4024,11 +4366,36 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -4043,13 +4410,13 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -4063,43 +4430,43 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -4116,6 +4483,21 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -4126,6 +4508,18 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 <div
     class="c0 c1 c2"
   >
@@ -4133,7 +4527,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Maximum input
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -4142,25 +4536,63 @@ exports[`SwapLineItem.tsx exact output 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.00000000000000102 ABC
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Pay at most
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.00000000000000102 ABC
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will pay more than 0.00000000000000102 ABC, your transaction will be reverted. This is the maximum amount you are guaranteed to pay. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -4308,7 +4740,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Pay at most
     </div>
     <div
       class="c5"
@@ -4317,7 +4749,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000001 GHI
+          0.00000000000000102 ABC
         </div>
       </div>
     </div>
@@ -4331,7 +4763,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -5558,6 +5990,24 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -5569,11 +6019,36 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -5588,13 +6063,13 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -5608,43 +6083,43 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -5661,6 +6136,21 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -5671,6 +6161,18 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 <div
     class="c0 c1 c2"
   >
@@ -5678,7 +6180,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -5687,25 +6189,63 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000000952 DEF
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.000000000000000952 DEF
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will receive less than 0.000000000000000952 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -5853,7 +6393,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
@@ -5862,7 +6402,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.00000000000000097 DEF
+          0.000000000000000952 DEF
         </div>
       </div>
     </div>
@@ -5876,7 +6416,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -7103,6 +7643,24 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -7114,11 +7672,36 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -7133,13 +7716,13 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -7153,43 +7736,43 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -7206,6 +7789,21 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -7216,6 +7814,18 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 <div
     class="c0 c1 c2"
   >
@@ -7223,7 +7833,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -7232,25 +7842,63 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000000952 DEF
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.000000000000000952 DEF
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will receive less than 0.000000000000000952 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -7398,7 +8046,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
@@ -7407,7 +8055,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.00000000000000097 DEF
+          0.000000000000000952 DEF
         </div>
       </div>
     </div>
@@ -7421,7 +8069,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -8446,6 +9094,24 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   justify-content: flex-start;
 }
 
+.c7 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c2 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -8457,11 +9123,36 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   color: #222222;
 }
 
-.c9 {
+.c8 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c14 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  color: #FC72FF;
+  stroke: #FC72FF;
+  font-weight: 500;
+}
+
+.c14:hover {
+  opacity: 0.6;
+}
+
+.c14:active {
+  opacity: 0.4;
+}
+
+.c13 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+
+.c10 {
   z-index: 1070;
   pointer-events: none;
   visibility: hidden;
@@ -8476,13 +9167,13 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   height: inherit;
 }
 
-.c10 {
+.c15 {
   width: 8px;
   height: 8px;
   z-index: 9998;
 }
 
-.c10::before {
+.c15::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -8496,43 +9187,43 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   background: #FFFFFF;
 }
 
-.c10.arrow-top {
+.c15.arrow-top {
   bottom: -4px;
 }
 
-.c10.arrow-top::before {
+.c15.arrow-top::before {
   border-top: none;
   border-left: none;
 }
 
-.c10.arrow-bottom {
+.c15.arrow-bottom {
   top: -4px;
 }
 
-.c10.arrow-bottom::before {
+.c15.arrow-bottom::before {
   border-bottom: none;
   border-right: none;
 }
 
-.c10.arrow-left {
+.c15.arrow-left {
   right: -4px;
 }
 
-.c10.arrow-left::before {
+.c15.arrow-left::before {
   border-bottom: none;
   border-left: none;
 }
 
-.c10.arrow-right {
+.c15.arrow-right {
   left: -4px;
 }
 
-.c10.arrow-right::before {
+.c15.arrow-right::before {
   border-right: none;
   border-top: none;
 }
 
-.c8 {
+.c11 {
   max-width: 256px;
   width: calc(100vw - 16px);
   cursor: default;
@@ -8549,6 +9240,21 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
 }
 
+.c12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .c6 {
   text-align: right;
   overflow-wrap: break-word;
@@ -8559,6 +9265,18 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   color: #7D7D7D;
 }
 
+.c9 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c9::after {
+  content: 'Auto';
+}
+
 <div
     class="c0 c1 c2"
   >
@@ -8566,7 +9284,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
@@ -8575,25 +9293,63 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.00000000000000098 DEF
+          <div
+            class="c0 c7"
+          >
+            <div
+              class="c8 c9 css-1lgneq0"
+            />
+             2%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="c7"
+      class="c10"
       style="position: fixed; left: 0px; top: 0px;"
     >
       <div
-        class="c8"
+        class="c11"
       >
         <div
-          class="c9 css-obwv3p"
+          class="c8 css-obwv3p"
         >
-          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
+          <div
+            class="c12"
+          >
+            <div
+              class="c0 c1 c2"
+            >
+              <div
+                class="c3 css-obwv3p"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c3 css-obwv3p"
+              >
+                0.00000000000000098 DEF
+              </div>
+            </div>
+            <div
+              class="c13"
+            />
+            <div>
+              If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
+              <a
+                class="c14"
+                href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="c10 arrow-"
+        class="c15 arrow-"
         style="position: absolute;"
       />
     </div>
@@ -8741,7 +9497,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
@@ -8750,7 +9506,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
         <div
           class="c3 c6 css-142zc9n"
         >
-          0.000000000000001 DEF
+          0.00000000000000098 DEF
         </div>
       </div>
     </div>
@@ -8764,7 +9520,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
         <div
           class="c9 css-obwv3p"
         >
-          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.
+          The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
         </div>
       </div>
       <div
@@ -9035,7 +9791,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
   will-change: background-position;
   border-radius: 12px;
   height: 15px;
-  width: 70px;
+  width: 50px;
 }
 
 .c4 {
@@ -9050,13 +9806,13 @@ exports[`SwapLineItem.tsx syncing 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Minimum output
+      Max. slippage
     </div>
     <div
       class="c5"
       data-testid="loading-row"
       height="15"
-      width="70"
+      width="50"
     />
   </div>
   .c0 {
@@ -9103,7 +9859,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
   will-change: background-position;
   border-radius: 12px;
   height: 15px;
-  width: 65px;
+  width: 70px;
 }
 
 .c4 {
@@ -9118,13 +9874,13 @@ exports[`SwapLineItem.tsx syncing 1`] = `
       class="c3 c4 css-142zc9n"
       data-testid="swap-li-label"
     >
-      Expected output
+      Receive at least
     </div>
     <div
       class="c5"
       data-testid="loading-row"
       height="15"
-      width="65"
+      width="70"
     />
   </div>
   .c0 {

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

@@ -26,6 +26,24 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
 }
 
 .c10 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
+.c13 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -54,6 +72,10 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
   color: #222222;
 }
 
+.c11 {
+  color: #7D7D7D;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -89,6 +111,18 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
   color: #7D7D7D;
 }
 
+.c12 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c12::after {
+  content: 'Auto';
+}
+
 .c1 {
   padding: 0 8px;
 }
@@ -143,7 +177,35 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
         class="c5 c8 css-142zc9n"
         data-testid="swap-li-label"
       >
-        Minimum output
+        Max. slippage
+      </div>
+      <div
+        class="c9"
+      >
+        <div>
+          <div
+            class="c5 c7 css-142zc9n"
+          >
+            <div
+              class="c2 c10"
+            >
+              <div
+                class="c11 c12 css-1lgneq0"
+              />
+               2%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c2 c3 c4"
+    >
+      <div
+        class="c5 c8 css-142zc9n"
+        data-testid="swap-li-label"
+      >
+        Receive at least
       </div>
       <div
         class="c9"
@@ -174,7 +236,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
             class="c5 c7 css-142zc9n"
           >
             <div
-              class="c2 c10"
+              class="c2 c13"
             >
               <img
                 alt="gas cost icon"
@@ -385,6 +447,24 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   justify-content: flex-start;
 }
 
+.c11 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -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;
+  gap: 8px;
+}
+
 .c4 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -396,6 +476,10 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   color: #222222;
 }
 
+.c12 {
+  color: #7D7D7D;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -444,6 +528,18 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
   color: #7D7D7D;
 }
 
+.c13 {
+  background: #22222212;
+  border-radius: 8px;
+  color: #7D7D7D;
+  height: 20px;
+  padding: 0 6px;
+}
+
+.c13::after {
+  content: 'Auto';
+}
+
 .c1 {
   padding: 0 8px;
 }
@@ -503,7 +599,35 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
         class="c5 c8 css-142zc9n"
         data-testid="swap-li-label"
       >
-        Minimum output
+        Max. slippage
+      </div>
+      <div
+        class="c9"
+      >
+        <div>
+          <div
+            class="c5 c7 css-142zc9n"
+          >
+            <div
+              class="c2 c11"
+            >
+              <div
+                class="c12 c13 css-1lgneq0"
+              />
+               2%
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c2 c3 c4"
+    >
+      <div
+        class="c5 c8 css-142zc9n"
+        data-testid="swap-li-label"
+      >
+        Receive at least
       </div>
       <div
         class="c9"

src/utils/formatNumbers.test.ts

@@ -402,25 +402,25 @@ describe('formatSlippage', () => {
     expect(formatSlippage(undefined)).toBe('-')
   })
 
-  it('correctly formats a percent with 3 significant digits', () => {
+  it('correctly formats a percent with no trailing digits', () => {
     const { formatSlippage } = renderHook(() => useFormatter()).result.current
 
     expect(formatSlippage(new Percent(1, 100000))).toBe('0.001%')
-    expect(formatSlippage(new Percent(1, 1000))).toBe('0.100%')
-    expect(formatSlippage(new Percent(1, 100))).toBe('1.000%')
-    expect(formatSlippage(new Percent(1, 10))).toBe('10.000%')
-    expect(formatSlippage(new Percent(1, 1))).toBe('100.000%')
+    expect(formatSlippage(new Percent(1, 1000))).toBe('0.1%')
+    expect(formatSlippage(new Percent(1, 100))).toBe('1%')
+    expect(formatSlippage(new Percent(1, 10))).toBe('10%')
+    expect(formatSlippage(new Percent(1, 1))).toBe('100%')
   })
 
-  it('correctly formats a percent with 3 significant digits with french locale', () => {
+  it('correctly formats a percent with french locale', () => {
     mocked(useActiveLocale).mockReturnValue('fr-FR')
     const { formatSlippage } = renderHook(() => useFormatter()).result.current
 
     expect(formatSlippage(new Percent(1, 100000))).toBe('0,001%')
-    expect(formatSlippage(new Percent(1, 1000))).toBe('0,100%')
-    expect(formatSlippage(new Percent(1, 100))).toBe('1,000%')
-    expect(formatSlippage(new Percent(1, 10))).toBe('10,000%')
-    expect(formatSlippage(new Percent(1, 1))).toBe('100,000%')
+    expect(formatSlippage(new Percent(1, 1000))).toBe('0,1%')
+    expect(formatSlippage(new Percent(1, 100))).toBe('1%')
+    expect(formatSlippage(new Percent(1, 10))).toBe('10%')
+    expect(formatSlippage(new Percent(1, 1))).toBe('100%')
   })
 })
 

src/utils/formatNumbers.ts

@@ -472,7 +472,6 @@ function formatSlippage(slippage: Percent | undefined, locale: SupportedLocale =
   if (!slippage) return '-'
 
   return `${Number(slippage.toFixed(3)).toLocaleString(locale, {
-    minimumFractionDigits: 3,
     maximumFractionDigits: 3,
     useGrouping: false,
   })}%`