move claim button to separate component

ui/pages/RewardsDashboard.tsx

-import { Button, Flex, Skeleton, useBoolean, Image } from '@chakra-ui/react';
+import { Flex, Skeleton, Image } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
-import { SECOND } from 'lib/consts';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import { apos } from 'lib/html-entities';
-import splitSecondsInPeriods from 'ui/blockCountdown/splitSecondsInPeriods';
 import CopyField from 'ui/rewards/CopyField';
+import DailyRewardClaimButton from 'ui/rewards/DailyRewardClaimButton';
 import RewardsDashboardCard from 'ui/rewards/RewardsDashboardCard';
 import RewardsDashboardCardValue from 'ui/rewards/RewardsDashboardCardValue';
 import LinkExternal from 'ui/shared/links/LinkExternal';
@@ -15,12 +14,7 @@ import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInval
 
 const RewardsDashboard = () => {
   const router = useRouter();
-  const {
-    balancesQuery, dailyRewardQuery, apiToken, claim,
-    referralsQuery, rewardsConfigQuery, isInitialized,
-  } = useRewardsContext();
-  const [ isClaiming, setIsClaiming ] = useBoolean(false);
-  const [ timeLeft, setTimeLeft ] = React.useState<string>('');
+  const { balancesQuery, apiToken, referralsQuery, rewardsConfigQuery, isInitialized } = useRewardsContext();
 
   useRedirectForInvalidAuthToken();
 
@@ -30,54 +24,6 @@ const RewardsDashboard = () => {
     }
   }, [ isInitialized, apiToken, router ]);
 
-  const dailyRewardValue = Number(dailyRewardQuery.data?.daily_reward || 0) + Number(dailyRewardQuery.data?.pending_referral_rewards || 0);
-
-  const handleClaim = useCallback(async() => {
-    setIsClaiming.on();
-    try {
-      await claim();
-      await Promise.all([
-        balancesQuery.refetch(),
-        dailyRewardQuery.refetch(),
-      ]);
-    } catch (error) {}
-    setIsClaiming.off();
-  }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery ]);
-
-  useEffect(() => {
-    if (!dailyRewardQuery.data?.reset_at) {
-      return;
-    }
-
-    // format the date to be compatible with the Date constructor
-    const formattedDate = dailyRewardQuery.data.reset_at.replace(' ', 'T').replace(' UTC', 'Z');
-    const target = new Date(formattedDate).getTime();
-
-    let interval: ReturnType<typeof setTimeout>; // eslint-disable-line prefer-const
-
-    const updateCountdown = (target: number) => {
-      const now = new Date().getTime();
-      const difference = target - now;
-
-      if (difference > 0) {
-        const { hours, minutes, seconds } = splitSecondsInPeriods(Math.floor(difference / SECOND));
-        setTimeLeft(`${ hours }:${ minutes }:${ seconds }`);
-      } else {
-        setTimeLeft('00:00:00');
-        dailyRewardQuery.refetch();
-        clearInterval(interval);
-      }
-    };
-
-    updateCountdown(target);
-
-    interval = setInterval(() => {
-      updateCountdown(target);
-    }, SECOND);
-
-    return () => clearInterval(interval);
-  }, [ dailyRewardQuery ]);
-
   const numberOfReferrals = Number(referralsQuery.data?.referrals || 0);
 
   return (
@@ -99,18 +45,7 @@ const RewardsDashboard = () => {
           <RewardsDashboardCard
             description="Claim your daily merits and any merits received from referrals."
             direction="column-reverse"
-            contentAfter={ (
-              <Button
-                isDisabled={ !dailyRewardQuery.data?.available }
-                onClick={ handleClaim }
-                isLoading={ isClaiming || dailyRewardQuery.isPending || dailyRewardQuery.isFetching }
-              >
-                { dailyRewardQuery.data?.available ?
-                  `Claim ${ dailyRewardValue } Merits` :
-                  `Next claim in ${ timeLeft }`
-                }
-              </Button>
-            ) }
+            contentAfter={ <DailyRewardClaimButton/> }
           >
             <RewardsDashboardCardValue
               label="Total balance"

ui/rewards/DailyRewardClaimButton.tsx

+import { Button, useBoolean } from '@chakra-ui/react';
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { SECOND } from 'lib/consts';
+import { useRewardsContext } from 'lib/contexts/rewards';
+import splitSecondsInPeriods from 'ui/blockCountdown/splitSecondsInPeriods';
+
+const DailyRewardClaimButton = () => {
+  const { balancesQuery, dailyRewardQuery, claim } = useRewardsContext();
+  const [ isClaiming, setIsClaiming ] = useBoolean(false);
+  const [ timeLeft, setTimeLeft ] = React.useState<string>('');
+
+  const dailyRewardValue = useMemo(() =>
+    dailyRewardQuery.data ?
+      Number(dailyRewardQuery.data.daily_reward) + Number(dailyRewardQuery.data.pending_referral_rewards) :
+      0,
+  [ dailyRewardQuery.data ]);
+
+  const handleClaim = useCallback(async() => {
+    setIsClaiming.on();
+    try {
+      await claim();
+      await Promise.all([
+        balancesQuery.refetch(),
+        dailyRewardQuery.refetch(),
+      ]);
+    } catch (error) {}
+    setIsClaiming.off();
+  }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery ]);
+
+  useEffect(() => {
+    if (!dailyRewardQuery.data?.reset_at) {
+      return;
+    }
+
+    // format the date to be compatible with the Date constructor
+    const formattedDate = dailyRewardQuery.data.reset_at.replace(' ', 'T').replace(' UTC', 'Z');
+    const target = new Date(formattedDate).getTime();
+
+    let interval: ReturnType<typeof setTimeout>; // eslint-disable-line prefer-const
+
+    const updateCountdown = (target: number) => {
+      const now = new Date().getTime();
+      const difference = target - now;
+
+      if (difference > 0) {
+        const { hours, minutes, seconds } = splitSecondsInPeriods(Math.floor(difference / SECOND));
+        setTimeLeft(`${ hours }:${ minutes }:${ seconds }`);
+      } else {
+        setTimeLeft('00:00:00');
+        dailyRewardQuery.refetch();
+        clearInterval(interval);
+      }
+    };
+
+    updateCountdown(target);
+
+    interval = setInterval(() => {
+      updateCountdown(target);
+    }, SECOND);
+
+    return () => clearInterval(interval);
+  }, [ dailyRewardQuery ]);
+
+  return (
+    <Button
+      isDisabled={ !dailyRewardQuery.data?.available }
+      onClick={ handleClaim }
+      isLoading={ isClaiming || dailyRewardQuery.isPending || dailyRewardQuery.isFetching }
+    >
+      { dailyRewardQuery.data?.available ?
+        `Claim ${ dailyRewardValue } Merits` :
+        `Next claim in ${ timeLeft }`
+      }
+    </Button>
+  );
+};
+
+export default DailyRewardClaimButton;