Legal & Privacy
diff --git a/src/components/ModalViews/index.tsx b/src/components/ModalViews/index.tsx
index 2ed6899e5e..98bd623d4d 100644
--- a/src/components/ModalViews/index.tsx
+++ b/src/components/ModalViews/index.tsx
@@ -1,11 +1,11 @@
import { Trans } from '@lingui/macro'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
import { useContext } from 'react'
import { ArrowUpCircle } from 'react-feather'
import styled, { ThemeContext } from 'styled-components/macro'
import Circle from '../../assets/images/blue-loader.svg'
-import { useActiveWeb3React } from '../../hooks/web3'
-import { CloseIcon, CustomLightSpinner, TYPE } from '../../theme'
+import { CloseIcon, CustomLightSpinner, ThemedText } from '../../theme'
import { ExternalLink } from '../../theme/components'
import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
import { AutoColumn, ColumnCenter } from '../Column'
@@ -32,9 +32,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
{children}
-
+
Confirm this transaction in your wallet
-
+
)
@@ -68,9 +68,9 @@ export function SubmittedView({
href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
style={{ marginLeft: '4px' }}
>
-
+
View transaction on Explorer
-
+
)}
diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx
index 4d8de801a2..1a09322322 100644
--- a/src/components/NavigationTabs/index.tsx
+++ b/src/components/NavigationTabs/index.tsx
@@ -10,7 +10,7 @@ import { useAppDispatch } from 'state/hooks'
import { resetMintState } from 'state/mint/actions'
import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
import styled from 'styled-components/macro'
-import { TYPE } from 'theme'
+import { ThemedText } from 'theme'
import Row, { RowBetween } from '../Row'
import SettingsTab from '../Settings'
@@ -136,7 +136,7 @@ export function AddRemoveTabs({
>
-
Remove Liquidity
)}
-
+
{children}
diff --git a/src/components/NetworkAlert/AddLiquidityNetworkAlert.tsx b/src/components/NetworkAlert/AddLiquidityNetworkAlert.tsx
deleted file mode 100644
index 02c3854fd5..0000000000
--- a/src/components/NetworkAlert/AddLiquidityNetworkAlert.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Trans } from '@lingui/macro'
-import {
- ArbitrumWrapperBackgroundDarkMode,
- ArbitrumWrapperBackgroundLightMode,
- OptimismWrapperBackgroundDarkMode,
- OptimismWrapperBackgroundLightMode,
-} from 'components/NetworkAlert/NetworkAlert'
-import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from '@src/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'
-import { ReadMoreLink } from './styles'
-
-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 isOptimism = [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
- const depositUrl = isOptimism ? `${info.bridge}?chainId=1` : info.bridge
- const readMoreLink = isOptimism
- ? 'https://help.uniswap.org/en/articles/5392809-how-to-deposit-tokens-to-optimism'
- : 'https://help.uniswap.org/en/articles/5538618-how-to-deposit-tokens-to-arbitrum'
- return (
-
-
-
- This is an alpha release of Uniswap on the {info.label} network.
- You must bridge L1 assets to the network to use them.{' '}
-
- Read more
-
-
-
- Deposit to {info.label}
-
-
-
- )
-}
diff --git a/src/components/NetworkAlert/MinimalNetworkAlert.tsx b/src/components/NetworkAlert/MinimalNetworkAlert.tsx
deleted file mode 100644
index 443ff2a7c9..0000000000
--- a/src/components/NetworkAlert/MinimalNetworkAlert.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Trans } from '@lingui/macro'
-import {
- ArbitrumWrapperBackgroundDarkMode,
- ArbitrumWrapperBackgroundLightMode,
- OptimismWrapperBackgroundDarkMode,
- OptimismWrapperBackgroundLightMode,
-} from 'components/NetworkAlert/NetworkAlert'
-import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId, SupportedL2ChainId } from '@src/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'
-import { ReadMoreLink } from './styles'
-
-const L2Icon = styled.img`
- display: none;
- height: 40px;
- margin: auto 20px auto 4px;
- width: 40px;
- @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}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.upToSmall}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.upToSmall}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 8px;
- text-decoration: none;
- width: auto;
- :hover,
- :focus,
- :active {
- background-color: black;
- }
- @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
- margin: auto 0 auto auto;
- padding: 14px 17px;
- min-width: 226px;
- }
-`
-export function MinimalNetworkAlert() {
- 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 isOptimism = [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
- const depositUrl = isOptimism ? `${info.bridge}?chainId=1` : info.bridge
- const readMoreLink = isOptimism
- ? 'https://help.uniswap.org/en/articles/5392809-how-to-deposit-tokens-to-optimism'
- : 'https://help.uniswap.org/en/articles/5538618-how-to-deposit-tokens-to-arbitrum'
- return (
-
-
-
- This is an alpha release of Uniswap on the {info.label} network.
- You must bridge L1 assets to the network to use them.{' '}
-
- Read more
-
-
-
- Deposit to {info.label}
-
-
-
- )
-}
diff --git a/src/components/NetworkAlert/NetworkAlert.tsx b/src/components/NetworkAlert/NetworkAlert.tsx
index cbc3517a13..2536f0fd88 100644
--- a/src/components/NetworkAlert/NetworkAlert.tsx
+++ b/src/components/NetworkAlert/NetworkAlert.tsx
@@ -1,157 +1,93 @@
import { Trans } from '@lingui/macro'
-import {
- ARBITRUM_HELP_CENTER_LINK,
- L2_CHAIN_IDS,
- OPTIMISM_HELP_CENTER_LINK,
- SupportedChainId,
- SupportedL2ChainId,
-} from '@src/constants/chains'
-import { useActiveWeb3React } from 'hooks/web3'
-import { useCallback, useState } from 'react'
-import { ArrowDownCircle, X } from 'react-feather'
-import { useArbitrumAlphaAlert, useDarkModeManager, useOptimismAlphaAlert } from '@src/state/user/hooks'
-import { useETHBalances } from 'state/wallet/hooks'
-import styled, { css } from 'styled-components/macro'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { CHAIN_INFO } from 'constants/chainInfo'
+import { SupportedChainId } from '@src/constants/chains'
+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 { CHAIN_INFO } from '../../constants/chains'
-
-export const DesktopTextBreak = styled.div`
- display: none;
- @media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
- display: block;
- }
-`
+import { AutoRow } from '../Row'
const L2Icon = styled.img`
- width: 36px;
- height: 36px;
- justify-self: center;
-`
-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;
`
-const Body = styled.p`
- font-size: 12px;
- grid-column: 1 / 3;
- line-height: 143%;
- margin: 0;
- @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
- grid-column: 2 / 3;
- }
-`
-export const Controls = styled.div<{ thin?: boolean }>`
+
+export const Controls = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
- ${({ thin }) =>
- thin &&
- css`
- margin: auto 32px auto 0;
- `}
-`
-const CloseIcon = styled(X)`
- cursor: pointer;
- position: absolute;
- top: 16px;
- right: 16px;
+ padding: 0 20px 20px 20px;
`
+
const BodyText = styled.div`
- align-items: center;
- display: grid;
- grid-gap: 4px;
- grid-template-columns: 40px 4fr;
- grid-template-rows: auto auto;
- margin: 20px 16px;
- @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
- grid-template-columns: 42px 4fr;
- grid-gap: 8px;
- }
-`
-const LearnMoreLink = styled(ExternalLink)<{ thin?: boolean }>`
- 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;
- margin: 0 0 20px 0;
- 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;
- ${({ thin }) =>
- thin &&
- css`
- font-size: 14px;
- margin: auto;
- width: 112px;
- `}
+ align-items: center;
+ justify-content: flex-start;
+ margin: 8px;
+ font-size: 14px;
`
const RootWrapper = styled.div`
position: relative;
+ margin-top: 16px;
`
-export const ArbitrumWrapperBackgroundDarkMode = css`
- background: 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);
-`
-export const ArbitrumWrapperBackgroundLightMode = css`
- background: 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);
-`
-export const OptimismWrapperBackgroundDarkMode = css`
- background: 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%);
-`
-export const OptimismWrapperBackgroundLightMode = css`
- background: 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);
-`
-const ContentWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean; logoUrl: string; thin?: boolean }>`
- ${({ chainId, darkMode }) =>
- [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
- ? darkMode
- ? OptimismWrapperBackgroundDarkMode
- : OptimismWrapperBackgroundLightMode
- : darkMode
- ? ArbitrumWrapperBackgroundDarkMode
- : ArbitrumWrapperBackgroundLightMode};
+
+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 NetworkAlertChains]: string }
+} = {
+ dark: {
+ [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%)',
+ [SupportedChainId.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%)',
+ [SupportedChainId.OPTIMISTIC_KOVAN]:
+ '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.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)',
+ },
+ light: {
+ [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%)',
+ [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.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.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]:
+ '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]};
border-radius: 20px;
display: flex;
- flex-direction: column;
- max-width: 480px;
- min-height: 174px;
+ flex-direction: row;
overflow: hidden;
position: relative;
width: 100%;
- ${({ thin }) =>
- thin &&
- css`
- flex-direction: row;
- max-width: max-content;
- min-height: min-content;
- `}
+
:before {
background-image: url(${({ logoUrl }) => logoUrl});
background-repeat: no-repeat;
@@ -165,116 +101,73 @@ const ContentWrapper = styled.div<{ chainId: SupportedChainId; darkMode: boolean
z-index: -1;
}
`
-const Header = styled.h2<{ thin?: boolean }>`
+const Header = styled.h2`
font-weight: 600;
- font-size: 20px;
+ font-size: 16px;
margin: 0;
- padding-right: 30px;
- display: ${({ thin }) => (thin ? 'none' : 'block')};
-`
-const LinkOutCircle = styled(ArrowDownCircle)`
- margin-left: 12px;
- transform: rotate(230deg);
- width: 20px;
- height: 20px;
`
-const LinkOutToBridge = styled(ExternalLink)<{ thin?: boolean }>`
+
+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;
- margin: 0 12px 20px 18px;
- padding: 12px 16px;
- text-decoration: none;
- width: auto;
- :hover,
- :focus,
- :active {
- background-color: black;
- }
- ${({ thin }) =>
- thin &&
- css`
- font-size: 14px;
- margin: auto 10px;
- width: 168px;
- `}
+ padding: 6px 8px;
+ margin-right: 12px;
+ text-decoration: none !important;
+ width: 100%;
+`
+
+const StyledArrowUpRight = styled(ArrowUpRight)`
+ margin-left: 12px;
+ width: 24px;
+ height: 24px;
`
-interface NetworkAlertProps {
- thin?: boolean
+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',
}
-export function NetworkAlert(props: NetworkAlertProps) {
- const { account, chainId } = useActiveWeb3React()
- const [darkMode] = useDarkModeManager()
- const [arbitrumAlphaAcknowledged, setArbitrumAlphaAcknowledged] = useArbitrumAlphaAlert()
- const [optimismAlphaAcknowledged, setOptimismAlphaAcknowledged] = useOptimismAlphaAlert()
- const [locallyDismissed, setLocallyDimissed] = useState(false)
- const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
+function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {
+ return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains])
+}
- const dismiss = useCallback(() => {
- if (userEthBalance?.greaterThan(0)) {
- switch (chainId) {
- case SupportedChainId.OPTIMISM:
- setOptimismAlphaAcknowledged(true)
- break
- case SupportedChainId.ARBITRUM_ONE:
- setArbitrumAlphaAcknowledged(true)
- break
- }
- } else {
- setLocallyDimissed(true)
- }
- }, [chainId, setArbitrumAlphaAcknowledged, setOptimismAlphaAcknowledged, userEthBalance])
+export function NetworkAlert() {
+ const { chainId } = useActiveWeb3React()
+ const [darkMode] = useDarkModeManager()
- const onOptimismAndOptimismAcknowledged = SupportedChainId.OPTIMISM === chainId && optimismAlphaAcknowledged
- const onArbitrumAndArbitrumAcknowledged = SupportedChainId.ARBITRUM_ONE === chainId && arbitrumAlphaAcknowledged
- if (
- !chainId ||
- !L2_CHAIN_IDS.includes(chainId) ||
- onArbitrumAndArbitrumAcknowledged ||
- onOptimismAndOptimismAcknowledged ||
- locallyDismissed
- ) {
+ if (!shouldShowAlert(chainId)) {
return null
}
- const info = CHAIN_INFO[chainId as SupportedL2ChainId]
- const isOptimism = [SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)
- const depositUrl = isOptimism ? `${info.bridge}?chainId=1` : info.bridge
- const helpCenterLink = isOptimism ? OPTIMISM_HELP_CENTER_LINK : ARBITRUM_HELP_CENTER_LINK
- const showCloseIcon = Boolean(userEthBalance?.greaterThan(0) && !props.thin)
- return (
+
+ const { label, logoUrl, bridge } = CHAIN_INFO[chainId]
+ const textColor = TEXT_COLORS[chainId]
+
+ return bridge ? (
- Beta
-
- {showCloseIcon && }
-
-
-
- Uniswap on {info.label}
-
-
-
- To starting trading on {info.label}, first bridge your assets from L1 to L2. Please treat this as a beta
- release and learn about the risks before using {info.label}.
-
-
-
-
-
- Deposit Assets
-
-
-
- Learn More
-
-
+
+
+
+
+
+
+
+ Deposit tokens to the {label} network.
+
+
+
+
+
- )
+ ) : null
}
diff --git a/src/components/NumericalInput/index.tsx b/src/components/NumericalInput/index.tsx
index e51d154945..ae2613824b 100644
--- a/src/components/NumericalInput/index.tsx
+++ b/src/components/NumericalInput/index.tsx
@@ -12,7 +12,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
border: none;
flex: 1 1 auto;
background-color: ${({ theme }) => theme.bg1};
- font-size: ${({ fontSize }) => fontSize ?? '24px'};
+ font-size: ${({ fontSize }) => fontSize ?? '28px'};
text-align: ${({ align }) => align && align};
white-space: nowrap;
overflow: hidden;
diff --git a/src/components/OptimismDowntimeWarning/index.tsx b/src/components/OptimismDowntimeWarning/index.tsx
deleted file mode 100644
index a537a5e79b..0000000000
--- a/src/components/OptimismDowntimeWarning/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { SupportedChainId } from '@src/constants/chains'
-import { useActiveWeb3React } from 'hooks/web3'
-import { AlertOctagon } from 'react-feather'
-import styled from 'styled-components/macro'
-import { ExternalLink } from 'theme'
-
-const Root = styled.div`
- background-color: ${({ theme }) => theme.yellow3};
- border-radius: 18px;
- color: black;
- margin-top: 16px;
- padding: 16px;
- width: 100%;
- max-width: 880px;
-`
-const WarningIcon = styled(AlertOctagon)`
- margin: 0 8px 0 0;
-`
-const TitleRow = styled.div`
- align-items: center;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- margin: 0;
- font-size: 20px;
- font-weight: 600;
- line-height: 25px;
-`
-const Body = styled.div`
- font-size: 12px;
- line-height: 15px;
- margin: 8px 0 0 0;
-`
-const ReadMoreLink = styled(ExternalLink)`
- color: black;
- text-decoration: underline;
-`
-
-export default function OptimismDowntimeWarning() {
- const { chainId } = useActiveWeb3React()
- if (!chainId || ![SupportedChainId.OPTIMISM, SupportedChainId.OPTIMISTIC_KOVAN].includes(chainId)) {
- return null
- }
-
- return (
-
-
-
- Optimism Planned Downtime
-
-
-
- Optimism expects planned downtime in the near future. Unplanned downtime may also occur. While the network is
- down, fees will not be generated and you will be unable to remove liquidity.{' '}
-
- Read more.
-
-
-
-
- )
-}
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
index 20cd620d90..7effb0012d 100644
--- a/src/components/Popover/index.tsx
+++ b/src/components/Popover/index.tsx
@@ -1,11 +1,10 @@
import { Options, Placement } from '@popperjs/core'
import Portal from '@reach/portal'
+import useInterval from 'lib/hooks/useInterval'
import React, { useCallback, useMemo, useState } from 'react'
import { usePopper } from 'react-popper'
import styled from 'styled-components/macro'
-import useInterval from '../../hooks/useInterval'
-
const PopoverContainer = styled.div<{ show: boolean }>`
z-index: 9999;
visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
diff --git a/src/components/Popups/ClaimPopup.tsx b/src/components/Popups/ClaimPopup.tsx
index dffda549f0..958b11f7cf 100644
--- a/src/components/Popups/ClaimPopup.tsx
+++ b/src/components/Popups/ClaimPopup.tsx
@@ -1,13 +1,12 @@
import { Trans } from '@lingui/macro'
import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
import { useCallback, useEffect } from 'react'
import { Heart, X } from 'react-feather'
import ReactGA from 'react-ga'
import styled, { keyframes } from 'styled-components/macro'
import tokenLogo from '../../assets/images/token-logo.png'
-import { ButtonPrimary } from '../../components/Button'
-import { useActiveWeb3React } from '../../hooks/web3'
import {
useModalOpen,
useShowClaimPopup,
@@ -16,7 +15,8 @@ import {
} from '../../state/application/hooks'
import { ApplicationModal } from '../../state/application/reducer'
import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
-import { TYPE } from 'theme'
+import { ThemedText } from 'theme'
+import { ButtonPrimary } from '../Button'
import { AutoColumn } from '../Column'
import { CardBGImage, CardNoise } from '../earn/styled'
@@ -98,10 +98,10 @@ export default function ClaimPopup() {
{' '}
-
+
{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
-
-
+
+
🎉
{' '}
@@ -109,12 +109,12 @@ export default function ClaimPopup() {
🎉
-
-
+
+
Thanks for being part of the Uniswap community
-
+
diff --git a/src/components/Popups/FailedNetworkSwitchPopup.tsx b/src/components/Popups/FailedNetworkSwitchPopup.tsx
new file mode 100644
index 0000000000..91d94a2812
--- /dev/null
+++ b/src/components/Popups/FailedNetworkSwitchPopup.tsx
@@ -0,0 +1,35 @@
+import { Trans } from '@lingui/macro'
+import { CHAIN_INFO } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { useContext } from 'react'
+import { AlertCircle } from 'react-feather'
+import styled, { ThemeContext } from 'styled-components/macro'
+
+import { ThemedText } from '../../theme'
+import { AutoColumn } from '../Column'
+import { AutoRow } from '../Row'
+
+const RowNoFlex = styled(AutoRow)`
+ flex-wrap: nowrap;
+`
+
+export default function FailedNetworkSwitchPopup({ chainId }: { chainId: SupportedChainId }) {
+ const chainInfo = CHAIN_INFO[chainId]
+ const theme = useContext(ThemeContext)
+
+ return (
+
+
+
+
+
+ Failed to switch networks from the Uniswap Interface. In order to use Uniswap on {chainInfo.label}, you must
+ change the network in your wallet.
+
+
+
+
+ )
+}
diff --git a/src/components/Popups/PopupItem.tsx b/src/components/Popups/PopupItem.tsx
index 3d64df72b8..5403786c32 100644
--- a/src/components/Popups/PopupItem.tsx
+++ b/src/components/Popups/PopupItem.tsx
@@ -5,7 +5,8 @@ import { useSpring } from 'react-spring/web'
import styled, { ThemeContext } from 'styled-components/macro'
import { useRemovePopup } from '../../state/application/hooks'
-import { PopupContent } from 'state/application/reducer'
+import { PopupContent } from '@src/state/application/reducer'
+import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
import TransactionPopup from './TransactionPopup'
export const StyledClose = styled(X)`
@@ -77,6 +78,8 @@ export default function PopupItem({
txn: { hash },
} = content
popupContent =
+ } else if ('failedSwitchNetwork' in content) {
+ popupContent =
}
const faderStyle = useSpring({
diff --git a/src/components/Popups/SurveyPopup.tsx b/src/components/Popups/SurveyPopup.tsx
new file mode 100644
index 0000000000..15a88aaee6
--- /dev/null
+++ b/src/components/Popups/SurveyPopup.tsx
@@ -0,0 +1,106 @@
+import { Trans } from '@lingui/macro'
+import { AutoColumn } from 'components/Column'
+import { RowFixed } from 'components/Row'
+import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
+import { useEffect } from 'react'
+import { MessageCircle, X } from 'react-feather'
+import ReactGA from 'react-ga'
+import { useShowSurveyPopup } from 'state/user/hooks'
+import styled from 'styled-components/macro'
+import { ExternalLink, ThemedText, Z_INDEX } from 'theme'
+
+import BGImage from '../../assets/images/survey-orb.svg'
+import useTheme from '../../hooks/useTheme'
+
+const Wrapper = styled(AutoColumn)`
+ background: #edeef2;
+ position: relative;
+ border-radius: 12px;
+ padding: 18px;
+ max-width: 360px;
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ color: ${({ theme }) => theme.text1};
+ overflow: hidden;
+
+ ${({ theme }) => theme.mediaWidth.upToSmall`
+ max-width: 100%;
+ `}
+`
+
+const BGOrb = styled.img`
+ position: absolute;
+ right: -64px;
+ top: -64px;
+ width: 180px;
+ z-index: ${Z_INDEX.sticky};
+`
+
+const WrappedCloseIcon = styled(X)`
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 20px;
+ height: 20px;
+ stroke: #7c7c80;
+ z-index: ${Z_INDEX.fixed};
+ :hover {
+ cursor: pointer;
+ opacity: 0.8;
+ }
+`
+
+const END_TIMESTAMP = 1642272346 // Jan 15th
+
+export default function SurveyPopup() {
+ const theme = useTheme()
+ const [showPopup, setShowSurveyPopup] = useShowSurveyPopup()
+
+ // show popup to 1% of users
+ useEffect(() => {
+ // has not visited page during A/B testing if undefined
+ if (showPopup === undefined) {
+ if (Math.random() < 0.01) {
+ setShowSurveyPopup(true)
+ // log a case of succesful view
+ ReactGA.event({
+ category: 'Survey',
+ action: 'Saw Survey',
+ })
+ }
+ }
+ }, [setShowSurveyPopup, showPopup])
+
+ // limit survey to 24 hours based on timestamps
+ const timestamp = useCurrentBlockTimestamp()
+ const durationOver = timestamp ? timestamp.toNumber() > END_TIMESTAMP : false
+
+ return (
+ <>
+ {!showPopup || durationOver ? null : (
+
+ {
+ ReactGA.event({
+ category: 'Survey',
+ action: 'Clicked Survey Link',
+ })
+ setShowSurveyPopup(false)
+ }}
+ />
+
+
+
+
+
+ Tell us what you think ↗
+
+
+
+
+ Take a 10 minute survey to help us improve your experience in the Uniswap app.
+
+
+ )}
+
+ )
+}
diff --git a/src/components/Popups/TransactionPopup.tsx b/src/components/Popups/TransactionPopup.tsx
index 45ca2c6104..d33b20b5e7 100644
--- a/src/components/Popups/TransactionPopup.tsx
+++ b/src/components/Popups/TransactionPopup.tsx
@@ -1,11 +1,11 @@
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
import { useContext } from 'react'
import { AlertCircle, CheckCircle } from 'react-feather'
import styled, { ThemeContext } from 'styled-components/macro'
-import { useActiveWeb3React } from '../../hooks/web3'
import { useTransaction } from '../../state/transactions/hooks'
-import { TYPE } from '../../theme'
-import { ExternalLink } from '../../theme/components'
+import { ThemedText } from '../../theme'
+import { ExternalLink } from '../../theme'
import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
import { TransactionSummary } from '../AccountDetails/TransactionSummary'
import { AutoColumn } from '../Column'
@@ -30,9 +30,9 @@ export default function TransactionPopup({ hash }: { hash: string }) {
{success ? : }