From 2e71d93ebd3821a607728e6a60c8b367f996653f Mon Sep 17 00:00:00 2001 From: Pavlo Syrotyna Date: Thu, 23 Jan 2025 13:11:43 +0200 Subject: [PATCH] feat(suite): add empty state and refetch logic for Solana staking rewards --- .../src/hooks/wallet/useSolanaRewards.ts | 1 - packages/suite/src/support/messages.ts | 17 +++++++++++-- .../SolStakingDashboard.tsx | 2 +- .../components/Rewards/RewardsEmpty.tsx | 18 +++++++++++++ .../components/{ => Rewards}/RewardsList.tsx | 25 +++++++------------ .../wallet-core/src/stake/stakeReducer.ts | 4 +-- .../wallet-core/src/stake/stakeThunks.ts | 8 +++--- .../wallet-core/src/stake/stakeTypes.ts | 4 +++ 8 files changed, 54 insertions(+), 25 deletions(-) create mode 100644 packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsEmpty.tsx rename packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/{ => Rewards}/RewardsList.tsx (94%) diff --git a/packages/suite/src/hooks/wallet/useSolanaRewards.ts b/packages/suite/src/hooks/wallet/useSolanaRewards.ts index 211a3ea9923..f143109eb34 100644 --- 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 index 2f0a3cb011d..cd398732cfb 100644 --- a/packages/suite/src/support/messages.ts +++ b/packages/suite/src/support/messages.ts @@ -8705,8 +8705,8 @@ 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: { @@ -8714,6 +8714,19 @@ export default defineMessages({ 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/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/SolStakingDashboard.tsx b/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/SolStakingDashboard.tsx index f2dfef5a12d..f1556b63202 100644 --- a/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/SolStakingDashboard.tsx +++ b/packages/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/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsEmpty.tsx b/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsEmpty.tsx new file mode 100644 index 00000000000..3956508e584 --- /dev/null +++ b/packages/suite/src/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 = () => ( + } + description={ + + } + iconName="arrowLineDown" + iconVariant="tertiary" + /> +); diff --git a/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/RewardsList.tsx b/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsList.tsx similarity index 94% rename from packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/RewardsList.tsx rename to packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/Rewards/RewardsList.tsx index 9bfbb723d46..d373850869f 100644 --- a/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/components/RewardsList.tsx +++ b/packages/suite/src/views/wallet/staking/components/SolStakingDashboard/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 ; + } + return ( { @@ -120,7 +113,7 @@ export const RewardsList = ({ account }: RewardsListProps) => { {reward?.amount && ( - { )} - {showPagination && ( + {showPagination && !isLoading && slicedRewards?.length && (