implement rewards button

lib/contexts/rewards.tsx

@@ -19,8 +19,10 @@ type TRewardsContext = {
   openLoginModal: () => void;
   closeLoginModal: () => void;
   balance: RewardsUserBalancesResponse | undefined;
+  isBalanceLoading: boolean;
   refetchBalance: () => void;
   dailyReward: RewardsUserDailyCheckResponse | undefined;
+  isDailyRewardLoading: boolean;
   refetchDailyReward: () => void;
   apiToken: string | undefined;
   saveApiToken: (token: string) => void;
@@ -31,8 +33,10 @@ const RewardsContext = createContext<TRewardsContext>({
   openLoginModal: () => {},
   closeLoginModal: () => {},
   balance: undefined,
+  isBalanceLoading: false,
   refetchBalance: () => {},
   dailyReward: undefined,
+  isDailyRewardLoading: false,
   refetchDailyReward: () => {},
   apiToken: undefined,
   saveApiToken: () => {},
@@ -92,8 +96,10 @@ export function RewardsContextProvider({ children }: Props) {
     openLoginModal: setIsLoginModalOpen.on,
     closeLoginModal: setIsLoginModalOpen.off,
     balance: balancesQuery.data,
+    isBalanceLoading: balancesQuery.isLoading,
     refetchBalance: balancesQuery.refetch,
     dailyReward: dailyRewardQuery.data,
+    isDailyRewardLoading: dailyRewardQuery.isLoading,
     refetchDailyReward: dailyRewardQuery.refetch,
     apiToken,
     saveApiToken,

ui/home/HeroBanner.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Heading, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
@@ -54,6 +55,7 @@ const HeroBanner = () => {
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
             <Box display={{ base: 'none', lg: 'flex' }}>
+              { config.features.rewards.isEnabled && <RewardsButton isHomePage/> }
               { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
               { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }
             </Box>

ui/marketplace/MarketplaceAppTopBar.tsx

@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/links/LinkExternal';
 import LinkInternal from 'ui/shared/links/LinkInternal';
@@ -99,6 +100,7 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading, securityReport }: Props)
         />
         { !isMobile && (
           <Flex flex="1" justifyContent="flex-end">
+            { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
             { config.features.account.isEnabled && <ProfileMenuDesktop boxSize="32px" fallbackIconSize={ 16 }/> }
             { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
           </Flex>

ui/rewards/RewardsButton.tsx

+import { Button, chakra, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import { useRewardsContext } from 'lib/contexts/rewards';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkInternal from 'ui/shared/links/LinkInternal';
+
+type Props = {
+  isHomePage?: boolean;
+  isMobile?: boolean;
+  size?: 'sm' | 'md';
+};
+
+const RewardsButton = ({ isHomePage, isMobile, size }: Props) => {
+  const { apiToken, openLoginModal, dailyReward, balance, isDailyRewardLoading, isBalanceLoading } = useRewardsContext();
+  return (
+    <Tooltip
+      label="Earn merits for using Blockscout"
+      textAlign="center"
+      padding={ 2 }
+      openDelay={ 500 }
+      display={ isMobile ? 'none' : 'flex' }
+      width="150px"
+    >
+      <Button
+        variant={ isHomePage ? 'hero' : 'header' }
+        data-selected={ Boolean(apiToken) }
+        flexShrink={ 0 }
+        as={ apiToken ? LinkInternal : 'button' }
+        { ...(apiToken ? { href: route({ pathname: '/account/rewards' }) } : {}) }
+        onClick={ apiToken ? undefined : openLoginModal }
+        fontSize="sm"
+        size={ size }
+        mr={ isMobile ? 0 : 2 }
+        boxSize={ isMobile ? '40px' : 'auto' }
+        isLoading={ isDailyRewardLoading || isBalanceLoading }
+        loadingText={ isMobile ? undefined : 'Merits' }
+        textDecoration="none !important"
+      >
+        <IconSvg
+          name={ dailyReward?.available ? 'merits_with_dot' : 'merits' }
+          boxSize={ size === 'sm' ? '26px' : '28px' }
+          flexShrink={ 0 }
+          mx={ -1 }
+        />
+        <chakra.span display={ isMobile ? 'none' : 'inline' } ml={ 2 }>
+          { apiToken ? balance?.total : 'Merits' }
+        </chakra.span>
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default RewardsButton;

ui/snippets/header/HeaderDesktop.tsx

@@ -2,6 +2,7 @@ import { HStack, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
@@ -38,6 +39,7 @@ const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
       </Box>
       { config.UI.navigation.layout === 'vertical' && (
         <Box display="flex">
+          { config.features.rewards.isEnabled && <RewardsButton/> }
           { config.features.account.isEnabled && <ProfileMenuDesktop/> }
           { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
         </Box>

ui/snippets/header/HeaderMobile.tsx

@@ -4,6 +4,7 @@ import { useInView } from 'react-intersection-observer';
 
 import config from 'configs/app';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
@@ -48,6 +49,7 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
         <Burger/>
         <NetworkLogo ml={ 2 } mr="auto"/>
         <Flex columnGap={ 2 }>
+          { config.features.rewards.isEnabled && <RewardsButton isMobile/> }
           { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
           { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
         </Flex>

ui/snippets/navigation/horizontal/NavigationDesktop.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import RewardsButton from 'ui/rewards/RewardsButton';
 import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
@@ -38,6 +39,7 @@ const NavigationDesktop = () => {
             }) }
           </Flex>
         </chakra.nav>
+        { config.features.rewards.isEnabled && <RewardsButton size="sm"/> }
         { config.features.account.isEnabled && <ProfileMenuDesktop buttonBoxSize="32px"/> }
         { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop size="sm"/> }
       </Flex>