import { FC , useContext , useState } from "react" ; import { createPortal } from "react-dom" ; import { useForm } from "react-hook-form" ; import { useTranslation } from "react-i18next" ; import ModalDialog , { disableScroll , } from "../../../container/ModalDialog/ModalDialog" ; import { AppContext } from "../../../store/app-context" ; import { instance } from "../../../util/interceptor" ; import { MODAL_ROOT } from "../../../util/util" ; import InputField from "../InputField/InputField" ; import LoadingSpinner from "../LoadingSpinner/LoadingSpinner" ; import type { SubmitHandler } from "react-hook-form" ; interface IFormInputs { passwordInput : string ; } type Props = { onClose : ( unlocked : boolean ) => void ; } ; const UnlockModal = ( { onClose } ) => { const { t } = useTranslation ( ) ; const { setWalletLocked } = useContext ( AppContext ) ; const [ isLoading , setIsLoading ] = useState ( false ) ; const [ passwordWrong , setPasswordWrong ] = useState ( false ) ; const { register , handleSubmit , formState : { errors , isValid } , } = useForm < IFormInputs > ( { mode : "onChange" } ) ; const unlockHandler = ( data ) => { setIsLoading ( true ) ; instance . post ( "/lightning/unlock-wallet" , { password : data . passwordInput } ) . then ( ( res ) => { if ( res . data ) { setWalletLocked ( false ) ; disableScroll . off ( ) ; onClose ( true ) ; } } ) . catch ( ( _ ) => { setIsLoading ( false ) ; setPasswordWrong ( true ) ; } ) ; } ; return createPortal ( < ModalDialog closeable = { false } close = { ( ) => onClose ( false ) } > { isLoading && ( < div className = "py-5" > < h2 className = "font-bold text-lg pb-5" > { t ( "wallet.unlocking" ) } < /h2> < LoadingSpinner / > < /div>)} { ! isLoading && ( < > < h2 className = "font-bold text-lg mt-5" > { t ( "wallet.unlock_title" ) } < /h2> < div > < h3 className = "p-2" > { t ( "wallet.unlock_subtitle" ) } < /h3> < form onSubmit = { handleSubmit ( unlockHandler ) } > < InputField { ... register ( "passwordInput" , { required : t ( "forms.validation.unlock.required" ) as string , } ) } autoFocus errorMessage = { errors . passwordInput } label = { t ( "forms.validation.unlock.pass_c" ) } placeholder = { t ( "forms.validation.unlock.pass_c" ) } type = "password" / > < button type = "submit" className = "bd-button p-3 my-5" disabled = { ! isValid } > { t ( "wallet.unlock" ) } < /button> < /form> < /div> { passwordWrong && ( < p className = "my-5 text-red-500" > { t ( "login.invalid_pass" ) } < /p>)} < />)} < /ModalDialog>, MODAL_ROOT); } ; export default UnlockModal ;