Skip to content

Commit e9c5505

Browse files
neikopneikop
authored
Popup that mention elastic pools/farm are not accessible (#2409)
* Popup that mention elastic pools/farm are not accessible * Update * Escaped character, Add logic * Update * Update * Update * Update
1 parent d721191 commit e9c5505

File tree

2 files changed

+114
-19
lines changed

2 files changed

+114
-19
lines changed

‎src/components/ClassicElasticTab.tsx

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import { ChainId } from '@kyberswap/ks-sdk-core'
22
import { Trans } from '@lingui/macro'
33
import { rgba } from 'polished'
44
import { stringify } from 'querystring'
5-
import { useEffect } from 'react'
5+
import { useEffect, useState } from 'react'
66
import { isMobile } from 'react-device-detect'
77
import { useLocation, useNavigate } from 'react-router-dom'
88
import { useMedia } from 'react-use'
99
import { Flex, Text } from 'rebass'
1010

1111
import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
12+
import ElasticHackedModal from 'components/ElasticHackedModal'
13+
import { APP_PATHS } from 'constants/index'
1214
import { CLASSIC_NOT_SUPPORTED, ELASTIC_NOT_SUPPORTED } from 'constants/networks'
1315
import { VERSION } from 'constants/v2'
1416
import { useActiveWeb3React } from 'hooks'
@@ -28,27 +30,41 @@ function ClassicElasticTab() {
2830
const shouldShowFarmTab = !!farmPositions.length || !!claimInfo
2931
const shouldShowPositionTab = !!positions.length
3032

31-
const { tab: tabQS = VERSION.ELASTIC, ...qs } = useParsedQueryString<{ tab: string }>()
33+
const { tab: tabQS = VERSION.ELASTIC, skipAlert, ...qs } = useParsedQueryString<{ tab: string }>()
3234

3335
const tab = isInEnum(tabQS, VERSION) ? tabQS : VERSION.ELASTIC
3436

3537
const { chainId } = useActiveWeb3React()
36-
const notSupportedMsg = ELASTIC_NOT_SUPPORTED[chainId]
38+
const notSupportedElasticMsg = ELASTIC_NOT_SUPPORTED[chainId]
3739

3840
const notSupportedClassicMsg = CLASSIC_NOT_SUPPORTED[chainId]
3941

4042
const theme = useTheme()
4143
const location = useLocation()
4244
const navigate = useNavigate()
4345

44-
const isFarmpage = location.pathname.includes('/farms')
46+
const isFarmPage = location.pathname.startsWith(APP_PATHS.FARMS)
47+
const isMyPoolPage = location.pathname.startsWith(APP_PATHS.MY_POOLS)
48+
const [isOpenElasticHacked, setOpenElasticHacked] = useState(
49+
tab === VERSION.ELASTIC && !notSupportedElasticMsg && !skipAlert,
50+
)
51+
52+
useEffect(() => {
53+
if (notSupportedClassicMsg) {
54+
setOpenElasticHacked(!skipAlert)
55+
}
56+
if (tab === VERSION.ELASTIC && !notSupportedElasticMsg) {
57+
setOpenElasticHacked(!skipAlert)
58+
}
59+
// eslint-disable-next-line react-hooks/exhaustive-deps
60+
}, [chainId])
4561

4662
const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)
4763

4864
const dontShowLegacy = [ChainId.ZKEVM, ChainId.BASE, ChainId.LINEA, ChainId.SCROLL].includes(chainId)
4965

5066
const showLegacyExplicit =
51-
upToMedium || dontShowLegacy ? false : isFarmpage ? shouldShowFarmTab : shouldShowPositionTab
67+
upToMedium || dontShowLegacy ? false : isFarmPage ? shouldShowFarmTab : shouldShowPositionTab
5268

5369
useEffect(() => {
5470
if (dontShowLegacy && tab === VERSION.ELASTIC_LEGACY) {
@@ -77,13 +93,13 @@ function ClassicElasticTab() {
7793

7894
const handleSwitchTab = (version: VERSION) => {
7995
if (!!notSupportedClassicMsg && version === VERSION.CLASSIC) return
80-
if (!!notSupportedMsg && version !== VERSION.CLASSIC) return
96+
if (!!notSupportedElasticMsg && version !== VERSION.CLASSIC) return
8197
const newQs = { ...qs, tab: version }
8298
navigate({ search: stringify(newQs) }, { replace: true })
8399
}
84100

85101
const getColorOfElasticTab = () => {
86-
if (!!notSupportedMsg) {
102+
if (!!notSupportedElasticMsg) {
87103
return theme.disableText
88104
}
89105

@@ -114,7 +130,7 @@ function ClassicElasticTab() {
114130
}
115131

116132
const getColorOfLegacyElasticTab = () => {
117-
if (!!notSupportedMsg) {
133+
if (!!notSupportedElasticMsg) {
118134
return theme.disableText
119135
}
120136

@@ -128,11 +144,11 @@ function ClassicElasticTab() {
128144
if (!!notSupportedClassicMsg && tab === VERSION.CLASSIC) {
129145
const newQs = { ...qs, tab: VERSION.ELASTIC }
130146
navigate({ search: stringify(newQs) }, { replace: true })
131-
} else if (!!notSupportedMsg && tab !== VERSION.CLASSIC) {
147+
} else if (!!notSupportedElasticMsg && tab !== VERSION.CLASSIC) {
132148
const newQs = { ...qs, tab: VERSION.CLASSIC }
133149
navigate({ search: stringify(newQs) }, { replace: true })
134150
}
135-
}, [navigate, notSupportedMsg, notSupportedClassicMsg, qs, tab])
151+
}, [navigate, notSupportedElasticMsg, notSupportedClassicMsg, qs, tab])
136152

137153
return (
138154
<Flex width="max-content">
@@ -144,7 +160,7 @@ function ClassicElasticTab() {
144160
? ''
145161
: tab === VERSION.CLASSIC && notSupportedClassicMsg
146162
? notSupportedClassicMsg
147-
: notSupportedMsg ||
163+
: notSupportedElasticMsg ||
148164
(!showLegacyExplicit ? (
149165
<Flex flexDirection="column" sx={{ gap: '16px', padding: '8px' }}>
150166
<Flex
@@ -156,7 +172,7 @@ function ClassicElasticTab() {
156172
onClick={() => handleSwitchTab(VERSION.ELASTIC)}
157173
>
158174
<PoolElasticIcon size={16} />
159-
{isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
175+
{isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
160176
</Flex>
161177

162178
<Flex
@@ -168,7 +184,7 @@ function ClassicElasticTab() {
168184
onClick={() => handleSwitchTab(VERSION.ELASTIC_LEGACY)}
169185
>
170186
<PoolElasticIcon size={16} />
171-
{isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
187+
{isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
172188
{legacyTag(true)}
173189
</Flex>
174190
</Flex>
@@ -192,10 +208,10 @@ function ClassicElasticTab() {
192208
marginLeft="4px"
193209
role="button"
194210
style={{
195-
cursor: !!notSupportedMsg ? 'not-allowed' : 'pointer',
211+
cursor: !!notSupportedElasticMsg ? 'not-allowed' : 'pointer',
196212
}}
197213
>
198-
{isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
214+
{isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
199215
</Text>
200216

201217
{!showLegacyExplicit && tab === VERSION.ELASTIC_LEGACY && legacyTag()}
@@ -209,7 +225,7 @@ function ClassicElasticTab() {
209225

210226
{showLegacyExplicit && (
211227
<>
212-
<MouseoverTooltip text={notSupportedMsg || ''} placement="top">
228+
<MouseoverTooltip text={notSupportedElasticMsg || ''} placement="top">
213229
<Flex
214230
sx={{ position: 'relative' }}
215231
alignItems={'center'}
@@ -226,10 +242,10 @@ function ClassicElasticTab() {
226242
marginLeft="4px"
227243
role="button"
228244
style={{
229-
cursor: !!notSupportedMsg ? 'not-allowed' : 'pointer',
245+
cursor: !!notSupportedElasticMsg ? 'not-allowed' : 'pointer',
230246
}}
231247
>
232-
{isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
248+
{isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
233249
</Text>
234250
{legacyTag()}
235251
</Flex>
@@ -257,10 +273,26 @@ function ClassicElasticTab() {
257273
style={{ cursor: 'pointer' }}
258274
role="button"
259275
>
260-
{isFarmpage ? <Trans>Classic Farms</Trans> : <Trans>Classic Pools</Trans>}
276+
{isFarmPage ? <Trans>Classic Farms</Trans> : <Trans>Classic Pools</Trans>}
261277
</Text>
262278
</Flex>
263279
</MouseoverTooltip>
280+
281+
<ElasticHackedModal
282+
isOpen={isOpenElasticHacked}
283+
onClose={() => {
284+
setOpenElasticHacked(false)
285+
if (!isMyPoolPage) {
286+
handleSwitchTab(VERSION.CLASSIC)
287+
}
288+
}}
289+
onConfirm={() => {
290+
setOpenElasticHacked(false)
291+
if (!isMyPoolPage) {
292+
navigate({ pathname: APP_PATHS.MY_POOLS, search: 'skipAlert=1' })
293+
}
294+
}}
295+
/>
264296
</Flex>
265297
)
266298
}

‎src/components/ElasticHackedModal.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Trans } from '@lingui/macro'
2+
import { Info, X } from 'react-feather'
3+
import { Flex, Text } from 'rebass'
4+
import styled from 'styled-components'
5+
6+
import { ButtonConfirmed, ButtonOutlined } from 'components/Button'
7+
import Modal from 'components/Modal'
8+
import useTheme from 'hooks/useTheme'
9+
10+
const StyledCloseIcon = styled(X)`
11+
height: 20px;
12+
width: 20px;
13+
:hover {
14+
cursor: pointer;
15+
}
16+
17+
> * {
18+
stroke: ${({ theme }) => theme.text};
19+
}
20+
`
21+
22+
type Props = {
23+
isOpen: boolean
24+
onClose?: () => void
25+
onConfirm?: () => void
26+
}
27+
28+
const ElasticHackedModal = ({ isOpen, onClose, onConfirm }: Props) => {
29+
const theme = useTheme()
30+
31+
return (
32+
<Modal isOpen={isOpen} width="480px" maxWidth="unset">
33+
<Flex flexDirection="column" padding="20px" bg={theme.background}>
34+
<Flex justifyContent="flex-end">
35+
<StyledCloseIcon onClick={onClose} />
36+
</Flex>
37+
<Flex justifyContent="center">
38+
<Info color={theme.warning} size={64} />
39+
</Flex>
40+
<Text marginTop="20px" textAlign="center" fontSize="16px" fontWeight={500} lineHeight="24px">
41+
<Trans>Attention</Trans>
42+
</Text>
43+
<Text marginTop="8px" textAlign="center" fontSize={14} lineHeight="20px" color={theme.subText}>
44+
<Trans>
45+
Adding liquidity to Elastic Pools and staking in Elastic Farms is temporarily unavailable. Kindly visit
46+
&quot;My Pool&quot; for prompt removal of your liquidity.
47+
</Trans>
48+
</Text>
49+
50+
<Flex sx={{ gap: '16px' }} marginTop="20px">
51+
<ButtonOutlined style={{ flex: 1, fontSize: '16px', padding: '10px' }} onClick={onClose}>
52+
<Trans>Close</Trans>
53+
</ButtonOutlined>
54+
<ButtonConfirmed style={{ fontSize: '16px', flex: 1, padding: '10px' }} onClick={onConfirm}>
55+
<Trans>Go to My Pool</Trans>
56+
</ButtonConfirmed>
57+
</Flex>
58+
</Flex>
59+
</Modal>
60+
)
61+
}
62+
63+
export default ElasticHackedModal

0 commit comments

Comments
 (0)