feat: animated review expando (#7440)

* feat: animated review expando * test: update snapshots * fix: pr comments + spacing

feat: animated review expando (#7440)
* feat: animated review expando * test: update snapshots * fix: pr comments + spacing
48855f48 · cartcrom · GitHub · f09ded1a · 48855f48 · 48855f48
Commit 48855f48 authored Oct 11, 2023 by cartcrom Committed by GitHub Oct 11, 2023
12 changed files
--- a/src/assets/svg/expando-icon-closed.svg
+++ b/src/assets/svg/expando-icon-closed.svg
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6376 8.86202C11.8982 9.12269 11.8982 9.54407 11.6376 9.80473L8.97089 12.4714C8.84089 12.6014 8.6702 12.6667 8.49954 12.6667C8.32887 12.6667 8.15818 12.6014 8.02818 12.4714L5.36152 9.80473C5.10085 9.54407 5.10085 9.12269 5.36152 8.86202C5.62218 8.60136 6.04356 8.60136 6.30422 8.86202L8.49954 11.0573L10.6948 8.86202C10.9555 8.60136 11.3769 8.60136 11.6376 8.86202ZM6.30422 7.13807L8.49954 4.94275L10.6948 7.13807C10.8248 7.26807 10.9955 7.33338 11.1662 7.33338C11.3369 7.33338 11.5076 7.26807 11.6376 7.13807C11.8982 6.8774 11.8982 6.45602 11.6376 6.19536L8.97089 3.52869C8.71022 3.26802 8.28885 3.26802 8.02818 3.52869L5.36152 6.19536C5.10085 6.45602 5.10085 6.8774 5.36152 7.13807C5.62218 7.39873 6.04356 7.39873 6.30422 7.13807Z" fill="#5E5E5E"/>
+</svg>
--- a/src/assets/svg/expando-icon-opened.svg
+++ b/src/assets/svg/expando-icon-opened.svg
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1376 11.5287C11.3982 11.7894 11.3982 12.2107 11.1376 12.4714C11.0076 12.6014 10.8369 12.6667 10.6662 12.6667C10.4955 12.6667 10.3248 12.6014 10.1948 12.4714L7.99954 10.2761L5.80422 12.4714C5.54356 12.7321 5.12218 12.7321 4.86152 12.4714C4.60085 12.2107 4.60085 11.7894 4.86152 11.5287L7.52818 8.86202C7.78885 8.60136 8.21022 8.60136 8.47089 8.86202L11.1376 11.5287ZM7.52818 7.13807C7.65818 7.26807 7.82887 7.33338 7.99954 7.33338C8.1702 7.33338 8.34089 7.26807 8.47089 7.13807L11.1376 4.4714C11.3982 4.21073 11.3982 3.78936 11.1376 3.52869C10.8769 3.26802 10.4555 3.26802 10.1948 3.52869L7.99954 5.724L5.80422 3.52869C5.54356 3.26802 5.12218 3.26802 4.86152 3.52869C4.60085 3.78936 4.60085 4.21073 4.86152 4.4714L7.52818 7.13807Z" fill="#5E5E5E"/>
+</svg>
--- a/src/components/AnimatedDropdown/index.tsx
+++ b/src/components/AnimatedDropdown/index.tsx
-import { animated, useSpring } from 'react-spring'
+import { animated, useSpring, UseSpringProps } from 'react-spring'
 import useResizeObserver from 'use-resize-observer'
+type AnimatedDropdownProps = React.PropsWithChildren<{ open: boolean; springProps?: UseSpringProps }>
 /**
 * @param open conditional to show content or hide
+ * @param springProps additional props to include in spring animation
 * @returns Wrapper to smoothly hide and expand content
 */
-export default function AnimatedDropdown({ open, children }: React.PropsWithChildren<{ open: boolean }>) {
+export default function AnimatedDropdown({ open, springProps, children }: AnimatedDropdownProps) {
  const { ref, height } = useResizeObserver()
  const props = useSpring({
@@ -20,6 +22,7 @@ export default function AnimatedDropdown({ open, children }: React.PropsWithChil
      clamp: true,
      velocity: 0.01,
    },
+    ...springProps,
  })
  return (
    <animated.div

--- a/src/components/TransactionConfirmationModal/index.tsx
+++ b/src/components/TransactionConfirmationModal/index.tsx
@@ -188,7 +188,7 @@ export function ConfirmationModalContent({
        </Row>
        {topContent()}
      </AutoColumn>
-      {bottomContent && <BottomSection gap="12px">{bottomContent()}</BottomSection>}
+      {bottomContent && <BottomSection gap="16px">{bottomContent()}</BottomSection>}
    </Wrapper>
  )
 }

--- a/src/components/swap/SwapLineItem.tsx
+++ b/src/components/swap/SwapLineItem.tsx
@@ -9,6 +9,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useHoverProps from 'hooks/useHoverProps'
 import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { animated, SpringValue } from 'react-spring'
 import { InterfaceTrade, TradeFillType } from 'state/routing/types'
 import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils'
 import { useUserSlippageTolerance } from 'state/user/hooks'
@@ -238,11 +239,12 @@ function ValueWrapper({ children, lineItem, labelHovered, syncing }: ValueWrappe
  )
 }
-interface SwapLineItemProps {
+export interface SwapLineItemProps {
  trade: InterfaceTrade
  syncing: boolean
  allowedSlippage: Percent
  type: SwapLineItemType
+  animatedOpacity?: SpringValue<number>
 }
 function SwapLineItem(props: SwapLineItemProps) {
@@ -252,14 +254,16 @@ function SwapLineItem(props: SwapLineItemProps) {
  if (!LineItem) return null
  return (
-    <RowBetween>
+    <animated.div style={{ opacity: props.animatedOpacity }}>
-      <LabelText {...hoverProps} hasTooltip={!!LineItem.TooltipBody} data-testid="swap-li-label">
+      <RowBetween>
-        <LineItem.Label />
+        <LabelText {...hoverProps} hasTooltip={!!LineItem.TooltipBody} data-testid="swap-li-label">
-      </LabelText>
+          <LineItem.Label />
-      <ValueWrapper lineItem={LineItem} labelHovered={labelHovered} syncing={props.syncing}>
+        </LabelText>
-        <LineItem.Value />
+        <ValueWrapper lineItem={LineItem} labelHovered={labelHovered} syncing={props.syncing}>
-      </ValueWrapper>
+          <LineItem.Value />
-    </RowBetween>
+        </ValueWrapper>
+      </RowBetween>
+    </animated.div>
  )
 }

--- a/src/components/swap/SwapModalFooter.tsx
+++ b/src/components/swap/SwapModalFooter.tsx
@@ -2,28 +2,33 @@ import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
 import { Percent } from '@uniswap/sdk-core'
 import { TraceEvent } from 'analytics'
+import AnimatedDropdown from 'components/AnimatedDropdown'
 import Column from 'components/Column'
 import SpinningLoader from 'components/Loader/SpinningLoader'
 import { SwapResult } from 'hooks/useSwapCallback'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
-import { ReactNode } from 'react'
+import ms from 'ms'
+import { ReactNode, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
+import { easings, useSpring } from 'react-spring'
 import { InterfaceTrade, RouterPreference } from 'state/routing/types'
 import { isClassicTrade } from 'state/routing/utils'
 import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme/components'
+import { Separator, ThemedText } from 'theme/components'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters'
+import { ReactComponent as ExpandoIconClosed } from '../../assets/svg/expando-icon-closed.svg'
+import { ReactComponent as ExpandoIconOpened } from '../../assets/svg/expando-icon-opened.svg'
 import { ButtonError, SmallButtonPrimary } from '../Button'
 import Row, { AutoRow, RowBetween, RowFixed } from '../Row'
 import { SwapCallbackError, SwapShowAcceptChanges } from './styled'
-import { SwapLineItemType } from './SwapLineItem'
+import { SwapLineItemProps, SwapLineItemType } from './SwapLineItem'
 import SwapLineItem from './SwapLineItem'
 const DetailsContainer = styled(Column)`
-  padding: 0 8px;
+  padding-bottom: 8px;
 `
 const StyledAlertTriangle = styled(AlertTriangle)`
@@ -33,9 +38,45 @@ const StyledAlertTriangle = styled(AlertTriangle)`
 const ConfirmButton = styled(ButtonError)`
  height: 56px;
-  margin-top: 10px;
 `
+const DropdownControllerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: -6px;
+  padding: 0 16px;
+  min-width: fit-content;
+  white-space: nowrap;
+`
+const DropdownButton = styled.button`
+  padding: 0;
+  margin-top: 16px;
+  height: 28px;
+  text-decoration: none;
+  display: flex;
+  background: none;
+  border: none;
+  align-items: center;
+  cursor: pointer;
+`
+function DropdownController({ open, onClick }: { open: boolean; onClick: () => void }) {
+  return (
+    <DropdownButton onClick={onClick}>
+      <Separator />
+      <DropdownControllerWrapper>
+        <ThemedText.BodySmall color="neutral2">
+          {open ? <Trans>Show less</Trans> : <Trans>Show more</Trans>}
+        </ThemedText.BodySmall>
+        {open ? <ExpandoIconOpened /> : <ExpandoIconClosed />}
+      </DropdownControllerWrapper>
+      <Separator />
+    </DropdownButton>
+  )
+}
 export default function SwapModalFooter({
  trade,
  allowedSlippage,
@@ -66,17 +107,16 @@ export default function SwapModalFooter({
  const [routerPreference] = useRouterPreference()
  const routes = isClassicTrade(trade) ? getRoutingDiagramEntries(trade) : undefined
  const theme = useTheme()
+  const [showMore, setShowMore] = useState(false)
  const lineItemProps = { trade, allowedSlippage, syncing: false }
  return (
    <>
+      <DropdownController open={showMore} onClick={() => setShowMore(!showMore)} />
      <DetailsContainer gap="md">
        <SwapLineItem {...lineItemProps} type={SwapLineItemType.EXCHANGE_RATE} />
-        <SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
+        <ExpandableLineItems {...lineItemProps} open={showMore} />
-        <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} />
@@ -141,3 +181,43 @@ export default function SwapModalFooter({
    </>
  )
 }
+function AnimatedLineItem(props: SwapLineItemProps & { open: boolean; delay: number }) {
+  const { open, delay } = props
+  const animatedProps = useSpring({
+    animatedOpacity: open ? 1 : 0,
+    config: { duration: ms('300ms'), easing: easings.easeOutSine },
+    delay,
+  })
+  return <SwapLineItem {...props} {...animatedProps} />
+}
+function ExpandableLineItems(props: { trade: InterfaceTrade; allowedSlippage: Percent; open: boolean }) {
+  const { open, trade, allowedSlippage } = props
+  if (!trade) return null
+  const lineItemProps = { trade, allowedSlippage, syncing: false, open }
+  return (
+    <AnimatedDropdown
+      open={open}
+      springProps={{
+        marginTop: open ? 0 : -12,
+        config: {
+          duration: ms('200ms'),
+          easing: easings.easeOutSine,
+        },
+      }}
+    >
+      <Column gap="md">
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} delay={ms('50ms')} />
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} delay={ms('100ms')} />
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} delay={ms('120ms')} />
+        <AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} delay={ms('120ms')} />
+      </Column>
+    </AnimatedDropdown>
+  )
+}
--- a/src/components/swap/SwapModalHeader.tsx
+++ b/src/components/swap/SwapModalHeader.tsx
@@ -6,14 +6,10 @@ import { InterfaceTrade } from 'state/routing/types'
 import { isPreviewTrade } from 'state/routing/utils'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
-import { Divider, ThemedText } from 'theme/components'
+import { ThemedText } from 'theme/components'
 import { SwapModalHeaderAmount } from './SwapModalHeaderAmount'
-const Rule = styled(Divider)`
-  margin: 16px 2px 24px 2px;
-`
 const HeaderContainer = styled(AutoColumn)`
  margin-top: 16px;
 `
@@ -50,7 +46,7 @@ export default function SwapModalHeader({
          isLoading={isPreviewTrade(trade) && trade.tradeType === TradeType.EXACT_INPUT}
          tooltipText={
            trade.tradeType === TradeType.EXACT_INPUT ? (
-              <ThemedText.BodySmall>
+              <ThemedText.Caption>
                <Trans>
                  Output is estimated. You will receive at least{' '}
                  <b>
@@ -58,9 +54,9 @@ export default function SwapModalHeader({
                  </b>{' '}
                  or the transaction will revert.
                </Trans>
-              </ThemedText.BodySmall>
+              </ThemedText.Caption>
            ) : (
-              <ThemedText.BodySmall>
+              <ThemedText.Caption>
                <Trans>
                  Input is estimated. You will sell at most{' '}
                  <b>
@@ -68,12 +64,11 @@ export default function SwapModalHeader({
                  </b>{' '}
                  or the transaction will revert.
                </Trans>
-              </ThemedText.BodySmall>
+              </ThemedText.Caption>
            )
          }
        />
      </Column>
-      <Rule />
    </HeaderContainer>
  )
 }
--- a/src/components/swap/SwapModalHeaderAmount.tsx
+++ b/src/components/swap/SwapModalHeaderAmount.tsx
@@ -61,7 +61,7 @@ export function SwapModalHeaderAmount({
      <Column gap="xs">
        <ThemedText.BodySecondary>
          <MouseoverTooltip text={tooltipText} disabled={!tooltipText}>
-            <Label cursor="help">{label}</Label>
+            <Label cursor={tooltipText ? 'help' : undefined}>{label}</Label>
          </MouseoverTooltip>
        </ThemedText.BodySecondary>
        <Column gap="xs">

--- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
@@ -327,108 +327,114 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
          <div
            class="c18"
          />
-          <div
+          <div>
-            class="c2 c3 c4"
-          >
-            <div
-              class="c9 c19 css-142zc9n"
-              data-testid="swap-li-label"
-            >
-              Price impact
-            </div>
            <div
-              class="c12"
+              class="c2 c3 c4"
            >
-              <div>
+              <div
-                <div
+                class="c9 c19 css-142zc9n"
-                  class="c9 c20 css-142zc9n"
+                data-testid="swap-li-label"
-                >
+              >
-                  <span
+                Price impact
-                    class=""
+              </div>
+              <div
+                class="c12"
+              >
+                <div>
+                  <div
+                    class="c9 c20 css-142zc9n"
                  >
-                    -105566.373%
+                    <span
-                  </span>
+                      class=""
+                    >
+                      -105566.373%
+                    </span>
+                  </div>
                </div>
              </div>
            </div>
          </div>
-          <div
+          <div>
-            class="c2 c3 c4"
-          >
-            <div
-              class="c9 c19 css-142zc9n"
-              data-testid="swap-li-label"
-            >
-              Max. slippage
-            </div>
            <div
-              class="c12"
+              class="c2 c3 c4"
            >
-              <div>
+              <div
-                <div
+                class="c9 c19 css-142zc9n"
-                  class="c9 c20 css-142zc9n"
+                data-testid="swap-li-label"
-                >
+              >
+                Max. slippage
+              </div>
+              <div
+                class="c12"
+              >
+                <div>
                  <div
-                    class="c2 c21"
+                    class="c9 c20 css-142zc9n"
                  >
                    <div
-                      class="c14 c22 css-1lgneq0"
+                      class="c2 c21"
-                    />
+                    >
-                     2%
+                      <div
+                        class="c14 c22 css-1lgneq0"
+                      />
+                       2%
+                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
-          <div
+          <div>
-            class="c2 c3 c4"
-          >
-            <div
-              class="c9 c19 css-142zc9n"
-              data-testid="swap-li-label"
-            >
-              Network cost
-            </div>
            <div
-              class="c12"
+              class="c2 c3 c4"
            >
-              <div>
+              <div
-                <div
+                class="c9 c19 css-142zc9n"
-                  class="c9 c20 css-142zc9n"
+                data-testid="swap-li-label"
-                >
+              >
+                Network cost
+              </div>
+              <div
+                class="c12"
+              >
+                <div>
                  <div
-                    class="c2 c10"
+                    class="c9 c20 css-142zc9n"
                  >
-                    <svg
+                    <div
-                      aria-labelledby="titleID"
+                      class="c2 c10"
-                      height="16"
-                      width="16"
                    >
-                      <title
-                        id="titleID"
-                      >
-                        Ethereum logo
-                      </title>
-                      <rect
-                        fill="#F9F9F9"
-                        height="16"
-                        rx="4"
-                        width="16"
-                      />
-                      <rect
-                        fill="#6B8AFF33"
-                        height="16"
-                        rx="4"
-                        width="16"
-                      />
                      <svg
+                        aria-labelledby="titleID"
                        height="16"
                        width="16"
                      >
-                        ethereum.svg
+                        <title
+                          id="titleID"
+                        >
+                          Ethereum logo
+                        </title>
+                        <rect
+                          fill="#F9F9F9"
+                          height="16"
+                          rx="4"
+                          width="16"
+                        />
+                        <rect
+                          fill="#6B8AFF33"
+                          height="16"
+                          rx="4"
+                          width="16"
+                        />
+                        <svg
+                          height="16"
+                          width="16"
+                        >
+                          ethereum.svg
+                        </svg>
                      </svg>
-                    </svg>
+                      $1.00
-                    $1.00
+                    </div>
                  </div>
                </div>
              </div>
@@ -437,26 +443,28 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
          <div
            class="c18"
          />
-          <div
+          <div>
-            class="c2 c3 c4"
-          >
-            <div
-              class="c9 c19 css-142zc9n"
-              data-testid="swap-li-label"
-            >
-              Order routing
-            </div>
            <div
-              class="c12"
+              class="c2 c3 c4"
            >
-              <div>
+              <div
-                <div
+                class="c9 c19 css-142zc9n"
-                  class="c9 c20 css-142zc9n"
+                data-testid="swap-li-label"
-                >
+              >
+                Order routing
+              </div>
+              <div
+                class="c12"
+              >
+                <div>
                  <div
-                    class="css-142zc9n"
+                    class="c9 c20 css-142zc9n"
                  >
-                    Uniswap Client
+                    <div
+                      class="css-142zc9n"
+                    >
+                      Uniswap Client
+                    </div>
                  </div>
                </div>
              </div>

--- a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
--- a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
@@ -2,6 +2,74 @@
 exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = `
 <DocumentFragment>
+  .c3 {
+  color: #7D7D7D;
+}
+.c1 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: -6px;
+  padding: 0 16px;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  white-space: nowrap;
+}
+.c0 {
+  padding: 0;
+  margin-top: 16px;
+  height: 28px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: none;
+  border: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+<button
+    class="c0"
+  >
+    <div
+      class="c1"
+    />
+    <div
+      class="c2"
+    >
+      <div
+        class="c3 css-142zc9n"
+      >
+        Show more
+      </div>
+      <svg>
+        expando-icon-closed.svg
+      </svg>
+    </div>
+    <div
+      class="c1"
+    />
+  </button>
  .c2 {
  box-sizing: border-box;
  margin: 0;
@@ -68,14 +136,14 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
  justify-content: space-between;
 }
-.c5 {
-  color: #222222;
-}
 .c11 {
  color: #7D7D7D;
 }
+.c5 {
+  color: #222222;
+}
 .c0 {
  display: -webkit-box;
  display: -webkit-flex;
@@ -151,166 +219,192 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
 }
 .c1 {
-  padding: 0 8px;
+  padding-bottom: 8px;
 }
 <div
    class="c0 c1"
  >
-    <div
+    <div>
-      class="c2 c3 c4"
-    >
      <div
-        class="c5 c6 css-142zc9n"
+        class="c2 c3 c4"
-        data-testid="swap-li-label"
      >
-        Rate
+        <div
-      </div>
+          class="c5 c6 css-142zc9n"
-      <div
+          data-testid="swap-li-label"
-        class="c7"
+        >
-      >
+          Rate
-        <div>
+        </div>
-          <div
+        <div
-            class="c5 c8 css-142zc9n"
+          class="c7"
-          >
+        >
-            <button
+          <div>
-              class="c9"
+            <div
-              title="1 DEF = 1.00 ABC "
+              class="c5 c8 css-142zc9n"
            >
-              <div
+              <button
-                class="c5 css-142zc9n"
+                class="c9"
+                title="1 DEF = 1.00 ABC "
              >
-                1 DEF = 1.00 ABC 
+                <div
-              </div>
+                  class="c5 css-142zc9n"
+                >
-            </button>
+                  1 DEF = 1.00 ABC 
+                </div>
+              </button>
+            </div>
          </div>
        </div>
      </div>
    </div>
    <div
-      class="c2 c3 c4"
+      style="height: 0px; margin-top: -12px; overflow: hidden; width: 100%; min-width: min-content; will-change: height;"
    >
-      <div
+      <div>
-        class="c5 c6 css-142zc9n"
+        <div
-        data-testid="swap-li-label"
+          class="c0"
-      >
+        >
-        Price impact
-      </div>
-      <div
-        class="c7"
-      >
-        <div>
          <div
-            class="c5 c8 css-142zc9n"
+            style="opacity: 0;"
          >
-            <span
+            <div
-              class=""
+              class="c2 c3 c4"
            >
-              -105566.373%
+              <div
-            </span>
+                class="c5 c6 css-142zc9n"
+                data-testid="swap-li-label"
+              >
+                Price impact
+              </div>
+              <div
+                class="c7"
+              >
+                <div>
+                  <div
+                    class="c5 c8 css-142zc9n"
+                  >
+                    <span
+                      class=""
+                    >
+                      -105566.373%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c2 c3 c4"
-    >
-      <div
-        class="c5 c6 css-142zc9n"
-        data-testid="swap-li-label"
-      >
-        Max. slippage
-      </div>
-      <div
-        class="c7"
-      >
-        <div>
          <div
-            class="c5 c8 css-142zc9n"
+            style="opacity: 0;"
          >
            <div
-              class="c2 c10"
+              class="c2 c3 c4"
            >
              <div
-                class="c11 c12 css-1lgneq0"
+                class="c5 c6 css-142zc9n"
-              />
+                data-testid="swap-li-label"
-               2%
+              >
+                Max. slippage
+              </div>
+              <div
+                class="c7"
+              >
+                <div>
+                  <div
+                    class="c5 c8 css-142zc9n"
+                  >
+                    <div
+                      class="c2 c10"
+                    >
+                      <div
+                        class="c11 c12 css-1lgneq0"
+                      />
+                       2%
+                    </div>
+                  </div>
+                </div>
+              </div>
            </div>
          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c2 c3 c4"
-    >
-      <div
-        class="c5 c6 css-142zc9n"
-        data-testid="swap-li-label"
-      >
-        Receive at least
-      </div>
-      <div
-        class="c7"
-      >
-        <div>
          <div
-            class="c5 c8 css-142zc9n"
+            style="opacity: 0;"
          >
-            0.00000000000000098 DEF
+            <div
+              class="c2 c3 c4"
+            >
+              <div
+                class="c5 c6 css-142zc9n"
+                data-testid="swap-li-label"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c7"
+              >
+                <div>
+                  <div
+                    class="c5 c8 css-142zc9n"
+                  >
+                    0.00000000000000098 DEF
+                  </div>
+                </div>
+              </div>
+            </div>
          </div>
        </div>
      </div>
    </div>
-    <div
+    <div>
-      class="c2 c3 c4"
-    >
      <div
-        class="c5 c6 css-142zc9n"
+        class="c2 c3 c4"
-        data-testid="swap-li-label"
      >
-        Network cost
+        <div
-      </div>
+          class="c5 c6 css-142zc9n"
-      <div
+          data-testid="swap-li-label"
-        class="c7"
+        >
-      >
+          Network cost
-        <div>
+        </div>
-          <div
+        <div
-            class="c5 c8 css-142zc9n"
+          class="c7"
-          >
+        >
+          <div>
            <div
-              class="c2 c13"
+              class="c5 c8 css-142zc9n"
            >
-              <svg
+              <div
-                aria-labelledby="titleID"
+                class="c2 c13"
-                height="16"
-                width="16"
              >
-                <title
-                  id="titleID"
-                >
-                  Ethereum logo
-                </title>
-                <rect
-                  fill="#F9F9F9"
-                  height="16"
-                  rx="4"
-                  width="16"
-                />
-                <rect
-                  fill="#6B8AFF33"
-                  height="16"
-                  rx="4"
-                  width="16"
-                />
                <svg
+                  aria-labelledby="titleID"
                  height="16"
                  width="16"
                >
-                  ethereum.svg
+                  <title
+                    id="titleID"
+                  >
+                    Ethereum logo
+                  </title>
+                  <rect
+                    fill="#F9F9F9"
+                    height="16"
+                    rx="4"
+                    width="16"
+                  />
+                  <rect
+                    fill="#6B8AFF33"
+                    height="16"
+                    rx="4"
+                    width="16"
+                  />
+                  <svg
+                    height="16"
+                    width="16"
+                  >
+                    ethereum.svg
+                  </svg>
                </svg>
-              </svg>
+                $1.00
-              $1.00
+              </div>
            </div>
          </div>
        </div>
@@ -467,7 +561,6 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
 .c6 {
  height: 56px;
-  margin-top: 10px;
 }
 <div
@@ -490,6 +583,78 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
 exports[`SwapModalFooter.tsx renders a preview trade while disabling submission 1`] = `
 <DocumentFragment>
+  .c3 {
+  color: #7D7D7D;
+}
+.c1 {
+  width: 100%;
+  height: 1px;
+  background-color: #22222212;
+}
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: -6px;
+  padding: 0 16px;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  white-space: nowrap;
+}
+.c0 {
+  padding: 0;
+  margin-top: 16px;
+  height: 28px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: none;
+  border: none;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+}
+@media (max-width:960px) {
+}
+<button
+    class="c0"
+  >
+    <div
+      class="c1"
+    />
+    <div
+      class="c2"
+    >
+      <div
+        class="c3 css-142zc9n"
+      >
+        Show more
+      </div>
+      <svg>
+        expando-icon-closed.svg
+      </svg>
+    </div>
+    <div
+      class="c1"
+    />
+  </button>
  .c2 {
  box-sizing: border-box;
  margin: 0;
@@ -538,14 +703,14 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
  justify-content: space-between;
 }
-.c5 {
-  color: #222222;
-}
 .c13 {
  color: #7D7D7D;
 }
+.c5 {
+  color: #222222;
+}
 .c0 {
  display: -webkit-box;
  display: -webkit-flex;
@@ -639,7 +804,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
 }
 .c1 {
-  padding: 0 8px;
+  padding-bottom: 8px;
 }
 @media (max-width:960px) {
@@ -649,128 +814,154 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
 <div
    class="c0 c1"
  >
-    <div
+    <div>
-      class="c2 c3 c4"
-    >
      <div
-        class="c5 c6 css-142zc9n"
+        class="c2 c3 c4"
-        data-testid="swap-li-label"
      >
-        Rate
+        <div
-      </div>
+          class="c5 c6 css-142zc9n"
-      <div
+          data-testid="swap-li-label"
-        class="c5 c7 css-142zc9n"
-      >
-        <button
-          class="c8"
-          title="1 DEF = 1.00 ABC "
        >
-          <div
+          Rate
-            class="c5 css-142zc9n"
+        </div>
+        <div
+          class="c5 c7 css-142zc9n"
+        >
+          <button
+            class="c8"
+            title="1 DEF = 1.00 ABC "
          >
-            1 DEF = 1.00 ABC 
+            <div
-          </div>
+              class="c5 css-142zc9n"
+            >
-        </button>
+              1 DEF = 1.00 ABC 
+            </div>
+          </button>
+        </div>
      </div>
    </div>
    <div
-      class="c2 c3 c4"
+      style="height: 0px; margin-top: -12px; overflow: hidden; width: 100%; min-width: min-content; will-change: height;"
    >
-      <div
+      <div>
-        class="c5 c9 css-142zc9n"
+        <div
-        data-testid="swap-li-label"
+          class="c0"
-      >
+        >
-        Price impact
-      </div>
-      <div
-        class="c10"
-      >
-        <div>
          <div
-            class="c5 c7 css-142zc9n"
+            style="opacity: 0;"
          >
            <div
-              class="c11"
+              class="c2 c3 c4"
-              data-testid="loading-row"
+            >
-              height="15"
+              <div
-              width="50"
+                class="c5 c9 css-142zc9n"
-            />
+                data-testid="swap-li-label"
+              >
+                Price impact
+              </div>
+              <div
+                class="c10"
+              >
+                <div>
+                  <div
+                    class="c5 c7 css-142zc9n"
+                  >
+                    <div
+                      class="c11"
+                      data-testid="loading-row"
+                      height="15"
+                      width="50"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c2 c3 c4"
-    >
-      <div
-        class="c5 c9 css-142zc9n"
-        data-testid="swap-li-label"
-      >
-        Max. slippage
-      </div>
-      <div
-        class="c10"
-      >
-        <div>
          <div
-            class="c5 c7 css-142zc9n"
+            style="opacity: 0;"
          >
            <div
-              class="c2 c12"
+              class="c2 c3 c4"
            >
              <div
-                class="c13 c14 css-1lgneq0"
+                class="c5 c9 css-142zc9n"
-              />
+                data-testid="swap-li-label"
-               2%
+              >
+                Max. slippage
+              </div>
+              <div
+                class="c10"
+              >
+                <div>
+                  <div
+                    class="c5 c7 css-142zc9n"
+                  >
+                    <div
+                      class="c2 c12"
+                    >
+                      <div
+                        class="c13 c14 css-1lgneq0"
+                      />
+                       2%
+                    </div>
+                  </div>
+                </div>
+              </div>
            </div>
          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="c2 c3 c4"
-    >
-      <div
-        class="c5 c9 css-142zc9n"
-        data-testid="swap-li-label"
-      >
-        Receive at least
-      </div>
-      <div
-        class="c10"
-      >
-        <div>
          <div
-            class="c5 c7 css-142zc9n"
+            style="opacity: 0;"
          >
-            0.00000000000000098 DEF
+            <div
+              class="c2 c3 c4"
+            >
+              <div
+                class="c5 c9 css-142zc9n"
+                data-testid="swap-li-label"
+              >
+                Receive at least
+              </div>
+              <div
+                class="c10"
+              >
+                <div>
+                  <div
+                    class="c5 c7 css-142zc9n"
+                  >
+                    0.00000000000000098 DEF
+                  </div>
+                </div>
+              </div>
+            </div>
          </div>
        </div>
      </div>
    </div>
-    <div
+    <div>
-      class="c2 c3 c4"
-    >
      <div
-        class="c5 c9 css-142zc9n"
+        class="c2 c3 c4"
-        data-testid="swap-li-label"
      >
-        Network cost
+        <div
-      </div>
+          class="c5 c9 css-142zc9n"
-      <div
+          data-testid="swap-li-label"
-        class="c10"
+        >
-      >
+          Network cost
-        <div>
+        </div>
-          <div
+        <div
-            class="c5 c7 css-142zc9n"
+          class="c10"
-          >
+        >
+          <div>
            <div
-              class="c11"
+              class="c5 c7 css-142zc9n"
-              data-testid="loading-row"
+            >
-              height="15"
+              <div
-              width="50"
+                class="c11"
-            />
+                data-testid="loading-row"
+                height="15"
+                width="50"
+              />
+            </div>
          </div>
        </div>
      </div>
@@ -977,7 +1168,6 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
 .c6 {
  height: 56px;
-  margin-top: 10px;
 }
 @media (max-width:960px) {

--- a/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap
@@ -34,14 +34,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
  color: #222222;
 }
-.c13 {
-  width: 100%;
-  height: 1px;
-  border-width: 0;
-  margin: 0;
-  background-color: #22222212;
-}
 .c2 {
  display: -webkit-box;
  display: -webkit-flex;
@@ -111,13 +103,14 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
 }
 .c9 {
-  cursor: help;
  color: #7D7D7D;
  margin-right: 8px;
 }
-.c14 {
+.c13 {
-  margin: 16px 2px 24px 2px;
+  cursor: help;
+  color: #7D7D7D;
+  margin-right: 8px;
 }
 .c1 {
@@ -145,7 +138,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
              <div>
                <div
                  class="c8 c9 css-142zc9n"
-                  cursor="help"
                >
                  You pay
                </div>
@@ -192,7 +184,7 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
            >
              <div>
                <div
-                  class="c8 c9 css-142zc9n"
+                  class="c8 c13 css-142zc9n"
                  cursor="help"
                >
                  You receive
@@ -227,9 +219,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
        </div>
      </div>
    </div>
-    <div
-      class="c13 c14"
-    />
  </div>
 </DocumentFragment>
 `;
@@ -268,14 +257,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
  color: #222222;
 }
-.c13 {
-  width: 100%;
-  height: 1px;
-  border-width: 0;
-  margin: 0;
-  background-color: #22222212;
-}
 .c2 {
  display: -webkit-box;
  display: -webkit-flex;
@@ -345,13 +326,14 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
 }
 .c9 {
-  cursor: help;
  color: #7D7D7D;
  margin-right: 8px;
 }
-.c14 {
+.c13 {
-  margin: 16px 2px 24px 2px;
+  cursor: help;
+  color: #7D7D7D;
+  margin-right: 8px;
 }
 .c1 {
@@ -379,7 +361,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
              <div>
                <div
                  class="c8 c9 css-142zc9n"
-                  cursor="help"
                >
                  You pay
                </div>
@@ -426,7 +407,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
            >
              <div>
                <div
-                  class="c8 c9 css-142zc9n"
+                  class="c8 c13 css-142zc9n"
                  cursor="help"
                >
                  You receive
@@ -461,9 +442,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
        </div>
      </div>
    </div>
-    <div
-      class="c13 c14"
-    />
  </div>
 </DocumentFragment>
 `;
@@ -502,14 +480,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
  color: #222222;
 }
-.c13 {
-  width: 100%;
-  height: 1px;
-  border-width: 0;
-  margin: 0;
-  background-color: #22222212;
-}
 .c2 {
  display: -webkit-box;
  display: -webkit-flex;
@@ -579,13 +549,14 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
 }
 .c9 {
-  cursor: help;
  color: #7D7D7D;
  margin-right: 8px;
 }
-.c14 {
+.c13 {
-  margin: 16px 2px 24px 2px;
+  cursor: help;
+  color: #7D7D7D;
+  margin-right: 8px;
 }
 .c1 {
@@ -613,7 +584,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
              <div>
                <div
                  class="c8 c9 css-142zc9n"
-                  cursor="help"
                >
                  You pay
                </div>
@@ -660,7 +630,7 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
            >
              <div>
                <div
-                  class="c8 c9 css-142zc9n"
+                  class="c8 c13 css-142zc9n"
                  cursor="help"
                >
                  You receive
@@ -695,9 +665,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
        </div>
      </div>
    </div>
-    <div
-      class="c13 c14"
-    />
  </div>
 </DocumentFragment>
 `;
@@ -736,14 +703,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
  color: #222222;
 }
-.c13 {
-  width: 100%;
-  height: 1px;
-  border-width: 0;
-  margin: 0;
-  background-color: #22222212;
-}
 .c2 {
  display: -webkit-box;
  display: -webkit-flex;
@@ -813,13 +772,14 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
 }
 .c9 {
-  cursor: help;
  color: #7D7D7D;
  margin-right: 8px;
 }
-.c14 {
+.c13 {
-  margin: 16px 2px 24px 2px;
+  cursor: help;
+  color: #7D7D7D;
+  margin-right: 8px;
 }
 .c1 {
@@ -847,7 +807,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
              <div>
                <div
                  class="c8 c9 css-142zc9n"
-                  cursor="help"
                >
                  You pay
                </div>
@@ -894,7 +853,7 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
            >
              <div>
                <div
-                  class="c8 c9 css-142zc9n"
+                  class="c8 c13 css-142zc9n"
                  cursor="help"
                >
                  You receive
@@ -929,9 +888,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
        </div>
      </div>
    </div>
-    <div
-      class="c13 c14"
-    />
  </div>
 </DocumentFragment>
 `;