feat(suite): add option to pass extra dependencies factory to store and as extra thunk parameter and use it freely also from react context

fix: magic fix for extra in middlewares

fix(suite): make sure that the thunk middleware is added first so that other middlewares also can use it

Author: vojtatranta

packages/suite-desktop-ui/package.json

@@ -13,9 +13,9 @@
     },
     "dependencies": {
         "@sentry/electron": "^7.2.0",
+        "@suite-common/redux-utils": "workspace:*",
         "@suite-common/sentry": "workspace:*",
         "@suite-common/suite-types": "workspace:*",
-        "@suite/suite-sync": "workspace:*",
         "@trezor/components": "workspace:*",
         "@trezor/connect": "workspace:*",
         "@trezor/ipc-proxy": "workspace:*",

packages/suite-desktop-ui/src/MainDesktop.tsx

@@ -30,12 +30,12 @@ import { DesktopUpdater } from './support/DesktopUpdater';
 import { TorLoadingScreen } from './support/screens/TorLoadingScreen';
 import { BioAuthGuard } from '../../suite/src/components/suite/BioAuthGuard/BioAuthGuard';
 import { desktopComponents } from './support/desktopComponents';
-import { initSuiteSyncDesktop } from '@suite/suite-sync';
 import { type History, createMemoryHistory } from 'history';
 import { createRouterServices } from 'src/support/extraDependencies';
 import { FindBar } from '../../suite/src/components/suite/FindBar/FindBar';
 import { GlobalStyle } from './GlobalStyle';
 import { initSentry } from './sentry';
+import { ServicesProvider } from '@suite-common/redux-utils';
 
 const MainDesktop = ({ history }: { history: History }) => {
     useTor();
@@ -71,7 +71,7 @@ export const init = async (container: HTMLElement) => {
     const memoryHistory = createMemoryHistory();
     const preloadAction = await preloadStore();
     const { statePatch } = await desktopApi.handshake();
-    const store = initStore(preloadAction, {
+    const { store, extra } = initStore(preloadAction, {
         statePatch,
         additionalExtraDeps: { routerServices: createRouterServices(memoryHistory) },
     });
@@ -102,11 +102,13 @@ export const init = async (container: HTMLElement) => {
     if (shouldRunTor) {
         await new Promise(resolve => {
             root.render(
-                <ReduxProvider store={store}>
-                    <ConnectedIntlProvider>
-                        <TorLoadingScreen callback={resolve} />
-                    </ConnectedIntlProvider>
-                </ReduxProvider>,
+                <ServicesProvider services={extra.services}>
+                    <ReduxProvider store={store}>
+                        <ConnectedIntlProvider>
+                            <TorLoadingScreen callback={resolve} />
+                        </ConnectedIntlProvider>
+                    </ReduxProvider>
+                </ServicesProvider>,
             );
             desktopApi.toggleTor(true);
         });
@@ -136,13 +138,12 @@ export const init = async (container: HTMLElement) => {
     // TODO should it really be here instead of initAction.ts?
     await store.dispatch(initBluetoothThunk());
 
-    // Todo: run it from extra, shall be solved in: https://github.com/trezor/trezor-suite/pull/23356
-    initSuiteSyncDesktop({ getState: store.getState }).init();
-
     // finally render whole app
     root.render(
-        <ReduxProvider store={store}>
-            <MainDesktop history={memoryHistory} />
-        </ReduxProvider>,
+        <ServicesProvider services={extra.services}>
+            <ReduxProvider store={store}>
+                <MainDesktop history={memoryHistory} />
+            </ReduxProvider>
+        </ServicesProvider>,
     );
 };

packages/suite-desktop-ui/tsconfig.json

@@ -9,11 +9,13 @@
         "../suite/src/components/suite/BioAuthGuard"
     ],
     "references": [
+        {
+            "path": "../../suite-common/redux-utils"
+        },
         { "path": "../../suite-common/sentry" },
         {
             "path": "../../suite-common/suite-types"
         },
-        { "path": "../../suite/suite-sync" },
         { "path": "../components" },
         { "path": "../connect" },
         { "path": "../ipc-proxy" },

packages/suite-web/package.json

@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@sentry/browser": "10.17.0",
+        "@suite-common/redux-utils": "workspace:*",
         "@suite-common/sentry": "workspace:*",
         "@suite-common/suite-types": "workspace:*",
         "@trezor/connect": "workspace:*",
@@ -25,7 +26,6 @@
         "react-redux": "9.2.0"
     },
     "devDependencies": {
-        "@suite/suite-sync": "workspace:*",
         "@trezor/connect": "workspace:*",
         "@trezor/eslint": "workspace:*",
         "@types/react": "^19.0.0",

packages/suite-web/src/MainWeb.tsx

@@ -6,7 +6,7 @@ import { Provider as ReduxProvider } from 'react-redux';
 import { History, createBrowserHistory } from 'history';
 import { createRoot } from 'react-dom/client';
 
-import { initSuiteSyncDesktop } from '@suite/suite-sync';
+import { ServicesProvider } from '@suite-common/redux-utils';
 
 import { AppRouter, BundleLoader, Metadata, Preloader, ToastContainer } from 'src/components/suite';
 import { useDebugLanguageShortcut } from 'src/hooks/suite';
@@ -53,18 +53,17 @@ export const init = async (container: HTMLElement) => {
     root.render(<LoadingScreen />);
 
     const preloadAction = await preloadStore();
-    const store = initStore(preloadAction, {
+    const { store, extra } = initStore(preloadAction, {
         additionalExtraDeps: {
             routerServices: createRouterServices(browserHistory),
         },
     });
 
-    // Todo: run it from extra, shall be solved in: https://github.com/trezor/trezor-suite/pull/23356
-    initSuiteSyncDesktop({ getState: store.getState }).init();
-
     root.render(
-        <ReduxProvider store={store}>
-            <MainWeb history={browserHistory} />
-        </ReduxProvider>,
+        <ServicesProvider services={extra.services}>
+            <ReduxProvider store={store}>
+                <MainWeb history={browserHistory} />
+            </ReduxProvider>
+        </ServicesProvider>,
     );
 };

packages/suite-web/tsconfig.json

@@ -6,13 +6,15 @@
     },
     "include": ["."],
     "references": [
+        {
+            "path": "../../suite-common/redux-utils"
+        },
         { "path": "../../suite-common/sentry" },
         {
             "path": "../../suite-common/suite-types"
         },
         { "path": "../connect" },
         { "path": "../suite" },
-        { "path": "../../suite/suite-sync" },
         { "path": "../eslint" }
     ]
 }

packages/suite/src/reducers/store.ts

@@ -18,6 +18,7 @@ import { accountsActions } from '@suite-common/wallet-core';
 import { isCodesignBuild } from '@trezor/env-utils';
 import { mergeDeepObject } from '@trezor/utils';
 import { suiteSyncSlice } from 'src/actions/suiteSync/suiteSyncSlice';
+import { ExtraDependencies, createStoreWithExtraStoreMiddleware } from '@suite-common/redux-utils';
 
 import backupMiddlewares from 'src/middlewares/backup';
 import onboardingMiddlewares from 'src/middlewares/onboarding';
@@ -32,14 +33,13 @@ import walletReducers from 'src/reducers/wallet';
 // toastMiddleware can be used only in suite-desktop and suite-web
 // it's not included into `@suite-middlewares` index
 import { geolocationReducer } from '@suite-common/geolocation';
-import { ExtraDependencies } from '@suite-common/redux-utils';
 import { prepareLabelingReducer } from '@suite-common/suite-sync';
 import { OPEN_USER_CONTEXT } from 'src/actions/suite/constants/modalConstants';
 import toastMiddleware from 'src/middlewares/suite/toastMiddleware';
 import { globalSendReceiveFilters } from 'src/slices/wallet/globalSendReceiveFilters';
 import type { PreloadStoreAction } from 'src/support/suite/preloadStore';
 import { bluetoothSlice } from '../actions/bluetooth/desktopBluetoothReducer';
-import { extraDependencies } from '../support/extraDependencies';
+import { extraDependencies, suiteExtraFactory } from '../support/extraDependencies';
 import { prepareBioAuthReducer } from './bioAuth';
 import { desktopReducer } from './desktop';
 
@@ -138,7 +138,9 @@ export const initStore = <E extends Partial<ExtraDependencies>>(
               )
             : preloadedState;
 
-    return configureStore({
+    let extra: ExtraDependencies | null = null;
+
+    const store = configureStore({
         reducer: rootReducer as Reducer<AppState, InferredAction, PreloadedState>,
         preloadedState: patchedState,
         middleware: getDefaultMiddleware =>
@@ -152,13 +154,27 @@ export const initStore = <E extends Partial<ExtraDependencies>>(
                         'modal.payload.decision.reject',
                     ],
                 },
-                thunk: {
-                    extraArgument: {
-                        ...extraDependencies,
-                        ...(options.additionalExtraDeps ?? {}),
-                    },
-                },
-            }).concat(getCustomMiddleware()),
+            })
+                .prepend(
+                    createStoreWithExtraStoreMiddleware(
+                        api => ({
+                            ...extraDependencies,
+                            ...suiteExtraFactory(api),
+                        }),
+                        initializedExtra => {
+                            extra = initializedExtra;
+                        },
+                    ),
+                )
+                .concat(getCustomMiddleware()),
         devTools,
     } as const);
+
+    if (!extra) {
+        throw new Error(
+            "This shouldn't happen: Extra dependencies not initialized, should be done in callback in createEnhancedStoreWithExtraStoreThunk",
+        );
+    }
+
+    return { store, extra };
 };

packages/suite/src/support/extraDependencies.ts

@@ -2,9 +2,14 @@ import { PayloadAction } from '@reduxjs/toolkit';
 import { saveAs } from 'file-saver';
 import { type History, createMemoryHistory } from 'history';
 
-import { createSuiteSyncOwnerDesktop, initSuiteSyncDesktop } from '@suite/suite-sync';
+import { createSuiteSyncDesktop } from '@suite/suite-sync';
 import { FW_HASH_CHECK_DEFAULT_TIMEOUTS } from '@suite-common/firmware-authenticity';
-import { ExtraDependencies, LocationPushState, To } from '@suite-common/redux-utils';
+import {
+    ExtraDependenciesStatic,
+    ExtraWithStoreFactory,
+    LocationPushState,
+    To,
+} from '@suite-common/redux-utils';
 import {
     subscribeSuiteSyncStorageThunk,
     unsubscribeAndDisposeSuiteSyncStorageThunk,
@@ -65,7 +70,13 @@ export const createRouterServices = (history: History) => ({
     navigate: (to: To, state?: LocationPushState) => history.push(to, state),
 });
 
-export const extraDependencies: ExtraDependencies = {
+export const suiteExtraFactory: ExtraWithStoreFactory = store => ({
+    services: {
+        suiteSync: createSuiteSyncDesktop(store),
+    },
+});
+
+export const extraDependencies: ExtraDependenciesStatic = {
     thunks: {
         cardanoValidatePendingTxOnBlock: cardanoStakingActions.validatePendingTxOnBlock,
         initMetadata: metadataLabelingActions.init,
@@ -77,8 +88,6 @@ export const extraDependencies: ExtraDependencies = {
         // `@suite-common/suite-sync` depends on `wallet-core`
         subscribeSuiteSync: subscribeSuiteSyncStorageThunk,
         unsubscribeAndDisposeSuiteSyncStorage: unsubscribeAndDisposeSuiteSyncStorageThunk,
-        initSuiteSync: () => (_, getState) => initSuiteSyncDesktop({ getState }).init(),
-        createSuiteSyncOwner: params => () => createSuiteSyncOwnerDesktop(params),
     },
     selectors: {
         selectTokenDefinitionsEnabledNetworks: (state: AppState) =>

suite-common/redux-utils/package.json

@@ -23,6 +23,7 @@
         "react": "19.1.0",
         "react-redux": "9.2.0",
         "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
         "reselect": "5.1.1"
     }
 }

suite-common/redux-utils/src/ServicesProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import type { ExtraDependencies } from './extraDependenciesType';
+
+const ServicesContext = React.createContext<ExtraDependencies['services'] | null>(null);
+
+type ServicesProviderParams = {
+    services: ExtraDependencies['services'];
+    children: React.ReactNode;
+};
+
+export const ServicesProvider = ({ services, children }: ServicesProviderParams) => (
+    <ServicesContext.Provider value={services}>{children}</ServicesContext.Provider>
+);
+
+export const useServices = () => {
+    const services = React.useContext(ServicesContext);
+
+    if (!services) {
+        throw new Error('useServices must be used within a ServicesProvider');
+    }
+
+    return services;
+};