Badges for streak

lib/api/services/rewards.ts

@@ -34,6 +34,9 @@ export const REWARDS_API_RESOURCES = {
   user_referrals: {
     path: '/api/v1/user/referrals',
   },
+  user_badges: {
+    path: '/api/v1/user/badges',
+  },
   user_check_activity_pass: {
     path: '/api/v1/activity/check-pass',
     filterFields: [ 'address' as const ],
@@ -74,6 +77,7 @@ R extends 'rewards:user_balances' ? rewards.GetUserBalancesResponse :
 R extends 'rewards:user_daily_check' ? rewards.DailyRewardCheckResponse :
 R extends 'rewards:user_daily_claim' ? rewards.DailyRewardClaimResponse :
 R extends 'rewards:user_referrals' ? rewards.GetReferralDataResponse :
+R extends 'rewards:user_badges' ? rewards.GetAvailableBadgesResponse :
 R extends 'rewards:user_check_activity_pass' ? rewards.CheckActivityPassResponse :
 R extends 'rewards:user_activity' ? rewards.GetActivityRewardsResponse :
 R extends 'rewards:user_activity_track_tx' ? rewards.PreSubmitTransactionResponse :

mocks/rewards/streakBadges.ts

@@ -0,0 +1,71 @@
+import type { GetAvailableBadgesResponse } from '@blockscout/points-types';
+
+export const base: GetAvailableBadgesResponse = {
+  items: [
+    {
+      chain_id: '17000',
+      address: '0xf34B6A7d0BAbb5eBEe5521Ce7e5393A10782AE96',
+      requirements: {
+        streak: '30',
+      },
+      is_qualified: false,
+      is_whitelisted: false,
+      is_minted: false,
+    },
+    {
+      chain_id: '17000',
+      address: '0xf41583090c674E55d9755b0afcbbf9ea2FA378e7',
+      requirements: {
+        streak: '90',
+      },
+      is_qualified: false,
+      is_whitelisted: false,
+      is_minted: false,
+    },
+    {
+      chain_id: '17000',
+      address: '0x6a4676480C9E36652F62d4A751eeEf562E06a383',
+      requirements: {
+        streak: '180',
+      },
+      is_qualified: false,
+      is_whitelisted: false,
+      is_minted: false,
+    },
+  ],
+};
+
+export const filled: GetAvailableBadgesResponse = {
+  items: [
+    {
+      chain_id: '17000',
+      address: '0xf34B6A7d0BAbb5eBEe5521Ce7e5393A10782AE96',
+      requirements: {
+        streak: '30',
+      },
+      is_qualified: true,
+      is_whitelisted: true,
+      is_minted: true,
+    },
+    {
+      chain_id: '17000',
+      address: '0xf41583090c674E55d9755b0afcbbf9ea2FA378e7',
+      requirements: {
+        streak: '90',
+      },
+      is_qualified: true,
+      is_whitelisted: true,
+      is_minted: true,
+    },
+    {
+      chain_id: '17000',
+      address: '0x6a4676480C9E36652F62d4A751eeEf562E06a383',
+      requirements: {
+        streak: '180',
+      },
+      is_qualified: true,
+      is_whitelisted: true,
+      is_minted: false,
+    },
+  ],
+};

package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@blockscout/bens-types": "1.4.1",
     "@blockscout/multichain-aggregator-types": "1.6.0-alpha.2",
-    "@blockscout/points-types": "1.3.0-alpha.2",
+    "@blockscout/points-types": "1.4.0-alpha.1",
     "@blockscout/stats-types": "^2.9.0",
     "@blockscout/tac-operation-lifecycle-types": "0.0.1-alpha.6",
     "@blockscout/visualizer-types": "0.2.0",

public/icons/name.d.ts

@@ -83,6 +83,7 @@
 	| "globe"
 	| "heart_filled"
 	| "heart_outline"
+	| "hexagon"
 	| "hourglass_slim"
 	| "hourglass"
 	| "info_filled"

ui/pages/RewardsDashboard.tsx

@@ -4,21 +4,27 @@ import React, { useEffect, useState } from 'react';
 import config from 'configs/app';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import { Alert } from 'toolkit/chakra/alert';
+import { Button } from 'toolkit/chakra/button';
 import { Link } from 'toolkit/chakra/link';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import { apos } from 'toolkit/utils/htmlEntities';
 import DailyRewardClaimButton from 'ui/rewards/dashboard/DailyRewardClaimButton';
 import RewardsDashboardCard from 'ui/rewards/dashboard/RewardsDashboardCard';
 import RewardsDashboardCardValue from 'ui/rewards/dashboard/RewardsDashboardCardValue';
+import RewardsStreakModal from 'ui/rewards/dashboard/streakModal/RewardsStreakModal';
 import ActivityTab from 'ui/rewards/dashboard/tabs/ActivityTab';
 import ReferralsTab from 'ui/rewards/dashboard/tabs/ReferralsTab';
 import ResourcesTab from 'ui/rewards/dashboard/tabs/ResourcesTab';
+import useStreakBadges from 'ui/rewards/hooks/useStreakBadges';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import useRedirectForInvalidAuthToken from 'ui/snippets/auth/useRedirectForInvalidAuthToken';
 
 const RewardsDashboard = () => {
   const { balancesQuery, apiToken, referralsQuery, rewardsConfigQuery, dailyRewardQuery, isInitialized } = useRewardsContext();
+  const { nextAchievementText, isLoading: isBadgesLoading, badgesQuery } = useStreakBadges();
+  const streakModal = useDisclosure();
 
   const [ isError, setIsError ] = useState(false);
 
@@ -38,13 +44,6 @@ const RewardsDashboard = () => {
     return null;
   }
 
-  let shareText = `Claim your free @blockscout #Merits and start building your daily streak today! #Blockscout #Merits #IYKYK\n\nBoost your rewards instantly by using my referral code: ${ referralsQuery.data?.link }`; // eslint-disable-line max-len
-
-  if (dailyRewardQuery.data?.streak && Number(dailyRewardQuery.data.streak) > 0) {
-    const days = `day${ Number(dailyRewardQuery.data.streak) === 1 ? '' : 's' }`;
-    shareText = `I${ apos }ve claimed Merits ${ dailyRewardQuery.data.streak } ${ days } in a row!\n\n` + shareText;
-  }
-
   return (
     <>
       <Flex gap={ 3 } justifyContent="space-between" mb={ 6 }>
@@ -69,7 +68,7 @@ const RewardsDashboard = () => {
             title="All Merits"
             description="Claim your daily Merits and any Merits received from referrals."
             contentDirection="column-reverse"
-            cardValueStyle={{ minH: { base: '64px', md: '88px' } }}
+            cardValueStyle={{ minH: { base: '64px', md: '116px' } }}
             contentAfter={ <DailyRewardClaimButton/> }
             hint={ (
               <>
@@ -90,7 +89,7 @@ const RewardsDashboard = () => {
             title="Referrals"
             description="Total number of users who have joined the program using your code or referral link."
             contentDirection="column-reverse"
-            cardValueStyle={{ minH: { base: '64px', md: '88px' } }}
+            cardValueStyle={{ minH: { base: '64px', md: '116px' } }}
           >
             <RewardsDashboardCardValue
               value={ referralsQuery.data?.referrals ?
@@ -102,15 +101,9 @@ const RewardsDashboard = () => {
           </RewardsDashboardCard>
           <RewardsDashboardCard
             title="Streak"
-            description={ (
-              <>
-                Current number of consecutive days you{ apos }ve claimed your daily Merits.{ ' ' }
-                The longer your streak, the more daily Merits you can earn.{ ' ' }
-                <Link external href={ `https://x.com/intent/tweet?text=${ encodeURIComponent(shareText) }` } fontWeight="500">
-                  Share on X
-                </Link>
-              </>
-            ) }
+            description={
+              `Current number of consecutive days you${ apos }ve claimed your daily Merits. The longer your streak, the more daily Merits you can earn.`
+            }
             hint={ (
               <>
                 See the{ ' ' }
@@ -119,15 +112,20 @@ const RewardsDashboard = () => {
               </>
             ) }
             contentDirection="column-reverse"
-            cardValueStyle={{ minH: { base: '64px', md: '88px' } }}
+            cardValueStyle={{ minH: { base: '64px', md: '116px' } }}
+            contentAfter={ (
+              <Button mt={ 3 } onClick={ streakModal.onOpen } loading={ isBadgesLoading }>
+                Check achievements
+              </Button>
+            ) }
           >
             <RewardsDashboardCardValue
-              value={
-                dailyRewardQuery.data?.streak ?
-                  `${ dailyRewardQuery.data?.streak } day${ Number(dailyRewardQuery.data?.streak) === 1 ? '' : 's' }` :
-                  'N/A'
-              }
+              value={ dailyRewardQuery.data?.streak ?
+                `${ dailyRewardQuery.data?.streak } day${ Number(dailyRewardQuery.data?.streak) === 1 ? '' : 's' }` :
+                'N/A' }
               isLoading={ dailyRewardQuery.isPending }
+              bottomText={ nextAchievementText }
+              isBottomTextLoading={ isBadgesLoading }
             />
           </RewardsDashboardCard>
         </Flex>
@@ -152,6 +150,14 @@ const RewardsDashboard = () => {
           ] }
         />
       </Flex>
+      { !isBadgesLoading && !dailyRewardQuery.isPending && (
+        <RewardsStreakModal
+          open={ streakModal.open }
+          onOpenChange={ streakModal.onOpenChange }
+          currentStreak={ Number(dailyRewardQuery.data?.streak || 0) }
+          badges={ badgesQuery.data?.items }
+        />
+      ) }
     </>
   );
 };

ui/rewards/dashboard/DailyRewardClaimButton.tsx

@@ -1,4 +1,5 @@
 import { Flex } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { useRewardsContext } from 'lib/contexts/rewards';
@@ -7,6 +8,7 @@ import { SECOND } from 'toolkit/utils/consts';
 import splitSecondsInPeriods from 'ui/blockCountdown/splitSecondsInPeriods';
 
 const DailyRewardClaimButton = () => {
+  const queryClient = useQueryClient();
   const { balancesQuery, dailyRewardQuery, claim } = useRewardsContext();
   const [ isClaiming, setIsClaiming ] = React.useState(false);
   const [ timeLeft, setTimeLeft ] = React.useState<string>('');
@@ -25,9 +27,10 @@ const DailyRewardClaimButton = () => {
         balancesQuery.refetch(),
         dailyRewardQuery.refetch(),
       ]);
+      queryClient.invalidateQueries({ queryKey: [ 'rewards:user_badges' ] });
     } catch (error) {}
     setIsClaiming(false);
-  }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery ]);
+  }, [ claim, setIsClaiming, balancesQuery, dailyRewardQuery, queryClient ]);
 
   useEffect(() => {
     if (!dailyRewardQuery.data?.reset_at) {

ui/rewards/dashboard/RewardsDashboardCard.tsx

@@ -44,6 +44,7 @@ const RewardsDashboardCard = ({
         pb={ contentDirection === 'column-reverse' ? { base: 1.5, md: 3 } : 0 }
         pt={ contentDirection === 'column-reverse' ? 0 : { base: 1.5, md: 3 } }
         w={{ base: 'full', md: contentDirection === 'row' ? '340px' : 'full' }}
+        flex={ 1 }
       >
         { label && <Badge loading={ isLoading }>{ label }</Badge> }
         { title && (
@@ -56,7 +57,9 @@ const RewardsDashboardCard = ({
         <Text as="div" fontSize="sm">
           { description }
         </Text>
-        { contentAfter }
+        <Flex flexDirection="column" mt={ contentDirection === 'column-reverse' ? 'auto' : 0 }>
+          { contentAfter }
+        </Flex>
       </Flex>
       <Flex
         alignItems="center"

ui/rewards/dashboard/RewardsDashboardCardValue.tsx

@@ -14,10 +14,11 @@ type Props = {
   hint?: string | React.ReactNode;
   isLoading?: boolean;
   bottomText?: string;
+  isBottomTextLoading?: boolean;
 };
 
-const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading, bottomText }: Props) => (
-  <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
+const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading, bottomText, isBottomTextLoading }: Props) => (
+  <Flex key={ label } flexDirection="column" alignItems="center" gap={{ base: 1, md: 2 }}>
     { label && (
       <Flex alignItems="center" gap={ 1 }>
         { hint && <Hint label={ hint }/> }
@@ -40,8 +41,8 @@ const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading, bottomT
       </Heading>
     </Skeleton>
     { bottomText && (
-      <Skeleton loading={ isLoading }>
-        <Text textStyle="xs" fontWeight="500" color="text.secondary">
+      <Skeleton loading={ isBottomTextLoading || isLoading } minW="100px">
+        <Text textStyle={{ base: 'xs', md: 'sm' }} color="text.secondary">
           { bottomText }
         </Text>
       </Skeleton>

ui/rewards/dashboard/streakModal/BadgeCard.tsx

@@ -0,0 +1,96 @@
+import { Flex, Text, Progress } from '@chakra-ui/react';
+
+import type { GetAvailableBadgesResponse } from '@blockscout/points-types';
+
+import { Image } from 'toolkit/chakra/image';
+import { Link } from 'toolkit/chakra/link';
+
+const BADGE_BG_COLORS = [ '#DFE8F5', '#D2E5FE', '#EFE1FF' ];
+
+const BADGES = [
+  '/static/merits/streak_30.png',
+  '/static/merits/streak_90.png',
+  '/static/merits/streak_180.png',
+] as const;
+
+const GHOST_BADGES = [
+  '/static/merits/streak_30_ghost.png',
+  '/static/merits/streak_90_ghost.png',
+  '/static/merits/streak_180_ghost.png',
+] as const;
+
+type Props = {
+  badge: GetAvailableBadgesResponse['items'][number];
+  currentStreak: number;
+  index: number;
+};
+
+export default function BadgeCard({ badge, currentStreak, index }: Props) {
+  const target = Number(badge.requirements?.streak || 0);
+  const isUnlocked = badge.is_whitelisted || badge.is_minted;
+  const progress = Math.min(currentStreak, target);
+
+  return (
+    <Flex direction={{ base: 'row', lg: 'column' }} alignItems="center" gap={ 3 } flex={ 1 }>
+      <Flex
+        p={{ base: 2.5, lg: 4 }}
+        borderRadius="lg"
+        bgColor={ isUnlocked ? BADGE_BG_COLORS[index] : { _light: 'gray.50', _dark: 'whiteAlpha.100' } }
+        alignItems="center"
+        justifyContent="center"
+        w={{ base: '92px', lg: 'full' }}
+        flexShrink={ 0 }
+      >
+        <Image
+          src={ isUnlocked ? BADGES[index] : GHOST_BADGES[index] }
+          alt="Streak badge"
+          h={{ base: '54px', lg: '82px' }}
+        />
+      </Flex>
+      <Flex direction="column" gap={ 3 } w="full" alignItems={{ base: 'flex-start', lg: 'center' }}>
+        <Text textStyle="sm">{ target } Day streak</Text>
+        <Flex
+          w="full"
+          alignItems="center"
+          justifyContent={{ base: 'flex-start', lg: 'center' }}
+          gap={ 2 }
+          px={{ base: 0, lg: 2 }}
+          h="32px"
+        >
+          { (() => {
+            if (badge.is_minted) {
+              return (
+                <Text textStyle="xs" color="green.500">
+                  Minted
+                </Text>
+              );
+            }
+            if (badge.is_whitelisted) {
+              return (
+                <Link
+                  href={ `https://badges.blockscout.com/mint/${ badge.address }` }
+                  external
+                  textStyle="sm"
+                >
+                  Mint a badge
+                </Link>
+              );
+            }
+            return (
+              <>
+                <Text textStyle="xs" color="text.secondary" minW="50px">
+                  { progress }/{ target }
+                </Text>
+                <Progress.Root value={ progress } min={ 0 } max={ target } flex={ 1 } size="xs" variant="subtle">
+                  <Progress.Track h="4px" bg={{ _light: 'gray.200', _dark: 'whiteAlpha.200' }}>
+                    <Progress.Range bg="green.400"/>
+                  </Progress.Track>
+                </Progress.Root>
+              </>
+            );
+          })() }
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}