Merge remote-tracking branch 'origin/main' into fix-kyberai-bugs

.github/workflows/pr.yaml

@@ -114,7 +114,7 @@ jobs:
           VITE_TAG: ${{ needs.prepare.outputs.image_tag }}
           CURRENT_BRANCH: ${{ needs.prepare.outputs.current_branch }}
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: yarn build-dev
+        run: yarn build
 
       - name: Docker build and push
         uses: docker/build-push-action@v2

package.json

@@ -83,6 +83,7 @@
     "crypto-js": "4.1.1",
     "d3": "^7.6.1",
     "dayjs": "^1.11.6",
+    "dompurify": "^3.0.6",
     "ethers": "^5.4.6",
     "events": "^3.3.0",
     "find-replacement-tx": "^1.2.3",
@@ -154,6 +155,7 @@
     "@types/big.js": "^6.0.0",
     "@types/crypto-js": "4.1.1",
     "@types/d3": "^7.1.0",
+    "@types/dompurify": "^3.0.3",
     "@types/mixpanel-browser": "^2.38.0",
     "@types/multicodec": "^1.0.0",
     "@types/node": "^13.13.52",

src/components/Announcement/Popups/CenterPopup.tsx

@@ -4,7 +4,6 @@ import { useMedia } from 'react-use'
 import styled from 'styled-components'
 
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import {
   AnnouncementTemplatePopup,
   PopupContentAnnouncement,
@@ -17,6 +16,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const Wrapper = styled.div`

src/components/Announcement/Popups/DetailAnnouncementPopup.tsx

@@ -6,14 +6,14 @@ import styled from 'styled-components'
 
 import NotificationImage from 'assets/images/notification_default.png'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
 import Modal from 'components/Modal'
 import Row from 'components/Row'
 import { Z_INDEXS } from 'constants/styles'
 import useTheme from 'hooks/useTheme'
 import { useDetailAnnouncement } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const PaginationButton = styled.div`

src/components/Announcement/Popups/SnippetPopup.tsx

@@ -8,7 +8,6 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 
 import NotificationImage from 'assets/images/notification_default.png'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import {
   AnnouncementTemplatePopup,
   PopupContentAnnouncement,
@@ -20,6 +19,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useDetailAnnouncement, useRemovePopup } from 'state/application/hooks'
+import { useNavigateToUrl } from 'utils/redirect'
 
 const IMAGE_HEIGHT = '124px'
 const PADDING_MOBILE = '16px'

src/components/Announcement/Popups/TopBanner.tsx

@@ -5,13 +5,13 @@ import { useMedia } from 'react-use'
 import styled, { css, keyframes } from 'styled-components'
 
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup, PopupType } from 'components/Announcement/type'
 import Announcement from 'components/Icons/Announcement'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useActivePopups, useRemoveAllPopupByType } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const BannerWrapper = styled.div<{ color?: string }>`

src/components/Announcement/PrivateAnnoucement/InboxItemPoolPosition.tsx

@@ -12,13 +12,13 @@ import {
   RowItem,
   Title,
 } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePoolPosition } from 'components/Announcement/type'
 import { DoubleCurrencyLogoV2 } from 'components/DoubleLogo'
 import { MoneyBag } from 'components/Icons'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
+import { useNavigateToUrl } from 'utils/redirect'
 
 function InboxItemBridge({
   announcement,

src/components/Announcement/PrivateAnnoucement/InboxItemPriceAlert.tsx

@@ -6,12 +6,12 @@ import { Flex, Text } from 'rebass'
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePriceAlert } from 'components/Announcement/type'
 import { ButtonLight } from 'components/Button'
 import DeltaTokenAmount from 'components/WalletPopup/Transactions/DeltaTokenAmount'
 import useTheme from 'hooks/useTheme'
 import { HistoricalPriceAlert, PriceAlertType } from 'pages/NotificationCenter/const'
+import { useNavigateToUrl } from 'utils/redirect'
 
 export const getSwapUrlPriceAlert = (alert: HistoricalPriceAlert) => {
   const { swapURL } = alert

src/components/Announcement/PrivateAnnoucement/InboxItemPrivateMessage.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const Desc = styled.div`

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx

@@ -7,13 +7,13 @@ import styled from 'styled-components'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePoolPosition } from 'components/Announcement/type'
 import { DoubleCurrencyLogoV2 } from 'components/DoubleLogo'
 import { MoneyBag } from 'components/Icons'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { formatTime } from 'utils/time'
 
 import { ArrowWrapper, Desc, Time, Title, Wrapper } from './styled'

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PriceAlert.tsx

@@ -5,9 +5,9 @@ import styled from 'styled-components'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { getSwapUrlPriceAlert } from 'components/Announcement/PrivateAnnoucement/InboxItemPriceAlert'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePriceAlert } from 'components/Announcement/type'
 import AlertCondition from 'pages/NotificationCenter/PriceAlerts/AlertCondition'
+import { useNavigateToUrl } from 'utils/redirect'
 import { formatTime } from 'utils/time'
 
 import { Desc, Time, Title, Wrapper } from './styled'

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PrivateMessage.tsx

@@ -2,8 +2,8 @@ import { Flex } from 'rebass'
 
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 import { formatTime } from 'utils/time'
 

src/components/Announcement/helper.ts

@@ -1,12 +1,9 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
 import AnnouncementApi from 'services/announcement'
 
 import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type'
 import { TIMES_IN_SECS } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
-import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { useAppDispatch } from 'state/hooks'
 
 const LsKey = 'ack-announcements'
@@ -46,47 +43,6 @@ export const isPopupCanShow = (
   return !isRead && !isExpired && isRightChain && isOwn
 }
 
-/**
- * this hook to navigate to specific url
- * detect using window.open or navigate (react-router)
- * check change chain if needed
- */
-export const useNavigateToUrl = () => {
-  const navigate = useNavigate()
-  const { chainId: currentChain } = useActiveWeb3React()
-  const { changeNetwork } = useChangeNetwork()
-
-  const redirect = useCallback(
-    (actionURL: string) => {
-      if (actionURL && actionURL.startsWith('/')) {
-        navigate(actionURL)
-        return
-      }
-      const { pathname, host, search } = new URL(actionURL)
-      if (window.location.host === host) {
-        navigate(`${pathname}${search}`)
-      } else {
-        window.open(actionURL)
-      }
-    },
-    [navigate],
-  )
-
-  return useCallback(
-    (actionURL: string, chainId?: ChainId) => {
-      try {
-        if (!actionURL) return
-        if (chainId && chainId !== currentChain) {
-          changeNetwork(chainId, () => redirect(actionURL), undefined, true)
-        } else {
-          redirect(actionURL)
-        }
-      } catch (error) {}
-    },
-    [changeNetwork, currentChain, redirect],
-  )
-}
-
 export const useInvalidateTags = (reducerPath: string) => {
   const dispatch = useAppDispatch()
   return useCallback(

src/components/Button/index.tsx

@@ -83,6 +83,11 @@ const disabledPrimary = css<{
 export const ButtonPrimary = styled(Base)`
   background-color: ${({ theme }) => theme.primary};
   color: ${({ theme }) => theme.textReverse};
+  &:hover {
+    color: ${({ theme }) => theme.textReverse};
+    filter: brightness(0.8);
+  }
+
   &:active {
     box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary)};
     background-color: ${({ theme }) => darken(0.1, theme.primary)};

src/components/ClassicElasticTab.tsx

@@ -45,10 +45,18 @@ function ClassicElasticTab() {
 
   const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)
 
-  const showLegacyExplicit = upToMedium ? false : isFarmpage ? shouldShowFarmTab : shouldShowPositionTab
-
   const dontShowLegacy = [ChainId.ZKEVM, ChainId.BASE, ChainId.LINEA].includes(chainId)
 
+  const showLegacyExplicit =
+    upToMedium || dontShowLegacy ? false : isFarmpage ? shouldShowFarmTab : shouldShowPositionTab
+
+  useEffect(() => {
+    if (dontShowLegacy && tab === VERSION.ELASTIC_LEGACY) {
+      const newQs = { ...qs, tab: VERSION.ELASTIC }
+      navigate({ search: stringify(newQs) }, { replace: true })
+    }
+  }, [tab, dontShowLegacy, navigate, qs])
+
   const legacyTag = (small?: boolean) => (
     <Text
       sx={{

src/components/ProAmm/ProAmmFee.tsx

@@ -15,7 +15,9 @@ import FormattedCurrencyAmount from 'components/FormattedCurrencyAmount'
 import QuestionHelper from 'components/QuestionHelper'
 import { RowBetween, RowFixed } from 'components/Row'
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
+import FarmV21ABI from 'constants/abis/v2/farmv2.1.json'
 import FarmV2ABI from 'constants/abis/v2/farmv2.json'
+import { EVMNetworkInfo } from 'constants/networks/type'
 import { useActiveWeb3React, useWeb3React } from 'hooks'
 import { useContract, useProAmmNFTPositionManagerContract, useProMMFarmContract } from 'hooks/useContract'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
@@ -26,7 +28,7 @@ import { useElasticFarmsV2 } from 'state/farms/elasticv2/hooks'
 import { useTransactionAdder } from 'state/transactions/hooks'
 import { TRANSACTION_TYPE } from 'state/transactions/type'
 import { useUserSlippageTolerance } from 'state/user/hooks'
-import { basisPointsToPercent, calculateGasMargin, formattedNumLong } from 'utils'
+import { basisPointsToPercent, buildFlagsForFarmV21, calculateGasMargin, formattedNumLong } from 'utils'
 
 export default function ProAmmFee({
   tokenId,
@@ -50,7 +52,7 @@ export default function ProAmmFee({
   feeValue0: CurrencyAmount<Currency> | undefined
   feeValue1: CurrencyAmount<Currency> | undefined
 }) {
-  const { account } = useActiveWeb3React()
+  const { account, networkInfo } = useActiveWeb3React()
   const { library } = useWeb3React()
   const theme = useTheme()
   const token0Shown = feeValue0?.currency || position.pool.token0
@@ -108,12 +110,18 @@ export default function ProAmmFee({
   const { userInfo } = useElasticFarmsV2()
   const info = userInfo?.find(item => item.nftId.toString() === tokenId.toString())
   const address = info?.farmAddress
+
+  const isFarmV21 = (networkInfo as EVMNetworkInfo).elastic['farmV2.1S']
+    ?.map(item => item.toLowerCase())
+    .includes(address?.toLowerCase())
+
   const farmV2Contract = useContract(address, FarmV2ABI)
+  const farmV21Contract = useContract(address, FarmV21ABI)
 
   const collectFeeFromFarmContract = async () => {
     const isInFarmV2 = !!info
 
-    const contract = isInFarmV2 ? farmV2Contract : farmContract
+    const contract = isInFarmV2 ? (isFarmV21 ? farmV21Contract : farmV2Contract) : farmContract
 
     if (!contract || !feeValue0 || !feeValue1) {
       setAttemptingTxn(false)
@@ -125,14 +133,28 @@ export default function ProAmmFee({
     const amount1Min = feeValue1.subtract(feeValue1.multiply(basisPointsToPercent(allowedSlippage)))
     try {
       const params = isInFarmV2
-        ? [
-            info.fId,
-            [tokenId.toString()],
-            amount0Min.quotient.toString(),
-            amount1Min.quotient.toString(),
-            deadline?.toString(),
-            true,
-          ]
+        ? isFarmV21
+          ? [
+              info.fId,
+              [tokenId.toString()],
+              amount0Min.quotient.toString(),
+              amount1Min.quotient.toString(),
+              deadline?.toString(),
+              buildFlagsForFarmV21({
+                isClaimFee: !!feeValue0?.greaterThan('0') && !!feeValue1?.greaterThan('0'),
+                isSyncFee: !!feeValue0?.greaterThan('0') && !!feeValue1?.greaterThan('0'),
+                isClaimReward: false,
+                isReceiveNative: true,
+              }),
+            ]
+          : [
+              info.fId,
+              [tokenId.toString()],
+              amount0Min.quotient.toString(),
+              amount1Min.quotient.toString(),
+              deadline?.toString(),
+              true,
+            ]
         : [
             [tokenId.toString()],
             amount0Min.quotient.toString(),