Merge branch 'custom-watchlist' into kyberai-filter-sort

KyberNetwork · Sep 29, 2023 · 20ac0e5 · 20ac0e5
2 parents 8fd4ff7 + c0b0024
commit 20ac0e5
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 151 deletions.
diff --git a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx
@@ -210,7 +210,7 @@ const TokenItem = ({ token, onClick }: { token: ITokenSearchResult; onClick?: ()
     >
       <td>
         <RowFit gap="10px">
-          <WatchlistButton size={16} assetId={token.assetId} />
+          <WatchlistButton size={16} assetId={token.assetId} symbol={token.symbol} />
 
           <div style={{ position: 'relative' }}>
             <div style={{ borderRadius: '50%', overflow: 'hidden' }}>

diff --git a/src/pages/TrueSightV2/components/WatchlistButton.tsx b/src/pages/TrueSightV2/components/WatchlistButton.tsx
@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { AnimatePresence, Reorder, useDragControls } from 'framer-motion'
-import { CSSProperties, useEffect, useRef, useState } from 'react'
+import { CSSProperties, memo, useEffect, useRef, useState } from 'react'
 import { Check, Plus, X } from 'react-feather'
 import { useDispatch } from 'react-redux'
 import { Text } from 'rebass'
@@ -15,6 +15,8 @@ import AnimatedSpinLoader from 'components/Loader/AnimatedSpinLoader'
 import Modal from 'components/Modal'
 import Popover from 'components/Popover'
 import Row, { RowBetween, RowFit } from 'components/Row'
+import { MouseoverTooltip } from 'components/Tooltip'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 
 import kyberAIApi, {
@@ -343,23 +345,30 @@ const debounce = (func: () => void, timeout = 1000) => {
   timer = setTimeout(() => func(), timeout)
 }
 
-export default function WatchlistButton({
+const MAX_LIMIT_WATCHED_TOKEN = 50
+
+function WatchlistButton({
   assetId,
+  symbol,
   size,
   wrapperStyle,
 }: {
   assetId?: string
+  symbol?: string
   size?: number
   wrapperStyle?: CSSProperties
 }) {
   const theme = useTheme()
   const dispatch = useDispatch()
+  const mixpanelHandler = useMixpanelKyberAI()
+
   const [openMenu, setOpenMenu] = useState(false)
   const [openManageModal, setOpenManageModal] = useState(false)
 
   const { data, refetch: refetchWatchlists } = useGetWatchlistInformationQuery()
   const watchlists = data?.watchlists || []
   const numberOfWatchlists = watchlists?.length || 0
+  const isReachMaxLimit = (data?.totalUniqueAssetNumber || 0) >= MAX_LIMIT_WATCHED_TOKEN
 
   const [updateWatchlistsPriorities] = useUpdateCustomizedWatchlistsPrioritiesMutation()
 
@@ -375,12 +384,20 @@ export default function WatchlistButton({
   const handleAddtoWatchlist = (id: number) => {
     if (id && assetId) {
       addToWatchlist({ userWatchlistId: id, assetId: +assetId })
+      mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
+        token_name: symbol?.toUpperCase(),
+        option: 'add',
+      })
     }
   }
 
   const handleRemoveFromWatchlist = (id: number) => {
     if (id && assetId) {
       removeFromWatchlist({ userWatchlistId: id, assetId: +assetId })
+      mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
+        token_name: symbol?.toUpperCase(),
+        option: 'remove',
+      })
     }
   }
 
@@ -437,13 +454,20 @@ export default function WatchlistButton({
         placement="bottom-start"
         noArrow={true}
       >
-        <StarWithAnimation
-          loading={false}
-          watched={!!assetId && !!watchlists && watchlists?.some(item => item.assetIds?.includes(+assetId))}
-          onClick={() => setOpenMenu(prev => !prev)}
-          wrapperStyle={wrapperStyle}
-          size={size}
-        />
+        <MouseoverTooltip
+          text={t`You can only watch up to ${MAX_LIMIT_WATCHED_TOKEN} tokens`}
+          disableTooltip={!isReachMaxLimit}
+        >
+          <StarWithAnimation
+            loading={false}
+            watched={!!assetId && !!watchlists && watchlists?.some(item => item.assetIds?.includes(+assetId))}
+            onClick={() => {
+              !isReachMaxLimit && setOpenMenu(prev => !prev)
+            }}
+            wrapperStyle={wrapperStyle}
+            size={size}
+          />
+        </MouseoverTooltip>
       </Popover>
       <Modal isOpen={openManageModal} width="380px">
         <ModalWrapper onClick={e => e.stopPropagation()}>
@@ -474,3 +498,5 @@ export default function WatchlistButton({
     </div>
   )
 }
+
+export default memo(WatchlistButton)
diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx
@@ -579,17 +579,10 @@ const WidgetTokenRow = ({
 }) => {
   const theme = useTheme()
   const navigate = useNavigate()
-  // const { account } = useActiveWeb3React()
-  // const mixpanelHandler = useMixpanelKyberAI()
-  // const reachedMaxLimit = useIsReachMaxLimitWatchedToken(token?.tokens.length)
 
   const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]
   const hasMutipleChain = token?.tokens?.length > 1
   const [showSwapMenu, setShowSwapMenu] = useState(false)
-  // const [isWatched, setIsWatched] = useState(!!token.isWatched)
-  // const [loadingStar, setLoadingStar] = useState(false)
-  // const [addToWatchlist] = useAddToWatchlistMutation()
-  // const [removeFromWatchlist] = useRemoveFromWatchlistMutation()
 
   const rowRef = useRef<HTMLTableRowElement>(null)
 
@@ -646,18 +639,14 @@ const WidgetTokenRow = ({
   //   }
   // }
 
-  // useEffect(() => {
-  //   setIsWatched(token.isWatched)
-  // }, [token.isWatched])
-
   return (
     <tr onClick={handleRowClick} style={{ position: 'relative' }} ref={rowRef}>
       {isMobile ? (
         <>
           <td>
             <Column gap="4px">
               <RowFit gap="6px">
-                <WatchlistButton assetId={token.asset_id} />
+                <WatchlistButton assetId={token.asset_id} symbol={token.symbol} />
                 <img
                   alt="tokenInList"
                   src={token.tokens[0].logo}
@@ -693,7 +682,7 @@ const WidgetTokenRow = ({
         <>
           <td>
             <RowFit gap="6px">
-              <WatchlistButton assetId={token.asset_id} />
+              <WatchlistButton assetId={token.asset_id} symbol={token.symbol} />
               <Row gap="8px" style={{ position: 'relative', width: '24px', height: '24px' }}>
                 <img
                   alt="tokenInList"

diff --git a/src/pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken.tsx b/src/pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken.tsx
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -4,6 +4,7 @@ import baseQueryOauth from 'services/baseQueryOauth'
 
 import { SelectOption } from 'components/Select'
 import { BFF_API } from 'constants/env'
+import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
 import {
   IAssetOverview,
@@ -346,6 +347,14 @@ const kyberAIApi = createApi({
   }),
 })
 
+export const useGetWatchlistInformationQuery = () => {
+  const { isWhiteList } = useIsWhiteListKyberAI()
+
+  const data = kyberAIApi.useGetWatchlistInformationQuery(undefined, { skip: !isWhiteList })
+
+  return data
+}
+
 export const {
   useAssetOverviewQuery,
   useTokenOverviewQuery,
@@ -369,7 +378,6 @@ export const {
   useCreateCustomWatchlistMutation,
   useDeleteCustomWatchlistMutation,
   useUpdateWatchlistsNameMutation,
-  useGetWatchlistInformationQuery,
   useUpdateCustomizedWatchlistsPrioritiesMutation,
   useGetFilterCategoriesQuery,
 } = kyberAIApi

diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ChevronLeft } from 'react-feather'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -247,54 +247,21 @@ const TokenDescription = ({ description }: { description: string }) => {
 }
 
 const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoading?: boolean }) => {
-  const { account } = useActiveWeb3React()
   const theme = useTheme()
-  const mixpanelHandler = useMixpanelKyberAI()
   const navigate = useNavigate()
   const location = useLocation()
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
   const { assetId } = useParams()
   const { chain } = useKyberAIAssetOverview()
-  // const reachedMaxLimit = useIsReachMaxLimitWatchedToken()
-  // const [addToWatchlist, { isLoading: loadingAddtoWatchlist }] = useAddToWatchlistMutation()
-  // const [removeFromWatchlist, { isLoading: loadingRemovefromWatchlist }] = useRemoveFromWatchlistMutation()
-  // const [isWatched, setIsWatched] = useState(false)
 
-  // const handleStarClick = () => {
-  //   if (!token || !chain || !address || !account) return
-  //   if (isWatched) {
-  //     mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //       token_name: token.symbol?.toUpperCase(),
-  //       source: 'explore',
-  //       option: 'remove',
-  //     })
-  //     removeFromWatchlist({
-  //       tokenAddress: address,
-  //       chain,
-  //     }).then(() => setIsWatched(false))
-  //   } else {
-  //     if (!reachedMaxLimit) {
-  //       mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //         token_name: token.symbol?.toUpperCase(),
-  //         source: 'explore',
-  //         option: 'add',
-  //       })
-  //       addToWatchlist({ tokenAddress: address, chain }).then(() => setIsWatched(true))
-  //     }
-  //   }
-  // }
   const handleGoBackClick = () => {
     if (!!location?.state?.from) {
       navigate(location.state.from)
     } else {
       navigate({ pathname: APP_PATHS.KYBERAI_RANKINGS })
     }
   }
-  useEffect(() => {
-    if (token) {
-      // setIsWatched(token.isWatched)
-    }
-  }, [token])
+
   return (
     <>
       <SimpleTooltip text={t`Go back Ranking page`} hideOnMobile>
@@ -304,13 +271,16 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
       </SimpleTooltip>
       <WatchlistButton
         assetId={assetId}
-        wrapperStyle={{
-          color: theme.subText,
-          backgroundColor: theme.darkMode ? theme.buttonGray : theme.background,
-          height: above768 ? '36px' : '32px',
-          width: above768 ? '36px' : '32px',
-          borderRadius: '100%',
-        }}
+        wrapperStyle={useMemo(() => {
+          return {
+            color: theme.subText,
+            backgroundColor: theme.darkMode ? theme.buttonGray : theme.background,
+            height: above768 ? '36px' : '32px',
+            width: above768 ? '36px' : '32px',
+            borderRadius: '100%',
+          }
+        }, [above768, theme])}
+        symbol={token?.symbol}
       />
       <div style={{ position: 'relative' }}>
         <div style={{ borderRadius: '50%', overflow: 'hidden' }}>