Skip to content

Commit

Permalink
update max limit watchlist
Browse files Browse the repository at this point in the history
  • Loading branch information
@XiaoYhun
XiaoYhun committed Sep 29, 2023
1 parent d34cdd3 commit c0b0024
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 148 deletions.
2 changes: 1 addition & 1 deletion src/pages/TrueSightV2/components/SearchWithDropDown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}>
Expand Down
44 changes: 35 additions & 9 deletions src/pages/TrueSightV2/components/WatchlistButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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, {
Expand Down Expand Up @@ -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()

Expand All @@ -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',
})
}
}

Expand Down Expand Up @@ -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()}>
Expand Down Expand Up @@ -474,3 +498,5 @@ export default function WatchlistButton({
</div>
)
}

export default memo(WatchlistButton)
15 changes: 2 additions & 13 deletions src/pages/TrueSightV2/components/table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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"
Expand Down
32 changes: 0 additions & 32 deletions src/pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken.tsx
View file

This file was deleted.

10 changes: 9 additions & 1 deletion src/pages/TrueSightV2/hooks/useKyberAIData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -364,7 +373,6 @@ export const {
useCreateCustomWatchlistMutation,
useDeleteCustomWatchlistMutation,
useUpdateWatchlistsNameMutation,
useGetWatchlistInformationQuery,
useUpdateCustomizedWatchlistsPrioritiesMutation,
} = kyberAIApi
export default kyberAIApi
53 changes: 12 additions & 41 deletions src/pages/TrueSightV2/pages/SingleToken.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -246,53 +246,21 @@ 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)
} else {
navigate({ pathname: APP_PATHS.KYBERAI_RANKINGS })
}
}
useEffect(() => {
if (token) {
// setIsWatched(token.isWatched)
}
}, [token])

return (
<>
<SimpleTooltip text={t`Go back Ranking page`} hideOnMobile>
Expand All @@ -302,13 +270,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' }}>
Expand Down
53 changes: 2 additions & 51 deletions src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLTableRowElement>(null)

useOnClickOutside(rowRef, () => setShowSwapMenu(false))
Expand All @@ -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 (
<tr key={token.asset_id} ref={rowRef} onClick={handleRowClick} style={{ position: 'relative' }}>
<td>
<RowFit gap="6px">
<WatchlistButton size={above768 ? 20 : 16} assetId={token.asset_id} />
{/* <StarWithAnimation
key={token.SourceTokenID}
watched={isWatched}
loading={loadingStar}
onClick={handleWatchlistClick}
size={above768 ? 20 : 16}
disabled={!isWatched && reachedMaxLimit}
/> */}
<WatchlistButton size={above768 ? 20 : 16} assetId={token.asset_id} symbol={token.symbol} />
{above768 ? index : <></>}
</RowFit>
</td>
Expand All @@ -576,7 +528,6 @@ const TokenRow = React.memo(function TokenRow({

<Column gap="8px" style={{ cursor: 'pointer', alignItems: 'flex-start' }}>
<Text style={{ textTransform: 'uppercase' }}>{token.symbol}</Text>{' '}
{/* <TokenListVariants tokens={token.tokens} /> */}
</Column>
</Row>
</td>
Expand Down

0 comments on commit c0b0024

Please sign in to comment.