feat(suite-native): Simplify biometrics UI logic

trezor · Apr 8, 2024 · 7c6a150 · 7c6a150
1 parent e68cb69
commit 7c6a150
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 300 deletions.
diff --git a/suite-native/biometrics/package.json b/suite-native/biometrics/package.json
@@ -7,7 +7,6 @@
     "main": "src/index",
     "scripts": {
         "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
-        "test:unit": "yarn g:jest -c ../../jest.config.native.js",
         "type-check": "yarn g:tsc --build"
     },
     "dependencies": {

diff --git a/suite-native/biometrics/src/components/BiometricOverlay.tsx b/suite-native/biometrics/src/components/BiometricOverlay.tsx
@@ -1,12 +1,11 @@
-import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 
 import { Box, Text } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import { Icon } from '@suite-common/icons';
-import { Translation, TxKeyPath } from '@suite-native/intl';
+import { Icon, iconSizes } from '@suite-common/icons';
+import { Translation } from '@suite-native/intl';
 
-import { BiometricsIcons } from './BiometricsIcons';
-import { useBiometricsSettings } from '../useBiometricsSettings';
+import { BiometricsIcon } from './BiometricsIcon';
 
 const overlayWrapperStyle = prepareNativeStyle(utils => ({
     ...StyleSheet.absoluteFillObject,
@@ -24,30 +23,6 @@ const bottomWrapperStyle = prepareNativeStyle(utils => ({
     gap: utils.spacings.extraSmall,
 }));
 
-const getBiometricsTranslationKey = ({
-    isFacialEnabled,
-    isFingerprintEnabled,
-}: {
-    isFacialEnabled: boolean;
-    isFingerprintEnabled: boolean;
-}): TxKeyPath => {
-    if (Platform.OS === 'ios') {
-        return isFacialEnabled ? 'biometrics.ios.faceId' : 'biometrics.ios.touchId';
-    }
-
-    if (Platform.OS === 'android') {
-        if (isFingerprintEnabled && isFacialEnabled) return 'biometrics.android.combined';
-
-        if (isFingerprintEnabled) return 'biometrics.android.fingerprint';
-
-        if (isFacialEnabled) {
-            return 'biometrics.android.facial';
-        }
-    }
-
-    return 'biometrics.unknown';
-};
-
 type BiometricOverlayProps = {
     isBiometricsAuthButtonVisible: boolean;
     onBiometricAuthPress: () => void;
@@ -58,9 +33,6 @@ export const BiometricOverlay = ({
     onBiometricAuthPress,
 }: BiometricOverlayProps) => {
     const { applyStyle } = useNativeStyles();
-    const { isFacialEnabled, isFingerprintEnabled } = useBiometricsSettings();
-
-    const titleTransKey = getBiometricsTranslationKey({ isFacialEnabled, isFingerprintEnabled });
 
     return (
         <>
@@ -72,8 +44,8 @@ export const BiometricOverlay = ({
                     onPress={onBiometricAuthPress}
                     style={applyStyle(bottomWrapperStyle)}
                 >
-                    <BiometricsIcons iconSize={32} showShadow />
-                    <Text color="textPrimaryDefault">{<Translation id={titleTransKey} />}</Text>
+                    <BiometricsIcon iconSize={iconSizes.extraLarge} showShadow />
+                    <Text color="textPrimaryDefault">{<Translation id="biometricsButton" />}</Text>
                 </TouchableOpacity>
             )}
         </>

diff --git a/suite-native/biometrics/src/components/BiometricsIcon.tsx b/suite-native/biometrics/src/components/BiometricsIcon.tsx
@@ -0,0 +1,49 @@
+import { Platform } from 'react-native';
+
+import { IconName, Icon } from '@suite-common/icons';
+import { Box } from '@suite-native/atoms';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+const ICON_SIZE_DEFAULT = 64;
+const ICON_WRAPPER_PADDING = 12;
+
+const iconWrapperStyle = prepareNativeStyle(
+    (utils, { wrapperSize, showShadow }: { wrapperSize: number; showShadow: boolean }) => ({
+        padding: ICON_WRAPPER_PADDING,
+        borderRadius: utils.borders.radii.round,
+        backgroundColor: utils.colors.backgroundSurfaceElevation2,
+        color: utils.colors.iconPrimaryDefault,
+        width: wrapperSize,
+        height: wrapperSize,
+
+        extend: {
+            condition: showShadow,
+            style: utils.boxShadows.small,
+        },
+    }),
+);
+
+type BiometricsIconProps = {
+    iconSize?: number;
+    showShadow?: boolean;
+};
+
+export const BiometricsIcon = ({
+    iconSize = ICON_SIZE_DEFAULT,
+    showShadow = false,
+}: BiometricsIconProps) => {
+    const { applyStyle } = useNativeStyles();
+    const icon: IconName = Platform.OS === 'ios' ? 'touchId' : 'fingerprint';
+    const iconWrapperSize = iconSize + 2 * ICON_WRAPPER_PADDING;
+
+    return (
+        <Box
+            style={applyStyle(iconWrapperStyle, {
+                wrapperSize: iconWrapperSize,
+                showShadow,
+            })}
+        >
+            <Icon name={icon} color="iconPrimaryDefault" size={iconSize} />
+        </Box>
+    );
+};
diff --git a/suite-native/biometrics/src/components/BiometricsIcons.tsx b/suite-native/biometrics/src/components/BiometricsIcons.tsx
diff --git a/suite-native/biometrics/src/index.ts b/suite-native/biometrics/src/index.ts
@@ -2,6 +2,5 @@ export * from './isBiometricsFeatureAvailable';
 export * from './biometricsAtoms';
 export * from './useBiometrics';
 export * from './components/BiometricsModalRenderer';
-export * from './components/BiometricsIcons';
+export * from './components/BiometricsIcon';
 export * from './useBiometricsSettings';
-export * from './utils';
diff --git a/suite-native/biometrics/src/tests/utils.test.ts b/suite-native/biometrics/src/tests/utils.test.ts
diff --git a/suite-native/biometrics/src/useBiometricsSettings.ts b/suite-native/biometrics/src/useBiometricsSettings.ts
@@ -1,6 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { AuthenticationType, supportedAuthenticationTypesAsync } from 'expo-local-authentication';
+import { useCallback } from 'react';
 
 import { useAlert } from '@suite-native/alerts/src';
 import { analytics, EventType } from '@suite-native/analytics';
@@ -12,7 +10,6 @@ import {
 } from './biometricsAtoms';
 import { getIsBiometricsFeatureAvailable } from './isBiometricsFeatureAvailable';
 import { authenticate } from './useBiometrics';
-import { getIsFacialBiometricEnabled, getIsFingerprintBiometricEnabled } from './utils';
 
 export type BiometricsToggleResult = 'enabled' | 'disabled' | 'failed' | 'notAvailable';
 
@@ -22,19 +19,6 @@ export const useBiometricsSettings = () => {
     const { isBiometricsOptionEnabled, setIsBiometricsOptionEnabled } = useIsBiometricsEnabled();
     const { setIsBiometricsOverlayVisible } = useIsBiometricsOverlayVisible();
 
-    const [biometricsTypes, setBiometricsTypes] = useState<AuthenticationType[]>([]);
-
-    const isFacialEnabled = getIsFacialBiometricEnabled(biometricsTypes);
-    const isFingerprintEnabled = getIsFingerprintBiometricEnabled(biometricsTypes);
-
-    useEffect(() => {
-        const getSupportedTypes = async () => {
-            const biometricsTypesAvailable = await supportedAuthenticationTypesAsync();
-            setBiometricsTypes(biometricsTypesAvailable);
-        };
-        getSupportedTypes();
-    }, []);
-
     const toggleBiometricsOption = useCallback(async (): Promise<BiometricsToggleResult> => {
         const isBiometricsAvailable = await getIsBiometricsFeatureAvailable();
 
@@ -87,5 +71,5 @@ export const useBiometricsSettings = () => {
         showAlert,
     ]);
 
-    return { toggleBiometricsOption, isFacialEnabled, isFingerprintEnabled };
+    return { toggleBiometricsOption };
 };
diff --git a/suite-native/biometrics/src/utils.ts b/suite-native/biometrics/src/utils.ts
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -62,30 +62,8 @@ export const en = {
             receive: 'Receive',
         },
         biometricsModal: {
-            title: {
-                ios: {
-                    faceId: 'Enable FaceID',
-                    touchId: 'Enable TouchID',
-                },
-                android: {
-                    fingerprint: 'Enable fingerprint',
-                    facial: 'Enable facial recognition',
-                    combined: 'Enable biometrics',
-                },
-                unknown: 'Enable biometrics',
-            },
-            description: {
-                ios: {
-                    faceId: 'Use FaceID to unlock the app.',
-                    touchId: 'Use TouchID to unlock the app.',
-                },
-                android: {
-                    fingerprint: 'Use your fingerprint to unlock the app.',
-                    facial: 'Use facial recognition to unlock the app.',
-                    combined: 'Use facial recognition or fingerprint to unlock the app.',
-                },
-                unknown: 'Use biometrics to unlock the app.',
-            },
+            title: 'Enable biometrics protection',
+            description: 'You can always change this later.',
             button: {
                 later: 'I’ll do that later in Settings',
                 enable: 'Enable',
@@ -101,18 +79,7 @@ export const en = {
             discoveryProgress: { loading: 'Loading...', stillWorking: 'Retrieving balances' },
         },
     },
-    biometrics: {
-        ios: {
-            faceId: 'Use FaceID',
-            touchId: 'Use TouchID',
-        },
-        android: {
-            fingerprint: 'Use fingerprint',
-            facial: 'Use facial recognition',
-            combined: 'Use biometrics',
-        },
-        unknown: 'Use biometrics',
-    },
+    biometricsButton: 'Unlock with biometrics',
     moduleAccountImport: {
         title: 'Sync my coins',
         error: { unsupportedNetworkType: 'Unsupported account network type.' },