Merge branch 'remove-solana' of github.com:KyberNetwork/kyberswap-int…

…erface into test-prod
KyberNetwork · Nov 29, 2023 · 7ccf3b4 · 7ccf3b4
2 parents 21fe332 + e14c9ec
commit 7ccf3b4
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 20 deletions.
diff --git 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,27 +30,41 @@ 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]
 
   const theme = useTheme()
   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 (
     <Flex width="max-content">
@@ -144,7 +160,7 @@ function ClassicElasticTab() {
             ? ''
             : tab === VERSION.CLASSIC && notSupportedClassicMsg
             ? notSupportedClassicMsg
-            : notSupportedMsg ||
+            : notSupportedElasticMsg ||
               (!showLegacyExplicit ? (
                 <Flex flexDirection="column" sx={{ gap: '16px', padding: '8px' }}>
                   <Flex
@@ -156,7 +172,7 @@ function ClassicElasticTab() {
                     onClick={() => handleSwitchTab(VERSION.ELASTIC)}
                   >
                     <PoolElasticIcon size={16} />
-                    {isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
+                    {isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
                   </Flex>
 
                   <Flex
@@ -168,7 +184,7 @@ function ClassicElasticTab() {
                     onClick={() => handleSwitchTab(VERSION.ELASTIC_LEGACY)}
                   >
                     <PoolElasticIcon size={16} />
-                    {isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
+                    {isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
                     {legacyTag(true)}
                   </Flex>
                 </Flex>
@@ -192,10 +208,10 @@ function ClassicElasticTab() {
             marginLeft="4px"
             role="button"
             style={{
-              cursor: !!notSupportedMsg ? 'not-allowed' : 'pointer',
+              cursor: !!notSupportedElasticMsg ? 'not-allowed' : 'pointer',
             }}
           >
-            {isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
+            {isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
           </Text>
 
           {!showLegacyExplicit && tab === VERSION.ELASTIC_LEGACY && legacyTag()}
@@ -209,7 +225,7 @@ function ClassicElasticTab() {
 
       {showLegacyExplicit && (
         <>
-          <MouseoverTooltip text={notSupportedMsg || ''} placement="top">
+          <MouseoverTooltip text={notSupportedElasticMsg || ''} placement="top">
             <Flex
               sx={{ position: 'relative' }}
               alignItems={'center'}
@@ -226,10 +242,10 @@ function ClassicElasticTab() {
                 marginLeft="4px"
                 role="button"
                 style={{
-                  cursor: !!notSupportedMsg ? 'not-allowed' : 'pointer',
+                  cursor: !!notSupportedElasticMsg ? 'not-allowed' : 'pointer',
                 }}
               >
-                {isFarmpage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
+                {isFarmPage ? <Trans>Elastic Farms</Trans> : <Trans>Elastic Pools</Trans>}
               </Text>
               {legacyTag()}
             </Flex>
@@ -257,10 +273,26 @@ function ClassicElasticTab() {
             style={{ cursor: 'pointer' }}
             role="button"
           >
-            {isFarmpage ? <Trans>Classic Farms</Trans> : <Trans>Classic Pools</Trans>}
+            {isFarmPage ? <Trans>Classic Farms</Trans> : <Trans>Classic Pools</Trans>}
           </Text>
         </Flex>
       </MouseoverTooltip>
+
+      <ElasticHackedModal
+        isOpen={isOpenElasticHacked}
+        onClose={() => {
+          setOpenElasticHacked(false)
+          if (!isMyPoolPage) {
+            handleSwitchTab(VERSION.CLASSIC)
+          }
+        }}
+        onConfirm={() => {
+          setOpenElasticHacked(false)
+          if (!isMyPoolPage) {
+            navigate({ pathname: APP_PATHS.MY_POOLS, search: 'skipAlert=1' })
+          }
+        }}
+      />
     </Flex>
   )
 }

diff --git a/src/components/ElasticHackedModal.tsx 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 (
+    <Modal isOpen={isOpen} width="480px" maxWidth="unset">
+      <Flex flexDirection="column" padding="20px" bg={theme.background}>
+        <Flex justifyContent="flex-end">
+          <StyledCloseIcon onClick={onClose} />
+        </Flex>
+        <Flex justifyContent="center">
+          <Info color={theme.warning} size={64} />
+        </Flex>
+        <Text marginTop="20px" textAlign="center" fontSize="16px" fontWeight={500} lineHeight="24px">
+          <Trans>Attention</Trans>
+        </Text>
+        <Text marginTop="8px" textAlign="center" fontSize={14} lineHeight="20px" color={theme.subText}>
+          <Trans>
+            Adding liquidity to Elastic Pools and staking in Elastic Farms is temporarily unavailable. Kindly visit
+            &quot;My Pool&quot; for prompt removal of your liquidity.
+          </Trans>
+        </Text>
+
+        <Flex sx={{ gap: '16px' }} marginTop="20px">
+          <ButtonOutlined style={{ flex: 1, fontSize: '16px', padding: '10px' }} onClick={onClose}>
+            <Trans>Close</Trans>
+          </ButtonOutlined>
+          <ButtonConfirmed style={{ fontSize: '16px', flex: 1, padding: '10px' }} onClick={onConfirm}>
+            <Trans>Go to My Pool</Trans>
+          </ButtonConfirmed>
+        </Flex>
+      </Flex>
+    </Modal>
+  )
+}
+
+export default ElasticHackedModal
diff --git 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={<div />}
             isSelected={isSelected}
             showFavoriteIcon={showFavoriteIcon}
             onSelect={onCurrencySelect}

diff --git a/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx b/src/pages/NotificationCenter/CreateAlert/CreateAlertForm.tsx
@@ -211,6 +211,13 @@ export default function CreateAlert({
                   </Text>
                 </Flex>
               )}
+              optionRender={item => {
+                return (
+                  <MouseoverTooltip text="">
+                    <Text sx={{ padding: '10px 18px', cursor: 'pointer' }}>{item?.label}</Text>
+                  </MouseoverTooltip>
+                )
+              }}
             />
 
             <Flex sx={{ gap: '12px' }}>