diff --git a/packages/kit/src/components/Password/container/PasswordSetupContainer.tsx b/packages/kit/src/components/Password/container/PasswordSetupContainer.tsx index 66453468fae..44c49f2e991 100644 --- 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 new file mode 100644 index 00000000000..f58a06febb4 --- /dev/null +++ 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 index bd263491238..10b3d68fb95 100644 --- 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['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) ? (