small refactor

r

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,15 @@ 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]))
     } catch (error) {}
-  }, [userInfo?.identityId, refetch])
+  }, [userInfo?.identityId, refetch, dispatch])
 
   if (loading && !loadedPage.current) return <LocalLoader />
   if (!canAccessPage) return <Navigate to={redirectUrl} replace />

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 = {

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)
             }}

src/pages/TrueSightV2/components/chart/KyberScoreChart.tsx

@@ -86,7 +86,7 @@ export default function KyberScoreChart({
         </defs>
         <g transform="scale(1,-1) translate(0,-21)" clipPath="url(#cut-off-outline)">
           {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)

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<IAssetOverview, { assetId?: string }>({
       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: () => ({

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 (
             <td key={exname} style={{ textAlign: 'start' }}>
               <Text color={colorFundingRateText(rate, theme)}>{rate.toFixed(4) + '%' || '--'}</Text>

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

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,

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()