refactoring

lib/contexts/rewards.tsx

@@ -21,42 +21,33 @@ import useToast from 'lib/hooks/useToast';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import removeQueryParam from 'lib/router/removeQueryParam';
 
-type Props = {
-  children: React.ReactNode;
-}
-
 type TRewardsContext = {
+  balancesQuery: UseQueryResult<RewardsUserBalancesResponse, ResourceError<unknown>>;
+  dailyRewardQuery: UseQueryResult<RewardsUserDailyCheckResponse, ResourceError<unknown>>;
+  referralsQuery: UseQueryResult<RewardsUserReferralsResponse, ResourceError<unknown>>;
+  rewardsConfigQuery: UseQueryResult<RewardsConfigResponse, ResourceError<unknown>>;
+  apiToken: string | undefined;
   isLoginModalOpen: boolean;
   openLoginModal: () => void;
   closeLoginModal: () => void;
-  balance: RewardsUserBalancesResponse | undefined;
-  isBalanceLoading: boolean;
-  refetchBalance: () => void;
-  dailyReward: RewardsUserDailyCheckResponse | undefined;
-  isDailyRewardLoading: boolean;
-  refetchDailyReward: () => void;
-  apiToken: string | undefined;
   login: (refCode: string) => Promise<{ isNewUser?: boolean; invalidRefCodeError?: boolean }>;
   claim: () => Promise<void>;
-  referralsQuery: UseQueryResult<RewardsUserReferralsResponse, ResourceError<unknown>>;
-  rewardsConfigQuery: UseQueryResult<RewardsConfigResponse, ResourceError<unknown>>;
 }
 
+const createDefaultQueryResult = <TData, TError>() =>
+  ({ data: undefined, isLoading: false, refetch: () => {} } as UseQueryResult<TData, TError>);
+
 const RewardsContext = createContext<TRewardsContext>({
+  balancesQuery: createDefaultQueryResult<RewardsUserBalancesResponse, ResourceError<unknown>>(),
+  dailyRewardQuery: createDefaultQueryResult<RewardsUserDailyCheckResponse, ResourceError<unknown>>(),
+  referralsQuery: createDefaultQueryResult<RewardsUserReferralsResponse, ResourceError<unknown>>(),
+  rewardsConfigQuery: createDefaultQueryResult<RewardsConfigResponse, ResourceError<unknown>>(),
+  apiToken: undefined,
   isLoginModalOpen: false,
   openLoginModal: () => {},
   closeLoginModal: () => {},
-  balance: undefined,
-  isBalanceLoading: false,
-  refetchBalance: () => {},
-  dailyReward: undefined,
-  isDailyRewardLoading: false,
-  refetchDailyReward: () => {},
-  apiToken: undefined,
   login: async() => ({}),
   claim: async() => {},
-  referralsQuery: { data: undefined, isLoading: false, refetch: () => {} } as UseQueryResult<RewardsUserReferralsResponse, ResourceError<unknown>>,
-  rewardsConfigQuery: { data: undefined, isLoading: false, refetch: () => {} } as UseQueryResult<RewardsConfigResponse, ResourceError<unknown>>,
 });
 
 function getMessageToSign(address: string, nonce: string, isLogin?: boolean, refCode?: string) {
@@ -79,6 +70,10 @@ function getMessageToSign(address: string, nonce: string, isLogin?: boolean, ref
   ].join('\n');
 }
 
+type Props = {
+  children: React.ReactNode;
+}
+
 export function RewardsContextProvider({ children }: Props) {
   const router = useRouter();
   const apiFetch = useApiFetch();
@@ -196,18 +191,14 @@ export function RewardsContextProvider({ children }: Props) {
   }, [ apiFetch, errorToast, apiToken ]);
 
   const value = useMemo(() => ({
-    isLoginModalOpen,
-    openLoginModal: setIsLoginModalOpen.on,
-    closeLoginModal: setIsLoginModalOpen.off,
-    balance: balancesQuery.data,
-    isBalanceLoading: balancesQuery.isLoading,
-    refetchBalance: balancesQuery.refetch,
-    dailyReward: dailyRewardQuery.data,
-    isDailyRewardLoading: dailyRewardQuery.isLoading,
-    refetchDailyReward: dailyRewardQuery.refetch,
+    balancesQuery,
+    dailyRewardQuery,
     referralsQuery,
     rewardsConfigQuery,
     apiToken,
+    isLoginModalOpen,
+    openLoginModal: setIsLoginModalOpen.on,
+    closeLoginModal: setIsLoginModalOpen.off,
     login,
     claim,
   }), [

lib/hooks/useNavItems.tsx

@@ -25,8 +25,8 @@ export default function useNavItems(): ReturnType {
   const pathname = router.pathname;
   const {
     openLoginModal: openRewardsLoginModal,
-    balance: rewardsBalance,
-    dailyReward,
+    balancesQuery: rewardsBalancesQuery,
+    dailyRewardQuery,
     apiToken: rewardsApiToken,
   } = useRewardsContext();
 
@@ -271,10 +271,10 @@ export default function useNavItems(): ReturnType {
 
     const accountNavItems: ReturnType['accountNavItems'] = [
       config.features.rewards.isEnabled ? {
-        text: rewardsBalance?.total ? `${ rewardsBalance?.total } Merits` : 'Merits',
+        text: rewardsBalancesQuery.data?.total ? `${ rewardsBalancesQuery.data?.total } Merits` : 'Merits',
         nextRoute: { pathname: '/account/rewards' as const },
         onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
-        icon: dailyReward?.available ? 'merits_with_dot' : 'merits',
+        icon: dailyRewardQuery.data?.available ? 'merits_with_dot' : 'merits',
         isActive: pathname === '/account/rewards',
       } : null,
       {
@@ -310,5 +310,5 @@ export default function useNavItems(): ReturnType {
     ].filter(Boolean);
 
     return { mainNavItems, accountNavItems };
-  }, [ pathname, openRewardsLoginModal, rewardsBalance, dailyReward, rewardsApiToken ]);
+  }, [ pathname, openRewardsLoginModal, rewardsBalancesQuery, dailyRewardQuery, rewardsApiToken ]);
 }

ui/pages/RewardsDashboard.tsx

@@ -12,7 +12,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 
 const RewardsDashboard = () => {
   const router = useRouter();
-  const { balance, refetchBalance, dailyReward, refetchDailyReward, apiToken, claim, referralsQuery, rewardsConfigQuery } = useRewardsContext();
+  const { balancesQuery, dailyRewardQuery, apiToken, claim, referralsQuery, rewardsConfigQuery } = useRewardsContext();
   const [ isClaiming, setIsClaiming ] = useBoolean(false);
   const [ timeLeft, setTimeLeft ] = React.useState<string>('');
 
@@ -20,25 +20,25 @@ const RewardsDashboard = () => {
     router.replace({ pathname: '/' }, undefined, { shallow: true });
   }
 
-  const dailyRewardValue = Number(dailyReward?.daily_reward || 0) + Number(dailyReward?.pending_referral_rewards || 0);
+  const dailyRewardValue = Number(dailyRewardQuery.data?.daily_reward || 0) + Number(dailyRewardQuery.data?.pending_referral_rewards || 0);
 
   const handleClaim = useCallback(async() => {
     setIsClaiming.on();
     try {
       await claim();
-      refetchBalance();
-      refetchDailyReward();
+      balancesQuery.refetch();
+      dailyRewardQuery.refetch();
     } catch (error) {}
     setIsClaiming.off();
-  }, [ claim, setIsClaiming, refetchBalance, refetchDailyReward ]);
+  }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery ]);
 
   useEffect(() => {
-    if (!dailyReward?.reset_at) {
+    if (!dailyRewardQuery.data?.reset_at) {
       return;
     }
     const interval = setInterval(() => {
       const now = new Date().getTime();
-      const target = new Date(dailyReward.reset_at).getTime();
+      const target = new Date(dailyRewardQuery.data.reset_at).getTime();
       const difference = target - now;
 
       if (difference > 0) {
@@ -46,13 +46,13 @@ const RewardsDashboard = () => {
         setTimeLeft(`${ hours }:${ minutes }:${ seconds }`);
       } else {
         setTimeLeft('00:00:00');
-        refetchDailyReward();
+        dailyRewardQuery.refetch();
         clearInterval(interval);
       }
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [ dailyReward?.reset_at, refetchDailyReward ]);
+  }, [ dailyRewardQuery ]);
 
   return (
     <>
@@ -75,7 +75,7 @@ const RewardsDashboard = () => {
             values={ [
               {
                 label: 'Total balance',
-                value: balance?.total,
+                value: balancesQuery.data?.total,
                 hint: (
                   <>
                     Total number of merits earned from all activities.{ ' ' }
@@ -87,8 +87,8 @@ const RewardsDashboard = () => {
               },
             ] }
             contentAfter={ (
-              <Button isDisabled={ !dailyReward?.available } onClick={ handleClaim } isLoading={ isClaiming }>
-                { dailyReward?.available ?
+              <Button isDisabled={ !dailyRewardQuery.data?.available } onClick={ handleClaim } isLoading={ isClaiming }>
+                { dailyRewardQuery.data?.available ?
                   `Claim ${ dailyRewardValue } Merits` :
                   `Next claim in ${ timeLeft }`
                 }

ui/rewards/RewardsButton.tsx

@@ -15,7 +15,7 @@ type Props = {
 };
 
 const RewardsButton = ({ variant = 'header', size }: Props) => {
-  const { apiToken, openLoginModal, dailyReward, balance, isDailyRewardLoading, isBalanceLoading } = useRewardsContext();
+  const { apiToken, openLoginModal, dailyRewardQuery, balancesQuery } = useRewardsContext();
   const isMobile = useIsMobile();
   return (
     <Tooltip
@@ -36,18 +36,18 @@ const RewardsButton = ({ variant = 'header', size }: Props) => {
         fontSize="sm"
         size={ size }
         px={ 2.5 }
-        isLoading={ isDailyRewardLoading || isBalanceLoading }
+        isLoading={ dailyRewardQuery.isLoading || balancesQuery.isLoading }
         loadingText={ isMobile ? undefined : 'Merits' }
         textDecoration="none !important"
       >
         <IconSvg
-          name={ dailyReward?.available ? 'merits_with_dot' : 'merits' }
+          name={ dailyRewardQuery.data?.available ? 'merits_with_dot' : 'merits' }
           boxSize={ size === 'sm' ? '26px' : '28px' }
           flexShrink={ 0 }
           mx={ -1 }
         />
         <chakra.span display={{ base: 'none', md: 'inline' }} ml={ 2 }>
-          { apiToken ? balance?.total : 'Merits' }
+          { apiToken ? balancesQuery.data?.total : 'Merits' }
         </chakra.span>
       </Button>
     </Tooltip>