feat(mobile): make feature flags more dummy proof

trezor · Jan 8, 2025 · f7cfe41 · f7cfe41
1 parent 126fd7e
commit f7cfe41
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 30 deletions.
diff --git a/suite-native/accounts/src/components/AddAccountsButton.tsx b/suite-native/accounts/src/components/AddAccountsButton.tsx
@@ -31,7 +31,7 @@ export const AddAccountButton = ({ flowType, testID }: AddAccountButtonProps) =>
 
     const isSelectedDevicePortfolioTracker = useSelector(selectIsPortfolioTrackerDevice);
     const hasDiscovery = useSelector(selectHasDeviceDiscovery);
-    const [isDeviceConnectEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isDeviceConnectEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
     const { showViewOnlyAddAccountAlert } = useAccountAlerts();
     const isDeviceInViewOnlyMode = useSelector(selectIsDeviceInViewOnlyMode);
 

diff --git a/suite-native/device-manager/src/components/DeviceManager.tsx b/suite-native/device-manager/src/components/DeviceManager.tsx
@@ -6,7 +6,7 @@ import { DeviceManagerContent } from './DeviceManagerContent';
 import { PortfolioTrackerDeviceManagerContent } from './PortfolioTrackerDeviceManagerContent';
 
 export const DeviceManager = () => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     return (
         <Box flexDirection="row" flex={1}>

diff --git a/suite-native/feature-flags/src/index.ts b/suite-native/feature-flags/src/index.ts
@@ -1,2 +1,3 @@
 export * from './featureFlagsSlice';
 export * from './useFeatureFlag';
+export * from './useToggleFeatureFlag';
diff --git a/suite-native/feature-flags/src/useFeatureFlag.tsx b/suite-native/feature-flags/src/useFeatureFlag.tsx
@@ -1,24 +1,15 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import {
     FeatureFlag,
     FeatureFlagsRootState,
     selectIsFeatureFlagEnabled,
-    toggleFeatureFlag,
 } from './featureFlagsSlice';
 
-type FeatureFlagHookReturnType = [boolean, () => void];
-
-export const useFeatureFlag = (featureFlag: FeatureFlag): FeatureFlagHookReturnType => {
-    const dispatch = useDispatch();
-
+export const useFeatureFlag = (featureFlag: FeatureFlag): boolean => {
     const isFeatureFlagEnabled = useSelector((state: FeatureFlagsRootState) =>
         selectIsFeatureFlagEnabled(state, featureFlag),
     );
 
-    const toggleIsFeatureFlagEnabled = () => {
-        dispatch(toggleFeatureFlag({ featureFlag }));
-    };
-
-    return [isFeatureFlagEnabled, toggleIsFeatureFlagEnabled];
+    return isFeatureFlagEnabled;
 };
diff --git a/suite-native/feature-flags/src/useToggleFeatureFlag.ts b/suite-native/feature-flags/src/useToggleFeatureFlag.ts
@@ -0,0 +1,9 @@
+import { useDispatch } from 'react-redux';
+
+import { FeatureFlag, toggleFeatureFlag } from './featureFlagsSlice';
+
+export const useToggleFeatureFlag = (featureFlag: FeatureFlag): (() => void) => {
+    const dispatch = useDispatch();
+
+    return () => dispatch(toggleFeatureFlag({ featureFlag }));
+};
diff --git a/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx b/suite-native/module-accounts-import/src/screens/AccountImportSummaryScreen.tsx
@@ -30,7 +30,7 @@ export const AccountImportSummaryScreen = ({
 >) => {
     const { accountInfo, networkSymbol } = route.params;
 
-    const [isRegtestEnabled] = useFeatureFlag(FeatureFlag.IsRegtestEnabled);
+    const isRegtestEnabled = useFeatureFlag(FeatureFlag.IsRegtestEnabled);
     const account = useSelector((state: AccountsRootState & DeviceRootState) =>
         selectDeviceAccountByDescriptorAndNetworkSymbol(
             state,

diff --git a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
@@ -84,7 +84,7 @@ const TransactionListHeaderContent = ({
 export const TransactionListHeader = memo(
     ({ accountKey, tokenContract }: TransactionListHeaderProps) => {
         const navigation = useNavigation<AccountsNavigationProps>();
-        const [isDeviceConnectEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+        const isDeviceConnectEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
         const account = useSelector((state: AccountsRootState) =>
             selectAccountByKey(state, accountKey),

diff --git a/suite-native/module-connect-popup/src/hooks/useConnectPopupNavigation.ts b/suite-native/module-connect-popup/src/hooks/useConnectPopupNavigation.ts
@@ -31,7 +31,7 @@ const isConnectPopupUrl = (url: string): boolean => {
 // TODO: will be necessary to handle if device is not connected/unlocked so we probably want to wait until user unlock device
 // we already have some modals like biometrics or coin enabled which are waiting for device to be connected
 export const useConnectPopupNavigation = () => {
-    const [featureFlagEnabled] = useFeatureFlag(FeatureFlag.IsConnectPopupEnabled);
+    const featureFlagEnabled = useFeatureFlag(FeatureFlag.IsConnectPopupEnabled);
     const navigation = useNavigation<NavigationProp>();
 
     const navigateToConnectPopup = useCallback(

diff --git a/suite-native/module-dev-utils/src/components/FeatureFlags.tsx b/suite-native/module-dev-utils/src/components/FeatureFlags.tsx
@@ -1,5 +1,9 @@
 import { Box, Card, CheckBox, Text, VStack } from '@suite-native/atoms';
-import { FeatureFlag as FeatureFlagEnum, useFeatureFlag } from '@suite-native/feature-flags';
+import {
+    FeatureFlag as FeatureFlagEnum,
+    useFeatureFlag,
+    useToggleFeatureFlag,
+} from '@suite-native/feature-flags';
 
 const featureFlagsTitleMap = {
     [FeatureFlagEnum.IsDeviceConnectEnabled]: 'Connect device',
@@ -12,12 +16,13 @@ const featureFlagsTitleMap = {
 } as const satisfies Record<FeatureFlagEnum, string>;
 
 const FeatureFlag = ({ featureFlag }: { featureFlag: FeatureFlagEnum }) => {
-    const [value, setValue] = useFeatureFlag(featureFlag);
+    const value = useFeatureFlag(featureFlag);
+    const toggleFeatureFlag = useToggleFeatureFlag(featureFlag);
 
     return (
         <Box flexDirection="row" justifyContent="space-between">
             <Text>{featureFlagsTitleMap[featureFlag]}</Text>
-            <CheckBox isChecked={value} onChange={setValue} />
+            <CheckBox isChecked={value} onChange={toggleFeatureFlag} />
         </Box>
     );
 };

diff --git a/suite-native/module-device-settings/src/components/DeviceFirmwareCard.tsx b/suite-native/module-device-settings/src/components/DeviceFirmwareCard.tsx
@@ -66,7 +66,7 @@ export const DeviceFirmwareCard = () => {
         selectIsDiscoveryActiveByDeviceState(state, device?.state),
     );
     const navigation = useNavigation<NavigationProp>();
-    const [isFirmwareUpdateEnabled] = useFeatureFlag(FeatureFlag.IsFirmwareUpdateEnabled);
+    const isFirmwareUpdateEnabled = useFeatureFlag(FeatureFlag.IsFirmwareUpdateEnabled);
 
     if (!device || !deviceModel) {
         return null;

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/EmptyHomeRenderer.tsx b/suite-native/module-home/src/screens/HomeScreen/components/EmptyHomeRenderer.tsx
@@ -13,7 +13,7 @@ import { EmptyConnectedDeviceState } from './EmptyConnectedDeviceState';
 import { EmptyPortfolioCrossroads } from './EmptyPortfolioCrossroads';
 
 export const EmptyHomeRenderer = () => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     const isDeviceAuthorized = useSelector(selectIsDeviceAuthorized);
     const isPortfolioTrackerDevice = useSelector(selectIsPortfolioTrackerDevice);

diff --git a/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx b/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
@@ -32,7 +32,7 @@ export const OnboardingScreenHeader = ({
 }: OnboardingScreenHeaderProps) => {
     const { applyStyle } = useNativeStyles();
 
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     return (
         <Box alignItems="center" style={applyStyle(wrapperStyle)} alignSelf="center">

diff --git a/suite-native/module-onboarding/src/screens/FeatureReceiveScreen.tsx b/suite-native/module-onboarding/src/screens/FeatureReceiveScreen.tsx
@@ -40,7 +40,7 @@ const receiveScreenContentMap = {
 } as const satisfies Record<'device' | 'portfolioTracker', ScreenContent>;
 
 const IconWrapper = ({ children }: { children: ReactNode }) => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     if (!isUsbDeviceConnectFeatureEnabled) return <>{children}</>;
 
@@ -53,7 +53,7 @@ const IconWrapper = ({ children }: { children: ReactNode }) => {
 
 export const FeatureReceiveScreen = () => {
     const navigation = useNavigation<NavigationProps>();
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     const content =
         receiveScreenContentMap[isUsbDeviceConnectFeatureEnabled ? 'device' : 'portfolioTracker'];

diff --git a/suite-native/module-onboarding/src/screens/TrackBalancesScreen.tsx b/suite-native/module-onboarding/src/screens/TrackBalancesScreen.tsx
@@ -40,7 +40,7 @@ type NavigationProp = StackNavigationProps<
 >;
 
 const IconWrapper = ({ children }: { children: ReactNode }) => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     if (!isUsbDeviceConnectFeatureEnabled) return <>{children}</>;
 
@@ -52,7 +52,7 @@ const IconWrapper = ({ children }: { children: ReactNode }) => {
 };
 
 export const TrackBalancesScreen = () => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     const navigation = useNavigation<NavigationProp>();
 

diff --git a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
@@ -27,7 +27,7 @@ const trezorLinkStyle = prepareNativeStyle(utils => ({
 }));
 
 export const WelcomeScreen = () => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     const navigation =
         useNavigation<

diff --git a/suite-native/module-settings/src/components/FAQInfoPanel.tsx b/suite-native/module-settings/src/components/FAQInfoPanel.tsx
@@ -109,7 +109,7 @@ const DisabledUsbFAQ = () => {
 };
 
 export const FAQInfoPanel = () => {
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     return (
         <VStack paddingHorizontal="sp8">

diff --git a/suite-native/module-settings/src/components/FeaturesSettings.tsx b/suite-native/module-settings/src/components/FeaturesSettings.tsx
@@ -20,7 +20,7 @@ import { isDevButtonVisibleAtom } from './ProductionDebug';
 
 export const FeaturesSettings = () => {
     const isDevButtonVisible = useAtomValue(isDevButtonVisibleAtom);
-    const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
+    const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
     const navigation = useNavigation<StackNavigationProps<RootStackParamList, RootStackRoutes>>();
     const navigateTo = useSettingsNavigateTo();