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
Hide 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,227 +518,213 @@ exports[`CancelOrdersDialog should render limit order text 1`] = ` ...@@ -450,227 +518,213 @@ 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>
<div <reach-portal>
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" <div
> data-focus-guard="true"
<span style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
class=" _dsp_contents" tabindex="0"
/>
<div
data-focus-lock-disabled="false"
> >
<span <div>
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div <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" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-hidden="true" aria-label="dialog"
class="css-view-175oi2r" aria-modal="true"
data-aria-hidden="true" class="c1"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;" data-reach-dialog-content=""
/> role="dialog"
<div tabindex="-1"
class="_dsp_contents"
data-remove-scroll-container="true"
> >
<div <div
style="display: contents; pointer-events: auto;" class="c2 c3 c4"
> >
<div <div
aria-describedby="description-:r3:" 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"
aria-labelledby="title-:r3:"
class="css-view-175oi2r"
id="content-:r3:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
tabindex="-1"
> >
<div <div
class="c0 c1 c2" 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"
> >
<div <a
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="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
> >
<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="c8 c9"
> >
<a
class="c4 c5"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
>
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
fill="#9B9B9B"
/>
</svg>
Get help
</div>
</a>
<svg <svg
class="c8"
data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="16"
stroke="currentColor" viewBox="0 0 16 16"
stroke-linecap="round" width="16"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<line <path
x1="18" d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
x2="6" fill="#9B9B9B"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/> />
</svg> </svg>
Get help
</div> </div>
</a>
<svg
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
x2="6"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/>
</svg>
</div>
</div>
<div
class="c2 c3"
>
<div
class="c11 c3"
>
<div
class="c12"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<line
x1="4.93"
x2="19.07"
y1="4.93"
y2="19.07"
/>
</svg>
</div> </div>
<div <div
class="c0 c1" class="c13 c3"
> >
<div <div
class="c9 c1" class="c14 c15 css-4kpdx7"
>
Cancel limit
</div>
<div
class="c16 c17 css-1urox24"
> >
<div <div
class="c10" class="c18"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<line
x1="4.93"
x2="19.07"
y1="4.93"
y2="19.07"
/>
</svg>
</div>
<div
class="c11 c1"
> >
Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
<div <div
class="c12 c13 css-4kpdx7" class="c8 c19 c20"
>
Cancel limit
</div>
<div
class="c14 c15 css-1urox24"
> >
<div <div
class="c16" class="c8 c19 c21"
> >
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="c14 c22 css-142zc9n"
data-testid="swap-li-label"
> >
<div Network cost
class="c6 c17 c19" </div>
> <div
<div class="c14 c23 css-142zc9n"
class="c12 c20 css-142zc9n" >
data-testid="swap-li-label" <span>
> -
Network cost </span>
</div>
<div
class="c12 c21 css-142zc9n"
>
<span>
-
</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div
class="c6 c22"
>
<button
class="c23 c24"
>
<div
class="c25 c26"
/>
Never mind
</button>
<button
class="c27 c28"
>
<div
class="c25 c26"
/>
Proceed
</button>
</div>
</div> </div>
</div> </div>
<div
class="c8 c24"
>
<button
class="c25 c26"
>
<div
class="c27 c28"
/>
Never mind
</button>
<button
class="c29 c30"
>
<div
class="c27 c28"
/>
Proceed
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
</div> <div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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,215 +1235,201 @@ exports[`CancelOrdersDialog should render order cancel correctly 1`] = ` ...@@ -1113,215 +1235,201 @@ 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>
<div <reach-portal>
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" <div
> data-focus-guard="true"
<span style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
class=" _dsp_contents" tabindex="0"
/>
<div
data-focus-lock-disabled="false"
> >
<span <div>
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div <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" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-hidden="true" aria-label="dialog"
class="css-view-175oi2r" aria-modal="true"
data-aria-hidden="true" class="c1"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;" data-reach-dialog-content=""
/> role="dialog"
<div tabindex="-1"
class="_dsp_contents"
data-remove-scroll-container="true"
> >
<div <div
style="display: contents; pointer-events: auto;" class="c2 c3 c4"
> >
<div <div
aria-describedby="description-:r0:" 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"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
tabindex="-1"
> >
<div <div
class="c0 c1 c2" 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"
> >
<div <a
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="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
> >
<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="c8 c9"
> >
<a
class="c4 c5"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
>
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
fill="#9B9B9B"
/>
</svg>
Get help
</div>
</a>
<svg <svg
class="c8"
data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="16"
stroke="currentColor" viewBox="0 0 16 16"
stroke-linecap="round" width="16"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<line <path
x1="18" d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
x2="6" fill="#9B9B9B"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/> />
</svg> </svg>
Get help
</div> </div>
</a>
<svg
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
x2="6"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/>
</svg>
</div>
</div>
<div
class="c2 c3"
>
<div
class="c11 c3"
>
<div
class="c12"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<line
x1="4.93"
x2="19.07"
y1="4.93"
y2="19.07"
/>
</svg>
</div> </div>
<div <div
class="c0 c1" class="c13 c3"
> >
<div <div
class="c9 c1" class="c14 c15 css-4kpdx7"
>
Cancel order
</div>
<div
class="c16 c17 css-1urox24"
> >
<div <div
class="c10" class="c18"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="10"
/>
<line
x1="4.93"
x2="19.07"
y1="4.93"
y2="19.07"
/>
</svg>
</div>
<div
class="c11 c1"
> >
Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
<div <div
class="c12 c13 css-4kpdx7" class="c8 c19 c20"
>
Cancel order
</div>
<div
class="c14 c15 css-1urox24"
> >
<div <div
class="c16" class="c8 c19 c21"
> >
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="c14 c22 css-142zc9n"
data-testid="swap-li-label"
> >
<div Network cost
class="c6 c17 c19" </div>
> <div
<div class="c14 c23 css-142zc9n"
class="c12 c20 css-142zc9n" >
data-testid="swap-li-label" <span>
> -
Network cost </span>
</div>
<div
class="c12 c21 css-142zc9n"
>
<span>
-
</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div
class="c6 c22"
>
<button
class="c23 c24"
>
<div
class="c25 c26"
/>
Never mind
</button>
<button
class="c27 c28"
>
<div
class="c25 c26"
/>
Proceed
</button>
</div>
</div> </div>
</div> </div>
<div
class="c8 c24"
>
<button
class="c25 c26"
>
<div
class="c27 c28"
/>
Never mind
</button>
<button
class="c29 c30"
>
<div
class="c27 c28"
/>
Proceed
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
</div> <div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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,194 +449,180 @@ exports[`<Dialog /> renders different button types 1`] = ` ...@@ -381,194 +449,180 @@ 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>
<div <reach-portal>
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" <div
> data-focus-guard="true"
<span style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
class=" _dsp_contents" tabindex="0"
/>
<div
data-focus-lock-disabled="false"
> >
<span <div>
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div <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" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-hidden="true" aria-label="dialog"
class="css-view-175oi2r" aria-modal="true"
data-aria-hidden="true" class="c1"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;" data-reach-dialog-content=""
/> role="dialog"
<div tabindex="-1"
class="_dsp_contents"
data-remove-scroll-container="true"
> >
<div <div
style="display: contents; pointer-events: auto;" class="c2 c3 c4"
> >
<div <div
aria-describedby="description-:rf:" 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"
aria-labelledby="title-:rf:"
class="css-view-175oi2r"
id="content-:rf:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
tabindex="-1"
> >
<div <div
class="c0 c1 c2" 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"
> >
<div <a
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="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
> >
<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="c8 c9"
> >
<a
class="c4 c5"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
>
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
fill="#9B9B9B"
/>
</svg>
Get help
</div>
</a>
<svg <svg
class="c8"
data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="16"
stroke="currentColor" viewBox="0 0 16 16"
stroke-linecap="round" width="16"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<line <path
x1="18" d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
x2="6" fill="#9B9B9B"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/> />
</svg> </svg>
Get help
</div>
</a>
<svg
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
x2="6"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/>
</svg>
</div>
</div>
<div
class="c2 c3"
>
<div
class="c11 c3"
>
<div
class="c12"
>
<div>
Mock Icon
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c13 c3"
> >
<div <div
class="c9 c1" class="c14 c15 css-4kpdx7"
> >
<div <div>
class="c10" Mock Title
>
<div>
Mock Icon
</div>
</div>
<div
class="c11 c1"
>
<div
class="c12 c13 css-4kpdx7"
>
<div>
Mock Title
</div>
</div>
<div
class="c14 c15 css-1urox24"
>
<div>
Mock Description
</div>
</div>
<div>
Mock Body
</div>
</div> </div>
</div> </div>
<div <div
class="c6 c16" class="c16 c17 css-1urox24"
> >
<button <div>
class="c17 c18" Mock Description
disabled="" </div>
> </div>
<div <div>
class="c19 c20" Mock Body
/>
<div>
Left Button
</div>
</button>
<button
class="c21 c18"
>
<div
class="c19 c20"
/>
<div>
Right Button
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
<div
class="c8 c18"
>
<button
class="c19 c20"
disabled=""
>
<div
class="c21 c22"
/>
<div>
Left Button
</div>
</button>
<button
class="c23 c20"
>
<div
class="c21 c22"
/>
<div>
Right Button
</div>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
</div> <div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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,181 +1006,167 @@ exports[`<Dialog /> renders the Dialog component correctly 1`] = ` ...@@ -884,181 +1006,167 @@ 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>
<div <reach-portal>
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" <div
> data-focus-guard="true"
<span style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
class=" _dsp_contents" tabindex="0"
/>
<div
data-focus-lock-disabled="false"
> >
<span <div>
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div <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" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-hidden="true" aria-label="dialog"
class="css-view-175oi2r" aria-modal="true"
data-aria-hidden="true" class="c1"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;" data-reach-dialog-content=""
/> role="dialog"
<div tabindex="-1"
class="_dsp_contents"
data-remove-scroll-container="true"
> >
<div <div
style="display: contents; pointer-events: auto;" class="c2 c3 c4"
> >
<div <div
aria-describedby="description-:r0:" 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"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
tabindex="-1"
> >
<div <div
class="c0 c1 c2" 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"
> >
<div <a
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="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
> >
<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="c8 c9"
> >
<a
class="c4 c5"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
>
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
fill="#9B9B9B"
/>
</svg>
Get help
</div>
</a>
<svg <svg
class="c8"
data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="16"
stroke="currentColor" viewBox="0 0 16 16"
stroke-linecap="round" width="16"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<line <path
x1="18" d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
x2="6" fill="#9B9B9B"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/> />
</svg> </svg>
Get help
</div>
</a>
<svg
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
x2="6"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/>
</svg>
</div>
</div>
<div
class="c2 c3"
>
<div
class="c11 c3"
>
<div
class="c12"
>
<div>
Mock Icon
</div> </div>
</div> </div>
<div <div
class="c0 c1" class="c13 c3"
> >
<div <div
class="c9 c1" class="c14 c15 css-4kpdx7"
> >
<div <div>
class="c10" Mock Title
>
<div>
Mock Icon
</div>
</div>
<div
class="c11 c1"
>
<div
class="c12 c13 css-4kpdx7"
>
<div>
Mock Title
</div>
</div>
<div
class="c14 c15 css-1urox24"
>
<div>
Mock Description
</div>
</div>
<div>
Mock Body
</div>
</div> </div>
</div> </div>
<div <div
class="c6 c16" class="c16 c17 css-1urox24"
> >
<button <div>
class="c17 c18" Mock Description
> </div>
<div </div>
class="c19 c20" <div>
/> Mock Body
<div>
Left Button
</div>
</button>
<button
class="c17 c18"
>
<div
class="c19 c20"
/>
<div>
Right Button
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
<div
class="c8 c18"
>
<button
class="c19 c20"
>
<div
class="c21 c22"
/>
<div>
Left Button
</div>
</button>
<button
class="c19 c20"
>
<div
class="c21 c22"
/>
<div>
Right Button
</div>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
</div> <div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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,192 +430,178 @@ exports[`NewAddressSpeedBumpModal should not render identicon if account has no ...@@ -362,192 +430,178 @@ 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>
<div <reach-portal>
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" <div
> data-focus-guard="true"
<span style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
class=" _dsp_contents" tabindex="0"
/>
<div
data-focus-lock-disabled="false"
> >
<span <div>
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div <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" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-hidden="true" aria-label="dialog"
class="css-view-175oi2r" aria-modal="true"
data-aria-hidden="true" class="c1"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;" data-reach-dialog-content=""
/> role="dialog"
<div tabindex="-1"
class="_dsp_contents"
data-remove-scroll-container="true"
> >
<div <div
style="display: contents; pointer-events: auto;" class="c2 c3 c4"
> >
<div <div
aria-describedby="description-:r0:" 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"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
tabindex="-1"
> >
<div <div
class="c0 c1 c2" 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"
> >
<div <a
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="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
> >
<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="c8 c9"
> >
<a
class="c4 c5"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
>
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
fill="#9B9B9B"
/>
</svg>
Get help
</div>
</a>
<svg <svg
class="c8"
data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="16"
stroke="currentColor" viewBox="0 0 16 16"
stroke-linecap="round" width="16"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<line <path
x1="18" d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
x2="6" fill="#9B9B9B"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/> />
</svg> </svg>
Get help
</div> </div>
</a>
<svg
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
x2="6"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/>
</svg>
</div>
</div>
<div
class="c2 c3"
>
<div
class="c11 c3"
>
<div
class="c12"
>
<svg
fill="none"
height="28"
viewBox="0 0 28 28"
width="28"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.5625 3.5H7.4375C4.8125 3.5 3.5 4.8125 3.5 7.4375V20.5625C3.5 23.1875 4.8125 24.5 7.4375 24.5H20.5625C23.1875 24.5 24.5 23.1875 24.5 20.5625V7.4375C24.5 4.8125 23.1875 3.5 20.5625 3.5ZM14.0094 8.16667C15.9426 8.16667 17.5094 9.7335 17.5094 11.6667C17.5094 13.5998 15.9426 15.1667 14.0094 15.1667C12.0762 15.1667 10.5094 13.5998 10.5094 11.6667C10.5094 9.7335 12.0762 8.16667 14.0094 8.16667ZM20.5567 22.75H7.44334C7.29167 22.75 7.15168 22.75 7.01168 22.7383C7.16334 20.755 8.28338 18.1649 12.005 18.1649H15.995C19.705 18.1649 20.8367 20.7783 20.9883 22.7383C20.8483 22.75 20.7083 22.75 20.5567 22.75Z"
fill="#7D7D7D"
/>
</svg>
</div> </div>
<div <div
class="c0 c1" class="c13 c3"
> >
<div <div
class="c9 c1" class="c14 c15 css-4kpdx7"
>
New address
</div>
<div
class="c16 c17 css-1urox24"
>
You haven’t transacted with this address before. Make sure it’s the correct address before continuing.
</div>
<div
class="c18 c3 c19"
> >
<div <div
class="c10" class="c8 c20"
>
<svg
fill="none"
height="28"
viewBox="0 0 28 28"
width="28"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.5625 3.5H7.4375C4.8125 3.5 3.5 4.8125 3.5 7.4375V20.5625C3.5 23.1875 4.8125 24.5 7.4375 24.5H20.5625C23.1875 24.5 24.5 23.1875 24.5 20.5625V7.4375C24.5 4.8125 23.1875 3.5 20.5625 3.5ZM14.0094 8.16667C15.9426 8.16667 17.5094 9.7335 17.5094 11.6667C17.5094 13.5998 15.9426 15.1667 14.0094 15.1667C12.0762 15.1667 10.5094 13.5998 10.5094 11.6667C10.5094 9.7335 12.0762 8.16667 14.0094 8.16667ZM20.5567 22.75H7.44334C7.29167 22.75 7.15168 22.75 7.01168 22.7383C7.16334 20.755 8.28338 18.1649 12.005 18.1649H15.995C19.705 18.1649 20.8367 20.7783 20.9883 22.7383C20.8483 22.75 20.7083 22.75 20.5567 22.75Z"
fill="#7D7D7D"
/>
</svg>
</div>
<div
class="c11 c1"
> >
<div <div
class="c12 c13 css-4kpdx7" class="c14 css-n8z49y"
> >
New address 0x9984b4b4E408e8D618A879e5315BD30952c89103
</div>
<div
class="c14 c15 css-1urox24"
>
You haven’t transacted with this address before. Make sure it’s the correct address before continuing.
</div>
<div
class="c16 c1 c17"
>
<div
class="c6 c18"
>
<div
class="c12 css-n8z49y"
>
0x9984b4b4E408e8D618A879e5315BD30952c89103
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div
class="c6 c19"
>
<button
class="c20 c21"
>
<div
class="c22 c23"
/>
Cancel
</button>
<button
class="c20 c21"
>
<div
class="c22 c23"
/>
Continue
</button>
</div>
</div> </div>
</div> </div>
<div
class="c8 c21"
>
<button
class="c22 c23"
>
<div
class="c24 c25"
/>
Cancel
</button>
<button
class="c22 c23"
>
<div
class="c24 c25"
/>
Continue
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
</div> <div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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,178 +405,164 @@ exports[`SmartContractSpeedBumpModal should render correctly 1`] = ` ...@@ -337,178 +405,164 @@ 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>
<div <reach-portal>
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" <div
> data-focus-guard="true"
<span style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
class=" _dsp_contents" tabindex="0"
/>
<div
data-focus-lock-disabled="false"
> >
<span <div>
class="t_sub_theme t_light _dsp_contents is_Theme"
>
<div <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" class="c0"
data-reach-dialog-overlay=""
style="opacity: 0;"
> >
<div <div
aria-hidden="true" aria-label="dialog"
class="css-view-175oi2r" aria-modal="true"
data-aria-hidden="true" class="c1"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: absolute; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 1040; pointer-events: auto; opacity: 0;" data-reach-dialog-content=""
/> role="dialog"
<div tabindex="-1"
class="_dsp_contents"
data-remove-scroll-container="true"
> >
<div <div
style="display: contents; pointer-events: auto;" class="c2 c3 c4"
> >
<div <div
aria-describedby="description-:r0:" 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"
aria-labelledby="title-:r0:"
class="css-view-175oi2r"
id="content-:r0:"
style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; background-color: rgb(255, 255, 255); padding: 0px 0px 0px 0px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; z-index: 1060; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgba(34,34,34,0.05); border-right-color: rgba(34,34,34,0.05); border-bottom-color: rgba(34,34,34,0.05); border-left-color: rgba(34,34,34,0.05); border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-right-style: solid; opacity: 0; gap: 4px; margin: 16px 16px 16px 16px; max-height: calc(100vh - 32px); max-width: 420px; overflow-x: hidden; overflow-y: hidden; width: calc(100vw - 32px); outline-style: none; box-shadow: 0px 3px 6px rgba(0,0,0,0.14901960784313725); transform: translateY(20px) translateX(0px);"
tabindex="-1"
> >
<div <div
class="c0 c1 c2" 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"
> >
<div <a
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="c6 c7"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
> >
<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="c8 c9"
> >
<a
class="c4 c5"
href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer"
target="_blank"
>
<div
class="c6 c7"
>
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
fill="#9B9B9B"
/>
</svg>
Get help
</div>
</a>
<svg <svg
class="c8"
data-testid="Dialog-closeButton"
fill="none" fill="none"
height="24" height="16"
stroke="currentColor" viewBox="0 0 16 16"
stroke-linecap="round" width="16"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<line <path
x1="18" d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
x2="6" fill="#9B9B9B"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/> />
</svg> </svg>
Get help
</div> </div>
</a>
<svg
class="c10"
data-testid="Dialog-closeButton"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="18"
x2="6"
y1="6"
y2="18"
/>
<line
x1="6"
x2="18"
y1="6"
y2="18"
/>
</svg>
</div>
</div>
<div
class="c2 c3"
>
<div
class="c11 c3"
>
<div
class="c12"
>
<svg
class="c13 c14"
fill="#7D7D7D"
viewBox="0 0 28 28"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
fill="#9b9b9b"
/>
</svg>
</div> </div>
<div <div
class="c0 c1" class="c15 c3"
> >
<div <div
class="c9 c1" class="c16 c17 css-4kpdx7"
> >
<div Is this a wallet address?
class="c10"
>
<svg
class="c11 c12"
fill="#7D7D7D"
viewBox="0 0 28 28"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m25.2086 20.0103-7.7081-14.41555c-1.4933-2.793-5.5055-2.793-7 0l-7.70806 14.41555c-1.36966 2.562.49005 5.6559 3.40088 5.6559h15.61438c2.9097 0 4.7706-3.095 3.4009-5.6559zm-12.0831-8.3441c0-.483.392-.875.875-.875s.875.392.875.875v4.6667c0 .483-.392.875-.875.875s-.875-.392-.875-.875zm.8984 9.3333c-.644 0-1.1727-.5226-1.1727-1.1666s.517-1.1667 1.161-1.1667h.0117c.6452 0 1.1667.5227 1.1667 1.1667s-.5227 1.1666-1.1667 1.1666z"
fill="#9b9b9b"
/>
</svg>
</div>
<div
class="c13 c1"
>
<div
class="c14 c15 css-4kpdx7"
>
Is this a wallet address?
</div>
<div
class="c16 c17 css-1urox24"
>
You’re about to send tokens to a special type of address - a smart contract. Double-check it’s the address you intended to send to. If it’s wrong, your tokens could be lost forever.
</div>
</div>
</div> </div>
<div <div
class="c6 c18" class="c18 c19 css-1urox24"
> >
<button 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.
class="c19 c20"
>
<div
class="c21 c22"
/>
Cancel
</button>
<button
class="c19 c20"
>
<div
class="c21 c22"
/>
Continue
</button>
</div> </div>
</div> </div>
</div> </div>
<div
class="c8 c20"
>
<button
class="c21 c22"
>
<div
class="c23 c24"
/>
Cancel
</button>
<button
class="c21 c22"
>
<div
class="c23 c24"
/>
Continue
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</span> </div>
</span> </div>
</div> <div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</reach-portal>
</body> </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