ci(release): publish latest release

RELEASE

 IPFS hash of the deployment:
-- CIDv0: `QmREL7zj6bMggt5yrx5mfiWCnWzbP1xAoVTYAd2J3uFgtb`
-- CIDv1: `bafybeibk6showu2rchiizehaujrhea6a3ebhhapm3ivjdrhnddgbx2u3tq`
+- CIDv0: `QmVMsr8YpWVo2SyEuQwKBNaBDKv7uZcZkN63VTDrMgfsX1`
+- CIDv1: `bafybeidiki7lac24gv6xgw65hvxrrqfpk2bdgjsj63rl2uuf5yijufqj6q`
 
 The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).
 
@@ -10,50 +10,15 @@ You can also access the Uniswap Interface from an IPFS gateway.
 Your Uniswap settings are never remembered across different URLs.
 
 IPFS gateways:
-- https://bafybeibk6showu2rchiizehaujrhea6a3ebhhapm3ivjdrhnddgbx2u3tq.ipfs.dweb.link/
-- https://bafybeibk6showu2rchiizehaujrhea6a3ebhhapm3ivjdrhnddgbx2u3tq.ipfs.cf-ipfs.com/
-- [ipfs://QmREL7zj6bMggt5yrx5mfiWCnWzbP1xAoVTYAd2J3uFgtb/](ipfs://QmREL7zj6bMggt5yrx5mfiWCnWzbP1xAoVTYAd2J3uFgtb/)
+- https://bafybeidiki7lac24gv6xgw65hvxrrqfpk2bdgjsj63rl2uuf5yijufqj6q.ipfs.dweb.link/
+- https://bafybeidiki7lac24gv6xgw65hvxrrqfpk2bdgjsj63rl2uuf5yijufqj6q.ipfs.cf-ipfs.com/
+- [ipfs://QmVMsr8YpWVo2SyEuQwKBNaBDKv7uZcZkN63VTDrMgfsX1/](ipfs://QmVMsr8YpWVo2SyEuQwKBNaBDKv7uZcZkN63VTDrMgfsX1/)
 
-## 5.61.0 (2024-12-04)
-
-
-### Features
-
-* **web:** add privacy choices nav and modal (#13703) 87a958d
-* **web:** add the range chart into the creation flow (#14008) a0c8c02
-* **web:** reset confirmation modal for positions (#14080) 3485968
-* **web:** support v4 tick data in range input (#14040) 68211cc
+### 5.61.1 (2024-12-06)
 
 
 ### Bug Fixes
 
-* **web:** [1/n] remove react-spring usage (AnimatedDropdown) (#13891) 9af3573
-* **web:** [2/n] remove react-spring usage (modal) (#13904) b9a0890
-* **web:** android keyboard issue (#14266) 7b9834c
-* **web:** bunch of v4 ui polish (#14117) d724fcb
-* **web:** fix newly created v2 pairs (#14061) 5b30b6f
-* **web:** fix refetching and caching issues due to the deadline (#14155) 46856f6
-* **web:** handle gql refetch balance for unknown tx types (#14060) 7413d91
-* **web:** hotfixing v4 fixes (#14244) f3c9411
-* **web:** increase size of pointer target for the filter dropdown (#14068) 2b36a2c
-* **web:** op usdc sends (#14205) ecfe6df
-* **web:** remove nondefault list tokens from common bases (#14203) 42d8203
-* **web:** remove top pools from mweb table (#14053) fa9080a
-* **web:** sticky left column create pool (#14122) dcafb2e
-* **web:** tiny v4 deposit polish (#14059) 002273a
-* **web:** token protection polishes (#14038) fe36c5d
-* **web:** update support articles for v4 and lp redesign (#14257) ec4508b
-* **web:** v2 loading state (#14050) 79bed9c
-* **web:** v4 LP flow cherrypicks (#14196) 0f2dc25
-
-
-### Continuous Integration
-
-* **web:** update sitemaps ef443f0
-
-
-### Tests
-
-* **web:** fix wallet connection test (#14047) 123862c
+* **web): Revert "fix(web:** [2/n] remove react-spring usage (modal) (#13904)" (#14314) 28dfe99
 
 

VERSION

-web/5.61.0
\ No newline at end of file
+web/5.61.1
\ No newline at end of file

apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/CancelOrdersDialog.tsx

@@ -3,6 +3,7 @@ import { ConfirmedIcon, LogoContainer, SubmittedIcon } from 'components/AccountD
 import { useCancelOrdersGasEstimate } from 'components/AccountDrawer/MiniPortfolio/Activity/hooks'
 import { Container, Dialog, DialogButtonType, DialogProps } from 'components/Dialog/Dialog'
 import { LoaderV3 } from 'components/Icons/LoadingSpinner'
+import Modal from 'components/Modal'
 import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
 import Column from 'components/deprecated/Column'
 import Row from 'components/deprecated/Row'
@@ -11,7 +12,6 @@ import styled, { useTheme } from 'lib/styled-components'
 import { Slash } from 'react-feather'
 import { SignatureType, UniswapXOrderDetails } from 'state/signatures/types'
 import { ExternalLink, ThemedText } from 'theme/components'
-import { AdaptiveWebModal } from 'ui/src'
 import { nativeOnChain } from 'uniswap/src/constants/tokens'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { useUSDCValue } from 'uniswap/src/features/transactions/swap/hooks/useUSDCPrice'
@@ -100,7 +100,7 @@ export function CancelOrdersDialog(
       (cancelState === CancellationState.CANCELLED || cancelState === CancellationState.PENDING_CONFIRMATION) &&
       cancelTxHash
     return (
-      <AdaptiveWebModal isOpen onClose={onCancel} maxHeight="90vh" p={0}>
+      <Modal isOpen $scrollOverlay onDismiss={onCancel} maxHeight="90vh">
         <Container gap="lg">
           <ModalHeader closeModal={onCancel} />
           <LogoContainer>{icon}</LogoContainer>
@@ -122,7 +122,7 @@ export function CancelOrdersDialog(
             )}
           </Row>
         </Container>
-      </AdaptiveWebModal>
+      </Modal>
     )
   } else if (cancelState === CancellationState.REVIEWING_CANCELLATION) {
     return (

apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx

@@ -17,6 +17,7 @@ import { formatTimestamp } from 'components/AccountDrawer/MiniPortfolio/formatTi
 import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons'
 import { OpacityHoverState } from 'components/Common/styles'
 import AlertTriangleFilled from 'components/Icons/AlertTriangleFilled'
+import Modal from 'components/Modal'
 import Column, { AutoColumn } from 'components/deprecated/Column'
 import Row from 'components/deprecated/Row'
 import { LimitDisclaimer } from 'components/swap/LimitDisclaimer'
@@ -32,7 +33,6 @@ import { useOrder } from 'state/signatures/hooks'
 import { SignatureType, UniswapXOrderDetails } from 'state/signatures/types'
 import { Divider, ThemedText } from 'theme/components'
 import { UniswapXOrderStatus } from 'types/uniswapx'
-import { AdaptiveWebModal } from 'ui/src'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { InterfaceEventNameLocal } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
@@ -382,11 +382,10 @@ export function OffchainActivityModal() {
           cancelTxHash={cancelTxHash}
         />
       )}
-      <AdaptiveWebModal
+      <Modal
         maxWidth={375}
         isOpen={!!selectedOrderAtomValue?.modalOpen && cancelState === CancellationState.NOT_STARTED}
-        onClose={reset}
-        p={0}
+        onDismiss={reset}
       >
         <Wrapper data-testid="offchain-activity-modal">
           <Row justify="space-between">
@@ -405,7 +404,7 @@ export function OffchainActivityModal() {
             />
           )}
         </Wrapper>
-      </AdaptiveWebModal>
+      </Modal>
     </>
   )
 }

apps/web/src/components/AccountDrawer/UniwalletModal.tsx

 import { InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import MobileAppLogo from 'assets/svg/uniswap_app_logo.svg'
+import Modal from 'components/Modal'
 import { useConnect } from 'hooks/useConnect'
 import { useCallback, useEffect, useState } from 'react'
 import { CloseIcon } from 'theme/components'
-import { AdaptiveWebModal, Button, Flex, Image, QRCodeDisplay, Separator, Text, useSporeColors } from 'ui/src'
+import { Button, Flex, Image, QRCodeDisplay, Separator, Text, useSporeColors } from 'ui/src'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
 import { useTranslation } from 'uniswap/src/i18n'
 import { isWebAndroid, isWebIOS } from 'utilities/src/platform'
@@ -47,7 +48,7 @@ export default function UniwalletModal() {
 
   const colors = useSporeColors()
   return (
-    <AdaptiveWebModal isOpen={open} onClose={close} p={0}>
+    <Modal isOpen={open} onDismiss={close}>
       <Flex shrink grow p="$spacing20">
         <Flex row justifyContent="space-between">
           <Text variant="subheading1">{t('account.drawer.modal.scan')}</Text>
@@ -87,6 +88,6 @@ export default function UniwalletModal() {
           </Button>
         </Flex>
       </Flex>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/AccountDrawer/__snapshots__/index.test.tsx.snap

@@ -730,16 +730,9 @@ exports[`AccountDrawer tests AccountDrawer default styles 1`] = `
                   class="c6"
                   data-testid="wallet-modal"
                 >
-                  <span
-                    class="font_unset _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _position-absolute _width-1px _height-1px _mt--1px _mr--1px _mb--1px _ml--1px _zIndex--10000 _overflowX-hidden _overflowY-hidden _opacity-1e-8 _pointerEvents-none"
-                  >
-                    <h2
-                      class="is_DialogTitle font_heading _display-inline _boxSizing-border-box _wordWrap-break-word _fontFamily-f-family _color-color _fontWeight-f-weight-me3083741 _fontSize-f-size-medi3736 _lineHeight-f-lineHeigh507465454 _userSelect-auto _whiteSpace-normal _mt-0px _mr-0px _mb-0px _ml-0px"
-                      data-disable-theme="true"
-                      id="title-:r0:"
-                      role="heading"
+                  <div
+                    tabindex="0"
                   />
-                  </span>
                   <div
                     class="c7 c8 c9"
                     width="100%"

apps/web/src/components/ConfirmSwapModal/Modal.tsx

 import { InterfaceModalName } from '@uniswap/analytics-events'
+import Modal from 'components/Modal'
 import { AutoColumn } from 'components/deprecated/Column'
 import styled from 'lib/styled-components'
 import { PropsWithChildren } from 'react'
-import { AdaptiveWebModal, HeightAnimator } from 'ui/src'
+import { HeightAnimator } from 'ui/src'
 import Trace from 'uniswap/src/features/telemetry/Trace'
 
 const Content = styled(AutoColumn)`
@@ -20,7 +21,7 @@ export function SwapModal({
 }>) {
   return (
     <Trace modal={InterfaceModalName.CONFIRM_SWAP}>
-      <AdaptiveWebModal isOpen onClose={onDismiss} maxHeight="90vh" p={0}>
+      <Modal isOpen $scrollOverlay onDismiss={onDismiss} maxHeight="90vh" slideIn>
         <HeightAnimator
           open={true}
           width="100%"
@@ -35,7 +36,7 @@ export function SwapModal({
         >
           <Content>{children}</Content>
         </HeightAnimator>
-      </AdaptiveWebModal>
+      </Modal>
     </Trace>
   )
 }

apps/web/src/components/ConfirmSwapModal/index.tsx

@@ -5,6 +5,7 @@ import { SwapHead } from 'components/ConfirmSwapModal/Head'
 import { SwapModal } from 'components/ConfirmSwapModal/Modal'
 import { Pending } from 'components/ConfirmSwapModal/Pending'
 import SwapProgressIndicator from 'components/ConfirmSwapModal/ProgressIndicator'
+import { MODAL_TRANSITION_DURATION } from 'components/Modal'
 import { AutoColumn } from 'components/deprecated/Column'
 import { SwapDetails } from 'components/swap/SwapDetails'
 import { SwapPreview } from 'components/swap/SwapPreview'
@@ -185,7 +186,7 @@ export function ConfirmSwapModal({
     setTimeout(() => {
       // Reset local state after the modal dismiss animation finishes, to avoid UI flicker as it dismisses
       onCancel()
-    }, 200)
+    }, MODAL_TRANSITION_DURATION)
     // Popups are suppressed when modal is open; re-enable them on dismissal
     unsuppressPopups()
   }, [confirmModalState, doesTradeDiffer, onCancel, onDismiss, priceUpdate, unsuppressPopups, trade])

apps/web/src/components/ConnectedAccountBlocked.tsx

 import Column from 'components/deprecated/Column'
+import Modal from 'components/Modal'
 import styled, { useTheme } from 'lib/styled-components'
 import { Slash } from 'react-feather'
 import { CopyHelper, ExternalLink, ThemedText } from 'theme/components'
-import { AdaptiveWebModal, Flex, Text } from 'ui/src'
+import { Flex, Text } from 'ui/src'
 import { Trans } from 'uniswap/src/i18n'
 
 const ContentWrapper = styled(Column)`
@@ -19,7 +20,7 @@ interface ConnectedAccountBlockedProps {
 export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedProps) {
   const theme = useTheme()
   return (
-    <AdaptiveWebModal isOpen={props.isOpen} onClose={Function.prototype()} p={0}>
+    <Modal isOpen={props.isOpen} onDismiss={Function.prototype()}>
       <ContentWrapper>
         <Slash size="22px" color={theme.neutral2} />
         <ThemedText.DeprecatedLargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
@@ -55,6 +56,6 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
           />
         </ThemedText.DeprecatedMain>
       </ContentWrapper>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/Dialog/Dialog.tsx

 import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons'
+import Modal from 'components/Modal'
 import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
 import { ColumnCenter } from 'components/deprecated/Column'
 import Row from 'components/deprecated/Row'
@@ -6,11 +7,11 @@ import styled, { DefaultTheme } from 'lib/styled-components'
 import { ReactNode } from 'react'
 import { Gap } from 'theme'
 import { ThemedText } from 'theme/components'
-import { AdaptiveWebModal } from 'ui/src'
 
 export const Container = styled(ColumnCenter)`
   background-color: ${({ theme }) => theme.surface1};
-  border-radius: 16px;
+  outline: 1px solid ${({ theme }) => theme.surface3};
+  border-radius: 20px;
   padding: 16px 24px 24px 24px;
   width: 100%;
 `
@@ -160,11 +161,11 @@ export function DialogContent({ icon, title, description, body, buttonsConfig }:
  */
 export function Dialog(props: DialogProps) {
   return (
-    <AdaptiveWebModal isOpen={props.isVisible} onClose={props.onCancel} p={0}>
+    <Modal $scrollOverlay isOpen={props.isVisible} onDismiss={props.onCancel}>
       <Container gap="lg">
         <DialogHeader closeModal={props.onCancel} closeDataTestId="Dialog-closeButton" />
         <DialogContent {...props} />
       </Container>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx

 import { SmallButtonPrimary } from 'components/Button/buttons'
+import Modal from 'components/Modal'
 import Column from 'components/deprecated/Column'
 import Row from 'components/deprecated/Row'
 import { useQuickRouteChains } from 'featureFlags/dynamicConfig/quickRouteChains'
@@ -8,7 +9,6 @@ import { X } from 'react-feather'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import { BREAKPOINTS } from 'theme'
-import { AdaptiveWebModal } from 'ui/src'
 import { SUPPORTED_CHAIN_IDS } from 'uniswap/src/features/chains/types'
 import {
   DynamicConfigKeys,
@@ -203,7 +203,7 @@ export default function FeatureFlagModal() {
   const closeModal = useCloseModal()
 
   return (
-    <AdaptiveWebModal isOpen={open} onClose={closeModal} p={0}>
+    <Modal isOpen={open} onDismiss={closeModal}>
       <Wrapper>
         <Header>
           <Row width="100%" justify="space-between">
@@ -291,6 +291,6 @@ export default function FeatureFlagModal() {
         </FlagsColumn>
         <SaveButton onClick={() => window.location.reload()}>Reload</SaveButton>
       </Wrapper>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/Modal/index.tsx

+//
+// @deprecated Prefer Modal from packages/uniswap/src/components/modals/Modal.tsx
+//
+// TODO(WEB-4886): Remove this
+//
+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import styled from 'lib/styled-components'
+import React, { KeyboardEvent, useCallback, useRef } from 'react'
+import { animated, easings, useSpring, useTransition } from 'react-spring'
+import { useGesture } from 'react-use-gesture'
+import { Z_INDEX } from 'theme/zIndex'
+import { isMobileWeb } from 'utilities/src/platform'
+
+export const MODAL_TRANSITION_DURATION = 200
+
+const AnimatedDialogOverlay = animated(DialogOverlay)
+
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ $scrollOverlay?: boolean }>`
+  will-change: transform, opacity;
+  &[data-reach-dialog-overlay] {
+    z-index: ${Z_INDEX.modalBackdrop};
+    background-color: transparent;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
+      align-items: flex-end;
+    }
+    overflow-y: ${({ $scrollOverlay }) => $scrollOverlay && 'scroll'};
+    justify-content: center;
+
+    background-color: ${({ theme }) => theme.scrim};
+  }
+`
+
+type Dimension = number | string
+
+function dimensionsToCss(dimensions: Dimension) {
+  if (typeof dimensions === 'number') {
+    return `${dimensions}px`
+  }
+  return dimensions
+}
+
+type StyledDialogProps = {
+  $height?: Dimension
+  $minHeight?: Dimension
+  $maxHeight?: Dimension
+  $scrollOverlay?: boolean
+  $hideBorder?: boolean
+  $maxWidth: Dimension
+}
+
+const AnimatedDialogContent = animated(DialogContent)
+const StyledDialogContent = styled(AnimatedDialogContent)<StyledDialogProps>`
+  overflow-y: auto;
+
+  &[data-reach-dialog-content] {
+    margin: auto;
+    background-color: ${({ theme }) => theme.surface2};
+    border: ${({ theme, $hideBorder }) => !$hideBorder && `1px solid ${theme.surface3}`};
+    box-shadow: ${({ theme }) => theme.deprecated_deepShadow};
+    padding: 0px;
+    width: 50vw;
+    overflow-y: auto;
+    overflow-x: hidden;
+    ${({ $height }) => $height && `height: ${dimensionsToCss($height)};`}
+    ${({ $maxHeight }) => $maxHeight && `max-height: ${dimensionsToCss($maxHeight)};`}
+    ${({ $minHeight }) => $minHeight && `min-height: ${dimensionsToCss($minHeight)};`}
+    ${({ $maxWidth }) => $maxWidth && `max-width: ${dimensionsToCss($maxWidth)};`}
+    display: ${({ $scrollOverlay }) => ($scrollOverlay ? 'inline-table' : 'flex')};
+    border-radius: 20px;
+
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.md}px) {
+      width: 65vw;
+    }
+    @media screen and (max-width: ${({ theme }) => theme.breakpoint.sm}px) {
+      margin: 0;
+      width: 100vw;
+      border-radius: 20px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+`
+
+interface ModalProps {
+  isOpen: boolean
+  onDismiss?: () => void
+  onSwipe?: () => void
+  height?: Dimension
+  minHeight?: Dimension
+  maxHeight?: Dimension
+  maxWidth?: Dimension
+  initialFocusRef?: React.RefObject<any>
+  children?: React.ReactNode
+  $scrollOverlay?: boolean
+  hideBorder?: boolean
+  slideIn?: boolean
+}
+
+export default function Modal({
+  isOpen,
+  onDismiss,
+  minHeight,
+  maxHeight = '90vh',
+  maxWidth = 420,
+  height,
+  initialFocusRef,
+  children,
+  onSwipe = onDismiss,
+  $scrollOverlay,
+  hideBorder = false,
+  slideIn,
+}: ModalProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  useOnClickOutside(ref, () => (isOpen && onDismiss ? onDismiss() : undefined))
+
+  const handleEscape = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Escape' && isOpen && onDismiss) {
+        onDismiss()
+      }
+    },
+    [isOpen, onDismiss],
+  )
+
+  const fadeTransition = useTransition(isOpen, {
+    config: { duration: MODAL_TRANSITION_DURATION },
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+  })
+
+  const slideTransition = useTransition(isOpen, {
+    config: { duration: MODAL_TRANSITION_DURATION, easing: easings.easeInOutCubic },
+    from: { transform: 'translateY(40px)' },
+    enter: { transform: 'translateY(0px)' },
+    leave: { transform: 'translateY(40px)' },
+  })
+
+  const [{ y }, set] = useSpring(() => ({ y: 0, config: { mass: 1, tension: 210, friction: 20 } }))
+  const bind = useGesture({
+    onDrag: (state) => {
+      set({
+        y: state.down ? state.movement[1] : 0,
+      })
+      if (state.movement[1] > 300 || (state.velocity > 3 && state.direction[1] > 0)) {
+        onSwipe?.()
+      }
+    },
+  })
+
+  return (
+    <div tabIndex={0} onKeyUp={handleEscape}>
+      {fadeTransition(
+        ({ opacity }, item) =>
+          item && (
+            <StyledDialogOverlay
+              style={{ opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] }) }}
+              onDismiss={onDismiss}
+              initialFocusRef={initialFocusRef}
+              unstable_lockFocusAcrossFrames={false}
+              $scrollOverlay={$scrollOverlay}
+            >
+              {slideTransition(
+                (styles, item) =>
+                  item && (
+                    <StyledDialogContent
+                      ref={ref}
+                      {...(isMobileWeb
+                        ? {
+                            ...bind(),
+                            style: { transform: y.interpolate((y) => `translateY(${(y as number) > 0 ? y : 0}px)`) },
+                          }
+                        : slideIn
+                          ? { style: styles }
+                          : {})}
+                      aria-label="dialog"
+                      $height={height}
+                      $minHeight={minHeight}
+                      $maxHeight={maxHeight}
+                      $scrollOverlay={$scrollOverlay}
+                      $hideBorder={hideBorder}
+                      $maxWidth={maxWidth}
+                    >
+                      {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
+                      {!initialFocusRef && isMobileWeb ? <div tabIndex={1} /> : null}
+                      {children}
+                    </StyledDialogContent>
+                  ),
+              )}
+            </StyledDialogOverlay>
+          ),
+      )}
+    </div>
+  )
+}

apps/web/src/components/NavBar/DownloadApp/Modal/index.tsx

 import { InterfaceModalName } from '@uniswap/analytics-events'
 import { useAccountDrawer } from 'components/AccountDrawer/MiniPortfolio/hooks'
+import Modal from 'components/Modal'
 import { useIsAccountCTAExperimentControl } from 'components/NavBar/accountCTAsExperimentUtils'
 import { GetStarted } from 'components/NavBar/DownloadApp/Modal/GetStarted'
 import { GetTheApp } from 'components/NavBar/DownloadApp/Modal/GetTheApp'
+import styled from 'lib/styled-components'
 import { useCallback, useState } from 'react'
 import { ArrowLeft, X } from 'react-feather'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import { ClickableTamaguiStyle } from 'theme/components'
-import { AdaptiveWebModal, AnimateTransition, Flex, styled as tamaguiStyled } from 'ui/src'
+import { AnimateTransition, Flex, styled as tamaguiStyled } from 'ui/src'
 import { iconSizes, zIndices } from 'ui/src/theme'
 import Trace from 'uniswap/src/features/telemetry/Trace'
 
+const StyledModal = styled(Modal)`
+  display: block;
+`
+
 const HeaderActionIcon = {
   margin: 4,
   color: '$neutral1',
@@ -61,7 +67,13 @@ export function GetTheAppModal() {
 
   return (
     <Trace modal={InterfaceModalName.GETTING_STARTED_MODAL}>
-      <AdaptiveWebModal isOpen={isOpen} maxWidth={isAccountCTAExperimentControl ? 620 : 700} onClose={closeModal} p={0}>
+      <StyledModal
+        isOpen={isOpen}
+        maxWidth={isAccountCTAExperimentControl ? 620 : 700}
+        slideIn
+        onDismiss={closeModal}
+        hideBorder
+      >
         <Flex
           row
           position="absolute"
@@ -100,7 +112,7 @@ export function GetTheAppModal() {
             <GetTheApp />
           </AnimateTransition>
         </Flex>
-      </AdaptiveWebModal>
+      </StyledModal>
     </Trace>
   )
 }

apps/web/src/components/PrivacyChoices.tsx

 import { InterfaceElementName } from '@uniswap/analytics-events'
+import Modal from 'components/Modal'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { useCallback, useState } from 'react'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
-import { AdaptiveWebModal, Anchor, Button, Checkbox, Flex, Text, TouchableArea } from 'ui/src'
+import { Anchor, Button, Checkbox, Flex, Text, TouchableArea } from 'ui/src'
 import { Lock } from 'ui/src/components/icons/Lock'
 import { X } from 'ui/src/components/icons/X'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
@@ -33,7 +34,7 @@ export function PrivacyChoicesModal() {
   }, [isOptOutChecked, closeModal, setPrivacySharingOptOut])
 
   return (
-    <AdaptiveWebModal isOpen={open} onClose={closeAndResetModal}>
+    <Modal isOpen={open} onDismiss={closeAndResetModal}>
       <Flex fill>
         <Flex py="$spacing20" px="$spacing24" gap="$spacing24">
           <Flex row justifyContent="flex-end">
@@ -90,6 +91,6 @@ export function PrivacyChoicesModal() {
           </Button>
         </Flex>
       </Flex>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/PrivacyPolicy.tsx

 import { SharedEventName } from '@uniswap/analytics-events'
 import Card, { DarkGrayCard } from 'components/Card/cards'
+import Modal from 'components/Modal'
 import { AutoColumn } from 'components/deprecated/Column'
 import Row, { AutoRow, RowBetween } from 'components/deprecated/Row'
 import styled from 'lib/styled-components'
@@ -8,7 +9,6 @@ import { ArrowDown, Info, X } from 'react-feather'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import { ExternalLink, ThemedText } from 'theme/components'
-import { AdaptiveWebModal } from 'ui/src'
 import { ModalName } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
 import { Trans } from 'uniswap/src/i18n'
@@ -89,7 +89,7 @@ export function PrivacyPolicyModal() {
   }, [open])
 
   return (
-    <AdaptiveWebModal isOpen={open} onClose={() => closeModal()} p={0}>
+    <Modal isOpen={open} onDismiss={() => closeModal()}>
       <AutoColumn gap="md" ref={node as any}>
         <RowBetween padding="1rem 1rem 0.5rem 1rem">
           <ThemedText.DeprecatedMediumHeader>
@@ -101,7 +101,7 @@ export function PrivacyPolicyModal() {
         </RowBetween>
         <PrivacyPolicy />
       </AutoColumn>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }
 

apps/web/src/components/TokenSafety/TokenSafetyModal.tsx

-import { AdaptiveWebModal } from 'ui/src'
+import Modal from 'components/Modal'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
 import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
 import TokenWarningModal from 'uniswap/src/features/tokens/TokenWarningModal'
@@ -47,7 +47,7 @@ export default function TokenSafetyModal({
       onToken1BlockAcknowledged={onToken1BlockAcknowledged}
     />
   ) : (
-    <AdaptiveWebModal isOpen={isOpen} onClose={onReject ?? closeModalOnly} maxHeight={400} p={0}>
+    <Modal isOpen={isOpen} onDismiss={onReject ?? closeModalOnly} maxHeight={400}>
       <TokenSafety
         token0={token0}
         token1={token1}
@@ -60,6 +60,6 @@ export default function TokenSafetyModal({
         closeModalOnly={onReject ?? closeModalOnly}
         showCancel={showCancel}
       />
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/TopLevelModals/LaunchModal.tsx

 // Remove the following line when LaunchModal is used again:
 /* eslint-disable import/no-unused-modules */
 import { InterfaceElementName } from '@uniswap/analytics-events'
+import Modal from 'components/Modal'
 import {
   LAUNCH_MODAL_DESKTOP_MAX_HEIGHT,
   LAUNCH_MODAL_DESKTOP_MAX_WIDTH,
@@ -11,7 +12,7 @@ import { useIsLandingPage } from 'hooks/useIsLandingPage'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { useMemo } from 'react'
-import { AdaptiveWebModal, Button, Flex, Image, ImageProps, Text, TouchableArea, useMedia } from 'ui/src'
+import { Button, Flex, Image, ImageProps, Text, TouchableArea, useMedia } from 'ui/src'
 import { X } from 'ui/src/components/icons/X'
 import { iconSizes } from 'ui/src/theme'
 import Trace from 'uniswap/src/features/telemetry/Trace'
@@ -46,12 +47,12 @@ export function LaunchModal({
 
   return (
     <Trace modal={interfaceModalName}>
-      <AdaptiveWebModal
+      <Modal
         maxWidth={media.md ? undefined : LAUNCH_MODAL_DESKTOP_MAX_WIDTH}
         height={media.md ? LAUNCH_MODAL_MOBILE_MAX_HEIGHT : LAUNCH_MODAL_DESKTOP_MAX_HEIGHT}
         isOpen={showModal && !isOnLandingPage}
-        onClose={() => setShowModal(false)}
-        p={0}
+        onDismiss={() => setShowModal(false)}
+        hideBorder
       >
         <Flex flexDirection={media.md ? 'column' : 'row'} fill>
           <Flex
@@ -101,7 +102,7 @@ export function LaunchModal({
             </Flex>
           </Flex>
         </Flex>
-      </AdaptiveWebModal>
+      </Modal>
     </Trace>
   )
 }

apps/web/src/components/TopLevelModals/UkDisclaimerModal.tsx

 import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons'
 import Column from 'components/deprecated/Column'
+import Modal from 'components/Modal'
 import { bannerText } from 'components/TopLevelBanners/UkBanner'
 import styled from 'lib/styled-components'
 import { X } from 'react-feather'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import { ButtonText, ThemedText } from 'theme/components'
-import { AdaptiveWebModal } from 'ui/src'
 import { Trans } from 'uniswap/src/i18n'
 
 const Wrapper = styled(Column)`
@@ -37,7 +37,7 @@ export function UkDisclaimerModal() {
   const closeModal = useCloseModal()
 
   return (
-    <AdaptiveWebModal isOpen={isOpen} onClose={closeModal} p={0}>
+    <Modal isOpen={isOpen} onDismiss={closeModal}>
       <Wrapper gap="md">
         <CloseIconWrapper onClick={() => closeModal()}>
           <X size={24} />
@@ -56,6 +56,6 @@ export function UkDisclaimerModal() {
           </StyledThemeButton>
         </ButtonContainer>
       </Wrapper>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/TransactionConfirmationModal/index.tsx

@@ -5,6 +5,7 @@ import { TransactionSummary } from 'components/AccountDetails/TransactionSummary
 import Badge from 'components/Badge/Badge'
 import { ButtonLight, ButtonPrimary } from 'components/Button/buttons'
 import { ChainLogo } from 'components/Logo/ChainLogo'
+import Modal from 'components/Modal'
 import AnimatedConfirmation from 'components/TransactionConfirmationModal/AnimatedConfirmation'
 import { AutoColumn, ColumnCenter } from 'components/deprecated/Column'
 import Row, { RowBetween, RowFixed } from 'components/deprecated/Row'
@@ -16,7 +17,6 @@ import { AlertCircle, ArrowUpCircle, CheckCircle } from 'react-feather'
 import { useTransaction } from 'state/transactions/hooks'
 import { isConfirmedTx } from 'state/transactions/utils'
 import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText } from 'theme/components'
-import { AdaptiveWebModal } from 'ui/src'
 import { TransactionStatus } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
 import { useIsSupportedChainId } from 'uniswap/src/features/chains/hooks/useSupportedChainId'
@@ -340,7 +340,7 @@ export default function TransactionConfirmationModal({
 
   // confirmation screen
   return (
-    <AdaptiveWebModal isOpen={isOpen} onClose={onDismiss} maxHeight="90vh" p={0}>
+    <Modal isOpen={isOpen} $scrollOverlay={true} onDismiss={onDismiss} maxHeight="90vh">
       {isL2ChainId(chainId) && (hash || attemptingTxn) ? (
         <L2Content chainId={chainId} hash={hash} onDismiss={onDismiss} pendingText={pendingText} />
       ) : attemptingTxn ? (
@@ -355,6 +355,6 @@ export default function TransactionConfirmationModal({
       ) : (
         reviewContent()
       )}
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/WalletModal/ConnectionErrorView.tsx

 import { ButtonEmpty, ButtonPrimary } from 'components/Button/buttons'
+import Modal from 'components/Modal'
 import { useConnect } from 'hooks/useConnect'
 import styled from 'lib/styled-components'
 import { useCallback } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
-import { AdaptiveWebModal } from 'ui/src'
 import { Trans } from 'uniswap/src/i18n'
 
 const Wrapper = styled.div`
@@ -39,7 +39,7 @@ export default function ConnectionErrorView() {
   }, [connection])
 
   return (
-    <AdaptiveWebModal isOpen={Boolean(connection?.error)} onClose={connection?.reset} p={0}>
+    <Modal isOpen={Boolean(connection?.error)} onDismiss={connection?.reset}>
       <Wrapper>
         <AlertTriangleIcon />
         <ThemedText.HeadlineSmall marginBottom="8px">
@@ -57,6 +57,6 @@ export default function ConnectionErrorView() {
           </ThemedText.BodySecondary>
         </ButtonEmpty>
       </Wrapper>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/claim/AddressClaimModal.tsx

@@ -4,6 +4,7 @@ import Circle from 'assets/images/blue-loader.svg'
 import tokenLogo from 'assets/images/token-logo.png'
 import AddressInputPanel from 'components/AddressInputPanel'
 import { ButtonPrimary } from 'components/Button/buttons'
+import Modal from 'components/Modal'
 import { AutoColumn, ColumnCenter } from 'components/deprecated/Column'
 import { RowBetween } from 'components/deprecated/Row'
 import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from 'components/earn/styled'
@@ -14,7 +15,7 @@ import { useState } from 'react'
 import { useClaimCallback, useUserHasAvailableClaim, useUserUnclaimedAmount } from 'state/claim/hooks'
 import { useIsTransactionPending } from 'state/transactions/hooks'
 import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from 'theme/components'
-import { AdaptiveWebModal, Text } from 'ui/src'
+import { Text } from 'ui/src'
 import { ExplorerDataType, getExplorerLink } from 'uniswap/src/utils/linking'
 import { shortenAddress } from 'utilities/src/addresses'
 import { logger } from 'utilities/src/logger/logger'
@@ -97,7 +98,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
   // Avoiding translating because the structure for "Claiming UNI for address" is wrong but this modal is rarely used
   // and ran into difficulties with testing it
   return (
-    <AdaptiveWebModal isOpen={isOpen} onClose={wrappedOnDismiss} maxHeight="90vh" p={0}>
+    <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight="90vh">
       {!attempting && (
         <ContentWrapper gap="lg">
           <ModalUpper>
@@ -193,6 +194,6 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
           </AutoColumn>
         </ConfirmOrLoadingWrapper>
       )}
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/swap/PriceImpactModal.tsx

 import { Percent } from '@uniswap/sdk-core'
+import Modal from 'components/Modal'
 import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
-import { AdaptiveWebModal, Button, Flex, Text } from 'ui/src'
+import { Button, Flex, Text } from 'ui/src'
 import { AlertTriangleFilled } from 'ui/src/components/icons/AlertTriangleFilled'
 import { Trans } from 'uniswap/src/i18n'
 import { useFormatter } from 'utils/formatNumbers'
@@ -16,7 +17,7 @@ export default function PriceImpactModal({ priceImpact, onDismiss, onContinue }:
   const impact = `${formatPercent(priceImpact)}`
 
   return (
-    <AdaptiveWebModal isOpen onClose={onDismiss} p={0}>
+    <Modal isOpen onDismiss={onDismiss}>
       <Flex width="100%" px="$spacing24" py="$spacing16" rowGap="$spacing24" backgroundColor="$surface1">
         <GetHelpHeader closeModal={onDismiss} />
         <Flex rowGap="$spacing16" alignItems="center">
@@ -78,6 +79,6 @@ export default function PriceImpactModal({ priceImpact, onDismiss, onContinue }:
           </Button>
         </Flex>
       </Flex>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/components/swap/UnsupportedCurrencyFooter.test.tsx

@@ -9,7 +9,6 @@ import { act, render, screen, waitForElementToBeRemoved, within } from 'test-uti
 import { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { TestID } from 'uniswap/src/test/fixtures/testIDs'
 import { getExplorerLink } from 'uniswap/src/utils/linking'
-import { shortenAddress } from 'utilities/src/addresses'
 
 const unsupportedTokenAddress = '0x4e83b6287588a96321B2661c5E041845fF7814af'
 const unsupportedTokenSymbol = 'ALTDOM-MAR2021'
@@ -45,7 +44,7 @@ describe('UnsupportedCurrencyFooter.tsx with unsupported tokens', () => {
     expect(screen.getAllByTestId('unsupported-token-card').length).toBe(1)
     const unsupportedCard = screen.getByTestId('unsupported-token-card')
     expect(within(unsupportedCard).getByText(unsupportedTokenSymbol)).toBeInTheDocument()
-    expect(within(unsupportedCard).getByText(shortenAddress(unsupportedTokenAddress)).closest('a')).toHaveAttribute(
+    expect(within(unsupportedCard).getByText(unsupportedTokenAddress).closest('a')).toHaveAttribute(
       'href',
       unsupportedTokenExplorerLink,
     )

apps/web/src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -2,6 +2,7 @@ import { Currency, Token } from '@uniswap/sdk-core'
 import { ButtonEmpty } from 'components/Button/buttons'
 import Card, { OutlineCard } from 'components/Card/cards'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import Modal from 'components/Modal'
 import { AutoColumn } from 'components/deprecated/Column'
 import { AutoRow, RowBetween } from 'components/deprecated/Row'
 import { useCurrencyInfo } from 'hooks/Tokens'
@@ -10,12 +11,11 @@ import styled from 'lib/styled-components'
 import { useState } from 'react'
 import { CloseIcon, ExternalLink, ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
-import { AdaptiveWebModal, Text } from 'ui/src'
+import { Text } from 'ui/src'
 import { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { Trans } from 'uniswap/src/i18n'
 import { ExplorerDataType, getExplorerLink } from 'uniswap/src/utils/linking'
-import { shortenAddress } from 'utilities/src/addresses'
 
 const DetailsFooter = styled.div<{ show: boolean }>`
   padding-top: calc(16px + 2rem);
@@ -68,7 +68,7 @@ export default function UnsupportedCurrencyFooter({
 
   return (
     <DetailsFooter show={show}>
-      <AdaptiveWebModal isOpen={showDetails} onClose={() => setShowDetails(false)} p={0}>
+      <Modal isOpen={showDetails} onDismiss={() => setShowDetails(false)}>
         <Card padding="2rem">
           <AutoColumn gap="lg">
             <RowBetween>
@@ -89,7 +89,7 @@ export default function UnsupportedCurrencyFooter({
             </AutoColumn>
           </AutoColumn>
         </Card>
-      </AdaptiveWebModal>
+      </Modal>
       <StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)} data-testid="read-more-button">
         <Text color="$accent1">
           <Trans i18nKey="swap.unsupportedAssets.readMore" />
@@ -115,7 +115,7 @@ function UnsupportedTokenCard({ token, chainId }: { token?: Token; chainId?: Uni
         </AutoRow>
         {chainId && (
           <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
-            <AddressText>{shortenAddress(token.address)}</AddressText>
+            <AddressText>{token.address}</AddressText>
           </ExternalLink>
         )}
       </AutoColumn>

apps/web/src/components/swap/__snapshots__/UnsupportedCurrencyFooter.test.tsx.snap

@@ -160,16 +160,9 @@ exports[`UnsupportedCurrencyFooter.tsx with unsupported tokens renders 1`] = `
         <div
           class="c0"
         >
-          <span
-            class="font_unset _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _position-absolute _width-1px _height-1px _mt--1px _mr--1px _mb--1px _ml--1px _zIndex--10000 _overflowX-hidden _overflowY-hidden _opacity-1e-8 _pointerEvents-none"
-          >
-            <h2
-              class="is_DialogTitle font_heading _display-inline _boxSizing-border-box _wordWrap-break-word _fontFamily-f-family _color-color _fontWeight-f-weight-me3083741 _fontSize-f-size-medi3736 _lineHeight-f-lineHeigh507465454 _userSelect-auto _whiteSpace-normal _mt-0px _mr-0px _mb-0px _ml-0px"
-              data-disable-theme="true"
-              id="title-:r0:"
-              role="heading"
+          <div
+            tabindex="0"
           />
-          </span>
           <button
             class="c1 c2 c3 c4"
             data-testid="read-more-button"

apps/web/src/pages/Swap/Send/SendReviewModal.tsx

@@ -3,6 +3,7 @@ import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioL
 import { ButtonPrimary } from 'components/Button/buttons'
 import Identicon from 'components/Identicon'
 import { ChainLogo } from 'components/Logo/ChainLogo'
+import Modal from 'components/Modal'
 import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
 import Column, { ColumnCenter } from 'components/deprecated/Column'
 import Row from 'components/deprecated/Row'
@@ -12,7 +13,6 @@ import { useMultichainContext } from 'state/multichain/useMultichainContext'
 import { useSendContext } from 'state/send/SendContext'
 import { Separator, ThemedText } from 'theme/components'
 import { capitalize } from 'tsafe'
-import { AdaptiveWebModal } from 'ui/src'
 import { Unitag } from 'ui/src/components/icons/Unitag'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import Trace from 'uniswap/src/features/telemetry/Trace'
@@ -23,7 +23,8 @@ import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const ModalWrapper = styled(ColumnCenter)`
   background-color: ${({ theme }) => theme.surface1};
-  border-radius: 16px;
+  border-radius: 20px;
+  outline: 1px solid ${({ theme }) => theme.surface3};
   width: 100%;
   padding: 8px;
 `
@@ -96,7 +97,7 @@ export function SendReviewModal({ onConfirm, onDismiss }: { onConfirm: () => voi
     : [currencySymbolAmount, formattedFiatInputAmount]
 
   return (
-    <AdaptiveWebModal isOpen onClose={onDismiss} maxHeight="90vh" p={0}>
+    <Modal $scrollOverlay isOpen onDismiss={onDismiss} maxHeight="90vh">
       <ModalWrapper data-testid="send-review-modal" gap="md">
         <ModalHeader title={<Trans i18nKey="sendReviewModal.title" />} closeModal={onDismiss} />
         <ReviewContentContainer>
@@ -142,6 +143,6 @@ export function SendReviewModal({ onConfirm, onDismiss }: { onConfirm: () => voi
           </ButtonPrimary>
         </Trace>
       </ModalWrapper>
-    </AdaptiveWebModal>
+    </Modal>
   )
 }

apps/web/src/pages/Swap/Send/__snapshots__/SendReviewModal.test.tsx.snap

@@ -394,7 +394,8 @@ exports[`SendCurrencyInputform should render input in fiat correctly 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  border-radius: 16px;
+  border-radius: 20px;
+  outline: 1px solid #22222212;
   width: 100%;
   padding: 8px;
 }
@@ -409,6 +410,18 @@ exports[`SendCurrencyInputform should render input in fiat correctly 1`] = `
   gap: 16px;
 }
 
+@media screen and (max-width:640px) {
+
+}
+
+@media screen and (max-width:768px) {
+
+}
+
+@media screen and (max-width:640px) {
+
+}
+
 <div
   class="c0 c1 c2"
   data-testid="send-review-modal"
@@ -1020,7 +1033,8 @@ exports[`SendCurrencyInputform should render input in token amount correctly 1`]
 
 .c2 {
   background-color: #FFFFFF;
-  border-radius: 16px;
+  border-radius: 20px;
+  outline: 1px solid #22222212;
   width: 100%;
   padding: 8px;
 }
@@ -1035,6 +1049,18 @@ exports[`SendCurrencyInputform should render input in token amount correctly 1`]
   gap: 16px;
 }
 
+@media screen and (max-width:640px) {
+
+}
+
+@media screen and (max-width:768px) {
+
+}
+
+@media screen and (max-width:640px) {
+
+}
+
 <div
   class="c0 c1 c2"
   data-testid="send-review-modal"