diff --git a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx
index 30e195d44c..7d5ea5b850 100644
--- 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?: ()
>
-
+
diff --git a/src/pages/TrueSightV2/components/WatchlistButton.tsx b/src/pages/TrueSightV2/components/WatchlistButton.tsx
index a701768a9e..cf7dbf21ab 100644
--- 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}
>
- item.assetIds?.includes(+assetId))}
- onClick={() => setOpenMenu(prev => !prev)}
- wrapperStyle={wrapperStyle}
- size={size}
- />
+
+ item.assetIds?.includes(+assetId))}
+ onClick={() => {
+ !isReachMaxLimit && setOpenMenu(prev => !prev)
+ }}
+ wrapperStyle={wrapperStyle}
+ size={size}
+ />
+
e.stopPropagation()}>
@@ -474,3 +498,5 @@ export default function WatchlistButton({
)
}
+
+export default memo(WatchlistButton)
diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx
index 90d20f6396..9472d595d6 100644
--- 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 (null)
@@ -646,10 +639,6 @@ const WidgetTokenRow = ({
// }
// }
- // useEffect(() => {
- // setIsWatched(token.isWatched)
- // }, [token.isWatched])
-
return (
{isMobile ? (
@@ -657,7 +646,7 @@ const WidgetTokenRow = ({
-
+
-
+
{
- let count = 0
- data?.data.forEach((t: ITokenList) => {
- count += t.tokens.length
- })
- return count
- }, [data])
-
- return watchedCount + (tokenCount || 1) > MAX_LIMIT_WATCHED_TOKEN
-}
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
index 4672124b64..545c46b938 100644
--- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
+++ b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -3,6 +3,7 @@ import { createApi } from '@reduxjs/toolkit/dist/query/react'
import baseQueryOauth from 'services/baseQueryOauth'
import { BFF_API } from 'constants/env'
+import { useIsWhiteListKyberAI } from 'state/user/hooks'
import {
IAssetOverview,
@@ -341,6 +342,14 @@ const kyberAIApi = createApi({
}),
})
+export const useGetWatchlistInformationQuery = () => {
+ const { isWhiteList } = useIsWhiteListKyberAI()
+
+ const data = kyberAIApi.useGetWatchlistInformationQuery(undefined, { skip: !isWhiteList })
+
+ return data
+}
+
export const {
useAssetOverviewQuery,
useTokenOverviewQuery,
@@ -364,7 +373,6 @@ export const {
useCreateCustomWatchlistMutation,
useDeleteCustomWatchlistMutation,
useUpdateWatchlistsNameMutation,
- useGetWatchlistInformationQuery,
useUpdateCustomizedWatchlistsPrioritiesMutation,
} = kyberAIApi
export default kyberAIApi
diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx
index f110bdf403..e361862123 100644
--- 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'
@@ -246,41 +246,13 @@ const TokenDescription = ({ description }: { description: string }) => {
}
const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoading?: boolean }) => {
- // const { account } = useActiveWeb3React()
const theme = useTheme()
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)
@@ -288,11 +260,7 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
navigate({ pathname: APP_PATHS.KYBERAI_RANKINGS })
}
}
- useEffect(() => {
- if (token) {
- // setIsWatched(token.isWatched)
- }
- }, [token])
+
return (
<>
@@ -302,13 +270,16 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
{
+ 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}
/>
diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
index adb3f117ba..cfefa8b2ee 100644
--- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
+++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -477,14 +477,9 @@ const TokenRow = React.memo(function TokenRow({
const navigate = useNavigate()
const location = useLocation()
const mixpanelHandler = useMixpanelKyberAI()
- // const { account } = useActiveWeb3React()
const theme = useTheme()
- // const reachedMaxLimit = useIsReachMaxLimitWatchedToken()
const [showSwapMenu, setShowSwapMenu] = useState(false)
- // const [addToWatchlist] = useAddToWatchlistMutation()
- // const [removeFromWatchlist] = useRemoveFromWatchlistMutation()
- // const [isWatched, setIsWatched] = useState(false)
- // const [loadingStar, setLoadingStar] = useState(false)
+
const rowRef = useRef(null)
useOnClickOutside(rowRef, () => setShowSwapMenu(false))
@@ -501,55 +496,12 @@ const TokenRow = React.memo(function TokenRow({
)
}
- // const handleWatchlistClick = (e: any) => {
- // e.stopPropagation()
- // if (!account) return
- // setLoadingStar(true)
- // if (isWatched) {
- // mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
- // token_name: token.symbol?.toUpperCase(),
- // source: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
- // ranking_order: index,
- // option: 'remove',
- // })
- // Promise.all(token.tokens.map(t => removeFromWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
- // setIsWatched(false)
- // setLoadingStar(false)
- // })
- // } else {
- // if (!reachedMaxLimit) {
- // mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
- // token_name: token.symbol?.toUpperCase(),
- // source: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
- // ranking_order: index,
- // option: 'add',
- // })
- // Promise.all(token.tokens.map(t => addToWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
- // setIsWatched(true)
- // setLoadingStar(false)
- // })
- // }
- // }
- // }
-
- // useEffect(() => {
- // setIsWatched(token.isWatched)
- // }, [token.isWatched])
-
const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]
return (
-
- {/* */}
+
{above768 ? index : <>>}
|
@@ -576,7 +528,6 @@ const TokenRow = React.memo(function TokenRow({
{token.symbol}{' '}
- {/* */}
| | |