done convert rtk query

src/components/Announcement/helper.ts

@@ -1,13 +1,11 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
-import AnnouncementApi from 'services/announcement'
 
 import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type'
 import { TIMES_IN_SECS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
-import { useAppDispatch } from 'state/hooks'
 
 const LsKey = 'ack-announcements'
 export const getAnnouncementsAckMap = () => JSON.parse(localStorage[LsKey] || '{}')
@@ -86,20 +84,3 @@ export const useNavigateToUrl = () => {
     [changeNetwork, currentChain, redirect],
   )
 }
-
-export const useInvalidateTags = (reducerPath: string) => {
-  const dispatch = useAppDispatch()
-  return useCallback(
-    (tag: string | string[]) => {
-      dispatch({
-        type: `${reducerPath}/invalidateTags`,
-        payload: Array.isArray(tag) ? tag : [tag],
-      })
-    },
-    [dispatch, reducerPath],
-  )
-}
-
-export const useInvalidateTagAnnouncement = () => {
-  return useInvalidateTags(AnnouncementApi.reducerPath)
-}

src/components/Announcement/index.tsx

@@ -10,13 +10,14 @@ import styled, { css } from 'styled-components'
 
 import AnnouncementView, { Tab } from 'components/Announcement/AnnoucementView'
 import DetailAnnouncementPopup from 'components/Announcement/Popups/DetailAnnouncementPopup'
-import { formatNumberOfUnread, useInvalidateTagAnnouncement } from 'components/Announcement/helper'
+import { formatNumberOfUnread } from 'components/Announcement/helper'
 import { Announcement, PrivateAnnouncement } from 'components/Announcement/type'
 import NotificationIcon from 'components/Icons/NotificationIcon'
 import MenuFlyout from 'components/MenuFlyout'
 import Modal from 'components/Modal'
 import { RTK_QUERY_TAGS } from 'constants/index'
 import useInterval from 'hooks/useInterval'
+import { useInvalidateTagAnnouncement } from 'hooks/useInvalidateTags'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { ApplicationModal } from 'state/application/actions'
 import { useDetailAnnouncement, useModalOpen, useToggleNotificationCenter } from 'state/application/hooks'

src/components/ProtectedRoute.tsx

@@ -3,9 +3,8 @@ 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 { useInvalidateTagKyberAi } from 'hooks/useInvalidateTags'
 import { useSessionInfo } from 'state/authen/hooks'
-import { useAppDispatch } from 'state/hooks'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
 type Props = {
@@ -33,20 +32,15 @@ export const ProtectedRouteKyberAI = ({
   const { userInfo } = useSessionInfo()
   const loadedPage = useRef(false)
   const canAccessPage = isWhiteList || waitUtilAuthenEndOnly
-  const dispatch = useAppDispatch()
+  const invalidateTags = useInvalidateTagKyberAi()
 
   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,
-        ]),
-      )
+      invalidateTags([RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI])
     } catch (error) {}
-  }, [userInfo?.identityId, refetch, dispatch])
+  }, [userInfo?.identityId, refetch, invalidateTags])
 
   if (loading && !loadedPage.current) return <LocalLoader />
   if (!canAccessPage) return <Navigate to={redirectUrl} replace />

src/constants/index.ts

@@ -306,6 +306,9 @@ export const RTK_QUERY_TAGS = {
   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',
+
+  // campaign
+  GET_LEADER_BOARD_CAMPAIGN: 'GET_TOKEN_LEADERBOARD_CAMPAIGN',
 }
 
 export const TRANSACTION_STATE_DEFAULT: TransactionFlowState = {

src/hooks/useInvalidateTags.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import announcementApi from 'services/announcement'
+import campaignApi from 'services/campaign'
+
+import kyberAIApi from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useAppDispatch } from 'state/hooks'
+
+const useInvalidateTags = (api: any) => {
+  const dispatch = useAppDispatch()
+  return useCallback(
+    (tag: string | string[]) => {
+      dispatch(api.util.invalidateTags(Array.isArray(tag) ? tag : [tag]))
+    },
+    [dispatch, api],
+  )
+}
+
+export const useInvalidateTagAnnouncement = () => {
+  return useInvalidateTags(announcementApi)
+}
+
+export const useInvalidateTagCampaign = () => {
+  return useInvalidateTags(campaignApi)
+}
+
+export const useInvalidateTagKyberAi = () => {
+  return useInvalidateTags(kyberAIApi)
+}

src/pages/Campaign/CampaignContent.tsx

@@ -17,8 +17,10 @@ import ProgressBar from 'components/ProgressBar'
 import ShareModal from 'components/ShareModal'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import YourCampaignTransactionsModal from 'components/YourCampaignTransactionsModal'
+import { RTK_QUERY_TAGS } from 'constants/index'
 import { useActiveWeb3React, useWeb3React } from 'hooks'
 import useInterval from 'hooks/useInterval'
+import { useInvalidateTagCampaign } from 'hooks/useInvalidateTags'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import CampaignActions from 'pages/Campaign/CampaignActions'
@@ -370,18 +372,12 @@ export default function Campaign({ refreshListCampaign, ...props }: CampaignProp
     true,
   )
 
+  const invalidateTags = useInvalidateTagCampaign()
   useEffect(() => {
     if (campaignsRefreshIn === 0 && selectedCampaign) {
-      // todo
-      // mutate([
-      //   selectedCampaign,
-      //   SWR_KEYS.getLeaderboard(selectedCampaign.id),
-      //   selectedCampaignLeaderboardPageNumber,
-      //   selectedCampaignLeaderboardLookupAddress,
-      //   account,
-      // ])
+      invalidateTags(RTK_QUERY_TAGS.GET_LEADER_BOARD_CAMPAIGN)
     }
-  }, [campaignsRefreshIn, selectedCampaign])
+  }, [campaignsRefreshIn, selectedCampaign, invalidateTags])
 
   if (campaigns.length === 0 && loadingCampaignData) {
     return <LocalLoader />

src/pages/NotificationCenter/PrivateAnnouncement.tsx

@@ -11,10 +11,10 @@ import styled from 'styled-components'
 
 import { PRIVATE_ANN_TITLE } from 'components/Announcement/PrivateAnnoucement'
 import InboxItemNotificationCenter from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useInvalidateTagAnnouncement } from 'components/Announcement/helper'
 import { PrivateAnnouncement, PrivateAnnouncementType } from 'components/Announcement/type'
 import { getAnnouncementsTemplateIds } from 'constants/env'
 import { useActiveWeb3React } from 'hooks'
+import { useInvalidateTagAnnouncement } from 'hooks/useInvalidateTags'
 import DeleteAllAlertsButton from 'pages/NotificationCenter/DeleteAllAlertsButton'
 import NoData from 'pages/NotificationCenter/NoData'
 import CommonPagination from 'pages/NotificationCenter/PriceAlerts/CommonPagination'

src/services/campaign.ts

@@ -5,7 +5,7 @@ import { parseUnits } from 'ethers/lib/utils'
 import JSBI from 'jsbi'
 
 import { CAMPAIGN_BASE_URL } from 'constants/env'
-import { RESERVE_USD_DECIMALS } from 'constants/index'
+import { RESERVE_USD_DECIMALS, RTK_QUERY_TAGS } from 'constants/index'
 import {
   CampaignData,
   CampaignLeaderboard,
@@ -201,6 +201,7 @@ const formatTxs = (data: any[]) => {
 const campaignApi = createApi({
   reducerPath: 'campaignApi',
   baseQuery: fetchBaseQuery({ baseUrl: `${CAMPAIGN_BASE_URL}/api/v1/campaigns` }),
+  tagTypes: [RTK_QUERY_TAGS.GET_LEADER_BOARD_CAMPAIGN],
   endpoints: builder => ({
     getCampaigns: builder.query<any, { campaignName: string; userAddress?: string; offset: number; limit: number }>({
       query: params => ({
@@ -218,6 +219,7 @@ const campaignApi = createApi({
         url: `/${campaignId}/leaderboard`,
       }),
       transformResponse: (data: any) => formatLeaderboardData(data?.data),
+      providesTags: [RTK_QUERY_TAGS.GET_LEADER_BOARD_CAMPAIGN],
     }),
     getLuckyWinners: builder.query<
       any,