) {
return (
-
+
{children}
-
+
)
}
diff --git a/apps/web/src/components/ConfirmSwapModal/index.tsx b/apps/web/src/components/ConfirmSwapModal/index.tsx
index 0d5d5e9c6cf..0ae25a3b899 100644
--- a/apps/web/src/components/ConfirmSwapModal/index.tsx
+++ b/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])
diff --git a/apps/web/src/components/ConnectedAccountBlocked.tsx b/apps/web/src/components/ConnectedAccountBlocked.tsx
index f6aa63d4eef..8581f54a42c 100644
--- a/apps/web/src/components/ConnectedAccountBlocked.tsx
+++ b/apps/web/src/components/ConnectedAccountBlocked.tsx
@@ -1,8 +1,9 @@
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 (
-
+
@@ -55,6 +56,6 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
/>
-
+
)
}
diff --git a/apps/web/src/components/Dialog/Dialog.tsx b/apps/web/src/components/Dialog/Dialog.tsx
index 007a7fc710e..03d0e7b095f 100644
--- a/apps/web/src/components/Dialog/Dialog.tsx
+++ b/apps/web/src/components/Dialog/Dialog.tsx
@@ -1,4 +1,5 @@
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 (
-
+
-
+
)
}
diff --git a/apps/web/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/apps/web/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index f8fed50a6a7..c3134d9478f 100644
--- a/apps/web/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/apps/web/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`
renders different button types 1`] = `
-.c6 {
+.c8 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
-.c7 {
+.c9 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
@@ -25,7 +25,7 @@ exports[`
renders different button types 1`] = `
gap: 4px;
}
-.c16 {
+.c18 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
@@ -43,7 +43,7 @@ exports[`
renders different button types 1`] = `
gap: 12px;
}
-.c12 {
+.c14 {
color: #222222;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
@@ -51,7 +51,7 @@ exports[`
renders different button types 1`] = `
letter-spacing: -0.01em;
}
-.c14 {
+.c16 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
@@ -59,7 +59,7 @@ exports[`
renders different button types 1`] = `
letter-spacing: -0.01em;
}
-.c8 {
+.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
@@ -69,15 +69,15 @@ exports[`
renders different button types 1`] = `
transition-duration: 125ms;
}
-.c8:hover {
+.c10:hover {
opacity: 0.6;
}
-.c8:active {
+.c10:active {
opacity: 0.4;
}
-.c4 {
+.c6 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
@@ -88,15 +88,15 @@ exports[`
renders different button types 1`] = `
font-weight: 500;
}
-.c4:hover {
+.c6:hover {
opacity: 0.6;
}
-.c4:active {
+.c6:active {
opacity: 0.4;
}
-.c20 {
+.c22 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
@@ -110,7 +110,7 @@ exports[`
renders different button types 1`] = `
width: 100%;
}
-.c17 {
+.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -145,30 +145,30 @@ exports[`
renders different button types 1`] = `
user-select: none;
}
-.c17:active .c19 {
+.c19:active .c21 {
background-color: #B8C0DC3d;
}
-.c17:focus .c19 {
+.c19:focus .c21 {
background-color: #B8C0DC3d;
}
-.c17:hover .c19 {
+.c19:hover .c21 {
background-color: #98A1C014;
}
-.c17:disabled {
+.c19:disabled {
cursor: default;
opacity: 0.6;
}
-.c17:disabled:active .c19,
-.c17:disabled:focus .c19,
-.c17:disabled:hover .c19 {
+.c19:disabled:active .c21,
+.c19:disabled:focus .c21,
+.c19:disabled:hover .c21 {
background-color: transparent;
}
-.c21 {
+.c23 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -203,30 +203,73 @@ exports[`
renders different button types 1`] = `
user-select: none;
}
-.c21:active .c19 {
+.c23:active .c21 {
background-color: #B8C0DC3d;
}
-.c21:focus .c19 {
+.c23:focus .c21 {
background-color: #B8C0DC3d;
}
-.c21:hover .c19 {
+.c23:hover .c21 {
background-color: #98A1C014;
}
-.c21:disabled {
+.c23:disabled {
cursor: default;
opacity: 0.6;
}
-.c21:disabled:active .c19,
-.c21:disabled:focus .c19,
-.c21:disabled:hover .c19 {
+.c23:disabled:active .c21,
+.c23:disabled:focus .c21,
+.c23:disabled:hover .c21 {
background-color: transparent;
}
-.c5 {
+.c0 {
+ will-change: transform,opacity;
+}
+
+.c0[data-reach-dialog-overlay] {
+ z-index: 1040;
+ background-color: transparent;
+ overflow: hidden;
+ 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;
+ overflow-y: scroll;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background-color: rgba(0,0,0,0.60);
+}
+
+.c1 {
+ overflow-y: auto;
+}
+
+.c1[data-reach-dialog-content] {
+ margin: auto;
+ background-color: #F9F9F9;
+ border: 1px solid #22222212;
+ box-shadow: 8px 12px 20px rgba(51,53,72,0.04),4px 6px 12px rgba(51,53,72,0.02),4px 4px 8px rgba(51,53,72,0.04);
+ padding: 0px;
+ width: 50vw;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 90vh;
+ max-width: 420px;
+ display: inline-table;
+ border-radius: 20px;
+}
+
+.c7 {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
@@ -240,17 +283,17 @@ exports[`
renders different button types 1`] = `
stroke: none;
}
-.c5:hover {
+.c7:hover {
background: #22222212;
color: #222222;
opacity: unset;
}
-.c5:hover path {
+.c7:hover path {
fill: #222222;
}
-.c0 {
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -265,7 +308,7 @@ exports[`
renders different button types 1`] = `
gap: 24px;
}
-.c9 {
+.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -280,7 +323,7 @@ exports[`
renders different button types 1`] = `
gap: 16px;
}
-.c11 {
+.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -295,7 +338,7 @@ exports[`
renders different button types 1`] = `
gap: 8px;
}
-.c1 {
+.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
@@ -303,14 +346,15 @@ exports[`
renders different button types 1`] = `
align-items: center;
}
-.c2 {
+.c4 {
background-color: #FFFFFF;
- border-radius: 16px;
+ outline: 1px solid #22222212;
+ border-radius: 20px;
padding: 16px 24px 24px 24px;
width: 100%;
}
-.c10 {
+.c12 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -329,14 +373,14 @@ exports[`
renders different button types 1`] = `
border-radius: 12px;
}
-.c13 {
+.c15 {
font-size: 24px;
line-height: 32px;
text-align: center;
font-weight: 500;
}
-.c15 {
+.c17 {
font-size: 16px;
font-weight: 500;
line-height: 24px;
@@ -347,7 +391,7 @@ exports[`
renders different button types 1`] = `
text-align: center;
}
-.c18 {
+.c20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -360,16 +404,40 @@ exports[`
renders different button types 1`] = `
border-radius: 12px;
}
-.c3 {
+.c5 {
padding: 4px 0px;
}
+@media screen and (max-width:640px) {
+ .c0[data-reach-dialog-overlay] {
+ -webkit-align-items: flex-end;
+ -webkit-box-align: flex-end;
+ -ms-flex-align: flex-end;
+ align-items: flex-end;
+ }
+}
+
+@media screen and (max-width:768px) {
+ .c1[data-reach-dialog-content] {
+ width: 65vw;
+ }
+}
+
+@media screen and (max-width:640px) {
+ .c1[data-reach-dialog-content] {
+ margin: 0;
+ width: 100vw;
+ border-radius: 20px;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
renders different button types 1`] = `
-
-
-
+
-
-
+
+
-
+
-
+
+
+
-
-
-
-
-
- Mock Body
-
+
+ Mock Title
-
-
+
+ Mock Description
+
+
+
+ Mock Body
+
+
+
+
-
-
-
+
+
+
+
`;
exports[` renders the Dialog component correctly 1`] = `
-.c6 {
+.c8 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
-.c7 {
+.c9 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
@@ -586,7 +640,7 @@ exports[` renders the Dialog component correctly 1`] = `
gap: 4px;
}
-.c16 {
+.c18 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
@@ -604,7 +658,7 @@ exports[` renders the Dialog component correctly 1`] = `
gap: 12px;
}
-.c12 {
+.c14 {
color: #222222;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
@@ -612,7 +666,7 @@ exports[` renders the Dialog component correctly 1`] = `
letter-spacing: -0.01em;
}
-.c14 {
+.c16 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
@@ -620,7 +674,7 @@ exports[` renders the Dialog component correctly 1`] = `
letter-spacing: -0.01em;
}
-.c8 {
+.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
@@ -630,15 +684,15 @@ exports[` renders the Dialog component correctly 1`] = `
transition-duration: 125ms;
}
-.c8:hover {
+.c10:hover {
opacity: 0.6;
}
-.c8:active {
+.c10:active {
opacity: 0.4;
}
-.c4 {
+.c6 {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
@@ -649,15 +703,15 @@ exports[` renders the Dialog component correctly 1`] = `
font-weight: 500;
}
-.c4:hover {
+.c6:hover {
opacity: 0.6;
}
-.c4:active {
+.c6:active {
opacity: 0.4;
}
-.c20 {
+.c22 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
@@ -671,7 +725,7 @@ exports[` renders the Dialog component correctly 1`] = `
width: 100%;
}
-.c17 {
+.c19 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -706,30 +760,73 @@ exports[` renders the Dialog component correctly 1`] = `
user-select: none;
}
-.c17:active .c19 {
+.c19:active .c21 {
background-color: #B8C0DC3d;
}
-.c17:focus .c19 {
+.c19:focus .c21 {
background-color: #B8C0DC3d;
}
-.c17:hover .c19 {
+.c19:hover .c21 {
background-color: #98A1C014;
}
-.c17:disabled {
+.c19:disabled {
cursor: default;
opacity: 0.6;
}
-.c17:disabled:active .c19,
-.c17:disabled:focus .c19,
-.c17:disabled:hover .c19 {
+.c19:disabled:active .c21,
+.c19:disabled:focus .c21,
+.c19:disabled:hover .c21 {
background-color: transparent;
}
-.c5 {
+.c0 {
+ will-change: transform,opacity;
+}
+
+.c0[data-reach-dialog-overlay] {
+ z-index: 1040;
+ background-color: transparent;
+ overflow: hidden;
+ 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;
+ overflow-y: scroll;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background-color: rgba(0,0,0,0.60);
+}
+
+.c1 {
+ overflow-y: auto;
+}
+
+.c1[data-reach-dialog-content] {
+ margin: auto;
+ background-color: #F9F9F9;
+ border: 1px solid #22222212;
+ box-shadow: 8px 12px 20px rgba(51,53,72,0.04),4px 6px 12px rgba(51,53,72,0.02),4px 4px 8px rgba(51,53,72,0.04);
+ padding: 0px;
+ width: 50vw;
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 90vh;
+ max-width: 420px;
+ display: inline-table;
+ border-radius: 20px;
+}
+
+.c7 {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
@@ -743,17 +840,17 @@ exports[` renders the Dialog component correctly 1`] = `
stroke: none;
}
-.c5:hover {
+.c7:hover {
background: #22222212;
color: #222222;
opacity: unset;
}
-.c5:hover path {
+.c7:hover path {
fill: #222222;
}
-.c0 {
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -768,7 +865,7 @@ exports[` renders the Dialog component correctly 1`] = `
gap: 24px;
}
-.c9 {
+.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -783,7 +880,7 @@ exports[` renders the Dialog component correctly 1`] = `
gap: 16px;
}
-.c11 {
+.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -798,7 +895,7 @@ exports[` renders the Dialog component correctly 1`] = `
gap: 8px;
}
-.c1 {
+.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
@@ -806,14 +903,15 @@ exports[` renders the Dialog component correctly 1`] = `
align-items: center;
}
-.c2 {
+.c4 {
background-color: #FFFFFF;
- border-radius: 16px;
+ outline: 1px solid #22222212;
+ border-radius: 20px;
padding: 16px 24px 24px 24px;
width: 100%;
}
-.c10 {
+.c12 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -832,14 +930,14 @@ exports[` renders the Dialog component correctly 1`] = `
border-radius: 12px;
}
-.c13 {
+.c15 {
font-size: 24px;
line-height: 32px;
text-align: center;
font-weight: 500;
}
-.c15 {
+.c17 {
font-size: 16px;
font-weight: 500;
line-height: 24px;
@@ -850,7 +948,7 @@ exports[` renders the Dialog component correctly 1`] = `
text-align: center;
}
-.c18 {
+.c20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -863,16 +961,40 @@ exports[` renders the Dialog component correctly 1`] = `
border-radius: 12px;
}
-.c3 {
+.c5 {
padding: 4px 0px;
}
+@media screen and (max-width:640px) {
+ .c0[data-reach-dialog-overlay] {
+ -webkit-align-items: flex-end;
+ -webkit-box-align: flex-end;
+ -ms-flex-align: flex-end;
+ align-items: flex-end;
+ }
+}
+
+@media screen and (max-width:768px) {
+ .c1[data-reach-dialog-content] {
+ width: 65vw;
+ }
+}
+
+@media screen and (max-width:640px) {
+ .c1[data-reach-dialog-content] {
+ margin: 0;
+ width: 100vw;
+ border-radius: 20px;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
renders the Dialog component correctly 1`] = `
-
-
-
+
-
-
+
+
-
+
-
+
+
+
-
-
-
-
-
- Mock Body
-
+
+ Mock Title
-
-
+
+ Mock Description
+
+
+
+ Mock Body
+
+
+
+
-
-
-
+
+
+
+
`;
diff --git a/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
index 5000d3fa8aa..72e2c96807e 100644
--- a/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
+++ b/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
@@ -1,4 +1,5 @@
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 (
-
+
@@ -291,6 +291,6 @@ export default function FeatureFlagModal() {
window.location.reload()}>Reload
-
+
)
}
diff --git a/apps/web/src/components/Modal/index.tsx b/apps/web/src/components/Modal/index.tsx
new file mode 100644
index 00000000000..35f46612a6b
--- /dev/null
+++ b/apps/web/src/components/Modal/index.tsx
@@ -0,0 +1,200 @@
+//
+// @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)`
+ 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
+ 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(null)
+ useOnClickOutside(ref, () => (isOpen && onDismiss ? onDismiss() : undefined))
+
+ const handleEscape = useCallback(
+ (e: KeyboardEvent) => {
+ 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 (
+
+ {fadeTransition(
+ ({ opacity }, item) =>
+ item && (
+
+ {slideTransition(
+ (styles, item) =>
+ item && (
+ `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 ? : null}
+ {children}
+
+ ),
+ )}
+
+ ),
+ )}
+
-
-
-
+