Skip to content

I
interface
Commit c2fcabde authored by Uniswap Labs Service Account's avatar Uniswap Labs Service Account
Browse files
Options

ci(release): publish latest release

parent 156cbe72
Show whitespace changes
Inline Side-by-side
Showing with 1784 additions and 1263 deletions
RELEASE
View file @ c2fcabde
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
View file @ c2fcabde
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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
......@@ -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/MiniPortfolio/Activity/__snapshots__/CancelOrdersDialog.test.tsx.snap
View file @ c2fcabde
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CancelOrdersDialog should render limit order text 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[`CancelOrdersDialog should render limit order text 1`] = `
gap: 4px;
}
.c17 {
.c19 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -42,7 +42,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
justify-content: flex-start;
}
.c22 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -60,14 +60,14 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 12px;
}
.c19 {
.c21 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c12 {
.c14 {
color: #222222;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -75,7 +75,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
letter-spacing: -0.01em;
}
.c14 {
.c16 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -83,7 +83,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
letter-spacing: -0.01em;
}
.c8 {
.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
......@@ -93,15 +93,15 @@ exports[`CancelOrdersDialog should render limit order text 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;
......@@ -112,15 +112,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
font-weight: 500;
}
.c4:hover {
.c6:hover {
opacity: 0.6;
}
.c4:active {
.c6:active {
opacity: 0.4;
}
.c26 {
.c28 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
......@@ -134,7 +134,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
width: 100%;
}
.c23 {
.c25 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -169,30 +169,30 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
user-select: none;
}
.c23:active .c25 {
.c25:active .c27 {
background-color: #B8C0DC3d;
}
.c23:focus .c25 {
.c25:focus .c27 {
background-color: #B8C0DC3d;
}
.c23:hover .c25 {
.c25:hover .c27 {
background-color: #98A1C014;
}
.c23:disabled {
.c25:disabled {
cursor: default;
opacity: 0.6;
}
.c23:disabled:active .c25,
.c23:disabled:focus .c25,
.c23:disabled:hover .c25 {
.c25:disabled:active .c27,
.c25:disabled:focus .c27,
.c25:disabled:hover .c27 {
background-color: transparent;
}
.c27 {
.c29 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -227,30 +227,73 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
user-select: none;
}
.c27:active .c25 {
.c29:active .c27 {
background-color: #B8C0DC3d;
}
.c27:focus .c25 {
.c29:focus .c27 {
background-color: #B8C0DC3d;
}
.c27:hover .c25 {
.c29:hover .c27 {
background-color: #98A1C014;
}
.c27:disabled {
.c29:disabled {
cursor: default;
opacity: 0.6;
}
.c27:disabled:active .c25,
.c27:disabled:focus .c25,
.c27:disabled:hover .c25 {
.c29:disabled:active .c27,
.c29:disabled:focus .c27,
.c29:disabled:hover .c27 {
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;
......@@ -264,17 +307,17 @@ exports[`CancelOrdersDialog should render limit order text 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;
......@@ -289,7 +332,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 24px;
}
.c9 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -304,7 +347,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 16px;
}
.c11 {
.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -319,7 +362,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 8px;
}
.c16 {
.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -333,7 +376,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
justify-content: flex-start;
}
.c1 {
.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
......@@ -341,14 +384,15 @@ exports[`CancelOrdersDialog should render limit order text 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;
......@@ -367,14 +411,14 @@ exports[`CancelOrdersDialog should render limit order text 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;
......@@ -385,7 +429,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
text-align: center;
}
.c24 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -399,7 +443,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
border-radius: 12px;
}
.c28 {
.c30 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -413,32 +457,56 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
border-radius: 12px;
}
.c3 {
.c5 {
padding: 4px 0px;
}
.c20 {
.c22 {
cursor: auto;
color: #7D7D7D;
}
.c21 {
.c23 {
text-align: right;
overflow-wrap: break-word;
}
.c18 {
.c20 {
border-top: 1px solid #22222212;
margin-top: 16px;
padding-top: 16px;
}
@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;
}
}
<body
style="pointer-events: none;"
data-scroll-locked="1"
>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<span
class=""
......@@ -450,70 +518,53 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
<span
class=" t_light _dsp_contents is_Theme"
>
<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-:r3:"
role="heading"
<div
tabindex="0"
/>
</span>
</span>
</span>
</span>
</div>
<reach-portal>
<div
class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _contain-strict _position-fixed _top-0px _left-0px _right-0px _bottom-0px _maxWidth-100vw _maxHeight-100vh _pointerEvents-none _zIndex-1060"
>
<span
class=" _dsp_contents"
>
<span
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div
class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _top-0px _left-0px _right-0px _bottom-0px _zIndex-1060 _maxHeight-100vh _pointerEvents-auto"
>
<div
aria-hidden="true"
class="css-view-175oi2r"
data-aria-hidden="true"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
class="_dsp_contents"
data-remove-scroll-container="true"
data-focus-lock-disabled="false"
>
<div>
<div
style="display: contents; pointer-events: auto;"
class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
>
<div
aria-describedby="description-:r3:"
aria-labelledby="title-:r3:"
class="css-view-175oi2r"
id="content-:r3:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
aria-label="dialog"
aria-modal="true"
class="c1"
data-reach-dialog-content=""
role="dialog"
tabindex="-1"
>
<div
class="c0 c1 c2"
class="c2 c3 c4"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c3"
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c5"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
>
<a
class="c4 c5"
class="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
class="c8 c9"
>
<svg
fill="none"
......@@ -531,7 +582,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div>
</a>
<svg
class="c8"
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
......@@ -559,13 +610,13 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div>
</div>
<div
class="c0 c1"
class="c2 c3"
>
<div
class="c9 c1"
class="c11 c3"
>
<div
class="c10"
class="c12"
>
<svg
fill="none"
......@@ -592,34 +643,34 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</svg>
</div>
<div
class="c11 c1"
class="c13 c3"
>
<div
class="c12 c13 css-4kpdx7"
class="c14 c15 css-4kpdx7"
>
Cancel limit
</div>
<div
class="c14 c15 css-1urox24"
class="c16 c17 css-1urox24"
>
<div
class="c16"
class="c18"
>
Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
<div
class="c6 c17 c18"
class="c8 c19 c20"
>
<div
class="c6 c17 c19"
class="c8 c19 c21"
>
<div
class="c12 c20 css-142zc9n"
class="c14 c22 css-142zc9n"
data-testid="swap-li-label"
>
Network cost
</div>
<div
class="c12 c21 css-142zc9n"
class="c14 c23 css-142zc9n"
>
<span>
-
......@@ -632,21 +683,21 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div>
</div>
<div
class="c6 c22"
class="c8 c24"
>
<button
class="c23 c24"
class="c25 c26"
>
<div
class="c25 c26"
class="c27 c28"
/>
Never mind
</button>
<button
class="c27 c28"
class="c29 c30"
>
<div
class="c25 c26"
class="c27 c28"
/>
Proceed
</button>
......@@ -657,20 +708,23 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div>
</div>
</div>
</span>
</span>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body>
`;
exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
.c6 {
.c8 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
.c7 {
.c9 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -688,7 +742,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 4px;
}
.c17 {
.c19 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -705,7 +759,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
justify-content: flex-start;
}
.c22 {
.c24 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -723,14 +777,14 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 12px;
}
.c19 {
.c21 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c12 {
.c14 {
color: #222222;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -738,7 +792,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
letter-spacing: -0.01em;
}
.c14 {
.c16 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -746,7 +800,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
letter-spacing: -0.01em;
}
.c8 {
.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
......@@ -756,15 +810,15 @@ exports[`CancelOrdersDialog should render order cancel 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;
......@@ -775,15 +829,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
font-weight: 500;
}
.c4:hover {
.c6:hover {
opacity: 0.6;
}
.c4:active {
.c6:active {
opacity: 0.4;
}
.c26 {
.c28 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
......@@ -797,7 +851,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
width: 100%;
}
.c23 {
.c25 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -832,30 +886,30 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
user-select: none;
}
.c23:active .c25 {
.c25:active .c27 {
background-color: #B8C0DC3d;
}
.c23:focus .c25 {
.c25:focus .c27 {
background-color: #B8C0DC3d;
}
.c23:hover .c25 {
.c25:hover .c27 {
background-color: #98A1C014;
}
.c23:disabled {
.c25:disabled {
cursor: default;
opacity: 0.6;
}
.c23:disabled:active .c25,
.c23:disabled:focus .c25,
.c23:disabled:hover .c25 {
.c25:disabled:active .c27,
.c25:disabled:focus .c27,
.c25:disabled:hover .c27 {
background-color: transparent;
}
.c27 {
.c29 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -890,30 +944,73 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
user-select: none;
}
.c27:active .c25 {
.c29:active .c27 {
background-color: #B8C0DC3d;
}
.c27:focus .c25 {
.c29:focus .c27 {
background-color: #B8C0DC3d;
}
.c27:hover .c25 {
.c29:hover .c27 {
background-color: #98A1C014;
}
.c27:disabled {
.c29:disabled {
cursor: default;
opacity: 0.6;
}
.c27:disabled:active .c25,
.c27:disabled:focus .c25,
.c27:disabled:hover .c25 {
.c29:disabled:active .c27,
.c29:disabled:focus .c27,
.c29:disabled:hover .c27 {
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;
......@@ -927,17 +1024,17 @@ exports[`CancelOrdersDialog should render order cancel 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;
......@@ -952,7 +1049,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 24px;
}
.c9 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -967,7 +1064,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 16px;
}
.c11 {
.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -982,7 +1079,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 8px;
}
.c16 {
.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -996,7 +1093,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
justify-content: flex-start;
}
.c1 {
.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
......@@ -1004,14 +1101,15 @@ exports[`CancelOrdersDialog should render order cancel 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;
......@@ -1030,14 +1128,14 @@ exports[`CancelOrdersDialog should render order cancel 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;
......@@ -1048,7 +1146,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
text-align: center;
}
.c24 {
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -1062,7 +1160,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
border-radius: 12px;
}
.c28 {
.c30 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -1076,32 +1174,56 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
border-radius: 12px;
}
.c3 {
.c5 {
padding: 4px 0px;
}
.c20 {
.c22 {
cursor: auto;
color: #7D7D7D;
}
.c21 {
.c23 {
text-align: right;
overflow-wrap: break-word;
}
.c18 {
.c20 {
border-top: 1px solid #22222212;
margin-top: 16px;
padding-top: 16px;
}
@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;
}
}
<body
style="pointer-events: none;"
data-scroll-locked="1"
>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<span
class=""
......@@ -1113,70 +1235,53 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
<span
class=" t_light _dsp_contents is_Theme"
>
<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>
</span>
</span>
</span>
</div>
<reach-portal>
<div
class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _contain-strict _position-fixed _top-0px _left-0px _right-0px _bottom-0px _maxWidth-100vw _maxHeight-100vh _pointerEvents-none _zIndex-1060"
>
<span
class=" _dsp_contents"
>
<span
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div
class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _top-0px _left-0px _right-0px _bottom-0px _zIndex-1060 _maxHeight-100vh _pointerEvents-auto"
>
<div
aria-hidden="true"
class="css-view-175oi2r"
data-aria-hidden="true"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
class="_dsp_contents"
data-remove-scroll-container="true"
data-focus-lock-disabled="false"
>
<div>
<div
style="display: contents; pointer-events: auto;"
class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
>
<div
aria-describedby="description-:r0:"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
aria-label="dialog"
aria-modal="true"
class="c1"
data-reach-dialog-content=""
role="dialog"
tabindex="-1"
>
<div
class="c0 c1 c2"
class="c2 c3 c4"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c3"
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c5"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
>
<a
class="c4 c5"
class="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
class="c8 c9"
>
<svg
fill="none"
......@@ -1194,7 +1299,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div>
</a>
<svg
class="c8"
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
......@@ -1222,13 +1327,13 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div>
</div>
<div
class="c0 c1"
class="c2 c3"
>
<div
class="c9 c1"
class="c11 c3"
>
<div
class="c10"
class="c12"
>
<svg
fill="none"
......@@ -1255,34 +1360,34 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</svg>
</div>
<div
class="c11 c1"
class="c13 c3"
>
<div
class="c12 c13 css-4kpdx7"
class="c14 c15 css-4kpdx7"
>
Cancel order
</div>
<div
class="c14 c15 css-1urox24"
class="c16 c17 css-1urox24"
>
<div
class="c16"
class="c18"
>
Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
<div
class="c6 c17 c18"
class="c8 c19 c20"
>
<div
class="c6 c17 c19"
class="c8 c19 c21"
>
<div
class="c12 c20 css-142zc9n"
class="c14 c22 css-142zc9n"
data-testid="swap-li-label"
>
Network cost
</div>
<div
class="c12 c21 css-142zc9n"
class="c14 c23 css-142zc9n"
>
<span>
-
......@@ -1295,21 +1400,21 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div>
</div>
<div
class="c6 c22"
class="c8 c24"
>
<button
class="c23 c24"
class="c25 c26"
>
<div
class="c25 c26"
class="c27 c28"
/>
Never mind
</button>
<button
class="c27 c28"
class="c29 c30"
>
<div
class="c25 c26"
class="c27 c28"
/>
Proceed
</button>
......@@ -1320,8 +1425,11 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div>
</div>
</div>
</span>
</span>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body>
`;
apps/web/src/components/AccountDrawer/UniwalletModal.tsx
View file @ c2fcabde
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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
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
View file @ c2fcabde
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/Dialog/__snapshots__/Dialog.test.tsx.snap
View file @ c2fcabde
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Dialog /> 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[`<Dialog /> renders different button types 1`] = `
gap: 4px;
}
.c16 {
.c18 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -43,7 +43,7 @@ exports[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> renders different button types 1`] = `
letter-spacing: -0.01em;
}
.c8 {
.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
......@@ -69,15 +69,15 @@ exports[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> renders different button types 1`] = `
gap: 24px;
}
.c9 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -280,7 +323,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 16px;
}
.c11 {
.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -295,7 +338,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 8px;
}
.c1 {
.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
......@@ -303,14 +346,15 @@ exports[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> renders different button types 1`] = `
text-align: center;
}
.c18 {
.c20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -360,16 +404,40 @@ exports[`<Dialog /> 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;
}
}
<body
style="pointer-events: none;"
data-scroll-locked="1"
>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<span
class=""
......@@ -381,70 +449,53 @@ exports[`<Dialog /> renders different button types 1`] = `
<span
class=" t_light _dsp_contents is_Theme"
>
<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-:rf:"
role="heading"
<div
tabindex="0"
/>
</span>
</span>
</span>
</span>
</div>
<reach-portal>
<div
class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _contain-strict _position-fixed _top-0px _left-0px _right-0px _bottom-0px _maxWidth-100vw _maxHeight-100vh _pointerEvents-none _zIndex-1060"
>
<span
class=" _dsp_contents"
>
<span
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div
class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _top-0px _left-0px _right-0px _bottom-0px _zIndex-1060 _maxHeight-100vh _pointerEvents-auto"
>
<div
aria-hidden="true"
class="css-view-175oi2r"
data-aria-hidden="true"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
class="_dsp_contents"
data-remove-scroll-container="true"
data-focus-lock-disabled="false"
>
<div>
<div
style="display: contents; pointer-events: auto;"
class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
>
<div
aria-describedby="description-:rf:"
aria-labelledby="title-:rf:"
class="css-view-175oi2r"
id="content-:rf:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
aria-label="dialog"
aria-modal="true"
class="c1"
data-reach-dialog-content=""
role="dialog"
tabindex="-1"
>
<div
class="c0 c1 c2"
class="c2 c3 c4"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c3"
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c5"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
>
<a
class="c4 c5"
class="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
class="c8 c9"
>
<svg
fill="none"
......@@ -462,7 +513,7 @@ exports[`<Dialog /> renders different button types 1`] = `
</div>
</a>
<svg
class="c8"
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
......@@ -490,30 +541,30 @@ exports[`<Dialog /> renders different button types 1`] = `
</div>
</div>
<div
class="c0 c1"
class="c2 c3"
>
<div
class="c9 c1"
class="c11 c3"
>
<div
class="c10"
class="c12"
>
<div>
Mock Icon
</div>
</div>
<div
class="c11 c1"
class="c13 c3"
>
<div
class="c12 c13 css-4kpdx7"
class="c14 c15 css-4kpdx7"
>
<div>
Mock Title
</div>
</div>
<div
class="c14 c15 css-1urox24"
class="c16 c17 css-1urox24"
>
<div>
Mock Description
......@@ -525,24 +576,24 @@ exports[`<Dialog /> renders different button types 1`] = `
</div>
</div>
<div
class="c6 c16"
class="c8 c18"
>
<button
class="c17 c18"
class="c19 c20"
disabled=""
>
<div
class="c19 c20"
class="c21 c22"
/>
<div>
Left Button
</div>
</button>
<button
class="c21 c18"
class="c23 c20"
>
<div
class="c19 c20"
class="c21 c22"
/>
<div>
Right Button
......@@ -555,20 +606,23 @@ exports[`<Dialog /> renders different button types 1`] = `
</div>
</div>
</div>
</span>
</span>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body>
`;
exports[`<Dialog /> 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[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 4px;
}
.c16 {
.c18 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -604,7 +658,7 @@ exports[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 24px;
}
.c9 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -783,7 +880,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 16px;
}
.c11 {
.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -798,7 +895,7 @@ exports[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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[`<Dialog /> 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;
}
}
<body
style="pointer-events: none;"
data-scroll-locked="1"
>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<span
class=""
......@@ -884,70 +1006,53 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
<span
class=" t_light _dsp_contents is_Theme"
>
<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>
</span>
</span>
</span>
</div>
<reach-portal>
<div
class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _contain-strict _position-fixed _top-0px _left-0px _right-0px _bottom-0px _maxWidth-100vw _maxHeight-100vh _pointerEvents-none _zIndex-1060"
>
<span
class=" _dsp_contents"
>
<span
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div
class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _top-0px _left-0px _right-0px _bottom-0px _zIndex-1060 _maxHeight-100vh _pointerEvents-auto"
>
<div
aria-hidden="true"
class="css-view-175oi2r"
data-aria-hidden="true"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
class="_dsp_contents"
data-remove-scroll-container="true"
data-focus-lock-disabled="false"
>
<div>
<div
style="display: contents; pointer-events: auto;"
class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
>
<div
aria-describedby="description-:r0:"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
aria-label="dialog"
aria-modal="true"
class="c1"
data-reach-dialog-content=""
role="dialog"
tabindex="-1"
>
<div
class="c0 c1 c2"
class="c2 c3 c4"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c3"
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c5"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
>
<a
class="c4 c5"
class="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
class="c8 c9"
>
<svg
fill="none"
......@@ -965,7 +1070,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div>
</a>
<svg
class="c8"
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
......@@ -993,30 +1098,30 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div>
</div>
<div
class="c0 c1"
class="c2 c3"
>
<div
class="c9 c1"
class="c11 c3"
>
<div
class="c10"
class="c12"
>
<div>
Mock Icon
</div>
</div>
<div
class="c11 c1"
class="c13 c3"
>
<div
class="c12 c13 css-4kpdx7"
class="c14 c15 css-4kpdx7"
>
<div>
Mock Title
</div>
</div>
<div
class="c14 c15 css-1urox24"
class="c16 c17 css-1urox24"
>
<div>
Mock Description
......@@ -1028,23 +1133,23 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div>
</div>
<div
class="c6 c16"
class="c8 c18"
>
<button
class="c17 c18"
class="c19 c20"
>
<div
class="c19 c20"
class="c21 c22"
/>
<div>
Left Button
</div>
</button>
<button
class="c17 c18"
class="c19 c20"
>
<div
class="c19 c20"
class="c21 c22"
/>
<div>
Right Button
......@@ -1057,8 +1162,11 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div>
</div>
</div>
</span>
</span>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body>
`;
apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
View file @ c2fcabde
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 0 → 100644
View file @ c2fcabde
//
// @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
View file @ c2fcabde
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
View file @ c2fcabde
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
View file @ c2fcabde
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
View file @ c2fcabde
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
View file @ c2fcabde
// 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
View file @ c2fcabde
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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
......@@ -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
View file @ c2fcabde
......@@ -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__/NewAddressSpeedBump.test.tsx.snap
View file @ c2fcabde
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NewAddressSpeedBumpModal should not render identicon if account has no ENS avatar/unitag pp 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[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 4px;
}
.c18 {
.c20 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -43,7 +43,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 4px;
}
.c19 {
.c21 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -61,7 +61,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 12px;
}
.c12 {
.c14 {
color: #222222;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -69,7 +69,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
letter-spacing: -0.01em;
}
.c14 {
.c16 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -77,7 +77,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
letter-spacing: -0.01em;
}
.c8 {
.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
......@@ -87,15 +87,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
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;
......@@ -106,15 +106,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
font-weight: 500;
}
.c4:hover {
.c6:hover {
opacity: 0.6;
}
.c4:active {
.c6:active {
opacity: 0.4;
}
.c23 {
.c25 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
......@@ -128,7 +128,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
width: 100%;
}
.c20 {
.c22 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -163,30 +163,73 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
user-select: none;
}
.c20:active .c22 {
.c22:active .c24 {
background-color: #B8C0DC3d;
}
.c20:focus .c22 {
.c22:focus .c24 {
background-color: #B8C0DC3d;
}
.c20:hover .c22 {
.c22:hover .c24 {
background-color: #98A1C014;
}
.c20:disabled {
.c22:disabled {
cursor: default;
opacity: 0.6;
}
.c20:disabled:active .c22,
.c20:disabled:focus .c22,
.c20:disabled:hover .c22 {
.c22:disabled:active .c24,
.c22:disabled:focus .c24,
.c22:disabled:hover .c24 {
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;
......@@ -200,17 +243,17 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
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;
......@@ -225,7 +268,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 24px;
}
.c9 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -240,7 +283,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 16px;
}
.c11 {
.c13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -255,7 +298,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 8px;
}
.c16 {
.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -269,7 +312,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
justify-content: flex-start;
}
.c1 {
.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
......@@ -277,14 +320,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
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;
......@@ -303,14 +347,14 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
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;
......@@ -321,7 +365,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
text-align: center;
}
.c21 {
.c23 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -334,23 +378,47 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
border-radius: 12px;
}
.c3 {
.c5 {
padding: 4px 0px;
}
.c17 {
.c19 {
padding: 20px 16px;
border: 1px solid #22222212;
gap: 8px;
border-radius: 20px;
}
@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;
}
}
<body
style="pointer-events: none;"
data-scroll-locked="1"
>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<span
class=""
......@@ -362,70 +430,53 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
<span
class=" t_light _dsp_contents is_Theme"
>
<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>
</span>
</span>
</span>
</div>
<reach-portal>
<div
class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _contain-strict _position-fixed _top-0px _left-0px _right-0px _bottom-0px _maxWidth-100vw _maxHeight-100vh _pointerEvents-none _zIndex-1060"
>
<span
class=" _dsp_contents"
>
<span
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div
class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _top-0px _left-0px _right-0px _bottom-0px _zIndex-1060 _maxHeight-100vh _pointerEvents-auto"
>
<div
aria-hidden="true"
class="css-view-175oi2r"
data-aria-hidden="true"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
class="_dsp_contents"
data-remove-scroll-container="true"
data-focus-lock-disabled="false"
>
<div>
<div
style="display: contents; pointer-events: auto;"
class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
>
<div
aria-describedby="description-:r0:"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
aria-label="dialog"
aria-modal="true"
class="c1"
data-reach-dialog-content=""
role="dialog"
tabindex="-1"
>
<div
class="c0 c1 c2"
class="c2 c3 c4"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c3"
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c5"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
>
<a
class="c4 c5"
class="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
class="c8 c9"
>
<svg
fill="none"
......@@ -443,7 +494,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div>
</a>
<svg
class="c8"
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
......@@ -471,13 +522,13 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div>
</div>
<div
class="c0 c1"
class="c2 c3"
>
<div
class="c9 c1"
class="c11 c3"
>
<div
class="c10"
class="c12"
>
<svg
fill="none"
......@@ -493,26 +544,26 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</svg>
</div>
<div
class="c11 c1"
class="c13 c3"
>
<div
class="c12 c13 css-4kpdx7"
class="c14 c15 css-4kpdx7"
>
New address
</div>
<div
class="c14 c15 css-1urox24"
class="c16 c17 css-1urox24"
>
You haven’t transacted with this address before. Make sure it’s the correct address before continuing.
</div>
<div
class="c16 c1 c17"
class="c18 c3 c19"
>
<div
class="c6 c18"
class="c8 c20"
>
<div
class="c12 css-n8z49y"
class="c14 css-n8z49y"
>
0x9984b4b4E408e8D618A879e5315BD30952c89103
</div>
......@@ -521,21 +572,21 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div>
</div>
<div
class="c6 c19"
class="c8 c21"
>
<button
class="c20 c21"
class="c22 c23"
>
<div
class="c22 c23"
class="c24 c25"
/>
Cancel
</button>
<button
class="c20 c21"
class="c22 c23"
>
<div
class="c22 c23"
class="c24 c25"
/>
Continue
</button>
......@@ -546,8 +597,11 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div>
</div>
</div>
</span>
</span>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body>
`;
apps/web/src/pages/Swap/Send/__snapshots__/SendReviewModal.test.tsx.snap
View file @ c2fcabde
......@@ -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"
......
apps/web/src/pages/Swap/Send/__snapshots__/SmartContractSpeedbump.test.tsx.snap
View file @ c2fcabde
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SmartContractSpeedBumpModal should render correctly 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[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 4px;
}
.c18 {
.c20 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
......@@ -43,7 +43,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 12px;
}
.c14 {
.c16 {
color: #222222;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -51,7 +51,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
letter-spacing: -0.01em;
}
.c16 {
.c18 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
......@@ -59,7 +59,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
letter-spacing: -0.01em;
}
.c8 {
.c10 {
color: #222222;
cursor: pointer;
-webkit-text-decoration: none;
......@@ -69,15 +69,15 @@ exports[`SmartContractSpeedBumpModal should render 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;
......@@ -88,15 +88,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
font-weight: 500;
}
.c4:hover {
.c6:hover {
opacity: 0.6;
}
.c4:active {
.c6:active {
opacity: 0.4;
}
.c22 {
.c24 {
background-color: transparent;
bottom: 0;
border-radius: inherit;
......@@ -110,7 +110,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
width: 100%;
}
.c19 {
.c21 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
......@@ -145,30 +145,73 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
user-select: none;
}
.c19:active .c21 {
.c21:active .c23 {
background-color: #B8C0DC3d;
}
.c19:focus .c21 {
.c21:focus .c23 {
background-color: #B8C0DC3d;
}
.c19:hover .c21 {
.c21:hover .c23 {
background-color: #98A1C014;
}
.c19:disabled {
.c21:disabled {
cursor: default;
opacity: 0.6;
}
.c19:disabled:active .c21,
.c19:disabled:focus .c21,
.c19:disabled:hover .c21 {
.c21:disabled:active .c23,
.c21:disabled:focus .c23,
.c21:disabled:hover .c23 {
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;
......@@ -182,17 +225,17 @@ exports[`SmartContractSpeedBumpModal should render 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;
......@@ -207,7 +250,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 24px;
}
.c9 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -222,7 +265,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 16px;
}
.c13 {
.c15 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -237,7 +280,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 8px;
}
.c1 {
.c3 {
width: 100%;
-webkit-align-items: center;
-webkit-box-align: center;
......@@ -245,14 +288,15 @@ exports[`SmartContractSpeedBumpModal should render 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;
......@@ -271,14 +315,14 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
border-radius: 12px;
}
.c15 {
.c17 {
font-size: 24px;
line-height: 32px;
text-align: center;
font-weight: 500;
}
.c17 {
.c19 {
font-size: 16px;
font-weight: 500;
line-height: 24px;
......@@ -289,7 +333,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
text-align: center;
}
.c20 {
.c22 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
......@@ -302,30 +346,54 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
border-radius: 12px;
}
.c3 {
.c5 {
padding: 4px 0px;
}
.c11 {
.c13 {
height: 28px;
width: 28px;
}
.c11 path {
.c13 path {
background: #7D7D7D;
fill: #7D7D7D;
}
.c12 path {
.c14 path {
fill: #7D7D7D;
}
@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;
}
}
<body
style="pointer-events: none;"
data-scroll-locked="1"
>
<div
aria-hidden="true"
data-aria-hidden="true"
>
<span
class=""
......@@ -337,70 +405,53 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
<span
class=" t_light _dsp_contents is_Theme"
>
<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>
</span>
</span>
</span>
</div>
<reach-portal>
<div
class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _contain-strict _position-fixed _top-0px _left-0px _right-0px _bottom-0px _maxWidth-100vw _maxHeight-100vh _pointerEvents-none _zIndex-1060"
>
<span
class=" _dsp_contents"
>
<span
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div
class="_display-flex _alignItems-center _flexBasis-auto _boxSizing-border-box _position-fixed _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _justifyContent-center _top-0px _left-0px _right-0px _bottom-0px _zIndex-1060 _maxHeight-100vh _pointerEvents-auto"
>
<div
aria-hidden="true"
class="css-view-175oi2r"
data-aria-hidden="true"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
class="_dsp_contents"
data-remove-scroll-container="true"
data-focus-lock-disabled="false"
>
<div>
<div
style="display: contents; pointer-events: auto;"
class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
>
<div
aria-describedby="description-:r0:"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
aria-label="dialog"
aria-modal="true"
class="c1"
data-reach-dialog-content=""
role="dialog"
tabindex="-1"
>
<div
class="c0 c1 c2"
class="c2 c3 c4"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c3"
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241 _alignItems-center _gap-t-space-spa94665589 _width-10037 c5"
>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
>
<a
class="c4 c5"
class="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
class="c8 c9"
>
<svg
fill="none"
......@@ -418,7 +469,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</div>
</a>
<svg
class="c8"
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
......@@ -446,16 +497,16 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</div>
</div>
<div
class="c0 c1"
class="c2 c3"
>
<div
class="c9 c1"
class="c11 c3"
>
<div
class="c10"
class="c12"
>
<svg
class="c11 c12"
class="c13 c14"
fill="#7D7D7D"
viewBox="0 0 28 28"
xmlns="http://www.w3.org/2000/svg"
......@@ -467,36 +518,36 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</svg>
</div>
<div
class="c13 c1"
class="c15 c3"
>
<div
class="c14 c15 css-4kpdx7"
class="c16 c17 css-4kpdx7"
>
Is this a wallet address?
</div>
<div
class="c16 c17 css-1urox24"
class="c18 c19 css-1urox24"
>
You’re about to send tokens to a special type of address - a smart contract. Double-check it’s the address you intended to send to. If it’s wrong, your tokens could be lost forever.
</div>
</div>
</div>
<div
class="c6 c18"
class="c8 c20"
>
<button
class="c19 c20"
class="c21 c22"
>
<div
class="c21 c22"
class="c23 c24"
/>
Cancel
</button>
<button
class="c19 c20"
class="c21 c22"
>
<div
class="c21 c22"
class="c23 c24"
/>
Continue
</button>
......@@ -507,8 +558,11 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</div>
</div>
</div>
</span>
</span>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body>
`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment