From 96631c58840265fc5fbf14faea1d38e438ae72fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Vytick=20Vytrhl=C3=ADk?= Date: Mon, 26 Feb 2024 15:26:40 +0100 Subject: [PATCH] feat(suite-native): Add coin behind feature flag --- suite-native/accounts/package.json | 1 + .../src/components/AddAccountsButton.tsx | 41 ++++++++++++++----- .../SearchableAccountsListScreenHeader.tsx | 14 +------ suite-native/accounts/src/index.ts | 1 + .../src/useIsAddCoinAccountEnabled.ts | 8 ++++ suite-native/accounts/tsconfig.json | 1 + .../feature-flags/src/featureFlagsSlice.ts | 3 ++ .../src/components/FeatureFlags.tsx | 1 + yarn.lock | 1 + 9 files changed, 47 insertions(+), 24 deletions(-) create mode 100644 suite-native/accounts/src/useIsAddCoinAccountEnabled.ts diff --git a/suite-native/accounts/package.json b/suite-native/accounts/package.json index 160af400fc0b..a4b22205d470 100644 --- 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 index f29a9214f63f..1b8bfc9cc750 100644 --- 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>(); + 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 ? ( { colorScheme="tertiaryElevation0" size="medium" /> - ); + ) : null; }; diff --git a/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx b/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx index 8b39b46afa43..e6b8851880d4 100644 --- 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 = ({ > - } + rightIcon={} leftIcon={ { + 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 index 6a1218e0f2ca..ce52efb3ca24 100644 --- 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 index cf4ea6874b92..b0f290bd4e50 100644 --- 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 = [ 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 index c9c64d46b179..1857ee565a09 100644 --- 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; const FeatureFlag = ({ featureFlag }: { featureFlag: FeatureFlagEnum }) => { diff --git a/yarn.lock b/yarn.lock index 6ce87a682e09..6d1dc66687dd 100644 --- 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:*"