connect api categories

KyberNetwork · Sep 22, 2023 · e71dd32 · e71dd32
1 parent 3c7494e
commit e71dd32
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 253 deletions.
diff --git a/src/components/YieldPools/ElasticFarmGroup/index.tsx b/src/components/YieldPools/ElasticFarmGroup/index.tsx
@@ -74,7 +74,7 @@ enum SORT_FIELD {
   MY_REWARD = 'my_reward',
 }
 
-const ProMMFarmGroup: React.FC<Props> = ({ address, onOpenModal, pools, userInfo, onShowStepGuide, tokenPrices }) => {
+const ElasticFarmGroup: React.FC<Props> = ({ address, onOpenModal, pools, onShowStepGuide, tokenPrices }) => {
   const theme = useTheme()
   const { account, chainId } = useActiveWeb3React()
   const above1000 = useMedia('(min-width: 1000px)')

diff --git a/src/pages/TrueSightV2/components/KyberAIWidget.tsx b/src/pages/TrueSightV2/components/KyberAIWidget.tsx
@@ -210,7 +210,6 @@ export default function Widget() {
             [WidgetTab.Bullish]: KyberAIListType.BULLISH,
             [WidgetTab.TrendingSoon]: KyberAIListType.TRENDING_SOON,
           }[activeTab],
-          chain: 'all',
           page: 1,
           pageSize: 5,
         },

diff --git a/src/pages/TrueSightV2/components/TokenFilter.tsx b/src/pages/TrueSightV2/components/TokenFilter.tsx
@@ -1,51 +1,24 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Skeleton from 'react-loading-skeleton'
 import { useMedia } from 'react-use'
 import { Text } from 'rebass'
 import styled, { css } from 'styled-components'
 
+import { FadeInAnimation } from 'components/Animation'
 import { ButtonGray } from 'components/Button'
 import Column from 'components/Column'
 import Icon from 'components/Icons/Icon'
-import Select, { SelectOption } from 'components/Select'
+import Select from 'components/Select'
+import useShowLoadingAtLeastTime from 'hooks/useShowLoadingAtLeastTime'
 import useTheme from 'hooks/useTheme'
 import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelect'
 import SubscribeButtonKyberAI from 'pages/TrueSightV2/components/SubscireButtonKyberAI'
-import { NETWORK_TO_CHAINID, Z_INDEX_KYBER_AI } from 'pages/TrueSightV2/constants'
+import { NETWORK_TO_CHAINID, SUPPORTED_NETWORK_KYBERAI, Z_INDEX_KYBER_AI } from 'pages/TrueSightV2/constants'
+import { useGetFilterCategoriesQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useSessionInfo } from 'state/authen/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
-const categories: { [key: string]: SelectOption[] } = {
-  categories: [
-    { label: 'All Categories', value: '' },
-    { label: 'Defi', value: 'defi' },
-    { label: 'Gamefi', value: 'gamefi' },
-    { label: 'Layer 2', value: 'layer2' },
-  ],
-  market_cap: [
-    { label: 'All Market Cap', value: '' },
-    { label: 'Less than $1M', value: '0,1000000' },
-    { label: 'More than $1M', value: '1000000' },
-    { label: 'More than $10M', value: '10000000' },
-    { label: 'More than $100M', value: '100000000' },
-    { label: 'More than $500M', value: '500000000' },
-  ],
-  holders: [
-    { label: 'All Holders', value: '' },
-    { label: 'Less than 1,000', value: '0,1000' },
-    { label: 'More than 1,000', value: '1000' },
-    { label: 'More than 10,000', value: '10000' },
-  ],
-  market: [
-    { label: 'All Markets', value: '' },
-    { label: 'DEXes', value: 'dexes' },
-    { label: 'CEXes', value: 'cexes' },
-  ],
-  chain: [
-    { label: 'All Chains', value: 'all' },
-    { label: 'BNB Chain', value: 'bsc' },
-  ],
-}
-
 const SELECT_SIZE = '60px'
 
 const shareStyle = css`
@@ -59,6 +32,11 @@ const shareStyle = css`
   `}
 `
 
+const StyledSkeleton = styled(Skeleton)`
+  ${shareStyle}
+  width: 150px;
+`
+
 const StyledSelect = styled(Select)`
   ${shareStyle}
 `
@@ -121,32 +99,72 @@ const SelectGroup = styled.div`
   `}
 `
 
+const getChainsFromSlugs = (values: string[] | undefined) =>
+  (values || []).map(item => NETWORK_TO_CHAINID[item || '']).filter(Boolean)
+
 export default function TokenFilter({
   handleFilterChange,
-  handleChainChange,
   setShowShare,
+  onTrackingSelectChain,
+  defaultFilter = {},
 }: {
   handleFilterChange: (filter: Record<string, string>) => void
-  handleChainChange: (v?: ChainId) => void
   setShowShare: (v: boolean) => void
+  onTrackingSelectChain: (v: string) => void
+  defaultFilter: { [k: string]: string }
 }) {
+  const [filter, setFilter] = useState(defaultFilter)
+
+  const onChangeFilter = useCallback(
+    (key: string, value: string) => {
+      const newFilter = { ...filter, [key]: value }
+      setFilter(newFilter)
+      handleFilterChange(newFilter)
+    },
+    [setFilter, handleFilterChange, filter],
+  )
+
+  const { isLogin } = useSessionInfo()
+  const { data = [], isFetching } = useGetFilterCategoriesQuery(undefined, { skip: !isLogin })
+  const showLoading = useShowLoadingAtLeastTime(isFetching, 500)
+
+  const { allChainIds, listSelects, chainFilter } = useMemo(() => {
+    const [chainFilter, ...listSelects] = data
+    const allChainIds = getChainsFromSlugs(chainFilter?.values.map(item => item.value + ''))
+
+    return { allChainIds, listSelects, chainFilter }
+  }, [data])
+
+  const defaultChains = useMemo(
+    () => getChainsFromSlugs(defaultFilter[chainFilter?.queryKey]?.split(',')),
+    [defaultFilter, chainFilter],
+  )
+
+  // todo watch list chains
+
+  const theme = useTheme()
+  const [selectedChains, setSelectChains] = useState<ChainId[]>([])
+  const handleChainChange = useCallback(
+    (values: ChainId[]) => {
+      if (!chainFilter?.queryKey) return
+      setSelectChains(values)
+      const selectAllChain = values.length === allChainIds.length
+      const valueStr = selectAllChain ? '' : values.map(id => SUPPORTED_NETWORK_KYBERAI[id]).join(',')
+      onTrackingSelectChain(selectAllChain ? 'All' : valueStr)
+      onChangeFilter(chainFilter.queryKey, valueStr)
+    },
+    [chainFilter, onChangeFilter, allChainIds, onTrackingSelectChain],
+  )
+
+  const isInit = useRef(false)
+  useEffect(() => {
+    if (isInit.current || defaultChains.length + allChainIds.length === 0) return
+    isInit.current = true
+    setSelectChains(defaultChains.length ? defaultChains : allChainIds)
+  }, [allChainIds, defaultChains])
+
+  // todo loading de len filter
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
-  const [filter, setFilter] = useState({})
-
-  const onChangeFilter = (key: string, value: string) => {
-    const newFilter = { ...filter, [key]: value }
-    setFilter(newFilter)
-    handleFilterChange(newFilter)
-  }
-
-  const listSelects = [
-    { key: 'chain', label: 'Chains' },
-    { key: 'market_cap', label: 'Market Cap' },
-    { key: 'holders', label: 'Holders' },
-    { key: 'categories', label: 'Categories' },
-    { key: 'market', label: 'Markets' },
-    // todo watch list
-  ]
 
   const activeRender = (name: string, label: ReactNode) => (
     <Column gap="6px">
@@ -157,34 +175,45 @@ export default function TokenFilter({
     </Column>
   )
 
-  const theme = useTheme()
-  const [selectedChains, setSelectChains] = useState<ChainId[]>(Object.values(NETWORK_TO_CHAINID))
-
   return (
     <StyledWrapper>
       <SelectGroup>
-        <StyledChainSelect
-          menuStyle={{ left: 0 }}
-          activeStyle={{
-            backgroundColor: 'transparent',
-            padding: 0,
-          }}
-          labelColor={theme.text}
-          handleChangeChains={setSelectChains}
-          chainIds={Object.values(NETWORK_TO_CHAINID)}
-          selectedChainIds={selectedChains}
-          activeRender={node => activeRender('Chains', node)}
-        />
-        {listSelects.map(({ key, label }) => (
-          <StyledSelect
-            key={key}
-            activeRender={item => activeRender(label, item?.label)}
-            options={categories[key]}
-            onChange={value => onChangeFilter(key, value)}
-            optionStyle={{ fontSize: '14px' }}
-            menuStyle={{ zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS, top: upToSmall ? undefined : SELECT_SIZE }}
-          />
-        ))}
+        {showLoading ? (
+          new Array(5)
+            .fill(0)
+            .map((_, i) => <StyledSkeleton key={i} baseColor={theme.buttonBlack} highlightColor={theme.border} />)
+        ) : (
+          <>
+            <StyledChainSelect
+              menuStyle={{ left: 0, zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS }}
+              activeStyle={{
+                backgroundColor: 'transparent',
+                padding: 0,
+              }}
+              labelColor={theme.text}
+              handleChangeChains={handleChainChange}
+              chainIds={allChainIds}
+              selectedChainIds={selectedChains}
+              activeRender={node => activeRender('Chains', node)}
+            />
+            {listSelects.map(({ queryKey, displayName, values }) => (
+              <StyledSelect
+                value={filter[queryKey]}
+                key={queryKey}
+                activeRender={item => activeRender(displayName, item?.label)}
+                options={values}
+                onChange={value => onChangeFilter(queryKey, value)}
+                optionStyle={{ fontSize: '14px' }}
+                menuStyle={{
+                  zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS,
+                  top: upToSmall ? undefined : SELECT_SIZE,
+                  maxHeight: 400,
+                  overflowY: 'scroll',
+                }}
+              />
+            ))}
+          </>
+        )}
       </SelectGroup>
       <ShareGroup>
         <ButtonGray

diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx
@@ -21,7 +21,7 @@ import Row, { RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
-import { NETWORK_IMAGE_URL, NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
+import { NETWORK_IMAGE_URL, NETWORK_TO_CHAINID, Z_INDEX_KYBER_AI } from 'pages/TrueSightV2/constants'
 import useIsReachMaxLimitWatchedToken from 'pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken'
 import useKyberAIAssetOverview from 'pages/TrueSightV2/hooks/useKyberAIAssetOverview'
 import {

diff --git a/src/pages/TrueSightV2/constants/index.tsx b/src/pages/TrueSightV2/constants/index.tsx
@@ -72,5 +72,6 @@ export enum KYBERAI_CHART_ID {
 
 export const Z_INDEX_KYBER_AI = {
   HEADER_TABLE_TOKENS: 2,
-  FILTER_TOKEN_OPTIONS: 3,
+  LOADING_TOKENS_TABLE: 3,
+  FILTER_TOKEN_OPTIONS: 4,
 }
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -1,6 +1,8 @@
+import { t } from '@lingui/macro'
 import { createApi } from '@reduxjs/toolkit/dist/query/react'
 import baseQueryOauth from 'services/baseQueryOauth'
 
+import { SelectOption } from 'components/Select'
 import { BFF_API } from 'constants/env'
 
 import {
@@ -33,7 +35,7 @@ const kyberAIApi = createApi({
         params: {
           ...filter,
           type: type || 'all',
-          chain: chain || 'all',
+          chain: 'all', // todo remove
           page: page || 1,
           size: pageSize || 10,
           watchlist: watchlist ? 'true' : undefined,
@@ -256,6 +258,20 @@ const kyberAIApi = createApi({
       }),
       transformResponse: (res: any) => res.data,
     }),
+    // filter
+    getFilterCategories: builder.query<{ displayName: string; queryKey: string; values: SelectOption[] }[], void>({
+      query: () => ({
+        url: `https://truesight-v2.dev.kyberengineering.io/truesight/api/v2/assets/filters`, // todo
+      }),
+      transformResponse: (res: any) =>
+        res.data.map((e: any) => ({
+          ...e,
+          values: [
+            { label: t`All ${e.displayName}`, value: '' },
+            ...e.values.map((opt: any) => ({ label: opt.displayName, value: opt.queryValue })),
+          ],
+        })),
+    }),
   }),
 })
 
@@ -279,5 +295,6 @@ export const {
   useSearchTokenQuery,
   useLazySearchTokenQuery,
   useFundingRateQuery,
+  useGetFilterCategoriesQuery,
 } = kyberAIApi
 export default kyberAIApi
diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx
@@ -15,9 +15,11 @@ import Icon from 'components/Icons/Icon'
 import { DotsLoader } from 'components/Loader/DotsLoader'
 import Row, { RowBetween, RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
+import { useActiveWeb3React } from 'hooks'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
+import { StarWithAnimation } from 'pages/TrueSightV2/components/WatchlistStar'
 import { MEDIA_WIDTHS } from 'theme'
 
 import DisplaySettings from '../components/DisplaySettings'
@@ -26,7 +28,6 @@ import KyberAIShareModal from '../components/KyberAIShareModal'
 import SimpleTooltip from '../components/SimpleTooltip'
 import SwitchVariantDropdown from '../components/SwitchVariantDropdown'
 import { TokenOverview } from '../components/TokenOverview'
-import WatchlistButton from '../components/WatchlistButton'
 import ExploreShareContent from '../components/shareContent/ExploreTopShareContent'
 import { MIXPANEL_KYBERAI_TAG, NETWORK_IMAGE_URL, NETWORK_TO_CHAINID } from '../constants'
 import useChartStatesReducer, { ChartStatesContext } from '../hooks/useChartStatesReducer'
@@ -258,7 +259,7 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
   const { account } = useActiveWeb3React()
   const theme = useTheme()
 
-  // const mixpanelHandler = useMixpanelKyberAI()
+  const mixpanelHandler = useMixpanelKyberAI()
   const navigate = useNavigate()
   const location = useLocation()
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
@@ -268,30 +269,30 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
   const [removeFromWatchlist, { isLoading: loadingRemovefromWatchlist }] = useRemoveFromWatchlistMutation()
   const [isWatched, setIsWatched] = useState(false)
 
-  // const handleStarClick = () => {
-  //   if (!token || !chain || !account) return
-  //   if (isWatched) {
-  //     mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //       token_name: token.symbol?.toUpperCase(),
-  //       source: 'explore',
-  //       option: 'remove',
-  //     })
-
-  //     removeFromWatchlist({
-  //       tokenAddress: token?.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: token?.address, chain }).then(() => setIsWatched(true))
-  //     }
-  //   }
-  // }
+  const handleStarClick = () => {
+    if (!token || !chain || !account) return
+    if (isWatched) {
+      mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
+        token_name: token.symbol?.toUpperCase(),
+        source: 'explore',
+        option: 'remove',
+      })
+
+      removeFromWatchlist({
+        tokenAddress: token?.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: token?.address, chain }).then(() => setIsWatched(true))
+      }
+    }
+  }
   const handleGoBackClick = () => {
     if (!!location?.state?.from) {
       navigate(location.state.from)