From b86a757542afc0a786a53a9eb831f7a9886dd4e6 Mon Sep 17 00:00:00 2001 From: Danh Date: Mon, 2 Oct 2023 12:55:12 +0700 Subject: [PATCH] add default sort params by tab c d --- .../components/TokenFilter/index.tsx | 15 ++++++---- src/pages/TrueSightV2/constants/index.tsx | 28 +++++++++++++++++++ .../TrueSightV2/hooks/useKyberAIData.tsx | 20 +++++++++++-- .../TrueSightV2/pages/TokenAnalysisList.tsx | 17 +++-------- src/pages/TrueSightV2/types/index.tsx | 1 + 5 files changed, 60 insertions(+), 21 deletions(-) diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx index 939a2f3fbe..f89273b819 100644 --- 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) => 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} /> ))} - onChangeFilter('watchlist', value)} - menuStyle={menuStyle} - /> + {listType === KyberAIListType.MYWATCHLIST && ( + onChangeFilter('watchlist', value)} + menuStyle={menuStyle} + /> + )} )} diff --git a/src/pages/TrueSightV2/constants/index.tsx b/src/pages/TrueSightV2/constants/index.tsx index 8156ae4f0e..89bb105216 100644 --- 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 }> = { + [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 index 263e479c62..6abbc32ded 100644 --- 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 index 07bc4d6fb8..56b6aabe4c 100644 --- 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() const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.DESC) const SortArrow = ({ type }: { type: SORT_FIELD }) => { - return sortType === type && sortDirection === SORT_DIRECTION.DESC ? : + if (sortType !== type) return null + return sortDirection === SORT_DIRECTION.DESC ? : } const onChangeSort = (sort: SORT_FIELD) => { setSortType(sort) @@ -831,6 +821,7 @@ export default function TokenAnalysisList() {