fix(mobile): update staking data on mobile (#15371)

suite-native/app/src/initActions.ts

@@ -4,6 +4,7 @@ import {
     createImportedDeviceThunk,
     initBlockchainThunk,
     initDevices,
+    initStakeDataThunk,
     periodicFetchFiatRatesThunk,
 } from '@suite-common/wallet-core';
 import { initAnalyticsThunk } from '@suite-native/analytics';
@@ -37,6 +38,8 @@ export const applicationInit = createThunk(
 
             dispatch(periodicCheckTokenDefinitionsThunk());
 
+            dispatch(initStakeDataThunk());
+
             dispatch(
                 periodicFetchFiatRatesThunk({
                     rateType: 'current',

suite-native/module-staking-management/package.json

@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "@react-navigation/native": "6.1.18",
+        "@reduxjs/toolkit": "1.9.5",
         "@suite-common/wallet-core": "workspace:*",
         "@suite-native/atoms": "workspace:*",
         "@suite-native/formatters": "workspace:*",

suite-native/module-staking-management/redux.d.ts

@@ -0,0 +1,7 @@
+import { AsyncThunkAction } from '@reduxjs/toolkit';
+
+declare module 'redux' {
+    export interface Dispatch {
+        <TThunk extends AsyncThunkAction<any, any, any>>(thunk: TThunk): ReturnType<TThunk>;
+    }
+}

suite-native/module-staking-management/src/screens/StakingDetailScreen.tsx

@@ -1,16 +1,47 @@
+import { useDispatch } from 'react-redux';
+import { RefreshControl } from 'react-native';
+import { useMemo, useState, useCallback } from 'react';
+
 import { RouteProp, useRoute } from '@react-navigation/native';
 
 import { RootStackParamList, RootStackRoutes, Screen } from '@suite-native/navigation';
+import { initStakeDataThunk } from '@suite-common/wallet-core';
+import { useNativeStyles } from '@trezor/styles';
 
 import { StakingDetailScreenHeader } from '../components/StakingDetailScreenHeader';
 import { StakingInfo } from '../components/StakingInfo';
 
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
 export const StakingDetailScreen = () => {
     const route = useRoute<RouteProp<RootStackParamList, RootStackRoutes.StakingDetail>>();
     const { accountKey } = route.params;
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const { utils } = useNativeStyles();
+
+    const dispatch = useDispatch();
+
+    const handleRefresh = useCallback(async () => {
+        setIsRefreshing(true);
+        await dispatch(initStakeDataThunk());
+        // sleep little bit because it's too fast
+        await sleep(1000);
+        setIsRefreshing(false);
+    }, [dispatch]);
+
+    const refreshControl = useMemo(
+        () => (
+            <RefreshControl
+                refreshing={isRefreshing}
+                onRefresh={handleRefresh}
+                colors={[utils.colors.backgroundPrimaryDefault]}
+            />
+        ),
+        [isRefreshing, handleRefresh, utils.colors],
+    );
 
     return (
-        <Screen screenHeader={<StakingDetailScreenHeader />}>
+        <Screen screenHeader={<StakingDetailScreenHeader />} refreshControl={refreshControl}>
             <StakingInfo accountKey={accountKey} />
         </Screen>
     );

suite-native/state/src/reducers.ts

@@ -8,6 +8,7 @@ import {
     prepareDeviceReducer,
     prepareDiscoveryReducer,
     prepareFiatRatesReducer,
+    prepareStakeReducer,
     prepareTransactionsReducer,
 } from '@suite-common/wallet-core';
 import { appSettingsReducer, appSettingsPersistWhitelist } from '@suite-native/settings';
@@ -46,6 +47,7 @@ const deviceReducer = prepareDeviceReducer(extraDependencies);
 const discoveryReducer = prepareDiscoveryReducer(extraDependencies);
 const tokenDefinitionsReducer = prepareTokenDefinitionsReducer(extraDependencies);
 const sendFormReducer = sendFormSlice.prepareReducer(extraDependencies);
+const stakeReducer = prepareStakeReducer(extraDependencies);
 
 export const prepareRootReducers = async () => {
     const appSettingsPersistedReducer = await preparePersistReducer({
@@ -68,6 +70,7 @@ export const prepareRootReducers = async () => {
         discovery: discoveryReducer,
         send: sendFormReducer,
         fees: feesReducer,
+        stake: stakeReducer,
     });
 
     const walletPersistedReducer = await preparePersistReducer({

yarn.lock

@@ -10358,6 +10358,7 @@ __metadata:
   resolution: "@suite-native/module-staking-management@workspace:suite-native/module-staking-management"
   dependencies:
     "@react-navigation/native": "npm:6.1.18"
+    "@reduxjs/toolkit": "npm:1.9.5"
     "@suite-common/wallet-core": "workspace:*"
     "@suite-native/atoms": "workspace:*"
     "@suite-native/formatters": "workspace:*"