diff --git a/src/components/NavBar/WarningBanner.tsx b/src/components/NavBar/WarningBanner.tsx new file mode 100644 index 00000000..c16e9c35 --- /dev/null +++ b/src/components/NavBar/WarningBanner.tsx @@ -0,0 +1,64 @@ +import { t, Trans } from '@lingui/macro' +import { useOpenModal } from 'state/application/hooks' +import { ApplicationModal } from 'state/application/reducer' +import styled from 'styled-components' +import { ButtonText, ThemedText } from 'theme/components' +import { Z_INDEX } from 'theme/zIndex' + +export const UK_BANNER_HEIGHT = 65 +export const UK_BANNER_HEIGHT_MD = 113 +export const UK_BANNER_HEIGHT_SM = 137 + +const BannerWrapper = styled.div` + position: relative; + display: flex; + background-color: #ff3257; + padding: 20px; + border-bottom: 1px solid ${({ theme }) => theme.surface3}; + z-index: ${Z_INDEX.fixed}; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + + @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { + flex-direction: column; + } +` + +const BannerTextWrapper = styled(ThemedText.BodySecondary)` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: white; + width: 100%; + text-align: center; + + @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { + @supports (-webkit-line-clamp: 2) { + white-space: initial; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + } + + @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { + @supports (-webkit-line-clamp: 3) { + white-space: initial; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + } +` + +export const bannerText = + 'Warning: Deposit liquidity is currently paused in v2. No swap will route through v2 pools. We recommend you remove the liquidity from Jediswap v2.' + +export function WarningBanner() { + return ( + + {bannerText} + + ) +} diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 6eb28578..35e045e9 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -101,12 +101,10 @@ function AddLiquidity() { }>() const { address: account, chainId } = useAccountDetails() const theme = useTheme() - const trace = useTrace() - const toggleWalletDrawer = useToggleAccountDrawer() // toggle wallet when disconnected - const addTransaction = useTransactionAdder() const positionManager = useV3NFTPositionManagerContract() const parsedTokenId = tokenId ? parseInt(tokenId) : undefined + // check for existing position if tokenId in url const { position: existingPositionDetails, loading: positionLoading } = useV3PosFromTokenId(parsedTokenId) const hasExistingPosition = !!existingPositionDetails && !positionLoading @@ -124,6 +122,9 @@ function AddLiquidity() { // mint state const { independentField, typedValue, startPriceTypedValue } = useV3MintState() + const [showWarning, setShowWarning] = useState(true) + const [mintCallData, setMintCallData] = useState([]) + const { pool, ticks, @@ -157,8 +158,6 @@ function AddLiquidity() { const { onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput, onStartPriceInput } = useV3MintActionHandlers(noLiquidity) - const [mintCallData, setMintCallData] = useState([]) - const { writeAsync, data: txData } = useContractWrite({ calls: mintCallData, }) @@ -504,10 +503,12 @@ function AddLiquidity() { onClick={() => { setShowConfirm(true) }} - disabled={!isValid} + disabled={!isValid || showWarning} error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]} > - {errorMessage ? errorMessage : Preview} + + {showWarning ? 'Add liquidity is paused' : errorMessage ? errorMessage : Preview} + ) diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 142b32ee..fbe42fc1 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -18,6 +18,12 @@ import { flexRowNoWrap } from 'theme/styles' import { Z_INDEX } from 'theme/zIndex' import { RouteDefinition, routes, useRouterConfig } from './RouteDefinitions' import useFetchAllPairsCallback from 'hooks/useFetchAllPairs' +import { + UK_BANNER_HEIGHT, + UK_BANNER_HEIGHT_MD, + UK_BANNER_HEIGHT_SM, + WarningBanner, +} from 'components/NavBar/WarningBanner' // import Footer from 'components/Footer' const BodyWrapper = styled.div<{ bannerIsVisible?: boolean }>` @@ -61,7 +67,11 @@ const MobileBottomBar = styled.div` } ` -const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: boolean; scrollY: number }>` +const HeaderWrapper = styled.div<{ + transparent?: boolean + bannerIsVisible?: boolean + scrollY: number +}>` ${flexRowNoWrap}; background-color: transparent; border-bottom: ${({ theme }) => `1px solid ${theme.surface3}`}; @@ -69,7 +79,7 @@ const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: bool width: 100%; justify-content: space-between; position: fixed; - top: 0; + top: ${({ bannerIsVisible }) => (bannerIsVisible ? Math.max(UK_BANNER_HEIGHT - scrollY, 0) : 0)}px; z-index: ${Z_INDEX.dropdown}; transition-property: background-color; transition-duration: ${({ theme }) => theme.transition.duration.fast}; @@ -77,11 +87,11 @@ const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: bool font-family: 'Avenir LT Std'; @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - top: 0; + top: ${({ bannerIsVisible }) => (bannerIsVisible ? Math.max(UK_BANNER_HEIGHT_MD - scrollY, 0) : 0)}px; } @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - top: 0; + top: ${({ bannerIsVisible }) => (bannerIsVisible ? Math.max(UK_BANNER_HEIGHT_SM - scrollY, 0) : 0)}px; } ` @@ -93,6 +103,7 @@ export default function App() { const { pathname } = location const [scrollY, setScrollY] = useState(0) + const [showWarning, setShowWarning] = useState(true) const scrolledState = scrollY > 0 const routerConfig = useRouterConfig() @@ -117,7 +128,8 @@ export default function App() { return ( - + {showWarning && } + diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index e5a93ebd..3b1d6c00 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/src/pages/RemoveLiquidity/V3.tsx @@ -77,6 +77,7 @@ function Remove({ tokenId }: { tokenId: number }) { // flag for receiving WETH const [receiveWETH, setReceiveWETH] = useState(false) + const [showWarning, setShowWarning] = useState(false) const nativeCurrency = useNativeCurrency(chainId) const nativeWrappedSymbol = nativeCurrency.wrapped.symbol @@ -420,10 +421,16 @@ function Remove({ tokenId }: { tokenId: number }) { setShowConfirm(true)} > - {removed ? Closed : error ?? Remove} + {showWarning ? ( + 'Remove liquidity is paused' + ) : removed ? ( + Closed + ) : ( + error ?? Remove + )}