fix(style): improve the bridge assets style (#3036)
* Re-style bridge cards * Tweaks - Header button height and color treatment refinement - Small sizing issues * Address comments * remove network alert state * code style nits * remove unused parameter, rename * copy edit Co-authored-by: Moody Salem <moody.salem@gmail.com>
This commit is contained in:
Callil Capuozzo
GitHub
parent
4ed9c7ba94
commit
3923438011
@ -23,7 +23,7 @@ export const BaseButton = styled(RebassButton)<
|
||||
border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
|
||||
outline: none;
|
||||
border: 1px solid transparent;
|
||||
color: white;
|
||||
color: ${({ theme }) => theme.text1};
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -108,7 +108,7 @@ const SelectorControls = styled.div<{ interactive: boolean }>`
|
||||
align-items: center;
|
||||
background-color: ${({ theme }) => theme.bg0};
|
||||
border: 2px solid ${({ theme }) => theme.bg0};
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
color: ${({ theme }) => theme.text1};
|
||||
cursor: ${({ interactive }) => (interactive ? 'pointer' : 'auto')};
|
||||
display: flex;
|
||||
@ -128,7 +128,7 @@ const SelectorWrapper = styled.div`
|
||||
}
|
||||
`
|
||||
const StyledChevronDown = styled(ChevronDown)`
|
||||
width: 12px;
|
||||
width: 16px;
|
||||
`
|
||||
const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
|
||||
switch (chainId) {
|
||||
@ -247,7 +247,7 @@ export default function NetworkSelector() {
|
||||
<StyledChevronDown />
|
||||
</SelectorControls>
|
||||
{open && (
|
||||
<FlyoutMenu>
|
||||
<FlyoutMenu onMouseLeave={toggle}>
|
||||
<FlyoutHeader>
|
||||
<Trans>Select a network</Trans>
|
||||
</FlyoutHeader>
|
||||
|
||||
@ -89,7 +89,7 @@ const HeaderLinks = styled(Row)`
|
||||
justify-self: center;
|
||||
background-color: ${({ theme }) => theme.bg0};
|
||||
width: fit-content;
|
||||
padding: 4px;
|
||||
padding: 2px;
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@ -121,10 +121,11 @@ const AccountElement = styled.div<{ active: boolean }>`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
|
||||
border-radius: 12px;
|
||||
background-color: ${({ theme, active }) => (!active ? theme.bg0 : theme.bg0)};
|
||||
border-radius: 16px;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
:focus {
|
||||
border: 1px solid blue;
|
||||
@ -202,11 +203,11 @@ const StyledNavLink = styled(NavLink).attrs({
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
&.${activeClassName} {
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
color: ${({ theme }) => theme.text1};
|
||||
background-color: ${({ theme }) => theme.bg2};
|
||||
background-color: ${({ theme }) => theme.bg1};
|
||||
}
|
||||
|
||||
:hover,
|
||||
@ -231,7 +232,7 @@ const StyledExternalLink = styled(ExternalLink).attrs({
|
||||
font-weight: 500;
|
||||
|
||||
&.${activeClassName} {
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
color: ${({ theme }) => theme.text1};
|
||||
}
|
||||
|
||||
@ -49,12 +49,11 @@ const StyledMenuButton = styled.button`
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 38px;
|
||||
height: 40px;
|
||||
background-color: ${({ theme }) => theme.bg0};
|
||||
border: 1px solid ${({ theme }) => theme.bg0};
|
||||
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
|
||||
:hover,
|
||||
:focus {
|
||||
|
||||
@ -1,108 +1,77 @@
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { SupportedChainId } from 'constants/chains'
|
||||
import { useActiveWeb3React } from 'hooks/web3'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { ArrowDownCircle, X } from 'react-feather'
|
||||
import { useDarkModeManager, useNetworkAlertStatus } from 'state/user/hooks'
|
||||
import { useNativeCurrencyBalances } from 'state/wallet/hooks'
|
||||
import { ArrowUpRight } from 'react-feather'
|
||||
import { useDarkModeManager } from 'state/user/hooks'
|
||||
import styled from 'styled-components/macro'
|
||||
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
|
||||
import { ExternalLink, HideSmall } from 'theme'
|
||||
|
||||
import { CHAIN_INFO } from '../../constants/chains'
|
||||
import { ThemedText } from '../../theme'
|
||||
import { AutoRow } from '../Row'
|
||||
|
||||
const L2Icon = styled.img`
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
justify-self: center;
|
||||
margin-right: 14px;
|
||||
`
|
||||
const BetaTag = styled.span<{ color: string }>`
|
||||
align-items: center;
|
||||
background-color: ${({ color }) => color};
|
||||
border-radius: 6px;
|
||||
color: ${({ theme }) => theme.white};
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
left: -16px;
|
||||
position: absolute;
|
||||
transform: rotate(-15deg);
|
||||
top: -16px;
|
||||
width: 60px;
|
||||
z-index: 1;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 16px;
|
||||
`
|
||||
|
||||
export const Controls = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px 20px 20px;
|
||||
`
|
||||
const CloseIcon = styled(X)`
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
`
|
||||
|
||||
const BodyText = styled.div`
|
||||
align-items: center;
|
||||
margin: 20px 16px;
|
||||
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
|
||||
grid-template-columns: 42px 4fr;
|
||||
grid-gap: 8px;
|
||||
}
|
||||
`
|
||||
const LearnMoreLink = styled(ExternalLink)`
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 8px;
|
||||
color: ${({ theme }) => theme.text1};
|
||||
color: ${({ color }) => color};
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
:hover,
|
||||
:focus,
|
||||
:active {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
transition: background-color 150ms ease-in-out;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 8px;
|
||||
font-size: 14px;
|
||||
`
|
||||
const RootWrapper = styled.div`
|
||||
position: relative;
|
||||
margin-top: 16px;
|
||||
`
|
||||
|
||||
const SHOULD_SHOW_ALERT = {
|
||||
[SupportedChainId.OPTIMISM]: true,
|
||||
[SupportedChainId.OPTIMISTIC_KOVAN]: true,
|
||||
[SupportedChainId.ARBITRUM_ONE]: true,
|
||||
[SupportedChainId.ARBITRUM_RINKEBY]: true,
|
||||
[SupportedChainId.POLYGON]: true,
|
||||
[SupportedChainId.POLYGON_MUMBAI]: true,
|
||||
}
|
||||
|
||||
type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
|
||||
|
||||
const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
|
||||
[darkMode in 'dark' | 'light']: { [chainId in SupportedChainId]?: string }
|
||||
[darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }
|
||||
} = {
|
||||
dark: {
|
||||
[SupportedChainId.POLYGON]:
|
||||
'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.3) 0%, rgba(82, 32, 166, 0.3) 100%)',
|
||||
'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
|
||||
[SupportedChainId.POLYGON_MUMBAI]:
|
||||
'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.3) 0%, rgba(82, 32, 166, 0.3) 100%)',
|
||||
'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
|
||||
[SupportedChainId.OPTIMISM]:
|
||||
'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.5) 0%, rgba(235, 0, 255, 0.345) 96%)',
|
||||
'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)',
|
||||
[SupportedChainId.OPTIMISTIC_KOVAN]:
|
||||
'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.5) 0%, rgba(235, 0, 255, 0.345) 96%)',
|
||||
'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.04) 0%, rgba(235, 0, 255, 0.01 96%)',
|
||||
[SupportedChainId.ARBITRUM_ONE]:
|
||||
'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.3) 0%, rgba(33, 114, 229, 0.3) 100%), hsla(0, 0%, 100%, 0.1)',
|
||||
'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.01) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.05) 100%), hsla(0, 0%, 100%, 0.05)',
|
||||
[SupportedChainId.ARBITRUM_RINKEBY]:
|
||||
'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.3) 0%, rgba(33, 114, 229, 0.3) 100%), hsla(0, 0%, 100%, 0.1)',
|
||||
'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)',
|
||||
},
|
||||
light: {
|
||||
[SupportedChainId.POLYGON]:
|
||||
'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.3) 0%, rgba(167, 202, 255, 0.3) 100%)',
|
||||
'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
|
||||
[SupportedChainId.POLYGON_MUMBAI]:
|
||||
'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.3) 0%, rgba(167, 202, 255, 0.3) 100%)',
|
||||
'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
|
||||
[SupportedChainId.OPTIMISM]:
|
||||
'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.5)',
|
||||
'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
|
||||
[SupportedChainId.OPTIMISTIC_KOVAN]:
|
||||
'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.5)',
|
||||
'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
|
||||
[SupportedChainId.ARBITRUM_ONE]:
|
||||
'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
|
||||
[SupportedChainId.ARBITRUM_RINKEBY]:
|
||||
@ -110,14 +79,15 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
|
||||
},
|
||||
}
|
||||
|
||||
const ContentWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; logoUrl: string }>`
|
||||
const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boolean; logoUrl: string }>`
|
||||
background: ${({ chainId, darkMode }) => BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID[darkMode ? 'dark' : 'light'][chainId]};
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
:before {
|
||||
background-image: url(${({ logoUrl }) => logoUrl});
|
||||
background-repeat: no-repeat;
|
||||
@ -133,137 +103,43 @@ const ContentWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean
|
||||
`
|
||||
const Header = styled.h2`
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding-right: 30px;
|
||||
`
|
||||
const LinkOutCircle = styled(ArrowDownCircle)`
|
||||
margin-left: 12px;
|
||||
transform: rotate(230deg);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
`
|
||||
|
||||
const LinkOutToBridge = styled(ExternalLink)`
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 44px;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
:hover,
|
||||
:focus,
|
||||
:active {
|
||||
background-color: black;
|
||||
}
|
||||
padding: 6px 8px;
|
||||
margin-right: 12px;
|
||||
text-decoration: none !important;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
const DisclaimerText = styled(ThemedText.Body)`
|
||||
padding: 0 0.5em;
|
||||
font-size: 14px !important;
|
||||
const StyledArrowUpRight = styled(ArrowUpRight)`
|
||||
margin-left: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
`
|
||||
|
||||
const BETA_TAG_COLORS: { [chainId in SupportedChainId]?: string } = {
|
||||
[SupportedChainId.OPTIMISM]: '#ff0420',
|
||||
[SupportedChainId.OPTIMISTIC_KOVAN]: '#ff0420',
|
||||
const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
|
||||
[SupportedChainId.POLYGON]: 'rgba(130, 71, 229)',
|
||||
[SupportedChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)',
|
||||
[SupportedChainId.OPTIMISM]: '#ff3856',
|
||||
[SupportedChainId.OPTIMISTIC_KOVAN]: '#ff3856',
|
||||
[SupportedChainId.ARBITRUM_ONE]: '#0490ed',
|
||||
[SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed',
|
||||
}
|
||||
|
||||
const SHOULD_SHOW_ALERT: { [chainId in SupportedChainId]?: true } = {
|
||||
[SupportedChainId.OPTIMISM]: true,
|
||||
[SupportedChainId.OPTIMISTIC_KOVAN]: true,
|
||||
[SupportedChainId.ARBITRUM_ONE]: true,
|
||||
[SupportedChainId.ARBITRUM_RINKEBY]: true,
|
||||
[SupportedChainId.POLYGON]: true,
|
||||
[SupportedChainId.POLYGON_MUMBAI]: true,
|
||||
}
|
||||
|
||||
function shouldShowAlert(chainId: number | undefined): chainId is SupportedChainId {
|
||||
return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as SupportedChainId])
|
||||
function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {
|
||||
return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains])
|
||||
}
|
||||
|
||||
export function NetworkAlert() {
|
||||
const { account, chainId } = useActiveWeb3React()
|
||||
const [darkMode] = useDarkModeManager()
|
||||
const [alertAcknowledged, acknowledgeAlert] = useNetworkAlertStatus(chainId)
|
||||
const [locallyDismissed, setLocallyDimissed] = useState(false)
|
||||
const accounts = useMemo(() => (account ? [account] : []), [account])
|
||||
const userNativeCurrencyBalance = useNativeCurrencyBalances(accounts)?.[account ?? '']
|
||||
|
||||
const dismiss = useCallback(() => {
|
||||
setLocallyDimissed(true)
|
||||
if (!alertAcknowledged) acknowledgeAlert()
|
||||
}, [acknowledgeAlert, alertAcknowledged])
|
||||
|
||||
if (!shouldShowAlert(chainId) || alertAcknowledged || locallyDismissed) {
|
||||
return null
|
||||
}
|
||||
|
||||
const { label, logoUrl, bridge, helpCenterUrl } = CHAIN_INFO[chainId]
|
||||
const showCloseIcon = Boolean(userNativeCurrencyBalance?.greaterThan(0))
|
||||
const betaColor = BETA_TAG_COLORS[chainId]
|
||||
return (
|
||||
<RootWrapper>
|
||||
{betaColor ? <BetaTag color={betaColor}>Beta</BetaTag> : null}
|
||||
<ContentWrapper chainId={chainId} darkMode={darkMode} logoUrl={logoUrl}>
|
||||
{showCloseIcon && <CloseIcon onClick={dismiss} />}
|
||||
<BodyText>
|
||||
<AutoRow style={{ marginBottom: '1em' }}>
|
||||
<L2Icon src={logoUrl} />
|
||||
<Header>
|
||||
<Trans>Uniswap on {label}</Trans>
|
||||
</Header>
|
||||
</AutoRow>
|
||||
<DisclaimerText>
|
||||
{betaColor ? (
|
||||
<Trans>
|
||||
Please treat this as a beta release and learn about the risks before using {label}. To start trading on{' '}
|
||||
{label}, first bridge your assets from L1 to L2.
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>To start trading on {label}, first bridge your assets from L1 to L2.</Trans>
|
||||
)}
|
||||
</DisclaimerText>
|
||||
</BodyText>
|
||||
<Controls>
|
||||
{bridge ? (
|
||||
<LinkOutToBridge href={bridge}>
|
||||
<Trans>Deposit Assets</Trans>
|
||||
<LinkOutCircle />
|
||||
</LinkOutToBridge>
|
||||
) : null}
|
||||
{helpCenterUrl ? (
|
||||
<LearnMoreLink href={helpCenterUrl}>
|
||||
<Trans>Learn More</Trans>
|
||||
</LearnMoreLink>
|
||||
) : null}
|
||||
</Controls>
|
||||
</ContentWrapper>
|
||||
</RootWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const AlertRow = styled.div`
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
align-items: center;
|
||||
`
|
||||
const ButtonContainer = styled.div`
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
`
|
||||
const FlexGrow = styled.div`
|
||||
flex-grow: 1;
|
||||
`
|
||||
export function SingleRowNetworkAlert() {
|
||||
const { chainId } = useActiveWeb3React()
|
||||
const [darkMode] = useDarkModeManager()
|
||||
|
||||
@ -271,44 +147,27 @@ export function SingleRowNetworkAlert() {
|
||||
return null
|
||||
}
|
||||
|
||||
const { label, logoUrl, bridge, helpCenterUrl } = CHAIN_INFO[chainId]
|
||||
const betaColor = BETA_TAG_COLORS[chainId]
|
||||
const { label, logoUrl, bridge } = CHAIN_INFO[chainId]
|
||||
const textColor = TEXT_COLORS[chainId]
|
||||
|
||||
return (
|
||||
return bridge ? (
|
||||
<RootWrapper>
|
||||
{betaColor ? <BetaTag color={betaColor}>Beta</BetaTag> : null}
|
||||
<ContentWrapper chainId={chainId} darkMode={darkMode} logoUrl={logoUrl}>
|
||||
<AlertRow>
|
||||
<L2Icon src={logoUrl} />
|
||||
|
||||
<FlexGrow>
|
||||
<DisclaimerText>
|
||||
{betaColor ? (
|
||||
<Trans>
|
||||
Please treat this as a beta release and learn about the risks before using {label}. To start trading
|
||||
on {label}, first bridge your assets from L1 to L2.
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>To start trading on {label}, first bridge your assets from L1 to L2.</Trans>
|
||||
)}
|
||||
</DisclaimerText>
|
||||
</FlexGrow>
|
||||
|
||||
<ButtonContainer>
|
||||
{bridge ? (
|
||||
<LinkOutToBridge href={bridge}>
|
||||
<Trans>Deposit Assets</Trans>
|
||||
<LinkOutCircle />
|
||||
<BodyText color={textColor}>
|
||||
<L2Icon src={logoUrl} />
|
||||
<AutoRow>
|
||||
<Header>
|
||||
<Trans>{label} token bridge</Trans>
|
||||
</Header>
|
||||
<HideSmall>
|
||||
<Trans>Deposit tokens to the {label} network.</Trans>
|
||||
</HideSmall>
|
||||
</AutoRow>
|
||||
</BodyText>
|
||||
<StyledArrowUpRight color={textColor} />
|
||||
</LinkOutToBridge>
|
||||
) : null}
|
||||
{helpCenterUrl ? (
|
||||
<LearnMoreLink href={helpCenterUrl}>
|
||||
<Trans>Learn More</Trans>
|
||||
</LearnMoreLink>
|
||||
) : null}
|
||||
</ButtonContainer>
|
||||
</AlertRow>
|
||||
</ContentWrapper>
|
||||
</RootWrapper>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { ButtonText } from 'components/Button'
|
||||
import PositionListItem from 'components/PositionListItem'
|
||||
import React from 'react'
|
||||
import styled from 'styled-components/macro'
|
||||
@ -14,9 +15,7 @@ const DesktopHeader = styled.div`
|
||||
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
justify-content: space-between;
|
||||
& > div:last-child {
|
||||
text-align: right;
|
||||
margin-right: 12px;
|
||||
@ -36,9 +35,15 @@ const MobileHeader = styled.div`
|
||||
|
||||
type PositionListProps = React.PropsWithChildren<{
|
||||
positions: PositionDetails[]
|
||||
setUserHideClosedPositions: any
|
||||
userHideClosedPositions: boolean
|
||||
}>
|
||||
|
||||
export default function PositionList({ positions }: PositionListProps) {
|
||||
export default function PositionList({
|
||||
positions,
|
||||
setUserHideClosedPositions,
|
||||
userHideClosedPositions,
|
||||
}: PositionListProps) {
|
||||
return (
|
||||
<>
|
||||
<DesktopHeader>
|
||||
@ -46,9 +51,9 @@ export default function PositionList({ positions }: PositionListProps) {
|
||||
<Trans>Your positions</Trans>
|
||||
{positions && ' (' + positions.length + ')'}
|
||||
</div>
|
||||
<div>
|
||||
<Trans>Status</Trans>
|
||||
</div>
|
||||
<ButtonText style={{ opacity: 0.6 }} onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}>
|
||||
<Trans>Hide closed positions</Trans>
|
||||
</ButtonText>
|
||||
</DesktopHeader>
|
||||
<MobileHeader>
|
||||
<Trans>Your positions</Trans>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { Currency } from '@uniswap/sdk-core'
|
||||
import { AutoColumn } from 'components/Column'
|
||||
import CurrencyLogo from 'components/CurrencyLogo'
|
||||
import QuestionHelper from 'components/QuestionHelper'
|
||||
import { AutoRow } from 'components/Row'
|
||||
import { COMMON_BASES } from 'constants/routing'
|
||||
import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
|
||||
@ -46,12 +44,6 @@ export default function CommonBases({
|
||||
|
||||
return bases.length > 0 ? (
|
||||
<MobileWrapper gap="md">
|
||||
<AutoRow>
|
||||
<Text fontWeight={500} fontSize={14}>
|
||||
<Trans>Common bases</Trans>
|
||||
</Text>
|
||||
<QuestionHelper text={<Trans>These tokens are commonly paired with other tokens.</Trans>} />
|
||||
</AutoRow>
|
||||
<AutoRow gap="4px">
|
||||
{bases.map((currency: Currency) => {
|
||||
const isSelected = selectedCurrency?.equals(currency)
|
||||
|
||||
@ -35,9 +35,12 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 36px;
|
||||
margin-right: 2px;
|
||||
margin-left: 1px;
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
@ -82,7 +85,7 @@ const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
|
||||
`
|
||||
|
||||
const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
|
||||
background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg0)};
|
||||
background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
|
||||
border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
|
||||
color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
|
||||
font-weight: 500;
|
||||
|
||||
@ -3,7 +3,6 @@ import { TransactionResponse } from '@ethersproject/providers'
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
|
||||
import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
|
||||
import DowntimeWarning from 'components/DowntimeWarning'
|
||||
import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
|
||||
import { useCallback, useContext, useEffect, useState } from 'react'
|
||||
import { AlertTriangle } from 'react-feather'
|
||||
@ -475,7 +474,6 @@ export default function AddLiquidity({
|
||||
return (
|
||||
<>
|
||||
<ScrollablePage>
|
||||
<DowntimeWarning />
|
||||
<TransactionConfirmationModal
|
||||
isOpen={showConfirm}
|
||||
onDismiss={handleDismissConfirmation}
|
||||
|
||||
@ -5,14 +5,13 @@ import { useActiveWeb3React } from 'hooks/web3'
|
||||
import styled from 'styled-components/macro'
|
||||
import { ThemedText } from 'theme'
|
||||
|
||||
import Texture from '../../assets/images/sandtexture.webp'
|
||||
import { ExternalLink } from '../../theme'
|
||||
|
||||
const CTASection = styled.section`
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: 2fr 1.5fr;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
opacity: 0.8;
|
||||
|
||||
${({ theme }) => theme.mediaWidth.upToSmall`
|
||||
grid-template-columns: auto;
|
||||
@ -21,22 +20,15 @@ const CTASection = styled.section`
|
||||
`
|
||||
|
||||
const CTA1 = styled(ExternalLink)`
|
||||
background-color: ${({ theme }) => theme.bg2};
|
||||
background: radial-gradient(
|
||||
92.78% 103.09% at 50.06% 7.22%,
|
||||
rgba(255, 58, 212, 0.072) 0%,
|
||||
rgba(255, 255, 255, 0.042) 100%
|
||||
),
|
||||
radial-gradient(100% 97.16% at 0% 12.22%, rgba(235, 0, 255, 0.2) 0%, rgba(243, 19, 19, 0.2) 100%);
|
||||
padding: 2rem;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border: 1px solid ${({ theme }) => theme.bg3};
|
||||
|
||||
* {
|
||||
color: ${({ theme }) => theme.text1};
|
||||
@ -44,36 +36,24 @@ const CTA1 = styled(ExternalLink)`
|
||||
}
|
||||
|
||||
:hover {
|
||||
border: 1px solid ${({ theme }) => theme.bg0};
|
||||
border: 1px solid ${({ theme }) => theme.bg4};
|
||||
|
||||
text-decoration: none;
|
||||
* {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 800%;
|
||||
height: 480%;
|
||||
top: -390px;
|
||||
left: -310px;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
background: url(${Texture}) 0 0 repeat;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
`
|
||||
|
||||
const CTA2 = styled(ExternalLink)`
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32px;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border: 1px solid transparent;
|
||||
justify-content: center;
|
||||
border: 1px solid ${({ theme }) => theme.bg3};
|
||||
|
||||
* {
|
||||
color: ${({ theme }) => theme.text1};
|
||||
@ -81,42 +61,30 @@ const CTA2 = styled(ExternalLink)`
|
||||
}
|
||||
|
||||
:hover {
|
||||
border: 1px solid ${({ theme }) => theme.bg0};
|
||||
border: 1px solid ${({ theme }) => theme.bg4};
|
||||
text-decoration: none !important;
|
||||
* {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 340%;
|
||||
height: 280%;
|
||||
top: -170%;
|
||||
left: -134%;
|
||||
opacity: 0.4;
|
||||
z-index: -1;
|
||||
background: url(${Texture}) 0 0 repeat;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
`
|
||||
|
||||
const HeaderText = styled(ThemedText.Label)`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
${({ theme }) => theme.mediaWidth.upToMedium`
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
`};
|
||||
`
|
||||
|
||||
const ResponsiveColumn = styled(AutoColumn)`
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
|
||||
${({ theme }) => theme.mediaWidth.upToMedium`
|
||||
gap: 8px;
|
||||
`};
|
||||
@ -133,7 +101,7 @@ export default function CTACards() {
|
||||
<HeaderText>
|
||||
<Trans>Learn about providing liquidity</Trans> ↗
|
||||
</HeaderText>
|
||||
<ThemedText.Body fontWeight={300} style={{ alignItems: 'center', display: 'flex', maxWidth: '80%' }}>
|
||||
<ThemedText.Body fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
|
||||
<Trans>Check out our v3 LP walkthrough and migration guides.</Trans>
|
||||
</ThemedText.Body>
|
||||
</ResponsiveColumn>
|
||||
@ -143,8 +111,8 @@ export default function CTACards() {
|
||||
<HeaderText style={{ alignSelf: 'flex-start' }}>
|
||||
<Trans>Top pools</Trans> ↗
|
||||
</HeaderText>
|
||||
<ThemedText.Body fontWeight={300} style={{ alignSelf: 'flex-start' }}>
|
||||
<Trans>Explore popular pools on Uniswap Analytics.</Trans>
|
||||
<ThemedText.Body fontWeight={400} style={{ alignSelf: 'flex-start' }}>
|
||||
<Trans>Explore Uniswap Analytics.</Trans>
|
||||
</ThemedText.Body>
|
||||
</ResponsiveColumn>
|
||||
</CTA2>
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import { Trans } from '@lingui/macro'
|
||||
import { ButtonGray, ButtonOutlined, ButtonPrimary } from 'components/Button'
|
||||
import { ButtonGray, ButtonPrimary, ButtonText } from 'components/Button'
|
||||
import { AutoColumn } from 'components/Column'
|
||||
import DowntimeWarning from 'components/DowntimeWarning'
|
||||
import { FlyoutAlignment, NewMenu } from 'components/Menu'
|
||||
import { SwapPoolTabs } from 'components/NavigationTabs'
|
||||
import { SingleRowNetworkAlert } from 'components/NetworkAlert/NetworkAlert'
|
||||
import PositionList from 'components/PositionList'
|
||||
import { RowBetween, RowFixed } from 'components/Row'
|
||||
import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
|
||||
@ -109,25 +107,6 @@ const MainContentWrapper = styled.main`
|
||||
flex-direction: column;
|
||||
`
|
||||
|
||||
const ShowInactiveToggle = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: end;
|
||||
grid-column-gap: 4px;
|
||||
padding: 0 8px;
|
||||
${({ theme }) => theme.mediaWidth.upToMedium`
|
||||
margin-bottom: 12px;
|
||||
`};
|
||||
`
|
||||
|
||||
const ResponsiveRow = styled(RowFixed)`
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
${({ theme }) => theme.mediaWidth.upToMedium`
|
||||
flex-direction: column-reverse;
|
||||
`};
|
||||
`
|
||||
|
||||
function PositionsLoadingPlaceholder() {
|
||||
return (
|
||||
<LoadingRows>
|
||||
@ -242,25 +221,31 @@ export default function Pool() {
|
||||
</ButtonRow>
|
||||
</TitleRow>
|
||||
|
||||
<HideSmall>
|
||||
<SingleRowNetworkAlert />
|
||||
<DowntimeWarning />
|
||||
<CTACards />
|
||||
</HideSmall>
|
||||
|
||||
<MainContentWrapper>
|
||||
{positionsLoading ? (
|
||||
<PositionsLoadingPlaceholder />
|
||||
) : filteredPositions && filteredPositions.length > 0 ? (
|
||||
<PositionList positions={filteredPositions} />
|
||||
) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
|
||||
<PositionList
|
||||
positions={filteredPositions}
|
||||
setUserHideClosedPositions={setUserHideClosedPositions}
|
||||
userHideClosedPositions={userHideClosedPositions}
|
||||
/>
|
||||
) : (
|
||||
<NoLiquidity>
|
||||
<ThemedText.Body color={theme.text3} textAlign="center">
|
||||
<Inbox size={48} strokeWidth={1} style={{ marginBottom: '.5rem' }} />
|
||||
<div>
|
||||
<Trans>Your V3 liquidity positions will appear here.</Trans>
|
||||
<Trans>Your active V3 liquidity positions will appear here.</Trans>
|
||||
</div>
|
||||
</ThemedText.Body>
|
||||
{!showConnectAWallet && closedPositions.length > 0 && (
|
||||
<ButtonText
|
||||
style={{ marginTop: '.5rem' }}
|
||||
onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
|
||||
>
|
||||
<Trans>Show closed positions</Trans>
|
||||
</ButtonText>
|
||||
)}
|
||||
{showConnectAWallet && (
|
||||
<ButtonPrimary style={{ marginTop: '2em', padding: '8px 16px' }} onClick={toggleWalletModal}>
|
||||
<Trans>Connect a wallet</Trans>
|
||||
@ -269,61 +254,9 @@ export default function Pool() {
|
||||
</NoLiquidity>
|
||||
)}
|
||||
</MainContentWrapper>
|
||||
|
||||
<ResponsiveRow>
|
||||
{showV2Features && (
|
||||
<RowFixed>
|
||||
<ButtonOutlined
|
||||
as={Link}
|
||||
to="/pool/v2"
|
||||
id="import-pool-link"
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
margin: '0 4px',
|
||||
borderRadius: '12px',
|
||||
width: 'fit-content',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
<Layers size={14} style={{ marginRight: '8px' }} />
|
||||
|
||||
<Trans>View V2 Liquidity</Trans>
|
||||
</ButtonOutlined>
|
||||
{positions && positions.length > 0 && (
|
||||
<ButtonOutlined
|
||||
as={Link}
|
||||
to="/migrate/v2"
|
||||
id="import-pool-link"
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
margin: '0 4px',
|
||||
borderRadius: '12px',
|
||||
width: 'fit-content',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
<ChevronsRight size={16} style={{ marginRight: '8px' }} />
|
||||
|
||||
<Trans>Migrate Liquidity</Trans>
|
||||
</ButtonOutlined>
|
||||
)}
|
||||
</RowFixed>
|
||||
)}
|
||||
{closedPositions.length > 0 ? (
|
||||
<ShowInactiveToggle>
|
||||
<label>
|
||||
<ThemedText.Body onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}>
|
||||
<Trans>Show closed positions</Trans>
|
||||
</ThemedText.Body>
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
|
||||
checked={!userHideClosedPositions}
|
||||
/>
|
||||
</ShowInactiveToggle>
|
||||
) : null}
|
||||
</ResponsiveRow>
|
||||
<HideSmall>
|
||||
<CTACards />
|
||||
</HideSmall>
|
||||
</AutoColumn>
|
||||
</AutoColumn>
|
||||
</PageWrapper>
|
||||
|
||||
@ -56,7 +56,8 @@ import { warningSeverity } from '../../utils/prices'
|
||||
import AppBody from '../AppBody'
|
||||
|
||||
const AlertWrapper = styled.div`
|
||||
max-width: 480px;
|
||||
max-width: 460px;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export default function Swap({ history }: RouteComponentProps) {
|
||||
@ -378,9 +379,6 @@ export default function Swap({ history }: RouteComponentProps) {
|
||||
onConfirm={handleConfirmTokenWarning}
|
||||
onDismiss={handleDismissTokenWarning}
|
||||
/>
|
||||
<AlertWrapper>
|
||||
<NetworkAlert />
|
||||
</AlertWrapper>
|
||||
<AppBody>
|
||||
<SwapHeader allowedSlippage={allowedSlippage} />
|
||||
<Wrapper id="swap-page">
|
||||
@ -618,6 +616,9 @@ export default function Swap({ history }: RouteComponentProps) {
|
||||
</AutoColumn>
|
||||
</Wrapper>
|
||||
</AppBody>
|
||||
<AlertWrapper>
|
||||
<NetworkAlert />
|
||||
</AlertWrapper>
|
||||
<SwitchLocaleLink />
|
||||
{!swapIsUnsupported ? null : (
|
||||
<UnsupportedCurrencyFooter
|
||||
|
||||
@ -16,7 +16,6 @@ export interface SerializedPair {
|
||||
|
||||
export const updateMatchesDarkMode = createAction<{ matchesDarkMode: boolean }>('user/updateMatchesDarkMode')
|
||||
export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
|
||||
export const acknowledgeNetworkAlert = createAction<{ chainId: number }>('user/acknowledgeNetworkAlert')
|
||||
export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
|
||||
export const updateUserLocale = createAction<{ userLocale: SupportedLocale }>('user/updateUserLocale')
|
||||
export const updateUserClientSideRouter = createAction<{ userClientSideRouter: boolean }>(
|
||||
|
||||
@ -14,7 +14,6 @@ import { useAllTokens } from '../../hooks/Tokens'
|
||||
import { useActiveWeb3React } from '../../hooks/web3'
|
||||
import { AppState } from '../index'
|
||||
import {
|
||||
acknowledgeNetworkAlert,
|
||||
addSerializedPair,
|
||||
addSerializedToken,
|
||||
removeSerializedToken,
|
||||
@ -337,14 +336,3 @@ export function useTrackedTokenPairs(): [Token, Token][] {
|
||||
return Object.keys(keyed).map((key) => keyed[key])
|
||||
}, [combinedList])
|
||||
}
|
||||
|
||||
export function useNetworkAlertStatus(chainId: number | undefined): [boolean, () => void] {
|
||||
const dispatch = useAppDispatch()
|
||||
const alertAcknowledged = useAppSelector(({ user }) => user.networkAlertsAcknowledged)
|
||||
const acknowledgeAlert = useCallback(() => {
|
||||
if (typeof chainId !== 'number') return
|
||||
dispatch(acknowledgeNetworkAlert({ chainId }))
|
||||
}, [chainId, dispatch])
|
||||
|
||||
return [typeof chainId === 'number' ? alertAcknowledged[chainId] ?? false : false, acknowledgeAlert]
|
||||
}
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { createReducer } from '@reduxjs/toolkit'
|
||||
import { SupportedLocale } from 'constants/locales'
|
||||
|
||||
import { SupportedChainId } from '../../constants/chains'
|
||||
import { DEFAULT_DEADLINE_FROM_NOW } from '../../constants/misc'
|
||||
import { updateVersion } from '../global/actions'
|
||||
import {
|
||||
acknowledgeNetworkAlert,
|
||||
addSerializedPair,
|
||||
addSerializedToken,
|
||||
removeSerializedPair,
|
||||
@ -25,11 +23,6 @@ import {
|
||||
const currentTimestamp = () => new Date().getTime()
|
||||
|
||||
export interface UserState {
|
||||
// replaces the above two fields
|
||||
networkAlertsAcknowledged: {
|
||||
[chainId: number]: true
|
||||
}
|
||||
|
||||
// the timestamp of the last updateVersion action
|
||||
lastUpdateVersionTimestamp?: number
|
||||
|
||||
@ -75,7 +68,6 @@ function pairKey(token0Address: string, token1Address: string) {
|
||||
|
||||
export const initialState: UserState = {
|
||||
matchesDarkMode: false,
|
||||
networkAlertsAcknowledged: {},
|
||||
userDarkMode: null,
|
||||
userExpertMode: false,
|
||||
userLocale: null,
|
||||
@ -123,20 +115,8 @@ export default createReducer(initialState, (builder) =>
|
||||
state.userDeadline = DEFAULT_DEADLINE_FROM_NOW
|
||||
}
|
||||
|
||||
state.networkAlertsAcknowledged = state.networkAlertsAcknowledged ?? {}
|
||||
if ((state as unknown as { arbitrumAlphaAcknowledged: boolean }).arbitrumAlphaAcknowledged) {
|
||||
state.networkAlertsAcknowledged[SupportedChainId.ARBITRUM_ONE] = true
|
||||
}
|
||||
if ((state as unknown as { optimismAlphaAcknowledged: boolean }).optimismAlphaAcknowledged) {
|
||||
state.networkAlertsAcknowledged[SupportedChainId.OPTIMISM] = true
|
||||
}
|
||||
|
||||
state.lastUpdateVersionTimestamp = currentTimestamp()
|
||||
})
|
||||
.addCase(acknowledgeNetworkAlert, (state, action) => {
|
||||
state.networkAlertsAcknowledged = state.networkAlertsAcknowledged ?? {}
|
||||
state.networkAlertsAcknowledged[action.payload.chainId] = true
|
||||
})
|
||||
.addCase(updateUserDarkMode, (state, action) => {
|
||||
state.userDarkMode = action.payload.userDarkMode
|
||||
state.timestamp = currentTimestamp()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user