Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix network alert (only for gchain for now) #505

Merged
merged 5 commits into from
May 4, 2022
Merged

Fix network alert (only for gchain for now) #505

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
add4b29
Dropping gradients for gchain network alert component
alfetopito May 3, 2022
b70d140
Added text decoration underline on network alert hover
alfetopito May 4, 2022
40f74c8
Updating background color on hover as well
alfetopito May 4, 2022
ad489fc
Do not show network alert if there's no active network connected
alfetopito May 4, 2022
f0a4a43
Underline only when text is hovered and changing text color to primary1
alfetopito May 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 32 additions & 22 deletions src/custom/components/NetworkAlert/NetworkAlert/NetworkAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import { Trans } from '@lingui/macro'
import { CHAIN_INFO } from 'constants/chainInfo'
import { SupportedChainId } from 'constants/chains'
import useActiveWeb3React from 'hooks/useActiveWeb3React'
// import useActiveWeb3React from 'hooks/useActiveWeb3React'
import { ArrowUpRight } from 'react-feather'
import { useDarkModeManager } from '@src/state/user/hooks'
import styled from 'styled-components/macro'
import { ExternalLink, HideSmall } from 'theme'

import { AutoRow } from 'components/Row'

// mod imports
import useTheme from 'hooks/useTheme'
import { useWeb3React } from 'web3-react-core'

const L2Icon = styled.img`
width: 24px;
height: 24px;
Expand All @@ -29,6 +33,12 @@ const BodyText = styled.div`
justify-content: flex-start;
margin: 8px;
font-size: 14px;

// mod
:hover {
text-decoration: underline;
color: ${({ theme }) => theme.primary1};
}
`
const RootWrapper = styled.div`
position: relative;
Expand All @@ -47,11 +57,11 @@ const SHOULD_SHOW_ALERT = {

type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT

const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
/* const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
[darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }
} = {
dark: {
/* [SupportedChainId.POLYGON]:
[SupportedChainId.POLYGON]:
'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.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
Expand All @@ -62,13 +72,10 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
[SupportedChainId.ARBITRUM_ONE]:
'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.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)', */
// TODO: adjust colors
[SupportedChainId.XDAI]:
'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
'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]:
[SupportedChainId.POLYGON]:
'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.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
Expand All @@ -79,15 +86,12 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
[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]:
'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)', */
// TODO: adjust colors
[SupportedChainId.XDAI]:
'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%)',
'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)',
},
}
} */

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]};
background: ${({ theme }) => theme.bg1};
border-radius: 20px;
display: flex;
flex-direction: row;
Expand All @@ -107,6 +111,11 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole
width: 300px;
z-index: -1;
}

// mod
:hover {
background-color: ${({ theme }) => theme.bg7};
}
`
const Header = styled.h2`
font-weight: 600;
Expand All @@ -133,30 +142,31 @@ const StyledArrowUpRight = styled(ArrowUpRight)`
height: 24px;
`

const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
/* [SupportedChainId.POLYGON]: 'rgba(130, 71, 229)',
/* 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', */
[SupportedChainId.XDAI]: '#0490ed', // TODO: adjust colors
}
[SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed',
} */

function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {
return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains])
}

export function NetworkAlert() {
const { chainId } = useActiveWeb3React()
const { active, chainId } = useWeb3React() // mod
const [darkMode] = useDarkModeManager()

if (!shouldShowAlert(chainId)) {
const theme = useTheme() // mod

if (!shouldShowAlert(chainId) || !active) {
return null
}

const { label, logoUrl, bridge } = CHAIN_INFO[chainId]
const textColor = TEXT_COLORS[chainId]
const textColor = /*TEXT_COLORS[chainId] mod */ theme.text1

return bridge ? (
<RootWrapper>
Expand Down