feat(suite): add empty state and refetch logic for Solana staking rew…

…ards
trezor · Feb 7, 2025 · 2e71d93 · 2e71d93
1 parent 52a34dd
commit 2e71d93
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 25 deletions.
diff --git a/packages/suite/src/hooks/wallet/useSolanaRewards.ts b/packages/suite/src/hooks/wallet/useSolanaRewards.ts
@@ -82,6 +82,5 @@ export const useSolanaRewards = (account: Account) => {
         itemsPerPage,
         showPagination,
         isLastPage,
-        fetchRewards,
     };
 };
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -8705,15 +8705,28 @@ export default defineMessages({
         id: 'TR_STAKE_RESTAKED_BADGE',
         defaultMessage: 'Restaked',
     },
-    TR_STAKE_REWARDS_BAGE: {
-        id: 'TR_STAKE_REWARDS_BAGE',
+    TR_STAKE_REWARDS_BADGE: {
+        id: 'TR_STAKE_REWARDS_BADGE',
         defaultMessage: 'Epoch number {count}',
     },
     TR_STAKE_REWARDS_TOOLTIP: {
         id: 'TR_STAKE_REWARDS_TOOLTIP',
         defaultMessage:
             'An epoch in Solana is approximately {count, plural, one {# day} other {# days}} long.',
     },
+    TR_STAKE_REFRESH_REWARDS_TOOLTIP: {
+        id: 'TR_STAKE_REFRESH_REWARDS_TOOLTIP',
+        defaultMessage: 'Refresh your rewards for this account.',
+    },
+    TR_STAKE_REWARDS_ARE_EMPTY: {
+        id: 'TR_STAKE_REWARDS_ARE_EMPTY',
+        defaultMessage: 'No Rewards',
+    },
+    TR_STAKE_WAIT_TO_CHECK_REWARDS: {
+        id: 'TR_STAKE_WAIT_TO_CHECK_REWARDS',
+        defaultMessage:
+            'Wait up to {count, plural, one {# day} other {# days}} to check your rewards',
+    },
     TR_STAKE_ETH_CARD_TITLE: {
         id: 'TR_STAKE_ETH_CARD_TITLE',
         defaultMessage: 'The easiest way to earn {symbol}',

diff --git a/...ges/suite/src/views/wallet/staking/components/SolStakingDashboard/SolStakingDashboard.tsx b/...ges/suite/src/views/wallet/staking/components/SolStakingDashboard/SolStakingDashboard.tsx
@@ -12,11 +12,11 @@ import { DashboardSection } from 'src/components/dashboard';
 import { Translation } from 'src/components/suite';
 
 import { StakingDashboard } from '../StakingDashboard/StakingDashboard';
-import { RewardsList } from './components/RewardsList';
 import { ApyCard } from '../StakingDashboard/components/ApyCard';
 import { ClaimCard } from '../StakingDashboard/components/ClaimCard';
 import { PayoutCard } from '../StakingDashboard/components/PayoutCard';
 import { StakingCard } from '../StakingDashboard/components/StakingCard';
+import { RewardsList } from './components/Rewards/RewardsList';
 
 interface SolStakingDashboardProps {
     selectedAccount: SelectedAccountLoaded;

diff --git a/...c/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsEmpty.tsx b/...c/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsEmpty.tsx
@@ -0,0 +1,18 @@
+import { SOLANA_EPOCH_DAYS } from '@suite-common/wallet-constants';
+
+import { Translation } from 'src/components/suite';
+import { AccountExceptionLayout } from 'src/components/wallet';
+
+export const RewardsEmpty = () => (
+    <AccountExceptionLayout
+        title={<Translation id="TR_STAKE_REWARDS_ARE_EMPTY" />}
+        description={
+            <Translation
+                id="TR_STAKE_WAIT_TO_CHECK_REWARDS"
+                values={{ count: SOLANA_EPOCH_DAYS }}
+            />
+        }
+        iconName="arrowLineDown"
+        iconVariant="tertiary"
+    />
+);
diff --git a/...akingDashboard/components/RewardsList.tsx → ...hboard/components/Rewards/RewardsList.tsx b/...akingDashboard/components/RewardsList.tsx → ...hboard/components/Rewards/RewardsList.tsx
@@ -2,23 +2,13 @@ import React, { useRef } from 'react';
 
 import { SOLANA_EPOCH_DAYS } from '@suite-common/wallet-constants';
 import { formatNetworkAmount } from '@suite-common/wallet-utils';
-import {
-    Badge,
-    Card,
-    Column,
-    Icon,
-    IconButton,
-    Row,
-    SkeletonStack,
-    Text,
-    Tooltip,
-} from '@trezor/components';
+import { Badge, Card, Column, Icon, Row, SkeletonStack, Text, Tooltip } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { DashboardSection } from 'src/components/dashboard';
 import {
-    CoinBalance,
     FiatValue,
+    FormattedCryptoAmount,
     FormattedDate,
     HiddenPlaceholder,
     Translation,
@@ -47,7 +37,6 @@ export const RewardsList = ({ account }: RewardsListProps) => {
         itemsPerPage,
         showPagination,
         isLastPage,
-        fetchRewards,
     } = useSolanaRewards(account);
 
     const isSolanaMainnet = account.symbol === 'sol';
@@ -59,6 +48,10 @@ export const RewardsList = ({ account }: RewardsListProps) => {
         }
     };
 
+    if (!isSolanaMainnet || !totalItems) {
+        return <RewardsEmpty />;
+    }
+
     return (
         <DashboardSection
             ref={sectionRef}
@@ -108,7 +101,7 @@ export const RewardsList = ({ account }: RewardsListProps) => {
                                                 <Badge size="small">
                                                     <Row gap={spacings.xxs} alignItems="center">
                                                         <Translation
-                                                            id="TR_STAKE_REWARDS_BAGE"
+                                                            id="TR_STAKE_REWARDS_BADGE"
                                                             values={{ count: reward.epoch }}
                                                         />
                                                         <Icon name="info" size="small" />
@@ -120,7 +113,7 @@ export const RewardsList = ({ account }: RewardsListProps) => {
                                     {reward?.amount && (
                                         <Column alignItems="end">
                                             <HiddenPlaceholder>
-                                                <CoinBalance
+                                                <FormattedCryptoAmount
                                                     value={formatNetworkAmount(
                                                         reward?.amount,
                                                         account.symbol,
@@ -148,7 +141,7 @@ export const RewardsList = ({ account }: RewardsListProps) => {
                 </>
             )}
 
-            {showPagination && (
+            {showPagination && !isLoading && slicedRewards?.length && (
                 <Pagination
                     hasPages={true}
                     currentPage={currentPage}

diff --git a/suite-common/wallet-core/src/stake/stakeReducer.ts b/suite-common/wallet-core/src/stake/stakeReducer.ts
@@ -5,7 +5,7 @@ import { cloneObject } from '@trezor/utils';
 
 import { stakeActions } from './stakeActions';
 import { fetchEverstakeAssetData, fetchEverstakeData, fetchEverstakeRewards } from './stakeThunks';
-import { StakeAccountRewards, ValidatorsQueue } from './stakeTypes';
+import { StakeRewardsByAccount, ValidatorsQueue } from './stakeTypes';
 import { SerializedTx } from '../send/sendFormTypes';
 
 export interface StakeState {
@@ -40,7 +40,7 @@ export interface StakeState {
                 error: boolean | string;
                 isLoading: boolean;
                 lastSuccessfulFetchTimestamp: Timestamp;
-                data: { rewards?: StakeAccountRewards[] };
+                data: { rewards?: StakeRewardsByAccount };
             };
         };
     };

diff --git a/suite-common/wallet-core/src/stake/stakeThunks.ts b/suite-common/wallet-core/src/stake/stakeThunks.ts
@@ -19,7 +19,7 @@ import {
     EverstakeAssetEndpointType,
     EverstakeEndpointType,
     EverstakeRewardsEndpointType,
-    StakeAccountRewards,
+    StakeRewardsByAccount,
     ValidatorsQueue,
 } from './stakeTypes';
 import { selectAllNetworkSymbolsOfVisibleAccounts } from '../accounts/accountsReducer';
@@ -108,7 +108,7 @@ export const fetchEverstakeAssetData = createThunk<
 );
 
 export const fetchEverstakeRewards = createThunk<
-    { rewards: StakeAccountRewards[] },
+    { rewards: StakeRewardsByAccount },
     {
         symbol: SupportedSolanaNetworkSymbols;
         endpointType: EverstakeRewardsEndpointType;
@@ -134,7 +134,9 @@ export const fetchEverstakeRewards = createThunk<
             const data = await response.json();
 
             return fulfillWithValue({
-                rewards: data,
+                rewards: {
+                    [address]: data,
+                },
             });
         } catch (error) {
             return rejectWithValue(error.toString());

diff --git a/suite-common/wallet-core/src/stake/stakeTypes.ts b/suite-common/wallet-core/src/stake/stakeTypes.ts
@@ -104,3 +104,7 @@ export type StakeAccountRewards = {
     currency: string;
     time: string;
 };
+
+export type StakeRewardsByAccount = {
+    [address: string]: StakeAccountRewards[];
+};