add default sort params by tab

c d
KyberNetwork · Oct 2, 2023 · b86a757 · b86a757
1 parent 48c9bb4
commit b86a757
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 21 deletions.
diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
@@ -17,6 +17,7 @@ import SubscribeButtonKyberAI from 'pages/TrueSightV2/components/SubscireButtonK
 import WatchlistSelect from 'pages/TrueSightV2/components/TokenFilter/WatchlistSelect'
 import { NETWORK_TO_CHAINID, SUPPORTED_NETWORK_KYBERAI, Z_INDEX_KYBER_AI } from 'pages/TrueSightV2/constants'
 import { useGetFilterCategoriesQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { KyberAIListType } from 'pages/TrueSightV2/types'
 import { useSessionInfo } from 'state/authen/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
@@ -122,11 +123,13 @@ export default function TokenFilter({
   setShowShare,
   onTrackingSelectChain,
   filter = EMPTY_OBJECT,
+  listType,
 }: {
   handleFilterChange: (filter: Record<string, string>) => void
   setShowShare: (v: boolean) => void
   onTrackingSelectChain: (v: string) => void
   filter: { [k: string]: string }
+  listType: KyberAIListType
 }) {
   const onChangeFilter = useCallback(
     (key: string, value: string) => {
@@ -213,11 +216,13 @@ export default function TokenFilter({
                 menuStyle={menuStyle}
               />
             ))}
-            <WatchlistSelect
-              value={filter['watchlist']}
-              onChange={value => onChangeFilter('watchlist', value)}
-              menuStyle={menuStyle}
-            />
+            {listType === KyberAIListType.MYWATCHLIST && (
+              <WatchlistSelect
+                value={filter['watchlist']}
+                onChange={value => onChangeFilter('watchlist', value)}
+                menuStyle={menuStyle}
+              />
+            )}
           </>
         )}
       </SelectGroup>

diff --git a/src/pages/TrueSightV2/constants/index.tsx b/src/pages/TrueSightV2/constants/index.tsx
@@ -1,5 +1,6 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 
+import { SORT_DIRECTION } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 
 import { KyberAIListType } from '../types'
@@ -62,6 +63,33 @@ export const KYBERAI_LISTYPE_TO_MIXPANEL = {
   [KyberAIListType.KYBERSWAP_DELTA]: MIXPANEL_KYBERAI_TAG.RANKING_KYBERSCORE_DELTA,
 }
 
+export enum SORT_FIELD {
+  NAME = 'symbol',
+  KYBER_SCORE = 'kyber_score',
+  PRICE = 'price',
+  VOLUME_24H = 'volume_24h',
+  CEX_NETFLOW_24H = 'total_cex_netflow_24h',
+  CEX_NETFLOW_3D = 'total_cex_netflow_3d',
+  FIRST_DISCOVER_ON = 'trending_discovered_on',
+  FUNDING_RATE = 'funding_rate',
+  PRICE_CHANGE_24H = 'percent_change_24h',
+}
+
+export const DEFAULT_SORT_BY_TAB: Partial<{ [tab in KyberAIListType]: Record<string, string> }> = {
+  [KyberAIListType.ALL]: { sort: `${SORT_FIELD.PRICE_CHANGE_24H}:${SORT_DIRECTION.DESC}` },
+  [KyberAIListType.BULLISH]: { sort: `${SORT_FIELD.KYBER_SCORE}:${SORT_DIRECTION.ASC}` },
+  [KyberAIListType.BEARISH]: { sort: `${SORT_FIELD.KYBER_SCORE}:${SORT_DIRECTION.DESC}` },
+  [KyberAIListType.TOP_CEX_INFLOW]: {
+    sort: `${SORT_FIELD.CEX_NETFLOW_3D}:${SORT_DIRECTION.DESC}`,
+    cexNetflow3D: 'gt(0)',
+  },
+  [KyberAIListType.TOP_CEX_OUTFLOW]: {
+    sort: `${SORT_FIELD.CEX_NETFLOW_3D}:${SORT_DIRECTION.DESC}`,
+    cexNetflow3D: 'lt(0)',
+  },
+  [KyberAIListType.TOP_TRADED]: { sort: `${SORT_FIELD.VOLUME_24H}:${SORT_DIRECTION.DESC}` },
+}
+
 export enum KYBERAI_CHART_ID {
   NUMBER_OF_TRADES = 'numberOfTrades',
   TRADING_VOLUME = 'tradingVolume',

diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -4,6 +4,7 @@ import baseQueryOauth from 'services/baseQueryOauth'
 
 import { SelectOption } from 'components/Select'
 import { BFF_API } from 'constants/env'
+import { DEFAULT_SORT_BY_TAB } from 'pages/TrueSightV2/constants'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
 import {
@@ -19,6 +20,7 @@ import {
   ITokenList,
   ITokenSearchResult,
   ITradingVolume,
+  KyberAIListType,
   OHLCData,
   QueryTokenParams,
 } from '../types'
@@ -32,14 +34,26 @@ const kyberAIApi = createApi({
   endpoints: builder => ({
     //1.
     tokenList: builder.query<{ data: ITokenList[]; totalItems: number }, QueryTokenParams>({
-      query: ({ type, chain, page, pageSize, watchlist, keywords, ...filter }) => ({
+      query: ({ type, chain, page, pageSize, watchlist, keywords, ...filterSort }) => ({
         url: '/assets',
         params: {
-          ...filter,
-          type: type || 'all',
+          ...DEFAULT_SORT_BY_TAB[type as KyberAIListType],
+          ...filterSort,
           page: page || 1,
           size: pageSize || 10,
           watchlist,
+          kyberScoreTags:
+            type === KyberAIListType.BULLISH
+              ? ['Very Bullish', 'Bullish'].join(',')
+              : type === KyberAIListType.BEARISH
+              ? ['Bearish', 'Very Bearish'].join(',')
+              : undefined,
+          trendingTypes:
+            type === KyberAIListType.TRENDING
+              ? 'trending'
+              : type === KyberAIListType.TRENDING_SOON
+              ? 'trending-soon'
+              : undefined,
           keywords,
         },
       }),

diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -37,7 +37,7 @@ import TokenListVariants from '../components/TokenListVariants'
 import WatchlistButton from '../components/WatchlistButton'
 import KyberScoreChart from '../components/chart/KyberScoreChart'
 import TokenAnalysisListShareContent from '../components/shareContent/TokenAnalysisListShareContent'
-import { KYBERAI_LISTYPE_TO_MIXPANEL, Z_INDEX_KYBER_AI } from '../constants'
+import { KYBERAI_LISTYPE_TO_MIXPANEL, SORT_FIELD, Z_INDEX_KYBER_AI } from '../constants'
 import { useTokenListQuery } from '../hooks/useKyberAIData'
 import { IKyberScoreChart, ITokenList, KyberAIListType, QueryTokenParams } from '../types'
 import { calculateValueToColor, formatLocaleStringNum, formatTokenPrice, navigateToSwapPage } from '../utils'
@@ -681,17 +681,6 @@ const LoadingRowSkeleton = ({ hasExtraCol }: { hasExtraCol?: boolean }) => {
   )
 }
 
-enum SORT_FIELD {
-  NAME = 'symbol',
-  KYBER_SCORE = 'kyber_score',
-  PRICE = 'price',
-  VOLUME_24H = 'volume_24h',
-  CEX_NETFLOW_24H = 'total_cex_netflow_24h',
-  CEX_NETFLOW_3D = 'total_cex_netflow_3d',
-  FIRST_DISCOVER_ON = 'trending_discovered_on',
-  FUNDING_RATE = 'funding_rate',
-}
-
 const formatParamsFromUrl = (searchParams: URLSearchParams) => {
   const { page, listType, ...filter } = Object.fromEntries(searchParams)
   return {
@@ -808,7 +797,8 @@ export default function TokenAnalysisList() {
   const [sortType, setSortType] = useState<SORT_FIELD>()
   const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.DESC)
   const SortArrow = ({ type }: { type: SORT_FIELD }) => {
-    return sortType === type && sortDirection === SORT_DIRECTION.DESC ? <ArrowUp size={16} /> : <ArrowDown size={16} />
+    if (sortType !== type) return null
+    return sortDirection === SORT_DIRECTION.DESC ? <ArrowUp size={16} /> : <ArrowDown size={16} />
   }
   const onChangeSort = (sort: SORT_FIELD) => {
     setSortType(sort)
@@ -831,6 +821,7 @@ export default function TokenAnalysisList() {
         <TokenListDraggableTabs tab={listTypeParam} setTab={handleTabChange} />
 
         <TokenFilter
+          listType={listTypeParam}
           filter={filter}
           handleFilterChange={handleFilterChange}
           setShowShare={setShowShare}

diff --git a/src/pages/TrueSightV2/types/index.tsx b/src/pages/TrueSightV2/types/index.tsx
@@ -233,4 +233,5 @@ export type QueryTokenParams = {
   pageSize?: number
   watchlist?: string
   keywords?: string
+  sort?: string
 }