fix: fix title & icon of BiometricAuth(OK-32960) (#5989)

OneKeyHQ · Oct 13, 2024 · 0302d40 · 0302d40
1 parent bbc6a10
commit 0302d40
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 59 deletions.
diff --git a/packages/kit/src/components/Password/container/PasswordSetupContainer.tsx b/packages/kit/src/components/Password/container/PasswordSetupContainer.tsx
@@ -1,13 +1,5 @@
-import {
-  Suspense,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { Suspense, memo, useCallback, useEffect, useState } from 'react';
 
-import { AuthenticationType } from 'expo-local-authentication';
 import { useIntl } from 'react-intl';
 
 import { SizableText, Stack, Toast, XStack } from '@onekeyhq/components';
@@ -20,6 +12,7 @@ import {
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
+import { useBiometricAuthInfo } from '../../../hooks/useBiometricAuthInfo';
 import { UniversalContainerWithSuspense } from '../../BiologyAuthComponent/container/UniversalContainer';
 import { useWebAuthActions } from '../../BiologyAuthComponent/hooks/useWebAuthActions';
 import PasswordSetup from '../components/PasswordSetup';
@@ -39,31 +32,16 @@ const BiologyAuthContainer = ({
   webAuthIsSupport,
   skipAuth,
 }: IBiologyAuthContainerProps) => {
-  const [{ isSupport: biologyAuthIsSupport, authType }] =
+  const [{ isSupport: biologyAuthIsSupport }] =
     usePasswordBiologyAuthInfoAtom();
   const [{ isBiologyAuthSwitchOn }] = useSettingsPersistAtom();
   const intl = useIntl();
-  const settingsTitle = useMemo(() => {
-    if (
-      biologyAuthIsSupport &&
-      (authType.includes(AuthenticationType.FACIAL_RECOGNITION) ||
-        authType.includes(AuthenticationType.IRIS))
-    ) {
-      return intl.formatMessage(
-        { id: ETranslations.auth_with_biometric },
-        {
-          biometric:
-            authType.length > 1
-              ? intl.formatMessage({ id: ETranslations.global_biometric })
-              : 'FaceID',
-        },
-      );
-    }
-    return intl.formatMessage(
-      { id: ETranslations.auth_with_biometric },
-      { biometric: 'TouchID' },
-    );
-  }, [authType, biologyAuthIsSupport, intl]);
+
+  const { title } = useBiometricAuthInfo();
+  const settingsTitle = intl.formatMessage(
+    { id: ETranslations.auth_with_biometric },
+    { biometric: title },
+  );
 
   useEffect(() => {
     if (

diff --git a/packages/kit/src/hooks/useBiometricAuthInfo.ts b/packages/kit/src/hooks/useBiometricAuthInfo.ts
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { AuthenticationType } from 'expo-local-authentication';
+import { useIntl } from 'react-intl';
+
+import type { IKeyOfIcons } from '@onekeyhq/components';
+import { usePasswordBiologyAuthInfoAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
+import { ETranslations } from '@onekeyhq/shared/src/locale';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
+
+export const useBiometricAuthInfo = () => {
+  const [{ authType }] = usePasswordBiologyAuthInfoAtom();
+  const intl = useIntl();
+  return useMemo(() => {
+    let icon: IKeyOfIcons = 'TouchIdSolid';
+    let titleId =
+      platformEnv.isNativeIOS || platformEnv.isDesktopMac
+        ? ETranslations.global_touch_id
+        : ETranslations.global_biometric;
+
+    if (platformEnv.isNative) {
+      if (
+        authType.includes(AuthenticationType.FACIAL_RECOGNITION) ||
+        authType.includes(AuthenticationType.IRIS)
+      ) {
+        if (platformEnv.isNativeIOS) {
+          titleId = ETranslations.global_face_id;
+        }
+        icon = 'FaceIdSolid';
+      }
+    } else if (platformEnv.isDesktopWin) {
+      titleId = ETranslations.global_windows_hello;
+      icon = 'WindowsHelloSolid';
+    } else if (platformEnv.isExtension) {
+      titleId = ETranslations.settings_passkey;
+      icon = 'PassKeySolid';
+    }
+
+    return {
+      title: intl.formatMessage({ id: titleId }),
+      icon,
+    };
+  }, [authType, intl]);
+};
diff --git a/packages/kit/src/views/Setting/pages/List/SecuritySection/index.tsx b/packages/kit/src/views/Setting/pages/List/SecuritySection/index.tsx
@@ -1,7 +1,5 @@
-import type { ComponentProps } from 'react';
 import { Suspense, useCallback, useMemo } from 'react';
 
-import { AuthenticationType } from 'expo-local-authentication';
 import { useIntl } from 'react-intl';
 
 import { Dialog } from '@onekeyhq/components';
@@ -11,6 +9,7 @@ import { UniversalContainerWithSuspense } from '@onekeyhq/kit/src/components/Bio
 import { ListItem } from '@onekeyhq/kit/src/components/ListItem';
 import PasswordUpdateContainer from '@onekeyhq/kit/src/components/Password/container/PasswordUpdateContainer';
 import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
+import { useBiometricAuthInfo } from '@onekeyhq/kit/src/hooks/useBiometricAuthInfo';
 import {
   usePasswordBiologyAuthInfoAtom,
   usePasswordPersistAtom,
@@ -111,36 +110,11 @@ const PasswordItem = () => {
 };
 
 const FaceIdItem = () => {
-  const intl = useIntl();
   const [{ isPasswordSet }] = usePasswordPersistAtom();
   const [{ isSupport: biologyAuthIsSupport, authType }] =
     usePasswordBiologyAuthInfoAtom();
   const [{ isSupport: webAuthIsSupport }] = usePasswordWebAuthInfoAtom();
-
-  let title = intl.formatMessage({ id: ETranslations.global_touch_id });
-  let icon: ComponentProps<typeof ListItem>['icon'] = 'TouchIdSolid';
-
-  if (platformEnv.isExtension) {
-    title = intl.formatMessage({ id: ETranslations.settings_passkey });
-    icon = 'PassKeySolid';
-  }
-  if (biologyAuthIsSupport) {
-    if (platformEnv.isDesktopWin) {
-      title = intl.formatMessage({ id: ETranslations.global_windows_hello });
-      icon = 'WindowsHelloSolid';
-    } else if (
-      authType.includes(AuthenticationType.FACIAL_RECOGNITION) ||
-      authType.includes(AuthenticationType.IRIS)
-    ) {
-      title = intl.formatMessage({
-        id:
-          authType.length > 1
-            ? ETranslations.global_biometric
-            : ETranslations.global_face_id,
-      });
-      icon = 'FaceIdSolid';
-    }
-  }
+  const { title, icon } = useBiometricAuthInfo();
 
   return isPasswordSet && (biologyAuthIsSupport || webAuthIsSupport) ? (
     <ListItem icon={icon} title={title}>