chore: extract Suite SuiteSync code to separate moduel, yes - even UI belongs there

packages/suite/src/views/suite/SwitchDevice/DeviceItem/WalletInstance.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { Translation, useTranslation } from '@suite/intl';
+import { SuiteSyncWalletDebug } from '@suite/suite-sync';
 import { selectIsSuiteSyncEnabled, selectSuiteSyncWalletLabel } from '@suite-common/suite-sync';
 import {
     getAccountsByDeviceState,
@@ -34,11 +35,10 @@ import { FiatHeader } from 'src/components/wallet/FiatHeader';
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { useStore } from 'src/hooks/suite/useStore';
 import { useTotalFiatBalance } from 'src/hooks/wallet/useTotalFiatBalance';
-import { selectLabelingDataForWallet } from 'src/reducers/suite/metadataReducer';
+import { selectLabelingDataForWallet, selectMetadata } from 'src/reducers/suite/metadataReducer';
 import { AcquiredDevice, AppState, ForegroundAppProps } from 'src/types/suite';
 
 import { EjectConfirmation } from './EjectConfirmation';
-import { SuiteSyncWalletDebug } from './SuiteSyncWalletDebug';
 
 type WalletInstanceProps = {
     instance: AcquiredDevice;
@@ -81,6 +81,7 @@ export const WalletInstance = ({
     const dispatch = useDispatch();
     const store = useStore();
     const { translationString } = useTranslation();
+    const legacyMetadataState = useSelector(selectMetadata);
     const isSuiteSyncEnabled = useSelector(selectIsSuiteSyncEnabled);
 
     const { defaultAccountLabelString } = useWalletLabeling();
@@ -198,7 +199,10 @@ export const WalletInstance = ({
                                         >
                                             {valueLabel}
                                         </Labeling>
-                                        <SuiteSyncWalletDebug device={instance} />
+                                        <SuiteSyncWalletDebug
+                                            device={instance}
+                                            isLegacyLabelingEnabled={legacyMetadataState.enabled}
+                                        />
                                     </Column>
                                 ) : (
                                     <Row gap={4}>

suite/suite-sync/package.json

@@ -13,11 +13,18 @@
         "@evolu/web": "^2.3.0",
         "@reduxjs/toolkit": "2.11.2",
         "@suite-common/delegated-identity-key-types": "workspace:*",
+        "@suite-common/device": "workspace:*",
         "@suite-common/platform-encryption": "workspace:*",
         "@suite-common/suite-sync": "workspace:*",
         "@suite-common/suite-sync-evolu": "workspace:*",
         "@suite-common/suite-sync-types": "workspace:*",
+        "@suite-common/suite-types": "workspace:*",
+        "@suite-common/wallet-utils": "workspace:*",
         "@suite/analytics": "workspace:*",
-        "@trezor/connect": "workspace:*"
+        "@trezor/components": "workspace:*",
+        "@trezor/connect": "workspace:*",
+        "@trezor/theme": "workspace:*",
+        "react": "19.1.0",
+        "react-redux": "9.2.0"
     }
 }

suite/suite-sync/redux.d.ts

@@ -0,0 +1,11 @@
+import { AsyncThunkAction, ThunkAction } from '@reduxjs/toolkit';
+
+declare module 'redux' {
+    export interface Dispatch<A extends Action = AnyAction> {
+        <TThunk extends AsyncThunkAction<any, any, any>>(thunk: TThunk): ReturnType<TThunk>;
+
+        <ReturnType = any, State = any, ExtraThunkArg = any>(
+            thunkAction: ThunkAction<ReturnType, State, ExtraThunkArg, A>,
+        ): ReturnType;
+    }
+}

suite/suite-sync/src/SuiteSyncWalletDebug.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useDispatch, useSelector } from 'react-redux';
+
 import { deviceActions } from '@suite-common/device';
 import {
+    WithSuiteSyncAndDeviceState,
     isSuiteSyncSupportedByDevice,
     selectIsSuiteSyncDebugEnabled,
     selectIsSuiteSyncEnabled,
@@ -12,18 +15,23 @@ import { parseDeviceStaticSessionId } from '@suite-common/wallet-utils';
 import { Code, Row, Text, Tooltip } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
-import { useDispatch, useSelector } from 'src/hooks/suite';
+type SuiteSyncWalletDebugProps = {
+    device: AcquiredDevice;
+    /** @deprecated this prop is a hack so we do not depend on Legacy Metadata Labeling */
+    isLegacyLabelingEnabled: boolean;
+};
 
-export const SuiteSyncWalletDebug = ({ device }: { device: AcquiredDevice }) => {
+export const SuiteSyncWalletDebug = ({
+    device,
+    isLegacyLabelingEnabled,
+}: SuiteSyncWalletDebugProps) => {
     const dispatch = useDispatch();
 
     const isSuiteSyncDebugEnabled = useSelector(selectIsSuiteSyncDebugEnabled);
     const isSuiteSyncEnabled = useSelector(selectIsSuiteSyncEnabled);
 
-    const legacyMetadataState = useSelector(state => state.metadata);
-
     const deviceStaticSessionId = device.state?.staticSessionId;
-    const suiteSyncOwner = useSelector(state =>
+    const suiteSyncOwner = useSelector((state: WithSuiteSyncAndDeviceState) =>
         selectSuiteSyncOwnerForDeviceStaticId(state, deviceStaticSessionId),
     );
 
@@ -60,7 +68,7 @@ export const SuiteSyncWalletDebug = ({ device }: { device: AcquiredDevice }) =>
     return isSuiteSyncEnabled ? (
         <Row gap={spacings.xxs}>
             🐞
-            {legacyMetadataState.enabled && <Text intent="accentViolet">[Legacy]</Text>}
+            {isLegacyLabelingEnabled && <Text intent="accentViolet">[Legacy]</Text>}
             {isSuiteSyncEnabled && (
                 <>
                     <Text typographyStyle="hint" intent="warning">

suite/suite-sync/src/index.ts

@@ -3,3 +3,4 @@ export {
     type DisableLegacyMetadataIfNeeded,
     type DisableLegacyMetadataIfNeededDep,
 } from './turnOnDesktopSuiteSync';
+export { SuiteSyncWalletDebug } from './SuiteSyncWalletDebug';

suite/suite-sync/tsconfig.json

@@ -9,6 +9,7 @@
         {
             "path": "../../suite-common/delegated-identity-key-types"
         },
+        { "path": "../../suite-common/device" },
         {
             "path": "../../suite-common/platform-encryption"
         },
@@ -21,7 +22,15 @@
         {
             "path": "../../suite-common/suite-sync-types"
         },
+        {
+            "path": "../../suite-common/suite-types"
+        },
+        {
+            "path": "../../suite-common/wallet-utils"
+        },
         { "path": "../analytics" },
-        { "path": "../../packages/connect" }
+        { "path": "../../packages/components" },
+        { "path": "../../packages/connect" },
+        { "path": "../../packages/theme" }
     ]
 }

yarn.lock

@@ -14563,12 +14563,19 @@ __metadata:
     "@evolu/web": "npm:^2.3.0"
     "@reduxjs/toolkit": "npm:2.11.2"
     "@suite-common/delegated-identity-key-types": "workspace:*"
+    "@suite-common/device": "workspace:*"
     "@suite-common/platform-encryption": "workspace:*"
     "@suite-common/suite-sync": "workspace:*"
     "@suite-common/suite-sync-evolu": "workspace:*"
     "@suite-common/suite-sync-types": "workspace:*"
+    "@suite-common/suite-types": "workspace:*"
+    "@suite-common/wallet-utils": "workspace:*"
     "@suite/analytics": "workspace:*"
+    "@trezor/components": "workspace:*"
     "@trezor/connect": "workspace:*"
+    "@trezor/theme": "workspace:*"
+    react: "npm:19.1.0"
+    react-redux: "npm:9.2.0"
   languageName: unknown
   linkType: soft