import React , { FunctionComponent , useState } from "react" ; import { SettingItem } from "../components" ; import { Toggle } from "../../../components/toggle" ; import { observer } from "mobx-react-lite" ; import { useStore } from "../../../stores" ; import delay from "delay" ; import { PasswordInputModal } from "../../../modals/password-input/modal" ; export const SettingBiometricLockItem = observer ( ( { topBorder } ) => { const { keychainStore } = useStore ( ) ; const [ isOpenModal , setIsOpenModal ] = useState ( false ) ; const [ isTurnOffBiometryFallback , setIsTurnOffBiometryFallback ] = useState ( false ) ; return ( < React . Fragment > < PasswordInputModal title = { ! isTurnOffBiometryFallback ? "Enable Biometric Authentication" : "Disable Biometric Authentication" } isOpen = { isOpenModal } close = { ( ) => { setIsOpenModal ( false ) ; setIsTurnOffBiometryFallback ( false ) ; } } onEnterPassword = { async ( password ) => { await delay ( 10 ) ; if ( ! isTurnOffBiometryFallback ) { await keychainStore . turnOnBiometry ( password ) ; } else { await keychainStore . turnOffBiometryWithPassword ( password ) ; } } } /> < SettingItem label = "Use biometric authentication" right = { < Toggle on = { keychainStore . isBiometryOn } onChange = { async ( value ) => { if ( value ) { setIsOpenModal ( true ) ; setIsTurnOffBiometryFallback ( false ) ; } else { try { await keychainStore . turnOffBiometry ( ) ; } catch ( e ) { console . log ( e ) ; setIsOpenModal ( true ) ; setIsTurnOffBiometryFallback ( true ) ; } } } } />} topBorder={topBorder}/ > < /React.Fragment>); } ) ;