From 0e6fd39d5a8547b8c3ba97d7fa5662324af02c3f Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Fri, 29 Sep 2023 11:26:07 +0700
Subject: [PATCH] add watch list filter

s
---
 .../TrueSightV2/components/TokenFilter.tsx    | 17 ++++-
 .../components/WatchlistButton.tsx            | 71 +++++++++++++------
 .../TrueSightV2/components/WatchlistStar.tsx  |  4 +-
 3 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/src/pages/TrueSightV2/components/TokenFilter.tsx b/src/pages/TrueSightV2/components/TokenFilter.tsx
index e651744bff..3b4533a3f5 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<ChainId[]>([])
   const handleChainChange = useCallback(
@@ -156,6 +157,12 @@ export default function TokenFilter({
     [chainFilter, onChangeFilter, allChainIds, onTrackingSelectChain],
   )
 
+  const [watchListInfo, setWatchlistInfo] = useState<ICustomWatchlists>()
+  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,12 @@ export default function TokenFilter({
                 }}
               />
             ))}
+            <WatchlistButton
+              trigger={
+                <StyledSelect activeRender={() => activeRender('Watchlist', watchListInfo?.name || t`All Tokens`)} />
+              }
+              onSelectWatchlist={handleChangeWatchlist}
+            />
           </>
         )}
       </SelectGroup>
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 = (
+    <MouseoverTooltip
+      text={t`You can only watch up to ${MAX_LIMIT_WATCHED_TOKEN} tokens`}
+      disableTooltip={!isReachMaxLimit}
+    >
+      <StarWithAnimation
+        stopPropagation
+        loading={false}
+        watched={!!assetId && !!watchlists && watchlists?.some(item => item.assetIds?.includes(+assetId))}
+        onClick={() => {
+          !isReachMaxLimit && setOpenMenu(prev => !prev)
+        }}
+        wrapperStyle={wrapperStyle}
+        size={size}
+      />
+    </MouseoverTooltip>
+  )
+
   return (
     <div onClick={e => e.stopPropagation()}>
       <Popover
@@ -425,14 +455,13 @@ function WatchlistButton({
             {watchlists?.map((watchlists: ICustomWatchlists) => {
               const watched = !!assetId && !!watchlists.assetIds && watchlists.assetIds.includes(+assetId)
               return (
-                <MenuOption key={watchlists.id}>
-                  <StarWithAnimation
-                    watched={watched}
-                    size={16}
-                    onClick={() => {
-                      watched ? handleRemoveFromWatchlist(watchlists.id) : handleAddtoWatchlist(watchlists.id)
-                    }}
-                  />
+                <MenuOption
+                  key={watchlists.id}
+                  onClick={() => {
+                    onSelect(watchlists, watched)
+                  }}
+                >
+                  <StarWithAnimation watched={watched} size={16} />
                   {watchlists.name} ({watchlists.assetNumber})
                 </MenuOption>
               )
@@ -454,20 +483,18 @@ function WatchlistButton({
         placement="bottom-start"
         noArrow={true}
       >
-        <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)
+        {trigger ? (
+          <div
+            onClick={e => {
+              e.stopPropagation()
+              setOpenMenu(v => !v)
             }}
-            wrapperStyle={wrapperStyle}
-            size={size}
-          />
-        </MouseoverTooltip>
+          >
+            {trigger}
+          </div>
+        ) : (
+          btnStar
+        )}
       </Popover>
       <Modal isOpen={openManageModal} width="380px">
         <ModalWrapper onClick={e => 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)
         }