diff --git a/src/components/ClassicElasticTab.tsx b/src/components/ClassicElasticTab.tsx index ad8bed9727..dde42e3db3 100644 --- a/src/components/ClassicElasticTab.tsx +++ b/src/components/ClassicElasticTab.tsx @@ -2,13 +2,15 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' import { rgba } from 'polished' import { stringify } from 'querystring' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { isMobile } from 'react-device-detect' import { useLocation, useNavigate } from 'react-router-dom' import { useMedia } from 'react-use' import { Flex, Text } from 'rebass' import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg' +import ElasticHackedModal from 'components/ElasticHackedModal' +import { APP_PATHS } from 'constants/index' import { CLASSIC_NOT_SUPPORTED, ELASTIC_NOT_SUPPORTED } from 'constants/networks' import { VERSION } from 'constants/v2' import { useActiveWeb3React } from 'hooks' @@ -28,12 +30,12 @@ function ClassicElasticTab() { const shouldShowFarmTab = !!farmPositions.length || !!claimInfo const shouldShowPositionTab = !!positions.length - const { tab: tabQS = VERSION.ELASTIC, ...qs } = useParsedQueryString<{ tab: string }>() + const { tab: tabQS = VERSION.ELASTIC, skipAlert, ...qs } = useParsedQueryString<{ tab: string }>() const tab = isInEnum(tabQS, VERSION) ? tabQS : VERSION.ELASTIC const { chainId } = useActiveWeb3React() - const notSupportedMsg = ELASTIC_NOT_SUPPORTED[chainId] + const notSupportedElasticMsg = ELASTIC_NOT_SUPPORTED[chainId] const notSupportedClassicMsg = CLASSIC_NOT_SUPPORTED[chainId] @@ -41,14 +43,28 @@ function ClassicElasticTab() { const location = useLocation() const navigate = useNavigate() - const isFarmpage = location.pathname.includes('/farms') + const isFarmPage = location.pathname.startsWith(APP_PATHS.FARMS) + const isMyPoolPage = location.pathname.startsWith(APP_PATHS.MY_POOLS) + const [isOpenElasticHacked, setOpenElasticHacked] = useState( + tab === VERSION.ELASTIC && !notSupportedElasticMsg && !skipAlert, + ) + + useEffect(() => { + if (notSupportedClassicMsg) { + setOpenElasticHacked(!skipAlert) + } + if (tab === VERSION.ELASTIC && !notSupportedElasticMsg) { + setOpenElasticHacked(!skipAlert) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [chainId]) const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`) const dontShowLegacy = [ChainId.ZKEVM, ChainId.BASE, ChainId.LINEA, ChainId.SCROLL].includes(chainId) const showLegacyExplicit = - upToMedium || dontShowLegacy ? false : isFarmpage ? shouldShowFarmTab : shouldShowPositionTab + upToMedium || dontShowLegacy ? false : isFarmPage ? shouldShowFarmTab : shouldShowPositionTab useEffect(() => { if (dontShowLegacy && tab === VERSION.ELASTIC_LEGACY) { @@ -77,13 +93,13 @@ function ClassicElasticTab() { const handleSwitchTab = (version: VERSION) => { if (!!notSupportedClassicMsg && version === VERSION.CLASSIC) return - if (!!notSupportedMsg && version !== VERSION.CLASSIC) return + if (!!notSupportedElasticMsg && version !== VERSION.CLASSIC) return const newQs = { ...qs, tab: version } navigate({ search: stringify(newQs) }, { replace: true }) } const getColorOfElasticTab = () => { - if (!!notSupportedMsg) { + if (!!notSupportedElasticMsg) { return theme.disableText } @@ -114,7 +130,7 @@ function ClassicElasticTab() { } const getColorOfLegacyElasticTab = () => { - if (!!notSupportedMsg) { + if (!!notSupportedElasticMsg) { return theme.disableText } @@ -128,11 +144,11 @@ function ClassicElasticTab() { if (!!notSupportedClassicMsg && tab === VERSION.CLASSIC) { const newQs = { ...qs, tab: VERSION.ELASTIC } navigate({ search: stringify(newQs) }, { replace: true }) - } else if (!!notSupportedMsg && tab !== VERSION.CLASSIC) { + } else if (!!notSupportedElasticMsg && tab !== VERSION.CLASSIC) { const newQs = { ...qs, tab: VERSION.CLASSIC } navigate({ search: stringify(newQs) }, { replace: true }) } - }, [navigate, notSupportedMsg, notSupportedClassicMsg, qs, tab]) + }, [navigate, notSupportedElasticMsg, notSupportedClassicMsg, qs, tab]) return ( @@ -144,7 +160,7 @@ function ClassicElasticTab() { ? '' : tab === VERSION.CLASSIC && notSupportedClassicMsg ? notSupportedClassicMsg - : notSupportedMsg || + : notSupportedElasticMsg || (!showLegacyExplicit ? ( handleSwitchTab(VERSION.ELASTIC)} > - {isFarmpage ? Elastic Farms : Elastic Pools} + {isFarmPage ? Elastic Farms : Elastic Pools} handleSwitchTab(VERSION.ELASTIC_LEGACY)} > - {isFarmpage ? Elastic Farms : Elastic Pools} + {isFarmPage ? Elastic Farms : Elastic Pools} {legacyTag(true)} @@ -192,10 +208,10 @@ function ClassicElasticTab() { marginLeft="4px" role="button" style={{ - cursor: !!notSupportedMsg ? 'not-allowed' : 'pointer', + cursor: !!notSupportedElasticMsg ? 'not-allowed' : 'pointer', }} > - {isFarmpage ? Elastic Farms : Elastic Pools} + {isFarmPage ? Elastic Farms : Elastic Pools} {!showLegacyExplicit && tab === VERSION.ELASTIC_LEGACY && legacyTag()} @@ -209,7 +225,7 @@ function ClassicElasticTab() { {showLegacyExplicit && ( <> - + - {isFarmpage ? Elastic Farms : Elastic Pools} + {isFarmPage ? Elastic Farms : Elastic Pools} {legacyTag()} @@ -257,10 +273,26 @@ function ClassicElasticTab() { style={{ cursor: 'pointer' }} role="button" > - {isFarmpage ? Classic Farms : Classic Pools} + {isFarmPage ? Classic Farms : Classic Pools} + + { + setOpenElasticHacked(false) + if (!isMyPoolPage) { + handleSwitchTab(VERSION.CLASSIC) + } + }} + onConfirm={() => { + setOpenElasticHacked(false) + if (!isMyPoolPage) { + navigate({ pathname: APP_PATHS.MY_POOLS, search: 'skipAlert=1' }) + } + }} + /> ) } diff --git a/src/components/ElasticHackedModal.tsx b/src/components/ElasticHackedModal.tsx new file mode 100644 index 0000000000..6cc1eb234b --- /dev/null +++ b/src/components/ElasticHackedModal.tsx @@ -0,0 +1,63 @@ +import { Trans } from '@lingui/macro' +import { Info, X } from 'react-feather' +import { Flex, Text } from 'rebass' +import styled from 'styled-components' + +import { ButtonConfirmed, ButtonOutlined } from 'components/Button' +import Modal from 'components/Modal' +import useTheme from 'hooks/useTheme' + +const StyledCloseIcon = styled(X)` + height: 20px; + width: 20px; + :hover { + cursor: pointer; + } + + > * { + stroke: ${({ theme }) => theme.text}; + } +` + +type Props = { + isOpen: boolean + onClose?: () => void + onConfirm?: () => void +} + +const ElasticHackedModal = ({ isOpen, onClose, onConfirm }: Props) => { + const theme = useTheme() + + return ( + + + + + + + + + + Attention + + + + Adding liquidity to Elastic Pools and staking in Elastic Farms is temporarily unavailable. Kindly visit + "My Pool" for prompt removal of your liquidity. + + + + + + Close + + + Go to My Pool + + + + + ) +} + +export default ElasticHackedModal diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx index ab01f45f91..160aad28da 100644 --- a/src/components/SearchModal/CurrencyList.tsx +++ b/src/components/SearchModal/CurrencyList.tsx @@ -266,7 +266,6 @@ function CurrencyList({ style={{ ...style, ...itemStyle }} currency={currency} currencyBalance={currencyBalance} - customBalance={
} isSelected={isSelected} showFavoriteIcon={showFavoriteIcon} onSelect={onCurrencySelect} diff --git a/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx b/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx index 1656c06bd6..54f76caae6 100644 --- a/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx +++ b/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx @@ -211,6 +211,13 @@ export default function CreateAlert({ )} + optionRender={item => { + return ( + + {item?.label} + + ) + }} />