ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(L2): add downtime warning to add liquidity and adjust styles of network notification (#2034)

Browse Source 
* add liquidity warning and network notification

* remove unneeded width

* use externalLink in LinkOutToBridge component

Co-authored-by: Moody Salem <moody.salem@gmail.com>
This commit is contained in:
Jordan Frankfurt 2021-07-13 13:30:24 -04:00 committed by GitHub
parent f9de85251c
commit c625d15feb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 140 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/NetworkAlert/AddLiquidityNetworkAlert.tsx Normal file
View File

@ -0,0 +1,128 @@
import { Trans } from '@lingui/macro'
import {
ArbitrumWrapperBackgroundDarkMode,
ArbitrumWrapperBackgroundLightMode,
OptimismWrapperBackgroundDarkMode,
OptimismWrapperBackgroundLightMode,
} from 'components/NetworkAlert/NetworkAlert'
import { CHAIN_INFO, L2_CHAIN_IDS, NETWORK_LABELS, SupportedChainId, SupportedL2ChainId } from 'constants/chains'
import { useActiveWeb3React } from 'hooks/web3'
import { ArrowDownCircle } from 'react-feather'
import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
import styled from 'styled-components/macro'
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
const L2Icon = styled.img`
display: none;
height: 40px;
margin: auto 20px auto 4px;
width: 40px;
@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
display: block;
}
`
const DesktopTextBreak = styled.div`
display: none;
@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
display: block;
}
`
const Wrapper = styled.div<{ chainId: SupportedL2ChainId; darkMode: boolean; logoUrl: string }>`
${({ chainId, darkMode }) =>
[SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
? darkMode
? OptimismWrapperBackgroundDarkMode
: OptimismWrapperBackgroundLightMode
: darkMode
? ArbitrumWrapperBackgroundDarkMode
: ArbitrumWrapperBackgroundLightMode};
border-radius: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
position: relative;
width: 100%;
:before {
background-image: url(${({ logoUrl }) => logoUrl});
background-repeat: no-repeat;
background-size: 300px;
content: '';
height: 300px;
opacity: 0.1;
position: absolute;
transform: rotate(25deg) translate(-90px, -40px);
width: 300px;
z-index: -1;
}
@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
flex-direction: row;
padding: 16px 20px;
}
`
const Body = styled.div`
font-size: 12px;
line-height: 143%;
margin: 12px;
@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
flex: 1 1 auto;
margin: auto 0;
}
`
const LinkOutCircle = styled(ArrowDownCircle)`
transform: rotate(230deg);
width: 20px;
height: 20px;
margin-left: 12px;
`
const LinkOutToBridge = styled(ExternalLink)`
align-items: center;
background-color: black;
border-radius: 16px;
color: white;
display: flex;
font-size: 14px;
justify-content: space-between;
margin: 0;
max-height: 47px;
padding: 16px 12px;
text-decoration: none;
width: auto;
:hover,
:focus,
:active {
background-color: black;
}
@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
margin: auto 0 auto auto;
padding: 14px 16px;
min-width: 226px;
}
`
export function AddLiquidityNetworkAlert() {
const { chainId } = useActiveWeb3React()
const [darkMode] = useDarkModeManager()
const [arbitrumAlphaAcknowledged] = useArbitrumAlphaAlert()
if (!chainId || !L2_CHAIN_IDS.includes(chainId) || arbitrumAlphaAcknowledged) {
return null
}
const info = CHAIN_INFO[chainId as SupportedL2ChainId]
const depositUrl = [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
? `${info.bridge}?chainId=1`
: info.bridge
return (
<Wrapper darkMode={darkMode} chainId={chainId} logoUrl={info.logoUrl}>
<L2Icon src={info.logoUrl} />
<Body>
<Trans>This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network.</Trans>
<DesktopTextBreak /> <Trans>You must bridge L1 assets to the network to use them.</Trans>
</Body>
<LinkOutToBridge href={depositUrl}>
<Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
<LinkOutCircle />
</LinkOutToBridge>
</Wrapper>
)
}

6
src/components/NetworkAlert/MinimalNetworkAlert.tsx
View File

@ -10,7 +10,7 @@ import { useActiveWeb3React } from 'hooks/web3'
import { ArrowDownCircle } from 'react-feather'
import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
import styled from 'styled-components/macro'
import { MEDIA_WIDTHS } from 'theme'
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
const L2Icon = styled.img`
display: none;
@ -76,7 +76,7 @@ const LinkOutCircle = styled(ArrowDownCircle)`
height: 20px;
margin-left: 12px;
`
const LinkOutToBridge = styled.a`
const LinkOutToBridge = styled(ExternalLink)`
align-items: center;
background-color: black;
border-radius: 16px;
@ -119,7 +119,7 @@ export function MinimalNetworkAlert() {
<Trans>This is an alpha release of Uniswap on the {NETWORK_LABELS[chainId]} network.</Trans>
<DesktopTextBreak /> <Trans>You must bridge L1 assets to the network to use them.</Trans>
</Body>
<LinkOutToBridge href={depositUrl} target="_blank" rel="noopener noreferrer">
<LinkOutToBridge href={depositUrl}>
<Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
<LinkOutCircle />
</LinkOutToBridge>

6
src/components/NetworkAlert/NetworkAlert.tsx
View File

@ -6,7 +6,7 @@ import { ArrowDownCircle, X } from 'react-feather'
import { useArbitrumAlphaAlert, useDarkModeManager } from 'state/user/hooks'
import { useETHBalances } from 'state/wallet/hooks'
import styled, { css } from 'styled-components/macro'
import { MEDIA_WIDTHS } from 'theme'
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
import { CHAIN_INFO } from '../../constants/chains'
const L2Icon = styled.img`
@ -99,7 +99,7 @@ const LinkOutCircle = styled(ArrowDownCircle)`
width: 20px;
height: 20px;
`
const LinkOutToBridge = styled.a`
const LinkOutToBridge = styled(ExternalLink)`
align-items: center;
background-color: black;
border-radius: 16px;
@ -154,7 +154,7 @@ export function NetworkAlert() {
</Trans>
</Body>
</ContentWrapper>
<LinkOutToBridge href={depositUrl} target="_blank" rel="noopener noreferrer">
<LinkOutToBridge href={depositUrl}>
<Trans>Deposit to {NETWORK_LABELS[chainId]}</Trans>
<LinkOutCircle />
</LinkOutToBridge>

1
src/components/OptimismDowntimeWarning/index.tsx
View File

@ -9,7 +9,6 @@ const Root = styled.div`
border-radius: 18px;
color: black;
margin-top: 16px;
max-width: 480px;
padding: 16px;
width: 100%;
`

4
src/pages/AddLiquidity/index.tsx
View File

@ -28,7 +28,7 @@ import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallbac
import useTransactionDeadline from '../../hooks/useTransactionDeadline'
import { useWalletModalToggle } from '../../state/application/hooks'
import { Field, Bound } from '../../state/mint/v3/actions'
import { NetworkAlert } from 'components/NetworkAlert/NetworkAlert'
import { AddLiquidityNetworkAlert } from 'components/NetworkAlert/AddLiquidityNetworkAlert'
import { useTransactionAdder } from '../../state/transactions/hooks'
import { useIsExpertMode, useUserSlippageToleranceWithDefault } from '../../state/user/hooks'
import { TYPE, ExternalLink } from '../../theme'
@ -540,7 +540,7 @@ export default function AddLiquidity({
return (
<>
<ScrollablePage>
<NetworkAlert />
<AddLiquidityNetworkAlert />
<OptimismDowntimeWarning />
<TransactionConfirmationModal
isOpen={showConfirm}

4
src/pages/AddLiquidity/styled.tsx
View File

@ -33,6 +33,10 @@ export const ScrollablePage = styled.div`
position: relative;
display: flex;
flex-direction: column;
${({ theme }) => theme.mediaWidth.upToMedium`
max-width: 480px;
margin: 0 auto;
`};
`
export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`