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: IPFS hash of the deployment:
- CIDv0: `QmREL7zj6bMggt5yrx5mfiWCnWzbP1xAoVTYAd2J3uFgtb` - CIDv0: `QmVMsr8YpWVo2SyEuQwKBNaBDKv7uZcZkN63VTDrMgfsX1`
- CIDv1: `bafybeibk6showu2rchiizehaujrhea6a3ebhhapm3ivjdrhnddgbx2u3tq` - CIDv1: `bafybeidiki7lac24gv6xgw65hvxrrqfpk2bdgjsj63rl2uuf5yijufqj6q`
The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org). 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. ...@@ -10,50 +10,15 @@ You can also access the Uniswap Interface from an IPFS gateway.
Your Uniswap settings are never remembered across different URLs. Your Uniswap settings are never remembered across different URLs.
IPFS gateways: IPFS gateways:
- https://bafybeibk6showu2rchiizehaujrhea6a3ebhhapm3ivjdrhnddgbx2u3tq.ipfs.dweb.link/ - https://bafybeidiki7lac24gv6xgw65hvxrrqfpk2bdgjsj63rl2uuf5yijufqj6q.ipfs.dweb.link/
- https://bafybeibk6showu2rchiizehaujrhea6a3ebhhapm3ivjdrhnddgbx2u3tq.ipfs.cf-ipfs.com/ - https://bafybeidiki7lac24gv6xgw65hvxrrqfpk2bdgjsj63rl2uuf5yijufqj6q.ipfs.cf-ipfs.com/
- [ipfs://QmREL7zj6bMggt5yrx5mfiWCnWzbP1xAoVTYAd2J3uFgtb/](ipfs://QmREL7zj6bMggt5yrx5mfiWCnWzbP1xAoVTYAd2J3uFgtb/) - [ipfs://QmVMsr8YpWVo2SyEuQwKBNaBDKv7uZcZkN63VTDrMgfsX1/](ipfs://QmVMsr8YpWVo2SyEuQwKBNaBDKv7uZcZkN63VTDrMgfsX1/)
## 5.61.0 (2024-12-04) ### 5.61.1 (2024-12-06)
### 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
### Bug Fixes ### Bug Fixes
* **web:** [1/n] remove react-spring usage (AnimatedDropdown) (#13891) 9af3573 * **web): Revert "fix(web:** [2/n] remove react-spring usage (modal) (#13904)" (#14314) 28dfe99
* **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
VERSION
View file @ c2fcabde
web/5.61.0 web/5.61.1
\ No newline at end of file \ 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 ...@@ -3,6 +3,7 @@ import { ConfirmedIcon, LogoContainer, SubmittedIcon } from 'components/AccountD
import { useCancelOrdersGasEstimate } from 'components/AccountDrawer/MiniPortfolio/Activity/hooks' import { useCancelOrdersGasEstimate } from 'components/AccountDrawer/MiniPortfolio/Activity/hooks'
import { Container, Dialog, DialogButtonType, DialogProps } from 'components/Dialog/Dialog' import { Container, Dialog, DialogButtonType, DialogProps } from 'components/Dialog/Dialog'
import { LoaderV3 } from 'components/Icons/LoadingSpinner' import { LoaderV3 } from 'components/Icons/LoadingSpinner'
import Modal from 'components/Modal'
import { GetHelpHeader } from 'components/Modal/GetHelpHeader' import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
import Column from 'components/deprecated/Column' import Column from 'components/deprecated/Column'
import Row from 'components/deprecated/Row' import Row from 'components/deprecated/Row'
...@@ -11,7 +12,6 @@ import styled, { useTheme } from 'lib/styled-components' ...@@ -11,7 +12,6 @@ import styled, { useTheme } from 'lib/styled-components'
import { Slash } from 'react-feather' import { Slash } from 'react-feather'
import { SignatureType, UniswapXOrderDetails } from 'state/signatures/types' import { SignatureType, UniswapXOrderDetails } from 'state/signatures/types'
import { ExternalLink, ThemedText } from 'theme/components' import { ExternalLink, ThemedText } from 'theme/components'
import { AdaptiveWebModal } from 'ui/src'
import { nativeOnChain } from 'uniswap/src/constants/tokens' import { nativeOnChain } from 'uniswap/src/constants/tokens'
import { UniverseChainId } from 'uniswap/src/features/chains/types' import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { useUSDCValue } from 'uniswap/src/features/transactions/swap/hooks/useUSDCPrice' import { useUSDCValue } from 'uniswap/src/features/transactions/swap/hooks/useUSDCPrice'
...@@ -100,7 +100,7 @@ export function CancelOrdersDialog( ...@@ -100,7 +100,7 @@ export function CancelOrdersDialog(
(cancelState === CancellationState.CANCELLED || cancelState === CancellationState.PENDING_CONFIRMATION) && (cancelState === CancellationState.CANCELLED || cancelState === CancellationState.PENDING_CONFIRMATION) &&
cancelTxHash cancelTxHash
return ( return (
<AdaptiveWebModal isOpen onClose={onCancel} maxHeight="90vh" p={0}> <Modal isOpen $scrollOverlay onDismiss={onCancel} maxHeight="90vh">
<Container gap="lg"> <Container gap="lg">
<ModalHeader closeModal={onCancel} /> <ModalHeader closeModal={onCancel} />
<LogoContainer>{icon}</LogoContainer> <LogoContainer>{icon}</LogoContainer>
...@@ -122,7 +122,7 @@ export function CancelOrdersDialog( ...@@ -122,7 +122,7 @@ export function CancelOrdersDialog(
)} )}
</Row> </Row>
</Container> </Container>
</AdaptiveWebModal> </Modal>
) )
} else if (cancelState === CancellationState.REVIEWING_CANCELLATION) { } else if (cancelState === CancellationState.REVIEWING_CANCELLATION) {
return ( return (
......
apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx
View file @ c2fcabde
...@@ -17,6 +17,7 @@ import { formatTimestamp } from 'components/AccountDrawer/MiniPortfolio/formatTi ...@@ -17,6 +17,7 @@ import { formatTimestamp } from 'components/AccountDrawer/MiniPortfolio/formatTi
import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons' import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons'
import { OpacityHoverState } from 'components/Common/styles' import { OpacityHoverState } from 'components/Common/styles'
import AlertTriangleFilled from 'components/Icons/AlertTriangleFilled' import AlertTriangleFilled from 'components/Icons/AlertTriangleFilled'
import Modal from 'components/Modal'
import Column, { AutoColumn } from 'components/deprecated/Column' import Column, { AutoColumn } from 'components/deprecated/Column'
import Row from 'components/deprecated/Row' import Row from 'components/deprecated/Row'
import { LimitDisclaimer } from 'components/swap/LimitDisclaimer' import { LimitDisclaimer } from 'components/swap/LimitDisclaimer'
...@@ -32,7 +33,6 @@ import { useOrder } from 'state/signatures/hooks' ...@@ -32,7 +33,6 @@ import { useOrder } from 'state/signatures/hooks'
import { SignatureType, UniswapXOrderDetails } from 'state/signatures/types' import { SignatureType, UniswapXOrderDetails } from 'state/signatures/types'
import { Divider, ThemedText } from 'theme/components' import { Divider, ThemedText } from 'theme/components'
import { UniswapXOrderStatus } from 'types/uniswapx' import { UniswapXOrderStatus } from 'types/uniswapx'
import { AdaptiveWebModal } from 'ui/src'
import { UniverseChainId } from 'uniswap/src/features/chains/types' import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { InterfaceEventNameLocal } from 'uniswap/src/features/telemetry/constants' import { InterfaceEventNameLocal } from 'uniswap/src/features/telemetry/constants'
import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send' import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
...@@ -382,11 +382,10 @@ export function OffchainActivityModal() { ...@@ -382,11 +382,10 @@ export function OffchainActivityModal() {
cancelTxHash={cancelTxHash} cancelTxHash={cancelTxHash}
/> />
)} )}
<AdaptiveWebModal <Modal
maxWidth={375} maxWidth={375}
isOpen={!!selectedOrderAtomValue?.modalOpen && cancelState === CancellationState.NOT_STARTED} isOpen={!!selectedOrderAtomValue?.modalOpen && cancelState === CancellationState.NOT_STARTED}
onClose={reset} onDismiss={reset}
p={0}
> >
<Wrapper data-testid="offchain-activity-modal"> <Wrapper data-testid="offchain-activity-modal">
<Row justify="space-between"> <Row justify="space-between">
...@@ -405,7 +404,7 @@ export function OffchainActivityModal() { ...@@ -405,7 +404,7 @@ export function OffchainActivityModal() {
/> />
)} )}
</Wrapper> </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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CancelOrdersDialog should render limit order text 1`] = ` exports[`CancelOrdersDialog should render limit order text 1`] = `
.c6 { .c8 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c7 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -25,7 +25,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -25,7 +25,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 4px; gap: 4px;
} }
.c17 { .c19 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -42,7 +42,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -42,7 +42,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c22 { .c24 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -60,14 +60,14 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -60,14 +60,14 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 12px; gap: 12px;
} }
.c19 { .c21 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
} }
.c12 { .c14 {
color: #222222; color: #222222;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -75,7 +75,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -75,7 +75,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c14 { .c16 {
color: #7D7D7D; color: #7D7D7D;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -83,7 +83,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -83,7 +83,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c8 { .c10 {
color: #222222; color: #222222;
cursor: pointer; cursor: pointer;
-webkit-text-decoration: none; -webkit-text-decoration: none;
...@@ -93,15 +93,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -93,15 +93,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
transition-duration: 125ms; transition-duration: 125ms;
} }
.c8:hover { .c10:hover {
opacity: 0.6; opacity: 0.6;
} }
.c8:active { .c10:active {
opacity: 0.4; opacity: 0.4;
} }
.c4 { .c6 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -112,15 +112,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -112,15 +112,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
font-weight: 500; font-weight: 500;
} }
.c4:hover { .c6:hover {
opacity: 0.6; opacity: 0.6;
} }
.c4:active { .c6:active {
opacity: 0.4; opacity: 0.4;
} }
.c26 { .c28 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -134,7 +134,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -134,7 +134,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
width: 100%; width: 100%;
} }
.c23 { .c25 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -169,30 +169,30 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -169,30 +169,30 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
user-select: none; user-select: none;
} }
.c23:active .c25 { .c25:active .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c23:focus .c25 { .c25:focus .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c23:hover .c25 { .c25:hover .c27 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c23:disabled { .c25:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c23:disabled:active .c25, .c25:disabled:active .c27,
.c23:disabled:focus .c25, .c25:disabled:focus .c27,
.c23:disabled:hover .c25 { .c25:disabled:hover .c27 {
background-color: transparent; background-color: transparent;
} }
.c27 { .c29 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -227,30 +227,73 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -227,30 +227,73 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
user-select: none; user-select: none;
} }
.c27:active .c25 { .c29:active .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c27:focus .c25 { .c29:focus .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c27:hover .c25 { .c29:hover .c27 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c27:disabled { .c29:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c27:disabled:active .c25, .c29:disabled:active .c27,
.c27:disabled:focus .c25, .c29:disabled:focus .c27,
.c27:disabled:hover .c25 { .c29:disabled:hover .c27 {
background-color: transparent; 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: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
...@@ -264,17 +307,17 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -264,17 +307,17 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
stroke: none; stroke: none;
} }
.c5:hover { .c7:hover {
background: #22222212; background: #22222212;
color: #222222; color: #222222;
opacity: unset; opacity: unset;
} }
.c5:hover path { .c7:hover path {
fill: #222222; fill: #222222;
} }
.c0 { .c2 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -289,7 +332,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -289,7 +332,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 24px; gap: 24px;
} }
.c9 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -304,7 +347,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -304,7 +347,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 16px; gap: 16px;
} }
.c11 { .c13 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -319,7 +362,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -319,7 +362,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
gap: 8px; gap: 8px;
} }
.c16 { .c18 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -333,7 +376,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -333,7 +376,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c1 { .c3 {
width: 100%; width: 100%;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -341,14 +384,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -341,14 +384,15 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
align-items: center; align-items: center;
} }
.c2 { .c4 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; outline: 1px solid #22222212;
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
} }
.c10 { .c12 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -367,14 +411,14 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -367,14 +411,14 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c13 { .c15 {
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
.c15 { .c17 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -385,7 +429,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -385,7 +429,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
text-align: center; text-align: center;
} }
.c24 { .c26 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -399,7 +443,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -399,7 +443,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c28 { .c30 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -413,32 +457,56 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -413,32 +457,56 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c3 { .c5 {
padding: 4px 0px; padding: 4px 0px;
} }
.c20 { .c22 {
cursor: auto; cursor: auto;
color: #7D7D7D; color: #7D7D7D;
} }
.c21 { .c23 {
text-align: right; text-align: right;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.c18 { .c20 {
border-top: 1px solid #22222212; border-top: 1px solid #22222212;
margin-top: 16px; margin-top: 16px;
padding-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 <body
style="pointer-events: none;" data-scroll-locked="1"
> >
<div <div
aria-hidden="true" aria-hidden="true"
data-aria-hidden="true"
> >
<span <span
class="" class=""
...@@ -450,70 +518,53 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -450,70 +518,53 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
<span <span
class=" t_light _dsp_contents is_Theme" class=" t_light _dsp_contents is_Theme"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span> </span>
</span> </span>
</span> </span>
</span>
</div> </div>
<reach-portal>
<div <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" data-focus-guard="true"
> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
<span tabindex="0"
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;"
/> />
<div <div
class="_dsp_contents" data-focus-lock-disabled="false"
data-remove-scroll-container="true"
> >
<div>
<div <div
style="display: contents; pointer-events: auto;" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-describedby="description-:r3:" aria-label="dialog"
aria-labelledby="title-:r3:" aria-modal="true"
class="css-view-175oi2r" class="c1"
id="content-:r3:" data-reach-dialog-content=""
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);" role="dialog"
tabindex="-1" tabindex="-1"
> >
<div <div
class="c0 c1 c2" class="c2 c3 c4"
> >
<div <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 <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" 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 <a
class="c4 c5" class="c6 c7"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c6 c7" class="c8 c9"
> >
<svg <svg
fill="none" fill="none"
...@@ -531,7 +582,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -531,7 +582,7 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div> </div>
</a> </a>
<svg <svg
class="c8" class="c10"
data-testid="Dialog-closeButton" data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="24"
...@@ -559,13 +610,13 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -559,13 +610,13 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c2 c3"
> >
<div <div
class="c9 c1" class="c11 c3"
> >
<div <div
class="c10" class="c12"
> >
<svg <svg
fill="none" fill="none"
...@@ -592,34 +643,34 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -592,34 +643,34 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c11 c1" class="c13 c3"
> >
<div <div
class="c12 c13 css-4kpdx7" class="c14 c15 css-4kpdx7"
> >
Cancel limit Cancel limit
</div> </div>
<div <div
class="c14 c15 css-1urox24" class="c16 c17 css-1urox24"
> >
<div <div
class="c16" class="c18"
> >
Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed? Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
<div <div
class="c6 c17 c18" class="c8 c19 c20"
> >
<div <div
class="c6 c17 c19" class="c8 c19 c21"
> >
<div <div
class="c12 c20 css-142zc9n" class="c14 c22 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network cost Network cost
</div> </div>
<div <div
class="c12 c21 css-142zc9n" class="c14 c23 css-142zc9n"
> >
<span> <span>
- -
...@@ -632,21 +683,21 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -632,21 +683,21 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div> </div>
</div> </div>
<div <div
class="c6 c22" class="c8 c24"
> >
<button <button
class="c23 c24" class="c25 c26"
> >
<div <div
class="c25 c26" class="c27 c28"
/> />
Never mind Never mind
</button> </button>
<button <button
class="c27 c28" class="c29 c30"
> >
<div <div
class="c25 c26" class="c27 c28"
/> />
Proceed Proceed
</button> </button>
...@@ -657,20 +708,23 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -657,20 +708,23 @@ exports[`CancelOrdersDialog should render limit order text 1`] = `
</div> </div>
</div> </div>
</div> </div>
</span> <div
</span> data-focus-guard="true"
</div> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </body>
`; `;
exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
.c6 { .c8 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c7 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -688,7 +742,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -688,7 +742,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 4px; gap: 4px;
} }
.c17 { .c19 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -705,7 +759,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -705,7 +759,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c22 { .c24 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -723,14 +777,14 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -723,14 +777,14 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 12px; gap: 12px;
} }
.c19 { .c21 {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
} }
.c12 { .c14 {
color: #222222; color: #222222;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -738,7 +792,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -738,7 +792,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c14 { .c16 {
color: #7D7D7D; color: #7D7D7D;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -746,7 +800,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -746,7 +800,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c8 { .c10 {
color: #222222; color: #222222;
cursor: pointer; cursor: pointer;
-webkit-text-decoration: none; -webkit-text-decoration: none;
...@@ -756,15 +810,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -756,15 +810,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
transition-duration: 125ms; transition-duration: 125ms;
} }
.c8:hover { .c10:hover {
opacity: 0.6; opacity: 0.6;
} }
.c8:active { .c10:active {
opacity: 0.4; opacity: 0.4;
} }
.c4 { .c6 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -775,15 +829,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -775,15 +829,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
font-weight: 500; font-weight: 500;
} }
.c4:hover { .c6:hover {
opacity: 0.6; opacity: 0.6;
} }
.c4:active { .c6:active {
opacity: 0.4; opacity: 0.4;
} }
.c26 { .c28 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -797,7 +851,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -797,7 +851,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
width: 100%; width: 100%;
} }
.c23 { .c25 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -832,30 +886,30 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -832,30 +886,30 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
user-select: none; user-select: none;
} }
.c23:active .c25 { .c25:active .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c23:focus .c25 { .c25:focus .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c23:hover .c25 { .c25:hover .c27 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c23:disabled { .c25:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c23:disabled:active .c25, .c25:disabled:active .c27,
.c23:disabled:focus .c25, .c25:disabled:focus .c27,
.c23:disabled:hover .c25 { .c25:disabled:hover .c27 {
background-color: transparent; background-color: transparent;
} }
.c27 { .c29 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -890,30 +944,73 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -890,30 +944,73 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
user-select: none; user-select: none;
} }
.c27:active .c25 { .c29:active .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c27:focus .c25 { .c29:focus .c27 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c27:hover .c25 { .c29:hover .c27 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c27:disabled { .c29:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c27:disabled:active .c25, .c29:disabled:active .c27,
.c27:disabled:focus .c25, .c29:disabled:focus .c27,
.c27:disabled:hover .c25 { .c29:disabled:hover .c27 {
background-color: transparent; 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: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
...@@ -927,17 +1024,17 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -927,17 +1024,17 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
stroke: none; stroke: none;
} }
.c5:hover { .c7:hover {
background: #22222212; background: #22222212;
color: #222222; color: #222222;
opacity: unset; opacity: unset;
} }
.c5:hover path { .c7:hover path {
fill: #222222; fill: #222222;
} }
.c0 { .c2 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -952,7 +1049,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -952,7 +1049,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 24px; gap: 24px;
} }
.c9 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -967,7 +1064,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -967,7 +1064,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 16px; gap: 16px;
} }
.c11 { .c13 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -982,7 +1079,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -982,7 +1079,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
gap: 8px; gap: 8px;
} }
.c16 { .c18 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -996,7 +1093,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -996,7 +1093,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c1 { .c3 {
width: 100%; width: 100%;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -1004,14 +1101,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1004,14 +1101,15 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
align-items: center; align-items: center;
} }
.c2 { .c4 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; outline: 1px solid #22222212;
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
} }
.c10 { .c12 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1030,14 +1128,14 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1030,14 +1128,14 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c13 { .c15 {
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
.c15 { .c17 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -1048,7 +1146,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1048,7 +1146,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
text-align: center; text-align: center;
} }
.c24 { .c26 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1062,7 +1160,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1062,7 +1160,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c28 { .c30 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1076,32 +1174,56 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1076,32 +1174,56 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c3 { .c5 {
padding: 4px 0px; padding: 4px 0px;
} }
.c20 { .c22 {
cursor: auto; cursor: auto;
color: #7D7D7D; color: #7D7D7D;
} }
.c21 { .c23 {
text-align: right; text-align: right;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.c18 { .c20 {
border-top: 1px solid #22222212; border-top: 1px solid #22222212;
margin-top: 16px; margin-top: 16px;
padding-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 <body
style="pointer-events: none;" data-scroll-locked="1"
> >
<div <div
aria-hidden="true" aria-hidden="true"
data-aria-hidden="true"
> >
<span <span
class="" class=""
...@@ -1113,70 +1235,53 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1113,70 +1235,53 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
<span <span
class=" t_light _dsp_contents is_Theme" class=" t_light _dsp_contents is_Theme"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span> </span>
</span> </span>
</span> </span>
</span>
</div> </div>
<reach-portal>
<div <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" data-focus-guard="true"
> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
<span tabindex="0"
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;"
/> />
<div <div
class="_dsp_contents" data-focus-lock-disabled="false"
data-remove-scroll-container="true"
> >
<div>
<div <div
style="display: contents; pointer-events: auto;" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-describedby="description-:r0:" aria-label="dialog"
aria-labelledby="title-:r0:" aria-modal="true"
class="css-view-175oi2r" class="c1"
id="content-:r0:" data-reach-dialog-content=""
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);" role="dialog"
tabindex="-1" tabindex="-1"
> >
<div <div
class="c0 c1 c2" class="c2 c3 c4"
> >
<div <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 <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" 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 <a
class="c4 c5" class="c6 c7"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c6 c7" class="c8 c9"
> >
<svg <svg
fill="none" fill="none"
...@@ -1194,7 +1299,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1194,7 +1299,7 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div> </div>
</a> </a>
<svg <svg
class="c8" class="c10"
data-testid="Dialog-closeButton" data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="24"
...@@ -1222,13 +1327,13 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1222,13 +1327,13 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c2 c3"
> >
<div <div
class="c9 c1" class="c11 c3"
> >
<div <div
class="c10" class="c12"
> >
<svg <svg
fill="none" fill="none"
...@@ -1255,34 +1360,34 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1255,34 +1360,34 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c11 c1" class="c13 c3"
> >
<div <div
class="c12 c13 css-4kpdx7" class="c14 c15 css-4kpdx7"
> >
Cancel order Cancel order
</div> </div>
<div <div
class="c14 c15 css-1urox24" class="c16 c17 css-1urox24"
> >
<div <div
class="c16" class="c18"
> >
Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed? Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
<div <div
class="c6 c17 c18" class="c8 c19 c20"
> >
<div <div
class="c6 c17 c19" class="c8 c19 c21"
> >
<div <div
class="c12 c20 css-142zc9n" class="c14 c22 css-142zc9n"
data-testid="swap-li-label" data-testid="swap-li-label"
> >
Network cost Network cost
</div> </div>
<div <div
class="c12 c21 css-142zc9n" class="c14 c23 css-142zc9n"
> >
<span> <span>
- -
...@@ -1295,21 +1400,21 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1295,21 +1400,21 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="c6 c22" class="c8 c24"
> >
<button <button
class="c23 c24" class="c25 c26"
> >
<div <div
class="c25 c26" class="c27 c28"
/> />
Never mind Never mind
</button> </button>
<button <button
class="c27 c28" class="c29 c30"
> >
<div <div
class="c25 c26" class="c27 c28"
/> />
Proceed Proceed
</button> </button>
...@@ -1320,8 +1425,11 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1320,8 +1425,11 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
</span> <div
</span> data-focus-guard="true"
</div> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </body>
`; `;
apps/web/src/components/AccountDrawer/UniwalletModal.tsx
View file @ c2fcabde
import { InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events' import { InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
import MobileAppLogo from 'assets/svg/uniswap_app_logo.svg' import MobileAppLogo from 'assets/svg/uniswap_app_logo.svg'
import Modal from 'components/Modal'
import { useConnect } from 'hooks/useConnect' import { useConnect } from 'hooks/useConnect'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { CloseIcon } from 'theme/components' 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 { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { useTranslation } from 'uniswap/src/i18n' import { useTranslation } from 'uniswap/src/i18n'
import { isWebAndroid, isWebIOS } from 'utilities/src/platform' import { isWebAndroid, isWebIOS } from 'utilities/src/platform'
...@@ -47,7 +48,7 @@ export default function UniwalletModal() { ...@@ -47,7 +48,7 @@ export default function UniwalletModal() {
const colors = useSporeColors() const colors = useSporeColors()
return ( return (
<AdaptiveWebModal isOpen={open} onClose={close} p={0}> <Modal isOpen={open} onDismiss={close}>
<Flex shrink grow p="$spacing20"> <Flex shrink grow p="$spacing20">
<Flex row justifyContent="space-between"> <Flex row justifyContent="space-between">
<Text variant="subheading1">{t('account.drawer.modal.scan')}</Text> <Text variant="subheading1">{t('account.drawer.modal.scan')}</Text>
...@@ -87,6 +88,6 @@ export default function UniwalletModal() { ...@@ -87,6 +88,6 @@ export default function UniwalletModal() {
</Button> </Button>
</Flex> </Flex>
</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`] = ` ...@@ -730,16 +730,9 @@ exports[`AccountDrawer tests AccountDrawer default styles 1`] = `
class="c6" class="c6"
data-testid="wallet-modal" data-testid="wallet-modal"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span>
<div <div
class="c7 c8 c9" class="c7 c8 c9"
width="100%" width="100%"
......
apps/web/src/components/ConfirmSwapModal/Modal.tsx
View file @ c2fcabde
import { InterfaceModalName } from '@uniswap/analytics-events' import { InterfaceModalName } from '@uniswap/analytics-events'
import Modal from 'components/Modal'
import { AutoColumn } from 'components/deprecated/Column' import { AutoColumn } from 'components/deprecated/Column'
import styled from 'lib/styled-components' import styled from 'lib/styled-components'
import { PropsWithChildren } from 'react' import { PropsWithChildren } from 'react'
import { AdaptiveWebModal, HeightAnimator } from 'ui/src' import { HeightAnimator } from 'ui/src'
import Trace from 'uniswap/src/features/telemetry/Trace' import Trace from 'uniswap/src/features/telemetry/Trace'
const Content = styled(AutoColumn)` const Content = styled(AutoColumn)`
...@@ -20,7 +21,7 @@ export function SwapModal({ ...@@ -20,7 +21,7 @@ export function SwapModal({
}>) { }>) {
return ( return (
<Trace modal={InterfaceModalName.CONFIRM_SWAP}> <Trace modal={InterfaceModalName.CONFIRM_SWAP}>
<AdaptiveWebModal isOpen onClose={onDismiss} maxHeight="90vh" p={0}> <Modal isOpen $scrollOverlay onDismiss={onDismiss} maxHeight="90vh" slideIn>
<HeightAnimator <HeightAnimator
open={true} open={true}
width="100%" width="100%"
...@@ -35,7 +36,7 @@ export function SwapModal({ ...@@ -35,7 +36,7 @@ export function SwapModal({
> >
<Content>{children}</Content> <Content>{children}</Content>
</HeightAnimator> </HeightAnimator>
</AdaptiveWebModal> </Modal>
</Trace> </Trace>
) )
} }
apps/web/src/components/ConfirmSwapModal/index.tsx
View file @ c2fcabde
...@@ -5,6 +5,7 @@ import { SwapHead } from 'components/ConfirmSwapModal/Head' ...@@ -5,6 +5,7 @@ import { SwapHead } from 'components/ConfirmSwapModal/Head'
import { SwapModal } from 'components/ConfirmSwapModal/Modal' import { SwapModal } from 'components/ConfirmSwapModal/Modal'
import { Pending } from 'components/ConfirmSwapModal/Pending' import { Pending } from 'components/ConfirmSwapModal/Pending'
import SwapProgressIndicator from 'components/ConfirmSwapModal/ProgressIndicator' import SwapProgressIndicator from 'components/ConfirmSwapModal/ProgressIndicator'
import { MODAL_TRANSITION_DURATION } from 'components/Modal'
import { AutoColumn } from 'components/deprecated/Column' import { AutoColumn } from 'components/deprecated/Column'
import { SwapDetails } from 'components/swap/SwapDetails' import { SwapDetails } from 'components/swap/SwapDetails'
import { SwapPreview } from 'components/swap/SwapPreview' import { SwapPreview } from 'components/swap/SwapPreview'
...@@ -185,7 +186,7 @@ export function ConfirmSwapModal({ ...@@ -185,7 +186,7 @@ export function ConfirmSwapModal({
setTimeout(() => { setTimeout(() => {
// Reset local state after the modal dismiss animation finishes, to avoid UI flicker as it dismisses // Reset local state after the modal dismiss animation finishes, to avoid UI flicker as it dismisses
onCancel() onCancel()
}, 200) }, MODAL_TRANSITION_DURATION)
// Popups are suppressed when modal is open; re-enable them on dismissal // Popups are suppressed when modal is open; re-enable them on dismissal
unsuppressPopups() unsuppressPopups()
}, [confirmModalState, doesTradeDiffer, onCancel, onDismiss, priceUpdate, unsuppressPopups, trade]) }, [confirmModalState, doesTradeDiffer, onCancel, onDismiss, priceUpdate, unsuppressPopups, trade])
......
apps/web/src/components/ConnectedAccountBlocked.tsx
View file @ c2fcabde
import Column from 'components/deprecated/Column' import Column from 'components/deprecated/Column'
import Modal from 'components/Modal'
import styled, { useTheme } from 'lib/styled-components' import styled, { useTheme } from 'lib/styled-components'
import { Slash } from 'react-feather' import { Slash } from 'react-feather'
import { CopyHelper, ExternalLink, ThemedText } from 'theme/components' 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' import { Trans } from 'uniswap/src/i18n'
const ContentWrapper = styled(Column)` const ContentWrapper = styled(Column)`
...@@ -19,7 +20,7 @@ interface ConnectedAccountBlockedProps { ...@@ -19,7 +20,7 @@ interface ConnectedAccountBlockedProps {
export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedProps) { export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedProps) {
const theme = useTheme() const theme = useTheme()
return ( return (
<AdaptiveWebModal isOpen={props.isOpen} onClose={Function.prototype()} p={0}> <Modal isOpen={props.isOpen} onDismiss={Function.prototype()}>
<ContentWrapper> <ContentWrapper>
<Slash size="22px" color={theme.neutral2} /> <Slash size="22px" color={theme.neutral2} />
<ThemedText.DeprecatedLargeHeader lineHeight={2} marginBottom={1} marginTop={1}> <ThemedText.DeprecatedLargeHeader lineHeight={2} marginBottom={1} marginTop={1}>
...@@ -55,6 +56,6 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr ...@@ -55,6 +56,6 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
/> />
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</ContentWrapper> </ContentWrapper>
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/Dialog/Dialog.tsx
View file @ c2fcabde
import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons' import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons'
import Modal from 'components/Modal'
import { GetHelpHeader } from 'components/Modal/GetHelpHeader' import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
import { ColumnCenter } from 'components/deprecated/Column' import { ColumnCenter } from 'components/deprecated/Column'
import Row from 'components/deprecated/Row' import Row from 'components/deprecated/Row'
...@@ -6,11 +7,11 @@ import styled, { DefaultTheme } from 'lib/styled-components' ...@@ -6,11 +7,11 @@ import styled, { DefaultTheme } from 'lib/styled-components'
import { ReactNode } from 'react' import { ReactNode } from 'react'
import { Gap } from 'theme' import { Gap } from 'theme'
import { ThemedText } from 'theme/components' import { ThemedText } from 'theme/components'
import { AdaptiveWebModal } from 'ui/src'
export const Container = styled(ColumnCenter)` export const Container = styled(ColumnCenter)`
background-color: ${({ theme }) => theme.surface1}; background-color: ${({ theme }) => theme.surface1};
border-radius: 16px; outline: 1px solid ${({ theme }) => theme.surface3};
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
` `
...@@ -160,11 +161,11 @@ export function DialogContent({ icon, title, description, body, buttonsConfig }: ...@@ -160,11 +161,11 @@ export function DialogContent({ icon, title, description, body, buttonsConfig }:
*/ */
export function Dialog(props: DialogProps) { export function Dialog(props: DialogProps) {
return ( return (
<AdaptiveWebModal isOpen={props.isVisible} onClose={props.onCancel} p={0}> <Modal $scrollOverlay isOpen={props.isVisible} onDismiss={props.onCancel}>
<Container gap="lg"> <Container gap="lg">
<DialogHeader closeModal={props.onCancel} closeDataTestId="Dialog-closeButton" /> <DialogHeader closeModal={props.onCancel} closeDataTestId="Dialog-closeButton" />
<DialogContent {...props} /> <DialogContent {...props} />
</Container> </Container>
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
View file @ c2fcabde
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Dialog /> renders different button types 1`] = ` exports[`<Dialog /> renders different button types 1`] = `
.c6 { .c8 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c7 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -25,7 +25,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -25,7 +25,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 4px; gap: 4px;
} }
.c16 { .c18 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -43,7 +43,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -43,7 +43,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 12px; gap: 12px;
} }
.c12 { .c14 {
color: #222222; color: #222222;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -51,7 +51,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -51,7 +51,7 @@ exports[`<Dialog /> renders different button types 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c14 { .c16 {
color: #7D7D7D; color: #7D7D7D;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -59,7 +59,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -59,7 +59,7 @@ exports[`<Dialog /> renders different button types 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c8 { .c10 {
color: #222222; color: #222222;
cursor: pointer; cursor: pointer;
-webkit-text-decoration: none; -webkit-text-decoration: none;
...@@ -69,15 +69,15 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -69,15 +69,15 @@ exports[`<Dialog /> renders different button types 1`] = `
transition-duration: 125ms; transition-duration: 125ms;
} }
.c8:hover { .c10:hover {
opacity: 0.6; opacity: 0.6;
} }
.c8:active { .c10:active {
opacity: 0.4; opacity: 0.4;
} }
.c4 { .c6 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -88,15 +88,15 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -88,15 +88,15 @@ exports[`<Dialog /> renders different button types 1`] = `
font-weight: 500; font-weight: 500;
} }
.c4:hover { .c6:hover {
opacity: 0.6; opacity: 0.6;
} }
.c4:active { .c6:active {
opacity: 0.4; opacity: 0.4;
} }
.c20 { .c22 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -110,7 +110,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -110,7 +110,7 @@ exports[`<Dialog /> renders different button types 1`] = `
width: 100%; width: 100%;
} }
.c17 { .c19 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -145,30 +145,30 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -145,30 +145,30 @@ exports[`<Dialog /> renders different button types 1`] = `
user-select: none; user-select: none;
} }
.c17:active .c19 { .c19:active .c21 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c17:focus .c19 { .c19:focus .c21 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c17:hover .c19 { .c19:hover .c21 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c17:disabled { .c19:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c17:disabled:active .c19, .c19:disabled:active .c21,
.c17:disabled:focus .c19, .c19:disabled:focus .c21,
.c17:disabled:hover .c19 { .c19:disabled:hover .c21 {
background-color: transparent; background-color: transparent;
} }
.c21 { .c23 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -203,30 +203,73 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -203,30 +203,73 @@ exports[`<Dialog /> renders different button types 1`] = `
user-select: none; user-select: none;
} }
.c21:active .c19 { .c23:active .c21 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c21:focus .c19 { .c23:focus .c21 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c21:hover .c19 { .c23:hover .c21 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c21:disabled { .c23:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c21:disabled:active .c19, .c23:disabled:active .c21,
.c21:disabled:focus .c19, .c23:disabled:focus .c21,
.c21:disabled:hover .c19 { .c23:disabled:hover .c21 {
background-color: transparent; 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: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
...@@ -240,17 +283,17 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -240,17 +283,17 @@ exports[`<Dialog /> renders different button types 1`] = `
stroke: none; stroke: none;
} }
.c5:hover { .c7:hover {
background: #22222212; background: #22222212;
color: #222222; color: #222222;
opacity: unset; opacity: unset;
} }
.c5:hover path { .c7:hover path {
fill: #222222; fill: #222222;
} }
.c0 { .c2 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -265,7 +308,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -265,7 +308,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 24px; gap: 24px;
} }
.c9 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -280,7 +323,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -280,7 +323,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 16px; gap: 16px;
} }
.c11 { .c13 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -295,7 +338,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -295,7 +338,7 @@ exports[`<Dialog /> renders different button types 1`] = `
gap: 8px; gap: 8px;
} }
.c1 { .c3 {
width: 100%; width: 100%;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -303,14 +346,15 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -303,14 +346,15 @@ exports[`<Dialog /> renders different button types 1`] = `
align-items: center; align-items: center;
} }
.c2 { .c4 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; outline: 1px solid #22222212;
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
} }
.c10 { .c12 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -329,14 +373,14 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -329,14 +373,14 @@ exports[`<Dialog /> renders different button types 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c13 { .c15 {
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
.c15 { .c17 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -347,7 +391,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -347,7 +391,7 @@ exports[`<Dialog /> renders different button types 1`] = `
text-align: center; text-align: center;
} }
.c18 { .c20 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -360,16 +404,40 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -360,16 +404,40 @@ exports[`<Dialog /> renders different button types 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c3 { .c5 {
padding: 4px 0px; 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 <body
style="pointer-events: none;" data-scroll-locked="1"
> >
<div <div
aria-hidden="true" aria-hidden="true"
data-aria-hidden="true"
> >
<span <span
class="" class=""
...@@ -381,70 +449,53 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -381,70 +449,53 @@ exports[`<Dialog /> renders different button types 1`] = `
<span <span
class=" t_light _dsp_contents is_Theme" class=" t_light _dsp_contents is_Theme"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span> </span>
</span> </span>
</span> </span>
</span>
</div> </div>
<reach-portal>
<div <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" data-focus-guard="true"
> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
<span tabindex="0"
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;"
/> />
<div <div
class="_dsp_contents" data-focus-lock-disabled="false"
data-remove-scroll-container="true"
> >
<div>
<div <div
style="display: contents; pointer-events: auto;" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-describedby="description-:rf:" aria-label="dialog"
aria-labelledby="title-:rf:" aria-modal="true"
class="css-view-175oi2r" class="c1"
id="content-:rf:" data-reach-dialog-content=""
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);" role="dialog"
tabindex="-1" tabindex="-1"
> >
<div <div
class="c0 c1 c2" class="c2 c3 c4"
> >
<div <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 <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" 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 <a
class="c4 c5" class="c6 c7"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c6 c7" class="c8 c9"
> >
<svg <svg
fill="none" fill="none"
...@@ -462,7 +513,7 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -462,7 +513,7 @@ exports[`<Dialog /> renders different button types 1`] = `
</div> </div>
</a> </a>
<svg <svg
class="c8" class="c10"
data-testid="Dialog-closeButton" data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="24"
...@@ -490,30 +541,30 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -490,30 +541,30 @@ exports[`<Dialog /> renders different button types 1`] = `
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c2 c3"
> >
<div <div
class="c9 c1" class="c11 c3"
> >
<div <div
class="c10" class="c12"
> >
<div> <div>
Mock Icon Mock Icon
</div> </div>
</div> </div>
<div <div
class="c11 c1" class="c13 c3"
> >
<div <div
class="c12 c13 css-4kpdx7" class="c14 c15 css-4kpdx7"
> >
<div> <div>
Mock Title Mock Title
</div> </div>
</div> </div>
<div <div
class="c14 c15 css-1urox24" class="c16 c17 css-1urox24"
> >
<div> <div>
Mock Description Mock Description
...@@ -525,24 +576,24 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -525,24 +576,24 @@ exports[`<Dialog /> renders different button types 1`] = `
</div> </div>
</div> </div>
<div <div
class="c6 c16" class="c8 c18"
> >
<button <button
class="c17 c18" class="c19 c20"
disabled="" disabled=""
> >
<div <div
class="c19 c20" class="c21 c22"
/> />
<div> <div>
Left Button Left Button
</div> </div>
</button> </button>
<button <button
class="c21 c18" class="c23 c20"
> >
<div <div
class="c19 c20" class="c21 c22"
/> />
<div> <div>
Right Button Right Button
...@@ -555,20 +606,23 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -555,20 +606,23 @@ exports[`<Dialog /> renders different button types 1`] = `
</div> </div>
</div> </div>
</div> </div>
</span> <div
</span> data-focus-guard="true"
</div> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </body>
`; `;
exports[`<Dialog /> renders the Dialog component correctly 1`] = ` exports[`<Dialog /> renders the Dialog component correctly 1`] = `
.c6 { .c8 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c7 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -586,7 +640,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -586,7 +640,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 4px; gap: 4px;
} }
.c16 { .c18 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -604,7 +658,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -604,7 +658,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 12px; gap: 12px;
} }
.c12 { .c14 {
color: #222222; color: #222222;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -612,7 +666,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -612,7 +666,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c14 { .c16 {
color: #7D7D7D; color: #7D7D7D;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -620,7 +674,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -620,7 +674,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c8 { .c10 {
color: #222222; color: #222222;
cursor: pointer; cursor: pointer;
-webkit-text-decoration: none; -webkit-text-decoration: none;
...@@ -630,15 +684,15 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -630,15 +684,15 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
transition-duration: 125ms; transition-duration: 125ms;
} }
.c8:hover { .c10:hover {
opacity: 0.6; opacity: 0.6;
} }
.c8:active { .c10:active {
opacity: 0.4; opacity: 0.4;
} }
.c4 { .c6 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -649,15 +703,15 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -649,15 +703,15 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
font-weight: 500; font-weight: 500;
} }
.c4:hover { .c6:hover {
opacity: 0.6; opacity: 0.6;
} }
.c4:active { .c6:active {
opacity: 0.4; opacity: 0.4;
} }
.c20 { .c22 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -671,7 +725,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -671,7 +725,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
width: 100%; width: 100%;
} }
.c17 { .c19 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -706,30 +760,73 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -706,30 +760,73 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
user-select: none; user-select: none;
} }
.c17:active .c19 { .c19:active .c21 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c17:focus .c19 { .c19:focus .c21 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c17:hover .c19 { .c19:hover .c21 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c17:disabled { .c19:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c17:disabled:active .c19, .c19:disabled:active .c21,
.c17:disabled:focus .c19, .c19:disabled:focus .c21,
.c17:disabled:hover .c19 { .c19:disabled:hover .c21 {
background-color: transparent; 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: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
...@@ -743,17 +840,17 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -743,17 +840,17 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
stroke: none; stroke: none;
} }
.c5:hover { .c7:hover {
background: #22222212; background: #22222212;
color: #222222; color: #222222;
opacity: unset; opacity: unset;
} }
.c5:hover path { .c7:hover path {
fill: #222222; fill: #222222;
} }
.c0 { .c2 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -768,7 +865,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -768,7 +865,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 24px; gap: 24px;
} }
.c9 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -783,7 +880,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -783,7 +880,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 16px; gap: 16px;
} }
.c11 { .c13 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -798,7 +895,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -798,7 +895,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
gap: 8px; gap: 8px;
} }
.c1 { .c3 {
width: 100%; width: 100%;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -806,14 +903,15 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -806,14 +903,15 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
align-items: center; align-items: center;
} }
.c2 { .c4 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; outline: 1px solid #22222212;
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
} }
.c10 { .c12 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -832,14 +930,14 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -832,14 +930,14 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c13 { .c15 {
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
.c15 { .c17 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -850,7 +948,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -850,7 +948,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
text-align: center; text-align: center;
} }
.c18 { .c20 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -863,16 +961,40 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -863,16 +961,40 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c3 { .c5 {
padding: 4px 0px; 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 <body
style="pointer-events: none;" data-scroll-locked="1"
> >
<div <div
aria-hidden="true" aria-hidden="true"
data-aria-hidden="true"
> >
<span <span
class="" class=""
...@@ -884,70 +1006,53 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -884,70 +1006,53 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
<span <span
class=" t_light _dsp_contents is_Theme" class=" t_light _dsp_contents is_Theme"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span> </span>
</span> </span>
</span> </span>
</span>
</div> </div>
<reach-portal>
<div <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" data-focus-guard="true"
> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
<span tabindex="0"
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;"
/> />
<div <div
class="_dsp_contents" data-focus-lock-disabled="false"
data-remove-scroll-container="true"
> >
<div>
<div <div
style="display: contents; pointer-events: auto;" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-describedby="description-:r0:" aria-label="dialog"
aria-labelledby="title-:r0:" aria-modal="true"
class="css-view-175oi2r" class="c1"
id="content-:r0:" data-reach-dialog-content=""
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);" role="dialog"
tabindex="-1" tabindex="-1"
> >
<div <div
class="c0 c1 c2" class="c2 c3 c4"
> >
<div <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 <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" 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 <a
class="c4 c5" class="c6 c7"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c6 c7" class="c8 c9"
> >
<svg <svg
fill="none" fill="none"
...@@ -965,7 +1070,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -965,7 +1070,7 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div> </div>
</a> </a>
<svg <svg
class="c8" class="c10"
data-testid="Dialog-closeButton" data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="24"
...@@ -993,30 +1098,30 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -993,30 +1098,30 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c2 c3"
> >
<div <div
class="c9 c1" class="c11 c3"
> >
<div <div
class="c10" class="c12"
> >
<div> <div>
Mock Icon Mock Icon
</div> </div>
</div> </div>
<div <div
class="c11 c1" class="c13 c3"
> >
<div <div
class="c12 c13 css-4kpdx7" class="c14 c15 css-4kpdx7"
> >
<div> <div>
Mock Title Mock Title
</div> </div>
</div> </div>
<div <div
class="c14 c15 css-1urox24" class="c16 c17 css-1urox24"
> >
<div> <div>
Mock Description Mock Description
...@@ -1028,23 +1133,23 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -1028,23 +1133,23 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="c6 c16" class="c8 c18"
> >
<button <button
class="c17 c18" class="c19 c20"
> >
<div <div
class="c19 c20" class="c21 c22"
/> />
<div> <div>
Left Button Left Button
</div> </div>
</button> </button>
<button <button
class="c17 c18" class="c19 c20"
> >
<div <div
class="c19 c20" class="c21 c22"
/> />
<div> <div>
Right Button Right Button
...@@ -1057,8 +1162,11 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -1057,8 +1162,11 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
</span> <div
</span> data-focus-guard="true"
</div> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </body>
`; `;
apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
View file @ c2fcabde
import { SmallButtonPrimary } from 'components/Button/buttons' import { SmallButtonPrimary } from 'components/Button/buttons'
import Modal from 'components/Modal'
import Column from 'components/deprecated/Column' import Column from 'components/deprecated/Column'
import Row from 'components/deprecated/Row' import Row from 'components/deprecated/Row'
import { useQuickRouteChains } from 'featureFlags/dynamicConfig/quickRouteChains' import { useQuickRouteChains } from 'featureFlags/dynamicConfig/quickRouteChains'
...@@ -8,7 +9,6 @@ import { X } from 'react-feather' ...@@ -8,7 +9,6 @@ import { X } from 'react-feather'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks' import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer' import { ApplicationModal } from 'state/application/reducer'
import { BREAKPOINTS } from 'theme' import { BREAKPOINTS } from 'theme'
import { AdaptiveWebModal } from 'ui/src'
import { SUPPORTED_CHAIN_IDS } from 'uniswap/src/features/chains/types' import { SUPPORTED_CHAIN_IDS } from 'uniswap/src/features/chains/types'
import { import {
DynamicConfigKeys, DynamicConfigKeys,
...@@ -203,7 +203,7 @@ export default function FeatureFlagModal() { ...@@ -203,7 +203,7 @@ export default function FeatureFlagModal() {
const closeModal = useCloseModal() const closeModal = useCloseModal()
return ( return (
<AdaptiveWebModal isOpen={open} onClose={closeModal} p={0}> <Modal isOpen={open} onDismiss={closeModal}>
<Wrapper> <Wrapper>
<Header> <Header>
<Row width="100%" justify="space-between"> <Row width="100%" justify="space-between">
...@@ -291,6 +291,6 @@ export default function FeatureFlagModal() { ...@@ -291,6 +291,6 @@ export default function FeatureFlagModal() {
</FlagsColumn> </FlagsColumn>
<SaveButton onClick={() => window.location.reload()}>Reload</SaveButton> <SaveButton onClick={() => window.location.reload()}>Reload</SaveButton>
</Wrapper> </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 { InterfaceModalName } from '@uniswap/analytics-events'
import { useAccountDrawer } from 'components/AccountDrawer/MiniPortfolio/hooks' import { useAccountDrawer } from 'components/AccountDrawer/MiniPortfolio/hooks'
import Modal from 'components/Modal'
import { useIsAccountCTAExperimentControl } from 'components/NavBar/accountCTAsExperimentUtils' import { useIsAccountCTAExperimentControl } from 'components/NavBar/accountCTAsExperimentUtils'
import { GetStarted } from 'components/NavBar/DownloadApp/Modal/GetStarted' import { GetStarted } from 'components/NavBar/DownloadApp/Modal/GetStarted'
import { GetTheApp } from 'components/NavBar/DownloadApp/Modal/GetTheApp' import { GetTheApp } from 'components/NavBar/DownloadApp/Modal/GetTheApp'
import styled from 'lib/styled-components'
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import { ArrowLeft, X } from 'react-feather' import { ArrowLeft, X } from 'react-feather'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks' import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer' import { ApplicationModal } from 'state/application/reducer'
import { ClickableTamaguiStyle } from 'theme/components' 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 { iconSizes, zIndices } from 'ui/src/theme'
import Trace from 'uniswap/src/features/telemetry/Trace' import Trace from 'uniswap/src/features/telemetry/Trace'
const StyledModal = styled(Modal)`
display: block;
`
const HeaderActionIcon = { const HeaderActionIcon = {
margin: 4, margin: 4,
color: '$neutral1', color: '$neutral1',
...@@ -61,7 +67,13 @@ export function GetTheAppModal() { ...@@ -61,7 +67,13 @@ export function GetTheAppModal() {
return ( return (
<Trace modal={InterfaceModalName.GETTING_STARTED_MODAL}> <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 <Flex
row row
position="absolute" position="absolute"
...@@ -100,7 +112,7 @@ export function GetTheAppModal() { ...@@ -100,7 +112,7 @@ export function GetTheAppModal() {
<GetTheApp /> <GetTheApp />
</AnimateTransition> </AnimateTransition>
</Flex> </Flex>
</AdaptiveWebModal> </StyledModal>
</Trace> </Trace>
) )
} }
apps/web/src/components/PrivacyChoices.tsx
View file @ c2fcabde
import { InterfaceElementName } from '@uniswap/analytics-events' import { InterfaceElementName } from '@uniswap/analytics-events'
import Modal from 'components/Modal'
import { useAtom } from 'jotai' import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils' import { atomWithStorage } from 'jotai/utils'
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks' 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 { Lock } from 'ui/src/components/icons/Lock'
import { X } from 'ui/src/components/icons/X' import { X } from 'ui/src/components/icons/X'
import { uniswapUrls } from 'uniswap/src/constants/urls' import { uniswapUrls } from 'uniswap/src/constants/urls'
...@@ -33,7 +34,7 @@ export function PrivacyChoicesModal() { ...@@ -33,7 +34,7 @@ export function PrivacyChoicesModal() {
}, [isOptOutChecked, closeModal, setPrivacySharingOptOut]) }, [isOptOutChecked, closeModal, setPrivacySharingOptOut])
return ( return (
<AdaptiveWebModal isOpen={open} onClose={closeAndResetModal}> <Modal isOpen={open} onDismiss={closeAndResetModal}>
<Flex fill> <Flex fill>
<Flex py="$spacing20" px="$spacing24" gap="$spacing24"> <Flex py="$spacing20" px="$spacing24" gap="$spacing24">
<Flex row justifyContent="flex-end"> <Flex row justifyContent="flex-end">
...@@ -90,6 +91,6 @@ export function PrivacyChoicesModal() { ...@@ -90,6 +91,6 @@ export function PrivacyChoicesModal() {
</Button> </Button>
</Flex> </Flex>
</Flex> </Flex>
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/PrivacyPolicy.tsx
View file @ c2fcabde
import { SharedEventName } from '@uniswap/analytics-events' import { SharedEventName } from '@uniswap/analytics-events'
import Card, { DarkGrayCard } from 'components/Card/cards' import Card, { DarkGrayCard } from 'components/Card/cards'
import Modal from 'components/Modal'
import { AutoColumn } from 'components/deprecated/Column' import { AutoColumn } from 'components/deprecated/Column'
import Row, { AutoRow, RowBetween } from 'components/deprecated/Row' import Row, { AutoRow, RowBetween } from 'components/deprecated/Row'
import styled from 'lib/styled-components' import styled from 'lib/styled-components'
...@@ -8,7 +9,6 @@ import { ArrowDown, Info, X } from 'react-feather' ...@@ -8,7 +9,6 @@ import { ArrowDown, Info, X } from 'react-feather'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks' import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer' import { ApplicationModal } from 'state/application/reducer'
import { ExternalLink, ThemedText } from 'theme/components' import { ExternalLink, ThemedText } from 'theme/components'
import { AdaptiveWebModal } from 'ui/src'
import { ModalName } from 'uniswap/src/features/telemetry/constants' import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send' import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { Trans } from 'uniswap/src/i18n' import { Trans } from 'uniswap/src/i18n'
...@@ -89,7 +89,7 @@ export function PrivacyPolicyModal() { ...@@ -89,7 +89,7 @@ export function PrivacyPolicyModal() {
}, [open]) }, [open])
return ( return (
<AdaptiveWebModal isOpen={open} onClose={() => closeModal()} p={0}> <Modal isOpen={open} onDismiss={() => closeModal()}>
<AutoColumn gap="md" ref={node as any}> <AutoColumn gap="md" ref={node as any}>
<RowBetween padding="1rem 1rem 0.5rem 1rem"> <RowBetween padding="1rem 1rem 0.5rem 1rem">
<ThemedText.DeprecatedMediumHeader> <ThemedText.DeprecatedMediumHeader>
...@@ -101,7 +101,7 @@ export function PrivacyPolicyModal() { ...@@ -101,7 +101,7 @@ export function PrivacyPolicyModal() {
</RowBetween> </RowBetween>
<PrivacyPolicy /> <PrivacyPolicy />
</AutoColumn> </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 { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks' import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import TokenWarningModal from 'uniswap/src/features/tokens/TokenWarningModal' import TokenWarningModal from 'uniswap/src/features/tokens/TokenWarningModal'
...@@ -47,7 +47,7 @@ export default function TokenSafetyModal({ ...@@ -47,7 +47,7 @@ export default function TokenSafetyModal({
onToken1BlockAcknowledged={onToken1BlockAcknowledged} onToken1BlockAcknowledged={onToken1BlockAcknowledged}
/> />
) : ( ) : (
<AdaptiveWebModal isOpen={isOpen} onClose={onReject ?? closeModalOnly} maxHeight={400} p={0}> <Modal isOpen={isOpen} onDismiss={onReject ?? closeModalOnly} maxHeight={400}>
<TokenSafety <TokenSafety
token0={token0} token0={token0}
token1={token1} token1={token1}
...@@ -60,6 +60,6 @@ export default function TokenSafetyModal({ ...@@ -60,6 +60,6 @@ export default function TokenSafetyModal({
closeModalOnly={onReject ?? closeModalOnly} closeModalOnly={onReject ?? closeModalOnly}
showCancel={showCancel} showCancel={showCancel}
/> />
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/TopLevelModals/LaunchModal.tsx
View file @ c2fcabde
// Remove the following line when LaunchModal is used again: // Remove the following line when LaunchModal is used again:
/* eslint-disable import/no-unused-modules */ /* eslint-disable import/no-unused-modules */
import { InterfaceElementName } from '@uniswap/analytics-events' import { InterfaceElementName } from '@uniswap/analytics-events'
import Modal from 'components/Modal'
import { import {
LAUNCH_MODAL_DESKTOP_MAX_HEIGHT, LAUNCH_MODAL_DESKTOP_MAX_HEIGHT,
LAUNCH_MODAL_DESKTOP_MAX_WIDTH, LAUNCH_MODAL_DESKTOP_MAX_WIDTH,
...@@ -11,7 +12,7 @@ import { useIsLandingPage } from 'hooks/useIsLandingPage' ...@@ -11,7 +12,7 @@ import { useIsLandingPage } from 'hooks/useIsLandingPage'
import { useAtom } from 'jotai' import { useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils' import { atomWithStorage } from 'jotai/utils'
import { useMemo } from 'react' 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 { X } from 'ui/src/components/icons/X'
import { iconSizes } from 'ui/src/theme' import { iconSizes } from 'ui/src/theme'
import Trace from 'uniswap/src/features/telemetry/Trace' import Trace from 'uniswap/src/features/telemetry/Trace'
...@@ -46,12 +47,12 @@ export function LaunchModal({ ...@@ -46,12 +47,12 @@ export function LaunchModal({
return ( return (
<Trace modal={interfaceModalName}> <Trace modal={interfaceModalName}>
<AdaptiveWebModal <Modal
maxWidth={media.md ? undefined : LAUNCH_MODAL_DESKTOP_MAX_WIDTH} maxWidth={media.md ? undefined : LAUNCH_MODAL_DESKTOP_MAX_WIDTH}
height={media.md ? LAUNCH_MODAL_MOBILE_MAX_HEIGHT : LAUNCH_MODAL_DESKTOP_MAX_HEIGHT} height={media.md ? LAUNCH_MODAL_MOBILE_MAX_HEIGHT : LAUNCH_MODAL_DESKTOP_MAX_HEIGHT}
isOpen={showModal && !isOnLandingPage} isOpen={showModal && !isOnLandingPage}
onClose={() => setShowModal(false)} onDismiss={() => setShowModal(false)}
p={0} hideBorder
> >
<Flex flexDirection={media.md ? 'column' : 'row'} fill> <Flex flexDirection={media.md ? 'column' : 'row'} fill>
<Flex <Flex
...@@ -101,7 +102,7 @@ export function LaunchModal({ ...@@ -101,7 +102,7 @@ export function LaunchModal({
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Flex>
</AdaptiveWebModal> </Modal>
</Trace> </Trace>
) )
} }
apps/web/src/components/TopLevelModals/UkDisclaimerModal.tsx
View file @ c2fcabde
import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons' import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button/buttons'
import Column from 'components/deprecated/Column' import Column from 'components/deprecated/Column'
import Modal from 'components/Modal'
import { bannerText } from 'components/TopLevelBanners/UkBanner' import { bannerText } from 'components/TopLevelBanners/UkBanner'
import styled from 'lib/styled-components' import styled from 'lib/styled-components'
import { X } from 'react-feather' import { X } from 'react-feather'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks' import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer' import { ApplicationModal } from 'state/application/reducer'
import { ButtonText, ThemedText } from 'theme/components' import { ButtonText, ThemedText } from 'theme/components'
import { AdaptiveWebModal } from 'ui/src'
import { Trans } from 'uniswap/src/i18n' import { Trans } from 'uniswap/src/i18n'
const Wrapper = styled(Column)` const Wrapper = styled(Column)`
...@@ -37,7 +37,7 @@ export function UkDisclaimerModal() { ...@@ -37,7 +37,7 @@ export function UkDisclaimerModal() {
const closeModal = useCloseModal() const closeModal = useCloseModal()
return ( return (
<AdaptiveWebModal isOpen={isOpen} onClose={closeModal} p={0}> <Modal isOpen={isOpen} onDismiss={closeModal}>
<Wrapper gap="md"> <Wrapper gap="md">
<CloseIconWrapper onClick={() => closeModal()}> <CloseIconWrapper onClick={() => closeModal()}>
<X size={24} /> <X size={24} />
...@@ -56,6 +56,6 @@ export function UkDisclaimerModal() { ...@@ -56,6 +56,6 @@ export function UkDisclaimerModal() {
</StyledThemeButton> </StyledThemeButton>
</ButtonContainer> </ButtonContainer>
</Wrapper> </Wrapper>
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/TransactionConfirmationModal/index.tsx
View file @ c2fcabde
...@@ -5,6 +5,7 @@ import { TransactionSummary } from 'components/AccountDetails/TransactionSummary ...@@ -5,6 +5,7 @@ import { TransactionSummary } from 'components/AccountDetails/TransactionSummary
import Badge from 'components/Badge/Badge' import Badge from 'components/Badge/Badge'
import { ButtonLight, ButtonPrimary } from 'components/Button/buttons' import { ButtonLight, ButtonPrimary } from 'components/Button/buttons'
import { ChainLogo } from 'components/Logo/ChainLogo' import { ChainLogo } from 'components/Logo/ChainLogo'
import Modal from 'components/Modal'
import AnimatedConfirmation from 'components/TransactionConfirmationModal/AnimatedConfirmation' import AnimatedConfirmation from 'components/TransactionConfirmationModal/AnimatedConfirmation'
import { AutoColumn, ColumnCenter } from 'components/deprecated/Column' import { AutoColumn, ColumnCenter } from 'components/deprecated/Column'
import Row, { RowBetween, RowFixed } from 'components/deprecated/Row' import Row, { RowBetween, RowFixed } from 'components/deprecated/Row'
...@@ -16,7 +17,6 @@ import { AlertCircle, ArrowUpCircle, CheckCircle } from 'react-feather' ...@@ -16,7 +17,6 @@ import { AlertCircle, ArrowUpCircle, CheckCircle } from 'react-feather'
import { useTransaction } from 'state/transactions/hooks' import { useTransaction } from 'state/transactions/hooks'
import { isConfirmedTx } from 'state/transactions/utils' import { isConfirmedTx } from 'state/transactions/utils'
import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText } from 'theme/components' 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 { TransactionStatus } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { getChainInfo } from 'uniswap/src/features/chains/chainInfo' import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
import { useIsSupportedChainId } from 'uniswap/src/features/chains/hooks/useSupportedChainId' import { useIsSupportedChainId } from 'uniswap/src/features/chains/hooks/useSupportedChainId'
...@@ -340,7 +340,7 @@ export default function TransactionConfirmationModal({ ...@@ -340,7 +340,7 @@ export default function TransactionConfirmationModal({
// confirmation screen // confirmation screen
return ( return (
<AdaptiveWebModal isOpen={isOpen} onClose={onDismiss} maxHeight="90vh" p={0}> <Modal isOpen={isOpen} $scrollOverlay={true} onDismiss={onDismiss} maxHeight="90vh">
{isL2ChainId(chainId) && (hash || attemptingTxn) ? ( {isL2ChainId(chainId) && (hash || attemptingTxn) ? (
<L2Content chainId={chainId} hash={hash} onDismiss={onDismiss} pendingText={pendingText} /> <L2Content chainId={chainId} hash={hash} onDismiss={onDismiss} pendingText={pendingText} />
) : attemptingTxn ? ( ) : attemptingTxn ? (
...@@ -355,6 +355,6 @@ export default function TransactionConfirmationModal({ ...@@ -355,6 +355,6 @@ export default function TransactionConfirmationModal({
) : ( ) : (
reviewContent() reviewContent()
)} )}
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/WalletModal/ConnectionErrorView.tsx
View file @ c2fcabde
import { ButtonEmpty, ButtonPrimary } from 'components/Button/buttons' import { ButtonEmpty, ButtonPrimary } from 'components/Button/buttons'
import Modal from 'components/Modal'
import { useConnect } from 'hooks/useConnect' import { useConnect } from 'hooks/useConnect'
import styled from 'lib/styled-components' import styled from 'lib/styled-components'
import { useCallback } from 'react' import { useCallback } from 'react'
import { AlertTriangle } from 'react-feather' import { AlertTriangle } from 'react-feather'
import { ThemedText } from 'theme/components' import { ThemedText } from 'theme/components'
import { flexColumnNoWrap } from 'theme/styles' import { flexColumnNoWrap } from 'theme/styles'
import { AdaptiveWebModal } from 'ui/src'
import { Trans } from 'uniswap/src/i18n' import { Trans } from 'uniswap/src/i18n'
const Wrapper = styled.div` const Wrapper = styled.div`
...@@ -39,7 +39,7 @@ export default function ConnectionErrorView() { ...@@ -39,7 +39,7 @@ export default function ConnectionErrorView() {
}, [connection]) }, [connection])
return ( return (
<AdaptiveWebModal isOpen={Boolean(connection?.error)} onClose={connection?.reset} p={0}> <Modal isOpen={Boolean(connection?.error)} onDismiss={connection?.reset}>
<Wrapper> <Wrapper>
<AlertTriangleIcon /> <AlertTriangleIcon />
<ThemedText.HeadlineSmall marginBottom="8px"> <ThemedText.HeadlineSmall marginBottom="8px">
...@@ -57,6 +57,6 @@ export default function ConnectionErrorView() { ...@@ -57,6 +57,6 @@ export default function ConnectionErrorView() {
</ThemedText.BodySecondary> </ThemedText.BodySecondary>
</ButtonEmpty> </ButtonEmpty>
</Wrapper> </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' ...@@ -4,6 +4,7 @@ import Circle from 'assets/images/blue-loader.svg'
import tokenLogo from 'assets/images/token-logo.png' import tokenLogo from 'assets/images/token-logo.png'
import AddressInputPanel from 'components/AddressInputPanel' import AddressInputPanel from 'components/AddressInputPanel'
import { ButtonPrimary } from 'components/Button/buttons' import { ButtonPrimary } from 'components/Button/buttons'
import Modal from 'components/Modal'
import { AutoColumn, ColumnCenter } from 'components/deprecated/Column' import { AutoColumn, ColumnCenter } from 'components/deprecated/Column'
import { RowBetween } from 'components/deprecated/Row' import { RowBetween } from 'components/deprecated/Row'
import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from 'components/earn/styled' import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from 'components/earn/styled'
...@@ -14,7 +15,7 @@ import { useState } from 'react' ...@@ -14,7 +15,7 @@ import { useState } from 'react'
import { useClaimCallback, useUserHasAvailableClaim, useUserUnclaimedAmount } from 'state/claim/hooks' import { useClaimCallback, useUserHasAvailableClaim, useUserUnclaimedAmount } from 'state/claim/hooks'
import { useIsTransactionPending } from 'state/transactions/hooks' import { useIsTransactionPending } from 'state/transactions/hooks'
import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from 'theme/components' 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 { ExplorerDataType, getExplorerLink } from 'uniswap/src/utils/linking'
import { shortenAddress } from 'utilities/src/addresses' import { shortenAddress } from 'utilities/src/addresses'
import { logger } from 'utilities/src/logger/logger' import { logger } from 'utilities/src/logger/logger'
...@@ -97,7 +98,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole ...@@ -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 // 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 // and ran into difficulties with testing it
return ( return (
<AdaptiveWebModal isOpen={isOpen} onClose={wrappedOnDismiss} maxHeight="90vh" p={0}> <Modal isOpen={isOpen} onDismiss={wrappedOnDismiss} maxHeight="90vh">
{!attempting && ( {!attempting && (
<ContentWrapper gap="lg"> <ContentWrapper gap="lg">
<ModalUpper> <ModalUpper>
...@@ -193,6 +194,6 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole ...@@ -193,6 +194,6 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
</AutoColumn> </AutoColumn>
</ConfirmOrLoadingWrapper> </ConfirmOrLoadingWrapper>
)} )}
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/components/swap/PriceImpactModal.tsx
View file @ c2fcabde
import { Percent } from '@uniswap/sdk-core' import { Percent } from '@uniswap/sdk-core'
import Modal from 'components/Modal'
import { GetHelpHeader } from 'components/Modal/GetHelpHeader' 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 { AlertTriangleFilled } from 'ui/src/components/icons/AlertTriangleFilled'
import { Trans } from 'uniswap/src/i18n' import { Trans } from 'uniswap/src/i18n'
import { useFormatter } from 'utils/formatNumbers' import { useFormatter } from 'utils/formatNumbers'
...@@ -16,7 +17,7 @@ export default function PriceImpactModal({ priceImpact, onDismiss, onContinue }: ...@@ -16,7 +17,7 @@ export default function PriceImpactModal({ priceImpact, onDismiss, onContinue }:
const impact = `${formatPercent(priceImpact)}` const impact = `${formatPercent(priceImpact)}`
return ( return (
<AdaptiveWebModal isOpen onClose={onDismiss} p={0}> <Modal isOpen onDismiss={onDismiss}>
<Flex width="100%" px="$spacing24" py="$spacing16" rowGap="$spacing24" backgroundColor="$surface1"> <Flex width="100%" px="$spacing24" py="$spacing16" rowGap="$spacing24" backgroundColor="$surface1">
<GetHelpHeader closeModal={onDismiss} /> <GetHelpHeader closeModal={onDismiss} />
<Flex rowGap="$spacing16" alignItems="center"> <Flex rowGap="$spacing16" alignItems="center">
...@@ -78,6 +79,6 @@ export default function PriceImpactModal({ priceImpact, onDismiss, onContinue }: ...@@ -78,6 +79,6 @@ export default function PriceImpactModal({ priceImpact, onDismiss, onContinue }:
</Button> </Button>
</Flex> </Flex>
</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 ...@@ -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 { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { TestID } from 'uniswap/src/test/fixtures/testIDs' import { TestID } from 'uniswap/src/test/fixtures/testIDs'
import { getExplorerLink } from 'uniswap/src/utils/linking' import { getExplorerLink } from 'uniswap/src/utils/linking'
import { shortenAddress } from 'utilities/src/addresses'
const unsupportedTokenAddress = '0x4e83b6287588a96321B2661c5E041845fF7814af' const unsupportedTokenAddress = '0x4e83b6287588a96321B2661c5E041845fF7814af'
const unsupportedTokenSymbol = 'ALTDOM-MAR2021' const unsupportedTokenSymbol = 'ALTDOM-MAR2021'
...@@ -45,7 +44,7 @@ describe('UnsupportedCurrencyFooter.tsx with unsupported tokens', () => { ...@@ -45,7 +44,7 @@ describe('UnsupportedCurrencyFooter.tsx with unsupported tokens', () => {
expect(screen.getAllByTestId('unsupported-token-card').length).toBe(1) expect(screen.getAllByTestId('unsupported-token-card').length).toBe(1)
const unsupportedCard = screen.getByTestId('unsupported-token-card') const unsupportedCard = screen.getByTestId('unsupported-token-card')
expect(within(unsupportedCard).getByText(unsupportedTokenSymbol)).toBeInTheDocument() expect(within(unsupportedCard).getByText(unsupportedTokenSymbol)).toBeInTheDocument()
expect(within(unsupportedCard).getByText(shortenAddress(unsupportedTokenAddress)).closest('a')).toHaveAttribute( expect(within(unsupportedCard).getByText(unsupportedTokenAddress).closest('a')).toHaveAttribute(
'href', 'href',
unsupportedTokenExplorerLink, unsupportedTokenExplorerLink,
) )
......
apps/web/src/components/swap/UnsupportedCurrencyFooter.tsx
View file @ c2fcabde
...@@ -2,6 +2,7 @@ import { Currency, Token } from '@uniswap/sdk-core' ...@@ -2,6 +2,7 @@ import { Currency, Token } from '@uniswap/sdk-core'
import { ButtonEmpty } from 'components/Button/buttons' import { ButtonEmpty } from 'components/Button/buttons'
import Card, { OutlineCard } from 'components/Card/cards' import Card, { OutlineCard } from 'components/Card/cards'
import CurrencyLogo from 'components/Logo/CurrencyLogo' import CurrencyLogo from 'components/Logo/CurrencyLogo'
import Modal from 'components/Modal'
import { AutoColumn } from 'components/deprecated/Column' import { AutoColumn } from 'components/deprecated/Column'
import { AutoRow, RowBetween } from 'components/deprecated/Row' import { AutoRow, RowBetween } from 'components/deprecated/Row'
import { useCurrencyInfo } from 'hooks/Tokens' import { useCurrencyInfo } from 'hooks/Tokens'
...@@ -10,12 +11,11 @@ import styled from 'lib/styled-components' ...@@ -10,12 +11,11 @@ import styled from 'lib/styled-components'
import { useState } from 'react' import { useState } from 'react'
import { CloseIcon, ExternalLink, ThemedText } from 'theme/components' import { CloseIcon, ExternalLink, ThemedText } from 'theme/components'
import { Z_INDEX } from 'theme/zIndex' 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 { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { UniverseChainId } from 'uniswap/src/features/chains/types' import { UniverseChainId } from 'uniswap/src/features/chains/types'
import { Trans } from 'uniswap/src/i18n' import { Trans } from 'uniswap/src/i18n'
import { ExplorerDataType, getExplorerLink } from 'uniswap/src/utils/linking' import { ExplorerDataType, getExplorerLink } from 'uniswap/src/utils/linking'
import { shortenAddress } from 'utilities/src/addresses'
const DetailsFooter = styled.div<{ show: boolean }>` const DetailsFooter = styled.div<{ show: boolean }>`
padding-top: calc(16px + 2rem); padding-top: calc(16px + 2rem);
...@@ -68,7 +68,7 @@ export default function UnsupportedCurrencyFooter({ ...@@ -68,7 +68,7 @@ export default function UnsupportedCurrencyFooter({
return ( return (
<DetailsFooter show={show}> <DetailsFooter show={show}>
<AdaptiveWebModal isOpen={showDetails} onClose={() => setShowDetails(false)} p={0}> <Modal isOpen={showDetails} onDismiss={() => setShowDetails(false)}>
<Card padding="2rem"> <Card padding="2rem">
<AutoColumn gap="lg"> <AutoColumn gap="lg">
<RowBetween> <RowBetween>
...@@ -89,7 +89,7 @@ export default function UnsupportedCurrencyFooter({ ...@@ -89,7 +89,7 @@ export default function UnsupportedCurrencyFooter({
</AutoColumn> </AutoColumn>
</AutoColumn> </AutoColumn>
</Card> </Card>
</AdaptiveWebModal> </Modal>
<StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)} data-testid="read-more-button"> <StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)} data-testid="read-more-button">
<Text color="$accent1"> <Text color="$accent1">
<Trans i18nKey="swap.unsupportedAssets.readMore" /> <Trans i18nKey="swap.unsupportedAssets.readMore" />
...@@ -115,7 +115,7 @@ function UnsupportedTokenCard({ token, chainId }: { token?: Token; chainId?: Uni ...@@ -115,7 +115,7 @@ function UnsupportedTokenCard({ token, chainId }: { token?: Token; chainId?: Uni
</AutoRow> </AutoRow>
{chainId && ( {chainId && (
<ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}> <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
<AddressText>{shortenAddress(token.address)}</AddressText> <AddressText>{token.address}</AddressText>
</ExternalLink> </ExternalLink>
)} )}
</AutoColumn> </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`] = ` ...@@ -160,16 +160,9 @@ exports[`UnsupportedCurrencyFooter.tsx with unsupported tokens renders 1`] = `
<div <div
class="c0" class="c0"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span>
<button <button
class="c1 c2 c3 c4" class="c1 c2 c3 c4"
data-testid="read-more-button" 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 ...@@ -3,6 +3,7 @@ import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioL
import { ButtonPrimary } from 'components/Button/buttons' import { ButtonPrimary } from 'components/Button/buttons'
import Identicon from 'components/Identicon' import Identicon from 'components/Identicon'
import { ChainLogo } from 'components/Logo/ChainLogo' import { ChainLogo } from 'components/Logo/ChainLogo'
import Modal from 'components/Modal'
import { GetHelpHeader } from 'components/Modal/GetHelpHeader' import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
import Column, { ColumnCenter } from 'components/deprecated/Column' import Column, { ColumnCenter } from 'components/deprecated/Column'
import Row from 'components/deprecated/Row' import Row from 'components/deprecated/Row'
...@@ -12,7 +13,6 @@ import { useMultichainContext } from 'state/multichain/useMultichainContext' ...@@ -12,7 +13,6 @@ import { useMultichainContext } from 'state/multichain/useMultichainContext'
import { useSendContext } from 'state/send/SendContext' import { useSendContext } from 'state/send/SendContext'
import { Separator, ThemedText } from 'theme/components' import { Separator, ThemedText } from 'theme/components'
import { capitalize } from 'tsafe' import { capitalize } from 'tsafe'
import { AdaptiveWebModal } from 'ui/src'
import { Unitag } from 'ui/src/components/icons/Unitag' import { Unitag } from 'ui/src/components/icons/Unitag'
import { UniverseChainId } from 'uniswap/src/features/chains/types' import { UniverseChainId } from 'uniswap/src/features/chains/types'
import Trace from 'uniswap/src/features/telemetry/Trace' import Trace from 'uniswap/src/features/telemetry/Trace'
...@@ -23,7 +23,8 @@ import { NumberType, useFormatter } from 'utils/formatNumbers' ...@@ -23,7 +23,8 @@ import { NumberType, useFormatter } from 'utils/formatNumbers'
const ModalWrapper = styled(ColumnCenter)` const ModalWrapper = styled(ColumnCenter)`
background-color: ${({ theme }) => theme.surface1}; background-color: ${({ theme }) => theme.surface1};
border-radius: 16px; border-radius: 20px;
outline: 1px solid ${({ theme }) => theme.surface3};
width: 100%; width: 100%;
padding: 8px; padding: 8px;
` `
...@@ -96,7 +97,7 @@ export function SendReviewModal({ onConfirm, onDismiss }: { onConfirm: () => voi ...@@ -96,7 +97,7 @@ export function SendReviewModal({ onConfirm, onDismiss }: { onConfirm: () => voi
: [currencySymbolAmount, formattedFiatInputAmount] : [currencySymbolAmount, formattedFiatInputAmount]
return ( return (
<AdaptiveWebModal isOpen onClose={onDismiss} maxHeight="90vh" p={0}> <Modal $scrollOverlay isOpen onDismiss={onDismiss} maxHeight="90vh">
<ModalWrapper data-testid="send-review-modal" gap="md"> <ModalWrapper data-testid="send-review-modal" gap="md">
<ModalHeader title={<Trans i18nKey="sendReviewModal.title" />} closeModal={onDismiss} /> <ModalHeader title={<Trans i18nKey="sendReviewModal.title" />} closeModal={onDismiss} />
<ReviewContentContainer> <ReviewContentContainer>
...@@ -142,6 +143,6 @@ export function SendReviewModal({ onConfirm, onDismiss }: { onConfirm: () => voi ...@@ -142,6 +143,6 @@ export function SendReviewModal({ onConfirm, onDismiss }: { onConfirm: () => voi
</ButtonPrimary> </ButtonPrimary>
</Trace> </Trace>
</ModalWrapper> </ModalWrapper>
</AdaptiveWebModal> </Modal>
) )
} }
apps/web/src/pages/Swap/Send/__snapshots__/NewAddressSpeedBump.test.tsx.snap
View file @ c2fcabde
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NewAddressSpeedBumpModal should not render identicon if account has no ENS avatar/unitag pp 1`] = ` exports[`NewAddressSpeedBumpModal should not render identicon if account has no ENS avatar/unitag pp 1`] = `
.c6 { .c8 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c7 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -25,7 +25,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -25,7 +25,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 4px; gap: 4px;
} }
.c18 { .c20 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -43,7 +43,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -43,7 +43,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 4px; gap: 4px;
} }
.c19 { .c21 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -61,7 +61,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -61,7 +61,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 12px; gap: 12px;
} }
.c12 { .c14 {
color: #222222; color: #222222;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -69,7 +69,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -69,7 +69,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c14 { .c16 {
color: #7D7D7D; color: #7D7D7D;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -77,7 +77,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -77,7 +77,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c8 { .c10 {
color: #222222; color: #222222;
cursor: pointer; cursor: pointer;
-webkit-text-decoration: none; -webkit-text-decoration: none;
...@@ -87,15 +87,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -87,15 +87,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
transition-duration: 125ms; transition-duration: 125ms;
} }
.c8:hover { .c10:hover {
opacity: 0.6; opacity: 0.6;
} }
.c8:active { .c10:active {
opacity: 0.4; opacity: 0.4;
} }
.c4 { .c6 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -106,15 +106,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -106,15 +106,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
font-weight: 500; font-weight: 500;
} }
.c4:hover { .c6:hover {
opacity: 0.6; opacity: 0.6;
} }
.c4:active { .c6:active {
opacity: 0.4; opacity: 0.4;
} }
.c23 { .c25 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -128,7 +128,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -128,7 +128,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
width: 100%; width: 100%;
} }
.c20 { .c22 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -163,30 +163,73 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -163,30 +163,73 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
user-select: none; user-select: none;
} }
.c20:active .c22 { .c22:active .c24 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c20:focus .c22 { .c22:focus .c24 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c20:hover .c22 { .c22:hover .c24 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c20:disabled { .c22:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c20:disabled:active .c22, .c22:disabled:active .c24,
.c20:disabled:focus .c22, .c22:disabled:focus .c24,
.c20:disabled:hover .c22 { .c22:disabled:hover .c24 {
background-color: transparent; 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: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
...@@ -200,17 +243,17 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -200,17 +243,17 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
stroke: none; stroke: none;
} }
.c5:hover { .c7:hover {
background: #22222212; background: #22222212;
color: #222222; color: #222222;
opacity: unset; opacity: unset;
} }
.c5:hover path { .c7:hover path {
fill: #222222; fill: #222222;
} }
.c0 { .c2 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -225,7 +268,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -225,7 +268,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 24px; gap: 24px;
} }
.c9 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -240,7 +283,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -240,7 +283,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 16px; gap: 16px;
} }
.c11 { .c13 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -255,7 +298,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -255,7 +298,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
gap: 8px; gap: 8px;
} }
.c16 { .c18 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -269,7 +312,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -269,7 +312,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
justify-content: flex-start; justify-content: flex-start;
} }
.c1 { .c3 {
width: 100%; width: 100%;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -277,14 +320,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -277,14 +320,15 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
align-items: center; align-items: center;
} }
.c2 { .c4 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; outline: 1px solid #22222212;
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
} }
.c10 { .c12 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -303,14 +347,14 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -303,14 +347,14 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
border-radius: 12px; border-radius: 12px;
} }
.c13 { .c15 {
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
.c15 { .c17 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -321,7 +365,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -321,7 +365,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
text-align: center; text-align: center;
} }
.c21 { .c23 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -334,23 +378,47 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -334,23 +378,47 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
border-radius: 12px; border-radius: 12px;
} }
.c3 { .c5 {
padding: 4px 0px; padding: 4px 0px;
} }
.c17 { .c19 {
padding: 20px 16px; padding: 20px 16px;
border: 1px solid #22222212; border: 1px solid #22222212;
gap: 8px; gap: 8px;
border-radius: 20px; 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 <body
style="pointer-events: none;" data-scroll-locked="1"
> >
<div <div
aria-hidden="true" aria-hidden="true"
data-aria-hidden="true"
> >
<span <span
class="" class=""
...@@ -362,70 +430,53 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -362,70 +430,53 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
<span <span
class=" t_light _dsp_contents is_Theme" class=" t_light _dsp_contents is_Theme"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span> </span>
</span> </span>
</span> </span>
</span>
</div> </div>
<reach-portal>
<div <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" data-focus-guard="true"
> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
<span tabindex="0"
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;"
/> />
<div <div
class="_dsp_contents" data-focus-lock-disabled="false"
data-remove-scroll-container="true"
> >
<div>
<div <div
style="display: contents; pointer-events: auto;" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-describedby="description-:r0:" aria-label="dialog"
aria-labelledby="title-:r0:" aria-modal="true"
class="css-view-175oi2r" class="c1"
id="content-:r0:" data-reach-dialog-content=""
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);" role="dialog"
tabindex="-1" tabindex="-1"
> >
<div <div
class="c0 c1 c2" class="c2 c3 c4"
> >
<div <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 <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" 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 <a
class="c4 c5" class="c6 c7"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c6 c7" class="c8 c9"
> >
<svg <svg
fill="none" fill="none"
...@@ -443,7 +494,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -443,7 +494,7 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div> </div>
</a> </a>
<svg <svg
class="c8" class="c10"
data-testid="Dialog-closeButton" data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="24"
...@@ -471,13 +522,13 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -471,13 +522,13 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c2 c3"
> >
<div <div
class="c9 c1" class="c11 c3"
> >
<div <div
class="c10" class="c12"
> >
<svg <svg
fill="none" fill="none"
...@@ -493,26 +544,26 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -493,26 +544,26 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</svg> </svg>
</div> </div>
<div <div
class="c11 c1" class="c13 c3"
> >
<div <div
class="c12 c13 css-4kpdx7" class="c14 c15 css-4kpdx7"
> >
New address New address
</div> </div>
<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. You haven’t transacted with this address before. Make sure it’s the correct address before continuing.
</div> </div>
<div <div
class="c16 c1 c17" class="c18 c3 c19"
> >
<div <div
class="c6 c18" class="c8 c20"
> >
<div <div
class="c12 css-n8z49y" class="c14 css-n8z49y"
> >
0x9984b4b4E408e8D618A879e5315BD30952c89103 0x9984b4b4E408e8D618A879e5315BD30952c89103
</div> </div>
...@@ -521,21 +572,21 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -521,21 +572,21 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div> </div>
</div> </div>
<div <div
class="c6 c19" class="c8 c21"
> >
<button <button
class="c20 c21" class="c22 c23"
> >
<div <div
class="c22 c23" class="c24 c25"
/> />
Cancel Cancel
</button> </button>
<button <button
class="c20 c21" class="c22 c23"
> >
<div <div
class="c22 c23" class="c24 c25"
/> />
Continue Continue
</button> </button>
...@@ -546,8 +597,11 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -546,8 +597,11 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no
</div> </div>
</div> </div>
</div> </div>
</span> <div
</span> data-focus-guard="true"
</div> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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`] = ` ...@@ -394,7 +394,8 @@ exports[`SendCurrencyInputform should render input in fiat correctly 1`] = `
.c2 { .c2 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; border-radius: 20px;
outline: 1px solid #22222212;
width: 100%; width: 100%;
padding: 8px; padding: 8px;
} }
...@@ -409,6 +410,18 @@ exports[`SendCurrencyInputform should render input in fiat correctly 1`] = ` ...@@ -409,6 +410,18 @@ exports[`SendCurrencyInputform should render input in fiat correctly 1`] = `
gap: 16px; gap: 16px;
} }
@media screen and (max-width:640px) {
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
}
<div <div
class="c0 c1 c2" class="c0 c1 c2"
data-testid="send-review-modal" data-testid="send-review-modal"
...@@ -1020,7 +1033,8 @@ exports[`SendCurrencyInputform should render input in token amount correctly 1`] ...@@ -1020,7 +1033,8 @@ exports[`SendCurrencyInputform should render input in token amount correctly 1`]
.c2 { .c2 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; border-radius: 20px;
outline: 1px solid #22222212;
width: 100%; width: 100%;
padding: 8px; padding: 8px;
} }
...@@ -1035,6 +1049,18 @@ exports[`SendCurrencyInputform should render input in token amount correctly 1`] ...@@ -1035,6 +1049,18 @@ exports[`SendCurrencyInputform should render input in token amount correctly 1`]
gap: 16px; gap: 16px;
} }
@media screen and (max-width:640px) {
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
}
<div <div
class="c0 c1 c2" class="c0 c1 c2"
data-testid="send-review-modal" 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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
.c6 { .c8 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c7 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -25,7 +25,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -25,7 +25,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 4px; gap: 4px;
} }
.c18 { .c20 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -43,7 +43,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -43,7 +43,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 12px; gap: 12px;
} }
.c14 { .c16 {
color: #222222; color: #222222;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -51,7 +51,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -51,7 +51,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c16 { .c18 {
color: #7D7D7D; color: #7D7D7D;
-webkit-letter-spacing: -0.01em; -webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em; -moz-letter-spacing: -0.01em;
...@@ -59,7 +59,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -59,7 +59,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.c8 { .c10 {
color: #222222; color: #222222;
cursor: pointer; cursor: pointer;
-webkit-text-decoration: none; -webkit-text-decoration: none;
...@@ -69,15 +69,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -69,15 +69,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
transition-duration: 125ms; transition-duration: 125ms;
} }
.c8:hover { .c10:hover {
opacity: 0.6; opacity: 0.6;
} }
.c8:active { .c10:active {
opacity: 0.4; opacity: 0.4;
} }
.c4 { .c6 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -88,15 +88,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -88,15 +88,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
font-weight: 500; font-weight: 500;
} }
.c4:hover { .c6:hover {
opacity: 0.6; opacity: 0.6;
} }
.c4:active { .c6:active {
opacity: 0.4; opacity: 0.4;
} }
.c22 { .c24 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -110,7 +110,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -110,7 +110,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
width: 100%; width: 100%;
} }
.c19 { .c21 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -145,30 +145,73 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -145,30 +145,73 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
user-select: none; user-select: none;
} }
.c19:active .c21 { .c21:active .c23 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c19:focus .c21 { .c21:focus .c23 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c19:hover .c21 { .c21:hover .c23 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c19:disabled { .c21:disabled {
cursor: default; cursor: default;
opacity: 0.6; opacity: 0.6;
} }
.c19:disabled:active .c21, .c21:disabled:active .c23,
.c19:disabled:focus .c21, .c21:disabled:focus .c23,
.c19:disabled:hover .c21 { .c21:disabled:hover .c23 {
background-color: transparent; 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: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
...@@ -182,17 +225,17 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -182,17 +225,17 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
stroke: none; stroke: none;
} }
.c5:hover { .c7:hover {
background: #22222212; background: #22222212;
color: #222222; color: #222222;
opacity: unset; opacity: unset;
} }
.c5:hover path { .c7:hover path {
fill: #222222; fill: #222222;
} }
.c0 { .c2 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -207,7 +250,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -207,7 +250,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 24px; gap: 24px;
} }
.c9 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -222,7 +265,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -222,7 +265,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 16px; gap: 16px;
} }
.c13 { .c15 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -237,7 +280,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -237,7 +280,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
gap: 8px; gap: 8px;
} }
.c1 { .c3 {
width: 100%; width: 100%;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
...@@ -245,14 +288,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -245,14 +288,15 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
align-items: center; align-items: center;
} }
.c2 { .c4 {
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 16px; outline: 1px solid #22222212;
border-radius: 20px;
padding: 16px 24px 24px 24px; padding: 16px 24px 24px 24px;
width: 100%; width: 100%;
} }
.c10 { .c12 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -271,14 +315,14 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -271,14 +315,14 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c15 { .c17 {
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }
.c17 { .c19 {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -289,7 +333,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -289,7 +333,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
text-align: center; text-align: center;
} }
.c20 { .c22 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -302,30 +346,54 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -302,30 +346,54 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
border-radius: 12px; border-radius: 12px;
} }
.c3 { .c5 {
padding: 4px 0px; padding: 4px 0px;
} }
.c11 { .c13 {
height: 28px; height: 28px;
width: 28px; width: 28px;
} }
.c11 path { .c13 path {
background: #7D7D7D; background: #7D7D7D;
fill: #7D7D7D; fill: #7D7D7D;
} }
.c12 path { .c14 path {
fill: #7D7D7D; 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 <body
style="pointer-events: none;" data-scroll-locked="1"
> >
<div <div
aria-hidden="true" aria-hidden="true"
data-aria-hidden="true"
> >
<span <span
class="" class=""
...@@ -337,70 +405,53 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -337,70 +405,53 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
<span <span
class=" t_light _dsp_contents is_Theme" class=" t_light _dsp_contents is_Theme"
> >
<span <div
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" tabindex="0"
>
<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"
/> />
</span> </span>
</span> </span>
</span> </span>
</span>
</div> </div>
<reach-portal>
<div <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" data-focus-guard="true"
> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
<span tabindex="0"
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;"
/> />
<div <div
class="_dsp_contents" data-focus-lock-disabled="false"
data-remove-scroll-container="true"
> >
<div>
<div <div
style="display: contents; pointer-events: auto;" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-describedby="description-:r0:" aria-label="dialog"
aria-labelledby="title-:r0:" aria-modal="true"
class="css-view-175oi2r" class="c1"
id="content-:r0:" data-reach-dialog-content=""
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);" role="dialog"
tabindex="-1" tabindex="-1"
> >
<div <div
class="c0 c1 c2" class="c2 c3 c4"
> >
<div <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 <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" 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 <a
class="c4 c5" class="c6 c7"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c6 c7" class="c8 c9"
> >
<svg <svg
fill="none" fill="none"
...@@ -418,7 +469,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -418,7 +469,7 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</div> </div>
</a> </a>
<svg <svg
class="c8" class="c10"
data-testid="Dialog-closeButton" data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="24"
...@@ -446,16 +497,16 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -446,16 +497,16 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c2 c3"
> >
<div <div
class="c9 c1" class="c11 c3"
> >
<div <div
class="c10" class="c12"
> >
<svg <svg
class="c11 c12" class="c13 c14"
fill="#7D7D7D" fill="#7D7D7D"
viewBox="0 0 28 28" viewBox="0 0 28 28"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -467,36 +518,36 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -467,36 +518,36 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c13 c1" class="c15 c3"
> >
<div <div
class="c14 c15 css-4kpdx7" class="c16 c17 css-4kpdx7"
> >
Is this a wallet address? Is this a wallet address?
</div> </div>
<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. 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>
</div> </div>
<div <div
class="c6 c18" class="c8 c20"
> >
<button <button
class="c19 c20" class="c21 c22"
> >
<div <div
class="c21 c22" class="c23 c24"
/> />
Cancel Cancel
</button> </button>
<button <button
class="c19 c20" class="c21 c22"
> >
<div <div
class="c21 c22" class="c23 c24"
/> />
Continue Continue
</button> </button>
...@@ -507,8 +558,11 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -507,8 +558,11 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
</span> <div
</span> data-focus-guard="true"
</div> style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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