feat(suite-native): prompt remember only after discovery ended

Author: vytick

suite-common/wallet-core/src/discovery/discoveryReducer.ts

@@ -91,8 +91,11 @@ export const selectDeviceDiscovery = (state: DiscoveryRootState & DeviceRootStat
     return selectDiscoveryByDeviceState(state, selectedDevice?.state);
 };
 
-export const selectIsDeviceDiscoveryActive = (state: DiscoveryRootState & DeviceRootState) => {
-    const discovery = selectDeviceDiscovery(state);
+export const selectIsDiscoveryActiveByDeviceState = (
+    state: DiscoveryRootState & DeviceRootState,
+    deviceState: string | undefined,
+) => {
+    const discovery = selectDiscoveryByDeviceState(state, deviceState);
 
     if (!discovery) return false;
 
@@ -102,6 +105,12 @@ export const selectIsDeviceDiscoveryActive = (state: DiscoveryRootState & Device
     );
 };
 
+export const selectIsDeviceDiscoveryActive = (state: DiscoveryRootState & DeviceRootState) => {
+    const discovery = selectDeviceDiscovery(state);
+
+    return selectIsDiscoveryActiveByDeviceState(state, discovery?.deviceState);
+};
+
 /**
  * Helper selector called from components
  * return `true` if discovery process is running/completed and `authConfirm` is required

suite-native/module-home/src/screens/HomeScreen/components/EnableViewOnlyBottomSheet.tsx

@@ -6,6 +6,7 @@ import {
     selectIsPortfolioTrackerDevice,
     toggleRememberDevice,
     selectIsDeviceRemembered,
+    selectIsDeviceDiscoveryActive,
 } from '@suite-common/wallet-core';
 import { analytics, EventType } from '@suite-native/analytics';
 import { BottomSheet, Box, Button, CenteredTitleHeader, VStack } from '@suite-native/atoms';
@@ -45,6 +46,7 @@ export const EnableViewOnlyBottomSheet = () => {
     const isPortfolioTrackerDevice = useSelector(selectIsPortfolioTrackerDevice);
     const viewOnlyCancelationTimestamp = useSelector(selectViewOnlyCancelationTimestamp);
     const isDeviceRemembered = useSelector(selectIsDeviceRemembered);
+    const isDiscoveryActive = useSelector(selectIsDeviceDiscoveryActive);
     const { showToast } = useToast();
     const [isVisible, setIsVisible] = useState(false);
     const [isAvailableBiometrics, setIsAvailableBiometrics] = useState(false);
@@ -63,13 +65,15 @@ export const EnableViewOnlyBottomSheet = () => {
     //     does not have view only mode enabled already
     //     the device is authorized
     //     not a portfolio tracker
+    //     discovery has finished
     //     the user hasn't made a choice yet
     //     and biometrics initial setup was decided or biometrics is not available
 
     const canBeShowed =
         !isDeviceRemembered &&
         isDeviceReadyToUseAndAuthorized &&
         !isPortfolioTrackerDevice &&
+        !isDiscoveryActive &&
         !viewOnlyCancelationTimestamp &&
         (isBiometricsInitialSetupFinished || !isAvailableBiometrics);
 

suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx

@@ -1,8 +1,14 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { Button, HStack, Text } from '@suite-native/atoms';
+import { Button, HStack, Loader, Text } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
-import { deviceActions, toggleRememberDevice } from '@suite-common/wallet-core';
+import {
+    DeviceRootState,
+    DiscoveryRootState,
+    deviceActions,
+    selectIsDiscoveryActiveByDeviceState,
+    toggleRememberDevice,
+} from '@suite-common/wallet-core';
 import { analytics, EventType } from '@suite-native/analytics';
 import { useAlert } from '@suite-native/alerts';
 import { useToast } from '@suite-native/toasts';
@@ -11,18 +17,25 @@ import { TrezorDevice } from '@suite-common/suite-types';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { setViewOnlyCancelationTimestamp } from '@suite-native/settings';
 
+type WalletRowProps = {
+    device: TrezorDevice;
+};
+
 const walletRowStyle = prepareNativeStyle(utils => ({
     paddingHorizontal: utils.spacings.medium,
     justifyContent: 'space-between',
     alignItems: 'center',
     height: 60,
 }));
 
-export const WalletRow = ({ device }: { device: TrezorDevice }) => {
+export const WalletRow = ({ device }: WalletRowProps) => {
     const dispatch = useDispatch();
     const { showAlert, hideAlert } = useAlert();
     const { showToast } = useToast();
     const { applyStyle } = useNativeStyles();
+    const isDeviceDiscoveryActive = useSelector((state: DiscoveryRootState & DeviceRootState) =>
+        selectIsDiscoveryActiveByDeviceState(state, device.state),
+    );
 
     const walletNameLabel = device.useEmptyPassphrase ? (
         <Translation id="moduleSettings.viewOnly.wallet.standard" />
@@ -90,6 +103,8 @@ export const WalletRow = ({ device }: { device: TrezorDevice }) => {
         });
     };
 
+    const showToggleButton = device.remember || !isDeviceDiscoveryActive;
+
     return (
         <HStack key={device.instance} style={applyStyle(walletRowStyle)}>
             <HStack spacing={12} alignItems="center">
@@ -99,19 +114,23 @@ export const WalletRow = ({ device }: { device: TrezorDevice }) => {
                 />
                 <Text variant="callout">{walletNameLabel}</Text>
             </HStack>
-            <Button
-                size="extraSmall"
-                colorScheme={device.remember ? 'redElevation0' : 'primary'}
-                onPress={() => (device.remember ? handleDisableViewOnly() : toggleViewOnly())}
-            >
-                <Translation
-                    id={
-                        device.remember
-                            ? 'moduleSettings.viewOnly.button.disable'
-                            : 'moduleSettings.viewOnly.button.enable'
-                    }
-                />
-            </Button>
+            {showToggleButton ? (
+                <Button
+                    size="extraSmall"
+                    colorScheme={device.remember ? 'redElevation0' : 'primary'}
+                    onPress={() => (device.remember ? handleDisableViewOnly() : toggleViewOnly())}
+                >
+                    <Translation
+                        id={
+                            device.remember
+                                ? 'moduleSettings.viewOnly.button.disable'
+                                : 'moduleSettings.viewOnly.button.enable'
+                        }
+                    />
+                </Button>
+            ) : (
+                <Loader size="small" />
+            )}
         </HStack>
     );
 };