From e9c5505fa6275a53680df96f5076b764472ce5f2 Mon Sep 17 00:00:00 2001 From: Khac Kien Date: Wed, 29 Nov 2023 13:34:58 +0700 Subject: [PATCH 1/3] 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 --- src/components/ClassicElasticTab.tsx | 70 +++++++++++++++++++-------- src/components/ElasticHackedModal.tsx | 63 ++++++++++++++++++++++++ 2 files changed, 114 insertions(+), 19 deletions(-) create mode 100644 src/components/ElasticHackedModal.tsx 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 From 80c1a753994870f7eb935f3b38a3d1f19675c023 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?= <33005392+nguyenhoaidanh@users.noreply.github.com> Date: Wed, 29 Nov 2023 13:38:35 +0700 Subject: [PATCH 2/3] hotfix: crash kyberAI when wrong chain (#2407) --- .../components/SearchWithDropDown.tsx | 262 ++++++++++-------- 1 file changed, 142 insertions(+), 120 deletions(-) diff --git a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx index d1681bc0b1..e28ee8c4be 100644 --- a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx +++ b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx @@ -1,5 +1,5 @@ import { Trans, t } from '@lingui/macro' -import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react' +import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { X } from 'react-feather' import Skeleton, { SkeletonTheme } from 'react-loading-skeleton' import { useLocation, useNavigate } from 'react-router-dom' @@ -322,11 +322,14 @@ const SearchWithDropdown = () => { { skip: debouncedSearch === '' }, ) const [history, setHistory] = useLocalStorage>('kyberai-search-history') - const saveToHistory = (token: ITokenSearchResult) => { - if (!(history && history.some(t => t.assetId === token.assetId))) { - setHistory([token, ...(history || [])].slice(0, 3)) - } - } + const saveToHistory = useCallback( + (token: ITokenSearchResult) => { + if (!(history && history.some(t => t.assetId === token.assetId))) { + setHistory([token, ...(history || [])].slice(0, 3)) + } + }, + [history, setHistory], + ) const [getTokenData] = useLazySearchTokenQuery() useEffect(() => { @@ -396,132 +399,151 @@ const SearchWithDropdown = () => { } }, []) - const DropdownContent = () => ( -
- {isLoading ? ( - <> - - - - - ) : haveSearchResult ? ( - <> - - {searchResult.map(item => ( - { - setExpanded(false) - saveToHistory(item) - mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, { - token_name: item.symbol?.toUpperCase(), - source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE) - ? 'explore' - : KYBERAI_LISTYPE_TO_MIXPANEL[listType], - search_term: search, - }) - }} - /> - ))} - - - ) : noSearchResult ? ( - <> - - - - Oops, we couldnt find your token! We will regularly add new tokens that have achieved a certain trading - volume - - - - - ) : ( - <> - {history && ( - - - Search History - - } - > - {history.slice(0, 3).map((item, index) => ( - setExpanded(false)} /> - ))} + const content = useMemo(() => { + return ( +
+ {isLoading ? ( + <> + + - )} - - - Bullish Tokens - - } - > - {isBullishLoading ? ( - - ) : ( - top5bullish?.data?.slice(0, 3).map((item, index) => ( + + ) : haveSearchResult ? ( + <> + + {searchResult.map(item => ( { setExpanded(false) - saveToHistory(formatTokenType(item)) + saveToHistory(item) mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, { token_name: item.symbol?.toUpperCase(), source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE) ? 'explore' : KYBERAI_LISTYPE_TO_MIXPANEL[listType], - token_type: 'bullish', + search_term: debouncedSearch, }) }} /> - )) - )} - - - - Bearish Tokens - - } - > - {isBearishLoading ? ( - - ) : ( - top5bearish?.data?.slice(0, 3).map((item, index) => ( - { - setExpanded(false) - saveToHistory(formatTokenType(item)) - mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, { - token_name: item.symbol?.toUpperCase(), - source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE) - ? 'explore' - : KYBERAI_LISTYPE_TO_MIXPANEL[listType], - token_type: 'bearish', - }) - }} - /> - )) + ))} + + + ) : noSearchResult ? ( + <> + + + + Oops, we couldnt find your token! We will regularly add new tokens that have achieved a certain + trading volume + + + + + ) : ( + <> + {history && ( + + + Search History + + } + > + {history.slice(0, 3).map((item, index) => ( + setExpanded(false)} /> + ))} + )} - - - )} -
- ) + + + Bullish Tokens + + } + > + {isBullishLoading ? ( + + ) : ( + top5bullish?.data?.slice(0, 3).map((item, index) => ( + { + setExpanded(false) + saveToHistory(formatTokenType(item)) + mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, { + token_name: item.symbol?.toUpperCase(), + source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE) + ? 'explore' + : KYBERAI_LISTYPE_TO_MIXPANEL[listType], + token_type: 'bullish', + }) + }} + /> + )) + )} + + + + Bearish Tokens + + } + > + {isBearishLoading ? ( + + ) : ( + top5bearish?.data?.slice(0, 3).map((item, index) => ( + { + setExpanded(false) + saveToHistory(formatTokenType(item)) + mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, { + token_name: item.symbol?.toUpperCase(), + source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE) + ? 'explore' + : KYBERAI_LISTYPE_TO_MIXPANEL[listType], + token_type: 'bearish', + }) + }} + /> + )) + )} + + + )} +
+ ) + }, [ + above768, + haveSearchResult, + isBearishLoading, + isLoading, + theme, + listType, + isBullishLoading, + pathname, + saveToHistory, + history, + noSearchResult, + searchResult, + top5bullish, + top5bearish, + mixpanelHandler, + debouncedSearch, + ]) return ( <> @@ -549,7 +571,7 @@ const SearchWithDropdown = () => { - + {content} {expanded && } From e14c9ecb3216bedbdc4a834156b49a98f3a3c186 Mon Sep 17 00:00:00 2001 From: viet-nv Date: Wed, 29 Nov 2023 14:53:55 +0700 Subject: [PATCH 3/3] fix: balance issue --- src/components/SearchModal/CurrencyList.tsx | 1 - .../NotificationCenter/CreateAlert/CreateAlertForm.tsx | 7 +++++++ 2 files changed, 7 insertions(+), 1 deletion(-) 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} + + ) + }} />