fix(staking): staking tx in staking tab

trezor · Oct 24, 2024 · 7ce9c0a · 7ce9c0a
1 parent da6e6d7
commit 7ce9c0a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/...e/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx b/...e/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { variables } from '@trezor/components';
 import { spacingsPx } from '@trezor/theme';
 import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
-import { useSelector } from 'src/hooks/suite';
+import { useDispatch, useSelector } from 'src/hooks/suite';
 import { Divider, Translation } from 'src/components/suite';
 import { DashboardSection } from 'src/components/dashboard';
 import { StakingCard } from './StakingCard';
@@ -11,6 +11,7 @@ import { PayoutCard } from './PayoutCard';
 import { ClaimCard } from './claim/ClaimCard';
 import { Transactions } from './Transactions';
 import {
+    fetchAllTransactionsForAccountThunk,
     selectAccountStakeTransactions,
     selectAccountUnstakeTransactions,
     selectPoolStatsApyData,
@@ -19,7 +20,7 @@ import {
 } from '@suite-common/wallet-core';
 import { getDaysToAddToPool, getDaysToUnstake } from 'src/utils/suite/stake';
 import { InstantStakeBanner } from './InstantStakeBanner';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 const FlexCol = styled.div`
     display: flex;
@@ -48,6 +49,7 @@ const FlexRow = styled.div`
 
 export const StakingDashboard = () => {
     const account = useSelector(selectSelectedAccount);
+    const accountKey = account?.key ?? '';
 
     const { data, isLoading } =
         useSelector(state => selectValidatorsQueue(state, account?.symbol)) || {};
@@ -57,12 +59,21 @@ export const StakingDashboard = () => {
         selectPoolStatsNextRewardPayout(state, account?.symbol),
     );
 
-    const stakeTxs = useSelector(state =>
-        selectAccountStakeTransactions(state, account?.key ?? ''),
-    );
-    const unstakeTxs = useSelector(state =>
-        selectAccountUnstakeTransactions(state, account?.key ?? ''),
-    );
+    const stakeTxs = useSelector(state => selectAccountStakeTransactions(state, accountKey));
+    const unstakeTxs = useSelector(state => selectAccountUnstakeTransactions(state, accountKey));
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (accountKey) {
+            dispatch(
+                fetchAllTransactionsForAccountThunk({
+                    accountKey,
+                    noLoading: true,
+                }),
+            );
+        }
+    }, [account, accountKey, dispatch]);
 
     const txs = useMemo(() => [...stakeTxs, ...unstakeTxs], [stakeTxs, unstakeTxs]);
 

diff --git a/...suite/src/views/wallet/staking/components/EthStakingDashboard/components/Transactions.tsx b/...suite/src/views/wallet/staking/components/EthStakingDashboard/components/Transactions.tsx
@@ -2,18 +2,23 @@ import { TransactionList } from 'src/views/wallet/transactions/TransactionList/T
 import { useSelector } from 'src/hooks/suite';
 import {
     selectAccountStakeTypeTransactions,
+    selectAreAllTransactionsLoaded,
     selectIsLoadingAccountTransactions,
 } from '@suite-common/wallet-core';
 
 export const Transactions = () => {
     const selectedAccount = useSelector(state => state.wallet.selectedAccount);
+    const accountKey = selectedAccount.account?.key ?? '';
+
     const transactionsIsLoading = useSelector(state =>
-        selectIsLoadingAccountTransactions(state, selectedAccount.account?.key || null),
+        selectIsLoadingAccountTransactions(state, accountKey),
     );
-    const stakeTxs = useSelector(state =>
-        selectAccountStakeTypeTransactions(state, selectedAccount.account?.key || ''),
+    const areAllTransactionsLoaded = useSelector(state =>
+        selectAreAllTransactionsLoaded(state, accountKey),
     );
 
+    const stakeTxs = useSelector(state => selectAccountStakeTypeTransactions(state, accountKey));
+
     if (selectedAccount.status !== 'loaded' || stakeTxs.length < 1) {
         return null;
     }
@@ -25,7 +30,7 @@ export const Transactions = () => {
             account={account}
             transactions={stakeTxs}
             symbol={account.symbol}
-            isLoading={transactionsIsLoading}
+            isLoading={transactionsIsLoading || !areAllTransactionsLoaded}
             customTotalItems={stakeTxs.length}
             isExportable={false}
         />

diff --git a/suite-common/wallet-core/src/transactions/transactionsReducer.ts b/suite-common/wallet-core/src/transactions/transactionsReducer.ts
@@ -226,6 +226,11 @@ export const selectIsLoadingAccountTransactions = (
 export const selectTransactions = (state: TransactionsRootState) =>
     state.wallet.transactions.transactions;
 
+export const selectAreAllTransactionsLoaded = (
+    state: TransactionsRootState,
+    accountKey: AccountKey | null,
+) => state.wallet.transactions.fetchStatusDetail?.[accountKey ?? '']?.areAllTransactionsLoaded;
+
 /**
  * The list is not sorted here because it may contain null values as placeholders
  * for transactions that have not been fetched yet. (This affects pagination.)