Add Rewards finished and error status (#4588)

src/languages/_english.json

@@ -1308,6 +1308,12 @@
       "refreshes_in_with_days": "Refreshes in %{days} days %{hours} hours",
       "refreshes_in_without_days": "Refreshes in %{hours} hours",
       "percent": "%{percent}% reward",
+      "error_title": "Something went wrong",
+      "error_text": "Please check your internet connection and check back later.",
+      "ended_title": "Program ended",
+      "ended_text": "Stay tuned for what we have in store for you next!",
+      "paused_title": "Program paused",
+      "paused_text": "Check back later, stay tuned and look for any announcements!",
       "op": {
         "airdrop_timing": {
           "title": "Airdrops Every Week",

src/languages/_french.json

@@ -1309,6 +1309,12 @@
       "refreshes_in_with_days": "Refreshes in %{days} days %{hours} hours :)",
       "refreshes_in_without_days": "Refreshes in %{hours} hours :)",
       "percent": "%{percent}% reward :)",
+      "error_title": "Something went wrong :)",
+      "error_text": "Please check your internet connection and check back later. :)",
+      "ended_title": "Program ended :)",
+      "ended_text": "Stay tuned for what we have in store for you next! :)",
+      "paused_title": "Program paused :)",
+      "paused_text": "Check back later, stay tuned and look for any announcements! :)",
       "op": {
         "airdrop_timing": {
           "title": "Airdrops Every Week :)",

src/screens/rewards/RewardsSheet.tsx

@@ -4,7 +4,6 @@ import { useDimensions } from '@/hooks';
 import { BackgroundProvider, Box } from '@/design-system';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { RewardsContent } from '@/screens/rewards/components/RewardsContent';
-import { RewardsFakeContent } from '@/screens/rewards/components/RewardsFakeContent';
 import { IS_ANDROID, IS_IOS } from '@/env';
 import { StatusBar } from 'react-native';
 import { useRewards } from '@/resources/rewards/rewardsQuery';
@@ -18,7 +17,7 @@ export const RewardsSheet: React.FC = () => {
     (state: AppState) => state.settings.accountAddress
   );
   const [isLoading, setIsLoading] = useState(true);
-  const { data, isLoading: queryIsLoading } = useRewards({
+  const { data, isLoading: queryIsLoading, isLoadingError } = useRewards({
     address: accountAddress,
   });
 
@@ -38,11 +37,11 @@ export const RewardsSheet: React.FC = () => {
           scrollEnabled
         >
           <Box padding="20px">
-            {isLoading || data === undefined || !data.rewards ? (
-              <RewardsFakeContent />
-            ) : (
-              <RewardsContent data={data.rewards} />
-            )}
+            <RewardsContent
+              data={data}
+              isLoadingError={isLoadingError}
+              isLoading={isLoading}
+            />
           </Box>
         </SlackSheet>
       )}

src/screens/rewards/components/RewardsContent.tsx

@@ -2,50 +2,94 @@ import React from 'react';
 import { RewardsTitle } from '@/screens/rewards/components/RewardsTitle';
 import { RewardsEarnings } from '@/screens/rewards/components/RewardsEarnings';
 import { RewardsAvailable } from '@/screens/rewards/components/RewardsAvailable';
-import { Rewards } from '@/graphql/__generated__/metadata';
+import {
+  GetRewardsDataForWalletQuery,
+  RewardsMetaStatus,
+} from '@/graphql/__generated__/metadata';
 import { RewardsStats } from './RewardsStats';
 import { RewardsLeaderboard } from '@/screens/rewards/components/RewardsLeaderboard';
 import { RewardsDuneLogo } from '@/screens/rewards/components/RewardsDuneLogo';
+import { RewardsFakeContent } from '@/screens/rewards/components/RewardsFakeContent';
+import { RewardsProgramStatus } from '@/screens/rewards/components/RewardsProgramStatus';
+import * as i18n from '@/languages';
 
-const LEADERBOARD_ITEMS_TRESHOLD = 50;
+const LEADERBOARD_ITEMS_THRESHOLD = 50;
 
-type Props = { data: Rewards };
+type Props = {
+  data: GetRewardsDataForWalletQuery | undefined;
+  isLoading?: boolean;
+  isLoadingError?: boolean;
+};
 
-export const RewardsContent: React.FC<Props> = ({ data }) => {
-  const leaderboardData = data.leaderboard.accounts ?? [];
+export const RewardsContent: React.FC<Props> = ({
+  data,
+  isLoading,
+  isLoadingError,
+}) => {
+  if (isLoading) {
+    return <RewardsFakeContent />;
+  }
+  if (isLoadingError || !data || !data.rewards) {
+    return (
+      <RewardsProgramStatus
+        emoji="😵"
+        title={i18n.t(i18n.l.rewards.error_title)}
+        text={i18n.t(i18n.l.rewards.error_text)}
+      />
+    );
+  }
+  if (data.rewards.meta.status === RewardsMetaStatus.Finished) {
+    return (
+      <RewardsProgramStatus
+        emoji="💸"
+        title={i18n.t(i18n.l.rewards.ended_title)}
+        text={i18n.t(i18n.l.rewards.ended_text)}
+      />
+    );
+  }
+  if (data.rewards.meta.status === RewardsMetaStatus.Paused) {
+    return (
+      <RewardsProgramStatus
+        emoji="⏸️"
+        title={i18n.t(i18n.l.rewards.paused_title)}
+        text={i18n.t(i18n.l.rewards.paused_text)}
+      />
+    );
+  }
+  const leaderboardData = data.rewards.leaderboard.accounts ?? [];
   const limitedLeaderboardData = leaderboardData.slice(
     0,
-    LEADERBOARD_ITEMS_TRESHOLD
+    LEADERBOARD_ITEMS_THRESHOLD
   );
   return (
     <>
-      <RewardsTitle text={data.meta.title} />
-      {data.earnings && (
+      <RewardsTitle text={data.rewards.meta.title} />
+      {data.rewards.earnings && (
         <RewardsEarnings
-          totalEarnings={data.earnings.total}
-          tokenImageUrl={data.meta.token.asset.iconURL ?? ''}
-          tokenSymbol={data.meta.token.asset.symbol}
-          pendingEarningsToken={data.earnings?.pending.token ?? 0}
-          nextAirdropTimestamp={data.meta.distribution.next}
-          color={data.meta.color}
+          totalEarnings={data.rewards.earnings.total}
+          tokenImageUrl={data.rewards.meta.token.asset.iconURL ?? ''}
+          tokenSymbol={data.rewards.meta.token.asset.symbol}
+          pendingEarningsToken={data.rewards.earnings?.pending.token ?? 0}
+          nextAirdropTimestamp={data.rewards.meta.distribution.next}
+          color={data.rewards.meta.color}
         />
       )}
       <RewardsAvailable
-        totalAvailableRewards={data.meta.distribution.total}
-        remainingRewards={data.meta.distribution.left}
-        nextDistributionTimestamp={data.meta.distribution.next}
-        color={data.meta.color}
+        totalAvailableRewards={data.rewards.meta.distribution.total}
+        remainingRewards={data.rewards.meta.distribution.left}
+        nextDistributionTimestamp={data.rewards.meta.distribution.next}
+        color={data.rewards.meta.color}
       />
       <RewardsStats
-        position={data.stats?.position.current ?? 1}
-        positionChange={data.stats?.position.change.h24 ?? 0}
-        actions={data.stats?.actions ?? []}
-        color={data.meta.color}
+        position={data.rewards.stats?.position.current ?? 1}
+        positionChange={data.rewards.stats?.position.change.h24 ?? 0}
+        actions={data.rewards.stats?.actions ?? []}
+        color={data.rewards.meta.color}
       />
       <RewardsLeaderboard
         leaderboard={limitedLeaderboardData}
-        programEndTimestamp={data.meta.end}
-        tokenSymbol={data.meta.token.asset.symbol}
+        programEndTimestamp={data.rewards.meta.end}
+        tokenSymbol={data.rewards.meta.token.asset.symbol}
       />
       <RewardsDuneLogo />
     </>

src/screens/rewards/components/RewardsProgramStatus.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box, Stack, Text } from '@/design-system';
+import { useDimensions } from '@/hooks';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+type Props = {
+  title: string;
+  emoji: string;
+  text: string;
+};
+
+export const RewardsProgramStatus: React.FC<Props> = ({
+  emoji,
+  text,
+  title,
+}) => {
+  const { height } = useDimensions();
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <Box
+      width="full"
+      height={{ custom: height - top }}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Stack space="24px" alignHorizontal="center">
+        <Text size="44pt" color="label" weight="heavy" containsEmoji>
+          {emoji}
+        </Text>
+        <Text size="22pt" color="label" weight="heavy">
+          {title}
+        </Text>
+        <Text size="15pt" color="label" align="center">
+          {text}
+        </Text>
+      </Stack>
+    </Box>
+  );
+};