diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx index 6e2dc34ea5..ff131bba05 100644 --- a/src/components/ProtectedRoute.tsx +++ b/src/components/ProtectedRoute.tsx @@ -2,7 +2,10 @@ import { useEffect, useRef } from 'react' import { Navigate } from 'react-router-dom' import LocalLoader from 'components/LocalLoader' +import { RTK_QUERY_TAGS } from 'constants/index' +import kyberAIapi from 'pages/TrueSightV2/hooks/useKyberAIData' import { useSessionInfo } from 'state/authen/hooks' +import { useAppDispatch } from 'state/hooks' import { useIsWhiteListKyberAI } from 'state/user/hooks' type Props = { @@ -30,13 +33,20 @@ export const ProtectedRouteKyberAI = ({ const { userInfo } = useSessionInfo() const loadedPage = useRef(false) const canAccessPage = isWhiteList || waitUtilAuthenEndOnly + const dispatch = useAppDispatch() useEffect(() => { // change account sign in => refresh participant info try { refetch() + dispatch( + kyberAIapi.util.invalidateTags([ + RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, + RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI, + ]), + ) } catch (error) {} - }, [userInfo?.identityId, refetch]) + }, [userInfo?.identityId, refetch, dispatch]) if (loading && !loadedPage.current) return if (!canAccessPage) return diff --git a/src/constants/index.ts b/src/constants/index.ts index 9323d6e17a..38d2af5c38 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -308,6 +308,10 @@ export const RTK_QUERY_TAGS = { // kyber ai GET_PARTICIPANT_INFO_KYBER_AI: 'GET_PARTICIPANT_INFO_KYBER_AI', + GET_WATCHLIST_TOKENS_KYBER_AI: 'GET_WATCHLIST_TOKENS_KYBER_AI', + GET_WATCHLIST_INFO_KYBER_AI: 'GET_WATCHLIST_INFO_KYBER_AI', + GET_TOKEN_OVERVIEW_KYBER_AI: 'GET_TOKEN_OVERVIEW_KYBER_AI', + GET_TOKEN_LIST_KYBER_AI: 'GET_TOKEN_LIST_KYBER_AI', } export const TRANSACTION_STATE_DEFAULT: TransactionFlowState = { diff --git a/src/pages/TrueSightV2/components/WatchlistButton.tsx b/src/pages/TrueSightV2/components/WatchlistButton.tsx index b3d48dd109..edaf8f13a6 100644 --- a/src/pages/TrueSightV2/components/WatchlistButton.tsx +++ b/src/pages/TrueSightV2/components/WatchlistButton.tsx @@ -349,11 +349,7 @@ const CreateListInput = ({ value={value} onChange={e => { if (touchedRef.current) { - if (!checkExist(e.target.value)) { - setIsError(false) - } else { - setIsError(true) - } + setIsError(checkExist(e.target.value)) } setValue(e.target.value) }} diff --git a/src/pages/TrueSightV2/components/chart/KyberScoreChart.tsx b/src/pages/TrueSightV2/components/chart/KyberScoreChart.tsx index d1846ae029..7b98af1254 100644 --- a/src/pages/TrueSightV2/components/chart/KyberScoreChart.tsx +++ b/src/pages/TrueSightV2/components/chart/KyberScoreChart.tsx @@ -86,7 +86,7 @@ export default function KyberScoreChart({ {filledData?.map((item, index) => { - const v = item?.createdAt || 0 + const v = item?.kyberScore || 0 const gap = 2 const rectWidth = (100 - (filledData.length - 1) * gap) / filledData.length const rectHeight = !v ? 21 : Math.max((v * 21) / 100, 0.8) diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx index eebba9bcf3..4947123ac3 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 { RTK_QUERY_TAGS } from 'constants/index' import { DEFAULT_PARAMS_BY_TAB } from 'pages/TrueSightV2/constants' import { useIsWhiteListKyberAI } from 'state/user/hooks' @@ -30,7 +31,12 @@ const kyberAIApi = createApi({ baseQuery: baseQueryOauth({ baseUrl: `${BFF_API}/v1/truesight`, }), - tagTypes: ['tokenOverview', 'tokenList', 'myWatchList', 'watchlistsInfo'], + tagTypes: [ + RTK_QUERY_TAGS.GET_TOKEN_OVERVIEW_KYBER_AI, + RTK_QUERY_TAGS.GET_TOKEN_LIST_KYBER_AI, + RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, + RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI, + ], endpoints: builder => ({ //1. tokenList: builder.query<{ data: ITokenList[]; totalItems: number }, QueryTokenParams>({ @@ -56,7 +62,9 @@ const kyberAIApi = createApi({ return { data: res.data.assets, totalItems: res.data.pagination.totalItems } }, providesTags: (_, __, { type }) => - type === KyberAIListType.MYWATCHLIST ? ['myWatchList', 'tokenList'] : ['tokenList'], + type === KyberAIListType.MYWATCHLIST + ? [RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, RTK_QUERY_TAGS.GET_TOKEN_LIST_KYBER_AI] + : [RTK_QUERY_TAGS.GET_TOKEN_LIST_KYBER_AI], }), assetOverview: builder.query({ query: ({ assetId }: { assetId?: string }) => ({ @@ -272,7 +280,8 @@ const kyberAIApi = createApi({ patchResult.undo() } }, - invalidatesTags: (result, error) => (error ? [] : ['watchlistsInfo', 'myWatchList']), + invalidatesTags: (result, error) => + error ? [] : [RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI, RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI], }), //20. removeFromWatchlist: builder.mutation({ @@ -301,7 +310,8 @@ const kyberAIApi = createApi({ patchResult.undo() } }, - invalidatesTags: (_, error) => (error ? [] : ['watchlistsInfo', 'myWatchList']), + invalidatesTags: (_, error) => + error ? [] : [RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI, RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI], }), //21. createCustomWatchlist: builder.mutation({ @@ -310,7 +320,7 @@ const kyberAIApi = createApi({ method: 'POST', params, }), - invalidatesTags: (_, error) => (error ? [] : ['watchlistsInfo']), + invalidatesTags: (_, error) => (error ? [] : [RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI]), }), //22. deleteCustomWatchlist: builder.mutation({ @@ -319,7 +329,8 @@ const kyberAIApi = createApi({ method: 'DELETE', params, }), - invalidatesTags: (_, error) => (error ? [] : ['watchlistsInfo', 'myWatchList']), + invalidatesTags: (_, error) => + error ? [] : [RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI, RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI], }), //23. updateWatchlistsName: builder.mutation({ @@ -351,7 +362,7 @@ const kyberAIApi = createApi({ await dispatch(kyberAIApi.endpoints.createCustomWatchlist.initiate({ name: t`My 1st Watchlists` })) } }, - providesTags: ['watchlistsInfo'], + providesTags: [RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI], }), //26. updateCustomizedWatchlistsPriorities: builder.mutation({ @@ -360,7 +371,7 @@ const kyberAIApi = createApi({ method: 'PUT', params: { orderedIds }, }), - invalidatesTags: ['watchlistsInfo'], + invalidatesTags: [RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI], }), getFilterCategories: builder.query<{ displayName: string; queryKey: string; values: SelectOption[] }[], void>({ query: () => ({ diff --git a/src/pages/TrueSightV2/hooks/useRenderRankingList.tsx b/src/pages/TrueSightV2/hooks/useRenderRankingList.tsx index 94de308a97..89a49d7b38 100644 --- a/src/pages/TrueSightV2/hooks/useRenderRankingList.tsx +++ b/src/pages/TrueSightV2/hooks/useRenderRankingList.tsx @@ -502,7 +502,7 @@ const renderByColumnType: Record< <> {['Binance', 'OKX', 'Bybit'].map((exname: string) => { const exchange = token?.fundingRateExtra?.uMarginList?.find((item: any) => item.exchangeName === exname) - const rate = (exchange && exchange.rate) || 0 + const rate = exchange?.rate || 0 return ( {rate.toFixed(4) + '%' || '--'} diff --git a/src/services/kyberAISubscription.ts b/src/services/kyberAISubscription.ts index 42e7a7f3e8..460d3f21e2 100644 --- a/src/services/kyberAISubscription.ts +++ b/src/services/kyberAISubscription.ts @@ -39,5 +39,10 @@ const kyberAIApi = createApi({ }), }) -export const { useGetParticipantInfoQuery, useRequestWhiteListMutation, useLazyCheckReferralCodeQuery } = kyberAIApi +export const { + useLazyGetParticipantInfoQuery, + useGetParticipantInfoQuery, + useRequestWhiteListMutation, + useLazyCheckReferralCodeQuery, +} = kyberAIApi export default kyberAIApi diff --git a/src/state/profile/hooks.ts b/src/state/profile/hooks.ts index 720b203025..6afdb1c52d 100644 --- a/src/state/profile/hooks.ts +++ b/src/state/profile/hooks.ts @@ -5,7 +5,6 @@ import { useSelector } from 'react-redux' import { useGetOrCreateProfileMutation } from 'services/identity' import { useActiveWeb3React } from 'hooks' -import kyberAIapi from 'pages/TrueSightV2/hooks/useKyberAIData' import { AppState } from 'state' import { useSessionInfo } from 'state/authen/hooks' import { UserProfile, authenActions } from 'state/authen/reducer' @@ -229,7 +228,6 @@ export const useSaveUserProfile = () => { account: string | undefined }) => { dispatch(authenActions.updateProfile({ profile, isAnonymous })) - dispatch(kyberAIapi.util.invalidateTags(['myWatchList'])) saveCacheProfile({ isAnonymous, profile, diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index c7b303230e..a859d904e3 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -1,7 +1,7 @@ import { ChainId, Token } from '@kyberswap/ks-sdk-core' import { useCallback, useMemo } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { useGetParticipantInfoQuery } from 'services/kyberAISubscription' +import { useGetParticipantInfoQuery, useLazyGetParticipantInfoQuery } from 'services/kyberAISubscription' import { SUGGESTED_BASES } from 'constants/bases' import { TERM_FILES_PATH } from 'constants/index' @@ -509,11 +509,16 @@ export const useIsWhiteListKyberAI = () => { currentData: rawData, isFetching, isError, - refetch, } = useGetParticipantInfoQuery(undefined, { skip: !userInfo || userInfo?.data?.hasAccessToKyberAI, }) + const [getParticipantInfoQuery] = useLazyGetParticipantInfoQuery() + // why not use refetch of useGetParticipantInfoQuery: loop api issues, idk. + const refetch = useCallback(() => { + userInfo && getParticipantInfoQuery() + }, [getParticipantInfoQuery, userInfo]) + const { account } = useActiveWeb3React() const [connectingWallet] = useIsConnectingWallet()