- 
+
diff --git a/src/components/DoubleLogo/index.tsx b/src/components/DoubleLogo/index.tsx
index 73a8ca7cee..6b7ef9dfc8 100644
--- a/src/components/DoubleLogo/index.tsx
+++ b/src/components/DoubleLogo/index.tsx
@@ -35,12 +35,12 @@ export default function DoubleCurrencyLogo({
+
+
Ethereum
+
Optimism
@@ -301,14 +358,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 56 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -322,12 +379,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 56 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -339,18 +390,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 56 1`] = `
class="c0"
data-testid="BNB Chain-selector"
>
- 
+
BNB Chain
@@ -386,14 +462,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 137 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -407,12 +483,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 137 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -424,18 +494,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 137 1`] = `
class="c0"
data-testid="Polygon-selector"
>
- 
+
Polygon
@@ -471,14 +566,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 420 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -492,12 +587,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 420 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -509,18 +598,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 420 1`] = `
class="c0"
data-testid="Optimism Görli-selector"
>
-
+
Optimism Görli
@@ -556,14 +670,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 8453 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -577,12 +691,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 8453 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -594,18 +702,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 8453 1`] = `
class="c0"
data-testid="Base-selector"
>
- 
+
Base
@@ -641,14 +774,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 42161 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -662,12 +795,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 42161 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -679,18 +806,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 42161 1`] = `
class="c0"
data-testid="Arbitrum-selector"
>
-
+
Arbitrum
@@ -726,14 +878,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 42220 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -747,12 +899,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 42220 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -764,18 +910,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 42220 1`] = `
class="c0"
data-testid="Celo-selector"
>
- 
+
Celo
@@ -811,14 +982,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 43114 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -832,12 +1003,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 43114 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -849,18 +1014,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 43114 1`] = `
class="c0"
data-testid="Avalanche-selector"
>
- 
+
Avalanche
@@ -896,14 +1086,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 44787 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -917,12 +1107,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 44787 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -934,18 +1118,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 44787 1`] = `
class="c0"
data-testid="Celo Alfajores-selector"
>
-
+
Celo Alfajores
@@ -981,14 +1190,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 80001 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -1002,12 +1211,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 80001 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -1019,18 +1222,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 80001 1`] = `
class="c0"
data-testid="Polygon Mumbai-selector"
>
-
+
Polygon Mumbai
@@ -1128,14 +1356,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 421613 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -1149,12 +1377,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 421613 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -1166,18 +1388,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 421613 1`] = `
class="c0"
data-testid="Arbitrum Goerli-selector"
>
-
+
Arbitrum Goerli
@@ -1213,14 +1460,14 @@ exports[`ChainSelectorRow should match snapshot for chainId 11155111 1`] = `
background-color: #22222212;
}
-.c2 {
+.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
-.c3 {
+.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
@@ -1234,12 +1481,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 11155111 1`] = `
width: 20px;
}
-.c1 {
- height: 20px;
- width: 20px;
- margin-right: 12px;
-}
-
@media only screen and (max-width:640px) {
.c0 {
width: 100%;
@@ -1251,18 +1492,43 @@ exports[`ChainSelectorRow should match snapshot for chainId 11155111 1`] = `
class="c0"
data-testid="Sepolia-selector"
>
-
+
Sepolia
diff --git a/src/components/NetworkAlert/NetworkAlert.tsx b/src/components/NetworkAlert/NetworkAlert.tsx
index e2a7cfe931..dca61014a4 100644
--- a/src/components/NetworkAlert/NetworkAlert.tsx
+++ b/src/components/NetworkAlert/NetworkAlert.tsx
@@ -1,200 +1,75 @@
import { Trans } from '@lingui/macro'
-import { ChainId } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
+import { getChainUI } from 'components/Logo/ChainLogo'
+import { RowBetween } from 'components/Row'
import { getChainInfo } from 'constants/chainInfo'
+import { isSupportedChain } from 'constants/chains'
import { ArrowUpRight } from 'react-feather'
import styled from 'styled-components'
-import { colors } from 'theme/colors'
-import { ExternalLink, HideSmall } from 'theme/components'
-import { useDarkModeManager } from 'theme/components/ThemeToggle'
+import { ExternalLink, HideSmall, ThemedText } from 'theme/components'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
import Column from '../Column'
-const L2Icon = styled.img`
- width: 24px;
- height: 24px;
- margin-right: 16px;
-`
-
-const BodyText = styled.div`
+const BridgeLink = styled(ExternalLink)<{ bgColor: string }>`
color: ${({ color }) => color};
- display: flex;
- align-items: center;
- justify-content: flex-start;
- margin: 8px;
- font-size: 14px;
- line-height: 20px;
-`
-const RootWrapper = styled.div`
- margin-top: 16px;
-`
-
-const SHOULD_SHOW_ALERT = {
- [ChainId.OPTIMISM]: true,
- [ChainId.OPTIMISM_GOERLI]: true,
- [ChainId.ARBITRUM_ONE]: true,
- [ChainId.ARBITRUM_GOERLI]: true,
- [ChainId.POLYGON]: true,
- [ChainId.POLYGON_MUMBAI]: true,
- [ChainId.CELO]: true,
- [ChainId.CELO_ALFAJORES]: true,
- [ChainId.BNB]: true,
- [ChainId.AVALANCHE]: true,
- [ChainId.BASE]: true,
-}
-
-type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
-
-const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
- [darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }
-} = {
- dark: {
- [ChainId.POLYGON]:
- 'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
- [ChainId.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%)',
- [ChainId.CELO]:
- 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
- [ChainId.CELO_ALFAJORES]:
- 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
- [ChainId.BNB]:
- 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(240, 185, 11, 0.16) 0%, rgba(255, 168, 0, 0.16) 100%)',
- [ChainId.OPTIMISM]:
- '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%)',
- [ChainId.OPTIMISM_GOERLI]:
- '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%)',
- [ChainId.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)',
- [ChainId.ARBITRUM_GOERLI]:
- '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)',
- [ChainId.AVALANCHE]:
- '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%)',
- [ChainId.BASE]:
- 'radial-gradient(100% 100% at 50% 0%, rgba(10, 41, 75, 0.7) 0%, rgba(0, 82, 255, .1) 40%, rgba(0, 82, 255, 0) 100%), rgb(13, 14, 14);',
- },
- light: {
- [ChainId.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%)',
- [ChainId.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%)',
- [ChainId.CELO]:
- 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
- [ChainId.CELO_ALFAJORES]:
- 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
- [ChainId.BNB]:
- 'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(240, 185, 11, 0.16) 0%, rgba(255, 168, 0, 0.16) 100%)',
- [ChainId.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.1)',
- [ChainId.OPTIMISM_GOERLI]:
- '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)',
- [ChainId.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)',
- [ChainId.ARBITRUM_GOERLI]:
- '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)',
- [ChainId.AVALANCHE]:
- '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)',
- [ChainId.BASE]:
- 'radial-gradient(100% 100% at 50% 0%, rgba(0, 82, 255, 0.20) 0%, rgba(0, 82, 255, 0.08) 40.0%, rgba(252, 255, 82, 0.00) 100%), rgb(255, 255, 255)',
- },
-}
-
-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: row;
- overflow: hidden;
- 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;
- pointer-events: none;
- }
-`
-const Header = styled.h2`
- font-weight: 535;
- font-size: 16px;
- margin: 0;
-`
-
-const LinkOutToBridge = styled(ExternalLink)`
+ background: ${({ bgColor }) => bgColor};
align-items: center;
border-radius: 8px;
color: white;
display: flex;
font-size: 16px;
justify-content: space-between;
- padding: 6px 8px;
+ padding: 12px 18px 12px 12px;
text-decoration: none !important;
width: 100%;
+
+ border-radius: 20px;
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+
+ margin-top: 16px;
`
-const StyledArrowUpRight = styled(ArrowUpRight)`
- margin-left: 12px;
- width: 24px;
- height: 24px;
+const TitleText = styled(ThemedText.BodyPrimary)<{ $color: string }>`
+ font-weight: 535;
+ color: ${({ $color }) => $color};
`
-const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
- [ChainId.POLYGON]: 'rgba(130, 71, 229)',
- [ChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)',
- [ChainId.CELO]: 'rgba(53, 178, 97)',
- [ChainId.CELO_ALFAJORES]: 'rgba(53, 178, 97)',
- [ChainId.OPTIMISM]: '#ff3856',
- [ChainId.OPTIMISM_GOERLI]: '#ff3856',
- [ChainId.ARBITRUM_ONE]: '#0490ed',
- [ChainId.BNB]: colors.gold400,
- [ChainId.ARBITRUM_GOERLI]: '#0490ed',
- [ChainId.AVALANCHE]: '#ff3856',
- [ChainId.BASE]: colors.networkBase,
-}
-
-function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {
- return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains])
-}
+const SubtitleText = styled(ThemedText.BodySmall)<{ $color: string }>`
+ line-height: 20px;
+ color: ${({ $color }) => $color};
+`
export function NetworkAlert() {
const { chainId } = useWeb3React()
- const [darkMode] = useDarkModeManager()
+ const darkMode = useIsDarkMode()
- if (!shouldShowAlert(chainId)) {
- return null
- }
+ if (!chainId || !isSupportedChain(chainId)) return null
- const chainInfo = getChainInfo(chainId)
-
- if (!chainInfo) return null
-
- const { label, logoUrl, bridge } = chainInfo
- const textColor = TEXT_COLORS[chainId]
+ const { Symbol: ChainSymbol, bgColor, textColor } = getChainUI(chainId, darkMode)
+ const { label, bridge } = getChainInfo(chainId)
return bridge ? (
-
-
- 
-
-
-
USD Coin
USDC
@@ -404,22 +367,22 @@ exports[`LoadedRow.tsx renders a row 1`] = `
$1.00
0.00%
@@ -441,15 +404,15 @@ exports[`LoadedRow.tsx renders a row 1`] = `
0.00%
`
padding: ${({ inline }) => (inline ? '20px 0' : '32px 0;')};
`
-const StyledLogo = styled.img`
- height: 16px;
- width: 16px;
- margin-left: 6px;
-`
-
const ConfirmationModalContentWrapper = styled(AutoColumn)`
padding-bottom: 12px;
`
@@ -231,8 +226,8 @@ function L2Content({
{!inline && (
-
-
+
diff --git a/src/components/swap/ConfirmSwapModal.tsx b/src/components/swap/ConfirmSwapModal.tsx
index d8ab028cbf..98796538d2 100644
--- a/src/components/swap/ConfirmSwapModal.tsx
+++ b/src/components/swap/ConfirmSwapModal.tsx
@@ -9,6 +9,7 @@ import { Currency, Percent } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
import { sendAnalyticsEvent, Trace, useTrace } from 'analytics'
import Badge from 'components/Badge'
+import { ChainLogo } from 'components/Logo/ChainLogo'
import Modal, { MODAL_TRANSITION_DURATION } from 'components/Modal'
import { RowFixed } from 'components/Row'
import { getChainInfo } from 'constants/chainInfo'
@@ -55,11 +56,6 @@ const StyledL2Badge = styled(Badge)`
padding: 6px 8px;
`
-const StyledL2Logo = styled.img`
- height: 16px;
- width: 16px;
-`
-
function isInApprovalPhase(confirmModalState: ConfirmModalState) {
return (
confirmModalState === ConfirmModalState.RESETTING_TOKEN_ALLOWANCE ||
@@ -412,7 +408,7 @@ export default function ConfirmSwapModal({
return (
- {info.label}
diff --git a/src/components/swap/SwapLineItem.tsx b/src/components/swap/SwapLineItem.tsx
index 397975b91a..a4ad6400a5 100644
--- a/src/components/swap/SwapLineItem.tsx
+++ b/src/components/swap/SwapLineItem.tsx
@@ -1,10 +1,10 @@
import { t, Trans } from '@lingui/macro'
import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
import { LoadingRow } from 'components/Loader/styled'
+import { ChainLogo } from 'components/Logo/ChainLogo'
import RouterLabel from 'components/RouterLabel'
import Row, { RowBetween } from 'components/Row'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
-import { getChainInfo } from 'constants/chainInfo'
import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
import useHoverProps from 'hooks/useHoverProps'
import { useIsMobile } from 'nft/hooks'
@@ -128,7 +128,7 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
if (isPreview) return
- ?.logoUrl})
+
)
diff --git a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
index 0391cdb5f2..c838b3cdee 100644
--- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
@@ -399,12 +399,35 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
diff --git a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
index 05b2fcf01b..c1f7d1105b 100644
--- a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
@@ -198,12 +198,35 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
+ >
+
-
+ >
+
+ Ethereum logo
+
+
diff --git a/src/constants/chainInfo.ts b/src/constants/chainInfo.ts
index 9fe2a175e5..6166348dfc 100644
--- a/src/constants/chainInfo.ts
+++ b/src/constants/chainInfo.ts
@@ -1,20 +1,4 @@
import { ChainId } from '@uniswap/sdk-core'
-import bnbCircleLogoUrl from 'assets/images/bnbCircle.svg'
-import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
-import polygonCircleLogoUrl from 'assets/images/polygonCircle.png'
-import { default as arbitrumCircleLogoUrl, default as arbitrumLogoUrl } from 'assets/svg/arbitrum_logo.svg'
-import avaxLogo from 'assets/svg/avax_logo.svg'
-import avaxSquareLogo from 'assets/svg/avax_square_logo.svg'
-import baseLogo from 'assets/svg/base_logo.svg'
-import baseSquareLogo from 'assets/svg/base_square_logo.svg'
-import bnbSquareLogoUrl from 'assets/svg/bnb_square_logo.svg'
-import bnbLogo from 'assets/svg/bnb-logo.svg'
-import celoLogo from 'assets/svg/celo_logo.svg'
-import celoSquareLogoUrl from 'assets/svg/celo_square_logo.svg'
-import optimismSquareLogoUrl from 'assets/svg/optimism_square_logo.svg'
-import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
-import polygonSquareLogoUrl from 'assets/svg/polygon_square_logo.svg'
-import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
import ms from 'ms'
import { darkTheme } from 'theme/colors'
@@ -46,9 +30,6 @@ interface BaseChainInfo {
readonly bridge?: string
readonly explorer: string
readonly infoLink: string
- readonly logoUrl: string
- readonly circleLogoUrl?: string
- readonly squareLogoUrl?: string
readonly label: string
readonly helpCenterUrl?: string
readonly nativeCurrency: {
@@ -83,7 +64,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://etherscan.io/',
infoLink: 'https://info.uniswap.org/#/',
label: 'Ethereum',
- logoUrl: ethereumLogoUrl,
nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
color: darkTheme.chain_1,
},
@@ -93,7 +73,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://goerli.etherscan.io/',
infoLink: 'https://info.uniswap.org/#/',
label: 'Görli',
- logoUrl: ethereumLogoUrl,
nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 },
color: darkTheme.chain_5,
},
@@ -103,7 +82,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://sepolia.etherscan.io/',
infoLink: 'https://info.uniswap.org/#/',
label: 'Sepolia',
- logoUrl: ethereumLogoUrl,
nativeCurrency: { name: 'Sepolia Ether', symbol: 'SepoliaETH', decimals: 18 },
color: darkTheme.chain_5,
},
@@ -116,10 +94,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://optimistic.etherscan.io/',
infoLink: 'https://info.uniswap.org/#/optimism/',
label: 'Optimism',
- logoUrl: optimismLogoUrl,
- // Optimism perfers same icon for both
- circleLogoUrl: optimismLogoUrl,
- squareLogoUrl: optimismSquareLogoUrl,
statusPage: 'https://optimism.io/status',
helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -135,7 +109,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://goerli-optimism.etherscan.io/',
infoLink: 'https://info.uniswap.org/#/optimism/',
label: 'Optimism Görli',
- logoUrl: optimismLogoUrl,
statusPage: 'https://optimism.io/status',
helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
nativeCurrency: { name: 'Optimism Goerli Ether', symbol: 'görOpETH', decimals: 18 },
@@ -149,8 +122,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://arbiscan.io/',
infoLink: 'https://info.uniswap.org/#/arbitrum',
label: 'Arbitrum',
- logoUrl: arbitrumLogoUrl,
- circleLogoUrl: arbitrumCircleLogoUrl,
defaultListUrl: ARBITRUM_LIST,
helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -165,7 +136,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://goerli.arbiscan.io/',
infoLink: 'https://info.uniswap.org/#/arbitrum/',
label: 'Arbitrum Goerli',
- logoUrl: arbitrumLogoUrl,
defaultListUrl: ARBITRUM_LIST, // TODO: use arbitrum goerli token list
helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
nativeCurrency: { name: 'Goerli Arbitrum Ether', symbol: 'goerliArbETH', decimals: 18 },
@@ -179,9 +149,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://polygonscan.com/',
infoLink: 'https://info.uniswap.org/#/polygon/',
label: 'Polygon',
- logoUrl: polygonMaticLogo,
- circleLogoUrl: polygonCircleLogoUrl,
- squareLogoUrl: polygonSquareLogoUrl,
nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
color: darkTheme.chain_137,
backgroundColor: darkTheme.chain_137_background,
@@ -194,7 +161,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://mumbai.polygonscan.com/',
infoLink: 'https://info.uniswap.org/#/polygon/',
label: 'Polygon Mumbai',
- logoUrl: polygonMaticLogo,
nativeCurrency: { name: 'Polygon Mumbai Matic', symbol: 'mMATIC', decimals: 18 },
},
[ChainId.CELO]: {
@@ -205,9 +171,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://celoscan.io/',
infoLink: 'https://info.uniswap.org/#/celo/',
label: 'Celo',
- logoUrl: celoLogo,
- circleLogoUrl: celoLogo,
- squareLogoUrl: celoSquareLogoUrl,
nativeCurrency: { name: 'Celo', symbol: 'CELO', decimals: 18 },
defaultListUrl: CELO_LIST,
},
@@ -219,7 +182,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://alfajores-blockscout.celo-testnet.org/',
infoLink: 'https://info.uniswap.org/#/celo/',
label: 'Celo Alfajores',
- logoUrl: celoLogo,
nativeCurrency: { name: 'Celo', symbol: 'CELO', decimals: 18 },
defaultListUrl: CELO_LIST,
},
@@ -231,9 +193,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://bscscan.com/',
infoLink: 'https://info.uniswap.org/#/bnb/',
label: 'BNB Chain',
- logoUrl: bnbLogo,
- circleLogoUrl: bnbCircleLogoUrl,
- squareLogoUrl: bnbSquareLogoUrl,
nativeCurrency: { name: 'BNB', symbol: 'BNB', decimals: 18 },
defaultListUrl: PLASMA_BNB_LIST,
color: darkTheme.chain_56,
@@ -247,9 +206,6 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://snowtrace.io/',
infoLink: 'https://info.uniswap.org/#/avax/', // TODO(WEB-2336): Add avax support to info site
label: 'Avalanche',
- logoUrl: avaxLogo,
- circleLogoUrl: avaxLogo,
- squareLogoUrl: avaxSquareLogo,
nativeCurrency: { name: 'AVAX', symbol: 'AVAX', decimals: 18 },
defaultListUrl: AVALANCHE_LIST,
color: darkTheme.chain_43114,
@@ -264,10 +220,7 @@ const CHAIN_INFO: ChainInfoMap = {
explorer: 'https://basescan.org/',
infoLink: 'https://info.uniswap.org/#/base/',
label: 'Base',
- logoUrl: baseLogo,
statusPage: 'https://status.base.org/',
- circleLogoUrl: baseLogo,
- squareLogoUrl: baseSquareLogo,
nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
color: darkTheme.chain_84531,
},
diff --git a/src/graphql/data/util.tsx b/src/graphql/data/util.tsx
index 65ce6f2d8b..d5088efbec 100644
--- a/src/graphql/data/util.tsx
+++ b/src/graphql/data/util.tsx
@@ -117,7 +117,8 @@ export function gqlToCurrency(token: {
}): Currency | undefined {
const chainId = supportedChainIdFromGQLChain(token.chain)
if (!chainId) return undefined
- if (token.standard === TokenStandard.Native || !token.address) return nativeOnChain(chainId)
+ if (token.standard === TokenStandard.Native || token.address === 'NATIVE' || !token.address)
+ return nativeOnChain(chainId)
else return new Token(chainId, token.address, token.decimals ?? 18, token.symbol, token.name)
}
diff --git a/src/pages/PoolDetails/PoolDetailsHeader.tsx b/src/pages/PoolDetails/PoolDetailsHeader.tsx
index 158134ad53..0588490b17 100644
--- a/src/pages/PoolDetails/PoolDetailsHeader.tsx
+++ b/src/pages/PoolDetails/PoolDetailsHeader.tsx
@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
import { ChainId, Currency } from '@uniswap/sdk-core'
import blankTokenUrl from 'assets/svg/blank_token.svg'
import Column from 'components/Column'
+import { ChainLogo } from 'components/Logo/ChainLogo'
import Row from 'components/Row'
-import { getChainInfo } from 'constants/chainInfo'
import { chainIdToBackendName } from 'graphql/data/util'
import { useCurrency } from 'hooks/Tokens'
import useTokenLogoSource from 'hooks/useAssetLogoSource'
@@ -116,8 +116,8 @@ function DoubleCurrencyAndChainLogo({
)
}
-const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
- background-color: ${({ theme, hasSquareLogo }) => (hasSquareLogo ? theme.surface2 : theme.neutral1)};
+const L2LogoContainer = styled.div`
+ background-color: ${({ theme }) => theme.surface2};
border-radius: 2px;
height: 12px;
left: 60%;
@@ -130,29 +130,12 @@ const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
justify-content: center;
`
-const StyledChainLogo = styled.img`
- height: 12px;
- width: 12px;
-`
-
-const SquareChainLogo = styled.img`
- height: 100%;
- width: 100%;
-`
-
function SquareL2Logo({ chainId }: { chainId: ChainId }) {
if (chainId === ChainId.MAINNET) return null
- const { squareLogoUrl, logoUrl } = getChainInfo(chainId)
-
- const chainLogo = squareLogoUrl ?? logoUrl
return (
-
+ >
+