From 93b077e86ef315a3787b52279ea2a1ed80c91797 Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 29 Sep 2023 11:29:54 +0700 Subject: [PATCH 1/2] add watch list filter s c --- src/components/Select.tsx | 2 +- .../TrueSightV2/components/TokenFilter.tsx | 20 +++++- .../components/WatchlistButton.tsx | 71 +++++++++++++------ .../TrueSightV2/components/WatchlistStar.tsx | 4 +- 4 files changed, 71 insertions(+), 26 deletions(-) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 158e974e36..f6fe652844 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -87,7 +87,7 @@ function Select({ style?: CSSProperties menuStyle?: CSSProperties optionStyle?: CSSProperties - onChange: (value: any) => void + onChange?: (value: any) => void forceMenuPlacementTop?: boolean arrowColor?: string }) { diff --git a/src/pages/TrueSightV2/components/TokenFilter.tsx b/src/pages/TrueSightV2/components/TokenFilter.tsx index e651744bff..68d17f1a8b 100644 --- a/src/pages/TrueSightV2/components/TokenFilter.tsx +++ b/src/pages/TrueSightV2/components/TokenFilter.tsx @@ -1,4 +1,5 @@ import { ChainId } from '@kyberswap/ks-sdk-core' +import { t } from '@lingui/macro' import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react' import Skeleton from 'react-loading-skeleton' import { useMedia } from 'react-use' @@ -13,8 +14,10 @@ import useShowLoadingAtLeastTime from 'hooks/useShowLoadingAtLeastTime' import useTheme from 'hooks/useTheme' import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelect' import SubscribeButtonKyberAI from 'pages/TrueSightV2/components/SubscireButtonKyberAI' +import WatchlistButton from 'pages/TrueSightV2/components/WatchlistButton' import { NETWORK_TO_CHAINID, SUPPORTED_NETWORK_KYBERAI, Z_INDEX_KYBER_AI } from 'pages/TrueSightV2/constants' import { useGetFilterCategoriesQuery } from 'pages/TrueSightV2/hooks/useKyberAIData' +import { ICustomWatchlists } from 'pages/TrueSightV2/types' import { useSessionInfo } from 'state/authen/hooks' import { MEDIA_WIDTHS } from 'theme' @@ -140,8 +143,6 @@ export default function TokenFilter({ [defaultFilter, chainFilter], ) - // todo watch list chains - const theme = useTheme() const [selectedChains, setSelectChains] = useState([]) const handleChainChange = useCallback( @@ -156,6 +157,12 @@ export default function TokenFilter({ [chainFilter, onChangeFilter, allChainIds, onTrackingSelectChain], ) + const [watchListInfo, setWatchlistInfo] = useState() + const handleChangeWatchlist = (watchlist: ICustomWatchlists) => { + setWatchlistInfo(watchlist) + onChangeFilter('watchlist', watchlist.id + '') + } + const isInit = useRef(false) useEffect(() => { if (isInit.current || defaultChains.length + allChainIds.length === 0) return @@ -212,6 +219,15 @@ export default function TokenFilter({ }} /> ))} + activeRender('Watchlist', watchListInfo?.name || t`All Tokens`)} + /> + } + onSelectWatchlist={handleChangeWatchlist} + /> )} diff --git a/src/pages/TrueSightV2/components/WatchlistButton.tsx b/src/pages/TrueSightV2/components/WatchlistButton.tsx index cf7dbf21ab..7889346b1e 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, memo, useEffect, useRef, useState } from 'react' +import { CSSProperties, ReactNode, memo, useEffect, useRef, useState } from 'react' import { Check, Plus, X } from 'react-feather' import { useDispatch } from 'react-redux' import { Text } from 'rebass' @@ -352,11 +352,15 @@ function WatchlistButton({ symbol, size, wrapperStyle, + onSelectWatchlist, + trigger, }: { assetId?: string symbol?: string size?: number wrapperStyle?: CSSProperties + onSelectWatchlist?: (watchListId: ICustomWatchlists) => void + trigger?: ReactNode }) { const theme = useTheme() const dispatch = useDispatch() @@ -415,6 +419,32 @@ function WatchlistButton({ debounce(() => updateWatchlistsPriorities({ orderedIds }), 1000) } + const onSelect = (watchlist: ICustomWatchlists, watched: boolean) => { + if (onSelectWatchlist) { + onSelectWatchlist(watchlist) + return + } + watched ? handleRemoveFromWatchlist(watchlist.id) : handleAddtoWatchlist(watchlist.id) + } + + const btnStar = ( + + item.assetIds?.includes(+assetId))} + onClick={() => { + !isReachMaxLimit && setOpenMenu(prev => !prev) + }} + wrapperStyle={wrapperStyle} + size={size} + /> + + ) + return (
e.stopPropagation()}> { const watched = !!assetId && !!watchlists.assetIds && watchlists.assetIds.includes(+assetId) return ( - - { - watched ? handleRemoveFromWatchlist(watchlists.id) : handleAddtoWatchlist(watchlists.id) - }} - /> + { + onSelect(watchlists, watched) + }} + > + {watchlists.name} ({watchlists.assetNumber}) ) @@ -454,20 +483,18 @@ function WatchlistButton({ placement="bottom-start" noArrow={true} > - - item.assetIds?.includes(+assetId))} - onClick={() => { - !isReachMaxLimit && setOpenMenu(prev => !prev) + {trigger ? ( +
{ + e.stopPropagation() + setOpenMenu(v => !v) }} - wrapperStyle={wrapperStyle} - size={size} - /> - + > + {trigger} +
+ ) : ( + btnStar + )} e.stopPropagation()}> diff --git a/src/pages/TrueSightV2/components/WatchlistStar.tsx b/src/pages/TrueSightV2/components/WatchlistStar.tsx index 69d396a78b..0e04c14cbf 100644 --- a/src/pages/TrueSightV2/components/WatchlistStar.tsx +++ b/src/pages/TrueSightV2/components/WatchlistStar.tsx @@ -9,6 +9,7 @@ export const StarWithAnimation = ({ size, disabled, wrapperStyle, + stopPropagation, }: { watched: boolean loading?: boolean @@ -16,6 +17,7 @@ export const StarWithAnimation = ({ size?: number disabled?: boolean wrapperStyle?: CSSProperties + stopPropagation?: boolean }) => { const theme = useTheme() const variants = { @@ -37,7 +39,7 @@ export const StarWithAnimation = ({ transition={{ scale: { type: 'spring', damping: 10, stiffness: 800, restDelta: 0.2 } }} style={{ ...wrapperStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }} onClick={e => { - e.stopPropagation() + stopPropagation && e.stopPropagation() if (!disabled) { onClick?.(e) } From 450867a055f9d771deda222adc49b320dcc85fc2 Mon Sep 17 00:00:00 2001 From: Danh Date: Fri, 29 Sep 2023 11:36:48 +0700 Subject: [PATCH 2/2] fix: lint --- src/components/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index f6fe652844..d76de0174b 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -135,7 +135,7 @@ function Select({ if (item.onSelect) item.onSelect?.() else { setSelected(value) - onChange(value) + onChange?.(value) } } return (