improve api token logic

lib/contexts/rewards.tsx

 import { useBoolean } from '@chakra-ui/react';
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
 
 import type { RewardsUserBalancesResponse, RewardsUserDailyCheckResponse } from 'types/api/rewards';
 
@@ -19,7 +19,8 @@ type TRewardsContext = {
   refetchBalance: () => void;
   dailyReward: RewardsUserDailyCheckResponse | undefined;
   refetchDailyReward: () => void;
-  isLogedIn: boolean;
+  apiToken: string | undefined;
+  saveApiToken: (token: string) => void;
 }
 
 const RewardsContext = createContext<TRewardsContext>({
@@ -30,11 +31,14 @@ const RewardsContext = createContext<TRewardsContext>({
   refetchBalance: () => {},
   dailyReward: undefined,
   refetchDailyReward: () => {},
-  isLogedIn: false,
+  apiToken: undefined,
+  saveApiToken: () => {},
 });
 
 export function RewardsContextProvider({ children }: Props) {
-  const apiToken = cookies.get(cookies.NAMES.REWARDS_API_TOKEN);
+  const [ isLoginModalOpen, setIsLoginModalOpen ] = useBoolean(false);
+  const [ apiToken, setApiToken ] = React.useState<string | undefined>(cookies.get(cookies.NAMES.REWARDS_API_TOKEN));
+
   const apiQueryOptions = {
     queryOptions: {
       enabled: Boolean(apiToken) && config.features.rewards.isEnabled,
@@ -45,17 +49,19 @@ export function RewardsContextProvider({ children }: Props) {
       },
     },
   };
-
-  const [ isLoginModalOpen, setIsLoginModalOpen ] = useBoolean(false);
-
   const balancesQuery = useApiQuery('rewards_user_balances', apiQueryOptions);
   const dailyRewardQuery = useApiQuery('rewards_user_daily_check', apiQueryOptions);
 
+  const saveApiToken = useCallback((token: string) => {
+    cookies.set(cookies.NAMES.REWARDS_API_TOKEN, token);
+    setApiToken(token);
+  }, []);
+
   useEffect(() => {
     if (apiToken && balancesQuery.error?.status === 401) {
-      cookies.set(cookies.NAMES.REWARDS_API_TOKEN, '');
+      saveApiToken('');
     }
-  }, [ balancesQuery.error, apiToken ]);
+  }, [ balancesQuery.error, apiToken, saveApiToken ]);
 
   const value = useMemo(() => ({
     isLoginModalOpen,
@@ -65,8 +71,9 @@ export function RewardsContextProvider({ children }: Props) {
     refetchBalance: balancesQuery.refetch,
     dailyReward: dailyRewardQuery.data,
     refetchDailyReward: dailyRewardQuery.refetch,
-    isLogedIn: Boolean(apiToken),
-  }), [ isLoginModalOpen, setIsLoginModalOpen, balancesQuery, dailyRewardQuery, apiToken ]);
+    apiToken,
+    saveApiToken,
+  }), [ isLoginModalOpen, setIsLoginModalOpen, balancesQuery, dailyRewardQuery, apiToken, saveApiToken ]);
 
   return (
     <RewardsContext.Provider value={ value }>

lib/hooks/useNavItems.tsx

@@ -28,7 +28,7 @@ export default function useNavItems(): ReturnType {
   const {
     openLoginModal: openRewardsLoginModal,
     balance: rewardsBalance,
-    isLogedIn: isLoggedInToRewards,
+    apiToken: rewardsApiToken,
   } = useRewardsContext();
 
   return React.useMemo(() => {
@@ -273,10 +273,10 @@ export default function useNavItems(): ReturnType {
     const accountNavItems: ReturnType['accountNavItems'] = [
       config.features.rewards.isEnabled ? {
         text: rewardsBalance?.total ? `${ rewardsBalance?.total } Merits` : 'Merits',
-        nextRoute: isLoggedInToRewards ? { pathname: '/account/rewards' as const } : undefined,
-        onClick: isLoggedInToRewards ? undefined : openRewardsLoginModal,
+        nextRoute: rewardsApiToken ? { pathname: '/account/rewards' as const } : undefined,
+        onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
         icon: 'merits',
-        isActive: isLoggedInToRewards && pathname === '/account/rewards',
+        isActive: Boolean(rewardsApiToken) && pathname === '/account/rewards',
       } : null,
       {
         text: 'Watch list',
@@ -318,5 +318,5 @@ export default function useNavItems(): ReturnType {
     };
 
     return { mainNavItems, accountNavItems, profileItem };
-  }, [ pathname, openRewardsLoginModal, rewardsBalance, isLoggedInToRewards ]);
+  }, [ pathname, openRewardsLoginModal, rewardsBalance, rewardsApiToken ]);
 }

ui/pages/RewardsDashboard.tsx

@@ -15,14 +15,14 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 
 const RewardsDashboard = () => {
   const router = useRouter();
-  const { balance, refetchBalance, dailyReward, refetchDailyReward, isLogedIn } = useRewardsContext();
+  const { balance, refetchBalance, dailyReward, refetchDailyReward, apiToken } = useRewardsContext();
   const referralsQuery = useReferrals();
   const rewardsConfigQuery = useRewardsConfig();
   const claim = useClaim();
   const [ isClaiming, setIsClaiming ] = useBoolean(false);
   const [ timeLeft, setTimeLeft ] = React.useState<string>('');
 
-  if (!isLogedIn) {
+  if (!apiToken) {
     router.replace({ pathname: '/' }, undefined, { shallow: true });
   }
 

ui/rewards/useClaim.tsx

@@ -4,12 +4,13 @@ import type { RewardsUserDailyClaimResponse } from 'types/api/rewards';
 
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
-import * as cookies from 'lib/cookies';
+import { useRewardsContext } from 'lib/contexts/rewards';
 import useToast from 'lib/hooks/useToast';
 
 export default function useClaim() {
   const apiFetch = useApiFetch();
   const toast = useToast();
+  const { apiToken } = useRewardsContext();
 
   return useCallback(async() => {
     try {
@@ -17,7 +18,7 @@ export default function useClaim() {
         fetchParams: {
           method: 'POST',
           headers: {
-            Authorization: `Bearer ${ cookies.get(cookies.NAMES.REWARDS_API_TOKEN) }`,
+            Authorization: `Bearer ${ apiToken }`,
           },
         },
       });
@@ -35,5 +36,5 @@ export default function useClaim() {
       });
       throw _error;
     }
-  }, [ apiFetch, toast ]);
+  }, [ apiFetch, toast, apiToken ]);
 }

ui/rewards/useLogin.tsx

@@ -9,7 +9,7 @@ import type {
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
-import * as cookies from 'lib/cookies';
+import { useRewardsContext } from 'lib/contexts/rewards';
 import useToast from 'lib/hooks/useToast';
 
 function getMessageToSign(address: string, nonce: string, isLogin?: boolean, refCode?: string) {
@@ -36,6 +36,7 @@ export default function useLogin() {
   const toast = useToast();
   const { address } = useAccount();
   const { signMessageAsync } = useSignMessage();
+  const { saveApiToken } = useRewardsContext();
 
   return useCallback(async(refCode: string) => {
     try {
@@ -67,7 +68,7 @@ export default function useLogin() {
       if (!('created' in loginResponse)) {
         throw loginResponse;
       }
-      cookies.set(cookies.NAMES.REWARDS_API_TOKEN, loginResponse.token);
+      saveApiToken(loginResponse.token);
       return { isNewUser: loginResponse.created };
     } catch (_error) {
       toast({
@@ -80,5 +81,5 @@ export default function useLogin() {
       });
       throw _error;
     }
-  }, [ apiFetch, address, signMessageAsync, toast ]);
+  }, [ apiFetch, address, signMessageAsync, toast, saveApiToken ]);
 }

ui/rewards/useReferrals.tsx

 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
-import * as cookies from 'lib/cookies';
+import { useRewardsContext } from 'lib/contexts/rewards';
 
 export default function useReferrals() {
-  const apiToken = cookies.get(cookies.NAMES.REWARDS_API_TOKEN);
+  const { apiToken } = useRewardsContext();
   return useApiQuery('rewards_user_referrals', {
     queryOptions: {
       enabled: Boolean(apiToken) && config.features.rewards.isEnabled,