feat(suite-native): Add coin behind feature flag

trezor · Feb 27, 2024 · 96631c5 · 96631c5
1 parent e43684a
commit 96631c5
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 24 deletions.
diff --git a/suite-native/accounts/package.json b/suite-native/accounts/package.json
@@ -24,6 +24,7 @@
         "@suite-common/wallet-utils": "workspace:*",
         "@suite-native/atoms": "workspace:*",
         "@suite-native/ethereum-tokens": "workspace:*",
+        "@suite-native/feature-flags": "workspace:*",
         "@suite-native/fiat-rates": "workspace:*",
         "@suite-native/formatters": "workspace:*",
         "@suite-native/forms": "workspace:*",

diff --git a/suite-native/accounts/src/components/AddAccountsButton.tsx b/suite-native/accounts/src/components/AddAccountsButton.tsx
@@ -10,28 +10,47 @@ import {
     StackNavigationProps,
 } from '@suite-native/navigation';
 import { IconButton } from '@suite-native/atoms';
-import { selectIsPortfolioTrackerDevice } from '@suite-common/wallet-core';
+import {
+    selectAreAllDevicesDisconnectedOrAccountless,
+    selectDeviceDiscovery,
+    selectIsPortfolioTrackerDevice,
+} from '@suite-common/wallet-core';
+
+import { useIsAddCoinAccountEnabled } from '../useIsAddCoinAccountEnabled';
 
 export const AddAccountButton = () => {
-    const isSelectedDevicePortfolioTracker = useSelector(selectIsPortfolioTrackerDevice);
     const navigation =
         useNavigation<StackNavigationProps<RootStackParamList, RootStackRoutes.AccountsImport>>();
 
+    const isSelectedDevicePortfolioTracker = useSelector(selectIsPortfolioTrackerDevice);
+    const discovery = useSelector(selectDeviceDiscovery);
+    const areAllDevicesDisconnectedOrAccountless = useSelector(
+        selectAreAllDevicesDisconnectedOrAccountless,
+    );
+    const { isAddCoinAccountEnabled } = useIsAddCoinAccountEnabled();
+
+    const shouldShowAddAccountButton =
+        isSelectedDevicePortfolioTracker ||
+        (isAddCoinAccountEnabled && !areAllDevicesDisconnectedOrAccountless && !discovery);
+
     const navigateToImportScreen = () => {
         navigation.navigate(RootStackRoutes.AccountsImport, {
             screen: AccountsImportStackRoutes.SelectNetwork,
         });
     };
 
-    const navigateToAddCoinAccount = () =>
-        navigation.navigate(RootStackRoutes.AddCoinAccountStack, {
-            screen: AddCoinAccountStackRoutes.AddCoinAccount,
-            params: {
-                flowType: 'accounts',
-            },
-        });
+    const navigateToAddCoinAccount = () => {
+        if (isAddCoinAccountEnabled) {
+            navigation.navigate(RootStackRoutes.AddCoinAccountStack, {
+                screen: AddCoinAccountStackRoutes.AddCoinAccount,
+                params: {
+                    flowType: 'accounts',
+                },
+            });
+        }
+    };
 
-    return (
+    return shouldShowAddAccountButton ? (
         <IconButton
             iconName="plus"
             onPress={
@@ -40,5 +59,5 @@ export const AddAccountButton = () => {
             colorScheme="tertiaryElevation0"
             size="medium"
         />
-    );
+    ) : null;
 };
diff --git a/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx b/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx
@@ -6,15 +6,10 @@ import Animated, {
     withDelay,
     withTiming,
 } from 'react-native-reanimated';
-import { useSelector } from 'react-redux';
 
 import { ScreenSubHeader } from '@suite-native/navigation';
 import { Box, IconButton } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import {
-    selectAreAllDevicesDisconnectedOrAccountless,
-    selectDeviceDiscovery,
-} from '@suite-common/wallet-core';
 
 import { AccountsSearchForm, SEARCH_INPUT_ANIMATION_DURATION } from './AccountsSearchForm';
 import { AddAccountButton } from './AddAccountsButton';
@@ -39,10 +34,6 @@ export const SearchableAccountsListScreenHeader = ({
     const isFirstRender = useSharedValue(true);
     const { applyStyle } = useNativeStyles();
 
-    const discovery = useSelector(selectDeviceDiscovery);
-    const areAllDevicesDisconnectedOrAccountless = useSelector(
-        selectAreAllDevicesDisconnectedOrAccountless,
-    );
     const [isSearchActive, setIsSearchActive] = useState(false);
 
     const handleHideFilter = () => {
@@ -86,10 +77,7 @@ export const SearchableAccountsListScreenHeader = ({
                 >
                     <ScreenSubHeader
                         content={title}
-                        rightIcon={
-                            !areAllDevicesDisconnectedOrAccountless &&
-                            !discovery && <AddAccountButton />
-                        }
+                        rightIcon={<AddAccountButton />}
                         leftIcon={
                             <IconButton
                                 iconName="search"

diff --git a/suite-native/accounts/src/index.ts b/suite-native/accounts/src/index.ts
@@ -8,3 +8,4 @@ export * from './useAccountLabelForm';
 export * from './selectors';
 export * from './transactionCacheMiddleware';
 export * from './useTransactionCache';
+export * from './useIsAddCoinAccountEnabled';
diff --git a/suite-native/accounts/src/useIsAddCoinAccountEnabled.ts b/suite-native/accounts/src/useIsAddCoinAccountEnabled.ts
@@ -0,0 +1,8 @@
+import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags';
+
+export const useIsAddCoinAccountEnabled = () => {
+    const [isAddCoinAccountEnabled] = useFeatureFlag(FeatureFlag.IsAddCoinAccountEnabled);
+    const [isDeviceConnectEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+
+    return { isAddCoinAccountEnabled: isDeviceConnectEnabled && isAddCoinAccountEnabled };
+};
diff --git a/suite-native/accounts/tsconfig.json b/suite-native/accounts/tsconfig.json
@@ -29,6 +29,7 @@
         },
         { "path": "../atoms" },
         { "path": "../ethereum-tokens" },
+        { "path": "../feature-flags" },
         { "path": "../fiat-rates" },
         { "path": "../formatters" },
         { "path": "../forms" },

diff --git a/suite-native/feature-flags/src/featureFlagsSlice.ts b/suite-native/feature-flags/src/featureFlagsSlice.ts
@@ -5,6 +5,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 export const FeatureFlag = {
     IsDeviceConnectEnabled: 'isDeviceConnectEnabled',
     IsPassphraseEnabled: 'isPassphraseEnabled',
+    IsAddCoinAccountEnabled: 'isAddCoinAccountEnabled',
 } as const;
 export type FeatureFlag = (typeof FeatureFlag)[keyof typeof FeatureFlag];
 
@@ -17,11 +18,13 @@ export type FeatureFlagsRootState = {
 export const featureFlagsInitialState: FeatureFlagsState = {
     [FeatureFlag.IsDeviceConnectEnabled]: Platform.OS === 'android',
     [FeatureFlag.IsPassphraseEnabled]: false,
+    [FeatureFlag.IsAddCoinAccountEnabled]: false,
 };
 
 export const featureFlagsPersistedKeys: Array<keyof FeatureFlagsState> = [
     FeatureFlag.IsDeviceConnectEnabled,
     FeatureFlag.IsPassphraseEnabled,
+    FeatureFlag.IsAddCoinAccountEnabled,
 ];
 
 export const featureFlagsSlice = createSlice({

diff --git a/suite-native/module-dev-utils/src/components/FeatureFlags.tsx b/suite-native/module-dev-utils/src/components/FeatureFlags.tsx
@@ -4,6 +4,7 @@ import { FeatureFlag as FeatureFlagEnum, useFeatureFlag } from '@suite-native/fe
 const featureFlagsTitleMap = {
     [FeatureFlagEnum.IsDeviceConnectEnabled]: 'Connect device',
     [FeatureFlagEnum.IsPassphraseEnabled]: 'Passphrase',
+    [FeatureFlagEnum.IsAddCoinAccountEnabled]: 'Add account',
 } as const satisfies Record<FeatureFlagEnum, string>;
 
 const FeatureFlag = ({ featureFlag }: { featureFlag: FeatureFlagEnum }) => {

diff --git a/yarn.lock b/yarn.lock
@@ -7765,6 +7765,7 @@ __metadata:
     "@suite-common/wallet-utils": "workspace:*"
     "@suite-native/atoms": "workspace:*"
     "@suite-native/ethereum-tokens": "workspace:*"
+    "@suite-native/feature-flags": "workspace:*"
     "@suite-native/fiat-rates": "workspace:*"
     "@suite-native/formatters": "workspace:*"
     "@suite-native/forms": "workspace:*"