feat(suite-native): move coin enabling to settings menu

suite-common/icons/src/icons.ts

@@ -32,6 +32,7 @@ export const icons = {
     clockClockwise: require('../assets/icons/clockClockwise.svg'),
     close: require('../assets/icons/close.svg'),
     closeCircle: require('../assets/icons/closeCircle.svg'),
+    coins: require('../assets/icons/coins.svg'),
     confirmation: require('../assets/icons/confirmation.svg'),
     copy: require('../assets/icons/copy.svg'),
     database: require('../assets/icons/database.svg'),

suite-native/app/package.json

@@ -42,6 +42,7 @@
         "@suite-native/analytics": "workspace:*",
         "@suite-native/atoms": "workspace:*",
         "@suite-native/biometrics": "workspace:*",
+        "@suite-native/coin-enabling": "workspace:*",
         "@suite-native/config": "workspace:*",
         "@suite-native/device": "workspace:*",
         "@suite-native/device-authorization": "workspace:*",

suite-native/app/tsconfig.json

@@ -32,6 +32,7 @@
         { "path": "../analytics" },
         { "path": "../atoms" },
         { "path": "../biometrics" },
+        { "path": "../coin-enabling" },
         { "path": "../config" },
         { "path": "../device" },
         { "path": "../device-authorization" },

suite-native/coin-enabling/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@suite-native/coin-enabling",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
+        "depcheck": "yarn g:depcheck",
+        "type-check": "yarn g:tsc --build"
+    },
+    "dependencies": {
+        "@reduxjs/toolkit": "1.9.5",
+        "@suite-common/wallet-config": "workspace:*",
+        "@suite-common/wallet-core": "workspace:*",
+        "@suite-native/atoms": "workspace:*",
+        "@suite-native/discovery": "workspace:*",
+        "@suite-native/feature-flags": "workspace:*",
+        "react": "18.2.0",
+        "react-native": "0.74.1",
+        "react-redux": "8.0.7"
+    }
+}

suite-native/coin-enabling/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/coin-enabling/src/components/DiscoveryCoinsFilter.tsx

@@ -0,0 +1,36 @@
+import { useDispatch } from 'react-redux';
+
+import { VStack, Text, HStack, Switch, Card } from '@suite-native/atoms';
+import { NetworkSymbol } from '@suite-common/wallet-config';
+import { toggleEnabledDiscoveryNetworkSymbol } from '@suite-native/discovery';
+
+import { useCoinEnabling } from '../hooks/useCoinEnabling';
+
+export const DiscoveryCoinsFilter = () => {
+    const dispatch = useDispatch();
+
+    const { enabledNetworkSymbols, availableNetworks } = useCoinEnabling();
+
+    const uniqueNetworkSymbols = [...new Set(availableNetworks.map(n => n.symbol))];
+
+    return (
+        <Card>
+            <VStack spacing="small">
+                <Text variant="titleSmall">Enable discovery of networks</Text>
+                <VStack>
+                    {uniqueNetworkSymbols.map((networkSymbol: NetworkSymbol) => (
+                        <HStack justifyContent="space-between" key={networkSymbol}>
+                            <Text>{networkSymbol.toUpperCase()}</Text>
+                            <Switch
+                                onChange={() =>
+                                    dispatch(toggleEnabledDiscoveryNetworkSymbol(networkSymbol))
+                                }
+                                isChecked={enabledNetworkSymbols.includes(networkSymbol)}
+                            />
+                        </HStack>
+                    ))}
+                </VStack>
+            </VStack>
+        </Card>
+    );
+};

suite-native/coin-enabling/src/hooks/useCoinEnabling.tsx

@@ -0,0 +1,33 @@
+import { useSelector } from 'react-redux';
+
+import { FeatureFlag, FeatureFlagsRootState, useFeatureFlag } from '@suite-native/feature-flags';
+import {
+    selectAreTestnetsEnabled,
+    selectEnabledDiscoveryNetworkSymbols,
+    selectDiscoverySupportedNetworks,
+    DiscoveryConfigSliceRootState,
+} from '@suite-native/discovery';
+import { DeviceRootState } from '@suite-common/wallet-core';
+
+export const useCoinEnabling = () => {
+    const [isCoinEnablingActive] = useFeatureFlag(FeatureFlag.IsCoinEnablingActive);
+    const areTestnetsEnabled = useSelector(selectAreTestnetsEnabled);
+    const availableNetworks = useSelector((state: DeviceRootState) =>
+        selectDiscoverySupportedNetworks(state, areTestnetsEnabled),
+    );
+    const enabledNetworkSymbols = useSelector(
+        (state: DiscoveryConfigSliceRootState & DeviceRootState & FeatureFlagsRootState) =>
+            selectEnabledDiscoveryNetworkSymbols(state, areTestnetsEnabled),
+    );
+
+    const applyDiscoveryChanges = () => {
+        // TODO: remove disabled network accounts and run discovery check
+    };
+
+    return {
+        isCoinEnablingActive,
+        enabledNetworkSymbols,
+        availableNetworks,
+        applyDiscoveryChanges,
+    };
+};

suite-native/coin-enabling/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/DiscoveryCoinsFilter';
+export * from './hooks/useCoinEnabling';

suite-native/coin-enabling/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": [
+        {
+            "path": "../../suite-common/wallet-config"
+        },
+        {
+            "path": "../../suite-common/wallet-core"
+        },
+        { "path": "../atoms" },
+        { "path": "../discovery" },
+        { "path": "../feature-flags" }
+    ]
+}

suite-native/discovery/src/discoveryConfigSlice.ts

@@ -57,10 +57,7 @@ export const discoveryConfigSlice = createSlice({
         setDiscoveryInfo: (state, { payload }: PayloadAction<DiscoveryInfo | null>) => {
             state.discoveryInfo = payload;
         },
-        toggleEnabledDiscoveryNetworkSymbols: (
-            state,
-            { payload }: PayloadAction<NetworkSymbol>,
-        ) => {
+        toggleEnabledDiscoveryNetworkSymbol: (state, { payload }: PayloadAction<NetworkSymbol>) => {
             const networkSymbol = payload;
             const index = state.enabledDiscoveryNetworkSymbols.indexOf(networkSymbol);
 
@@ -115,6 +112,6 @@ export const selectEnabledDiscoveryNetworkSymbols = memoizeWithArgs(
     },
 );
 
-export const { toggleAreTestnetsEnabled, setDiscoveryInfo, toggleEnabledDiscoveryNetworkSymbols } =
+export const { toggleAreTestnetsEnabled, setDiscoveryInfo, toggleEnabledDiscoveryNetworkSymbol } =
     discoveryConfigSlice.actions;
 export const discoveryConfigReducer = discoveryConfigSlice.reducer;

suite-native/intl/src/en.ts

@@ -375,6 +375,35 @@ export const en = {
         },
     },
     moduleSettings: {
+        items: {
+            application: {
+                title: 'Application',
+                devUtils: {
+                    title: 'DEV utils',
+                    subtitle: 'Only for devs and internal testers.',
+                },
+                localization: {
+                    title: 'Localization',
+                    subtitle: 'Currency, Bitcoin units',
+                },
+                customization: {
+                    title: 'Customization',
+                    subtitle: 'Color scheme',
+                },
+                privacyAndSecurity: {
+                    title: 'Privacy & Security',
+                    subtitle: 'Analytics, Discreet mode, Biometrics',
+                },
+                viewOnly: {
+                    title: 'View-only',
+                    subtitle: 'Check balances without your Trezor',
+                },
+                coinEnabling: {
+                    title: 'Enabled coins',
+                    subtitle: 'Manage coins that you use',
+                },
+            },
+        },
         faq: {
             title: 'Get help',
             supportCard: {
@@ -466,6 +495,13 @@ export const en = {
         privacyAndSecurity: {
             title: 'Privacy & Security',
         },
+        coinEnabling: {
+            settings: {
+                title: 'Enabled coins',
+                subtitle:
+                    'Only choosing coins that you use will shorten loading times when connecting your Trezor.',
+            },
+        },
         viewOnly: {
             title: 'View-only',
             emptyTitle: 'Connect your device to enable view-only',

suite-native/module-dev-utils/package.json

@@ -14,7 +14,6 @@
         "@react-navigation/native-stack": "6.9.26",
         "@sentry/react-native": "5.22.3",
         "@suite-common/icons": "workspace:*",
-        "@suite-common/wallet-config": "workspace:*",
         "@suite-common/wallet-core": "workspace:*",
         "@suite-common/wallet-types": "workspace:*",
         "@suite-native/atoms": "workspace:*",

suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx

@@ -13,19 +13,15 @@ import {
 } from '@suite-native/navigation';
 import { clearStorage } from '@suite-native/storage';
 import { getCommitHash, getSuiteVersion } from '@trezor/env-utils';
-import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags';
 
 import { RenderingUtils } from '../components/RenderingUtils';
 import { FeatureFlags } from '../components/FeatureFlags';
 import { TestnetsToggle } from '../components/TestnetsToggle';
-import { DiscoveryCoinsFilter } from '../components/DiscoveryCoinsFilter';
 import { DevicePassphraseSwitch } from '../components/DevicePassphraseSwitch';
 
 export const DevUtilsScreen = ({
     navigation,
 }: StackProps<DevUtilsStackParamList, DevUtilsStackRoutes.DevUtils>) => {
-    const [isCoinEnablingActive] = useFeatureFlag(FeatureFlag.IsCoinEnablingActive);
-
     return (
         <Screen screenHeader={<ScreenSubHeader content="DEV utils" />}>
             <VStack>
@@ -49,7 +45,7 @@ export const DevUtilsScreen = ({
                                 <DevicePassphraseSwitch />
                             </>
                         )}
-                        {isCoinEnablingActive && <DiscoveryCoinsFilter />}
+
                         <Button
                             onPress={() => {
                                 const errorMessage = `Sentry test error - ${Date.now()}`;

suite-native/module-dev-utils/tsconfig.json

@@ -3,9 +3,6 @@
     "compilerOptions": { "outDir": "libDev" },
     "references": [
         { "path": "../../suite-common/icons" },
-        {
-            "path": "../../suite-common/wallet-config"
-        },
         {
             "path": "../../suite-common/wallet-core"
         },

suite-native/module-settings/package.json

@@ -27,6 +27,7 @@
         "@suite-native/analytics": "workspace:*",
         "@suite-native/atoms": "workspace:*",
         "@suite-native/biometrics": "workspace:*",
+        "@suite-native/coin-enabling": "workspace:*",
         "@suite-native/config": "workspace:*",
         "@suite-native/device-manager": "workspace:*",
         "@suite-native/feature-flags": "workspace:*",