import React , { useState } from "react" ; import { useSelector } from "react-redux" ; import useFirma from "../../utils/wallet" ; import { useApolloClient } from "@apollo/client" ; import { convertNumber } from "../../utils/common" ; import { rootState } from "../../redux/reducers" ; import { Modal } from "../../components/modal" ; import { modalActions } from "../../redux/action" ; import { delegateModalWidth , ModalContainer , ModalTitle , ModalContent , ModalLabel , ModalInput , NextButton , InputBoxDefault , } from "./styles" ; const DelegateModal = ( ) => { const delegateModalState = useSelector ( ( state ) => state . modal . delegate ) ; const modalData = useSelector ( ( state ) => state . modal . data ) ; const { balance } = useSelector ( ( state ) => state . user ) ; const { delegate } = useFirma ( ) ; const { reFetchObservableQueries } = useApolloClient ( ) ; const [ amount , setAmount ] = useState ( "" ) ; const [ isActiveButton , setActiveButton ] = useState ( false ) ; const closeModal = ( ) => { resetModal ( ) ; modalActions . handleModalDelegate ( false ) ; } ; const resetModal = ( ) => { setAmount ( "" ) ; } ; const onChangeAmount = ( e ) => { const { value } = e . target ; const amount = value . replace ( /[^0-9.]/g , "" ) ; setAmount ( amount ) ; setActiveButton ( amount > 0 && amount <= convertNumber ( balance ) ) ; } ; const delegateTx = ( resolveTx , rejectTx ) => { delegate ( modalData . data . targetValidator , convertNumber ( amount ) ) . then ( ( ) => { reFetchObservableQueries ( ) ; resolveTx ( ) ; } ) . catch ( ( ) => { rejectTx ( ) ; } ) ; } ; const nextStep = ( ) => { modalActions . handleModalData ( { action : "Delegate" , data : { amount } , prevModalAction : modalActions . handleModalDelegate , txAction : delegateTx , } ) ; closeModal ( ) ; modalActions . handleModalConfirmTx ( true ) ; } ; return ( < Modal visible = { delegateModalState } closable = { true } onClose = { closeModal } width = { delegateModalWidth } > < ModalContainer > < ModalTitle > DELEGATE < /ModalTitle> < ModalContent > < ModalLabel > Available < /ModalLabel> < ModalInput > { balance } FCT < /ModalInput> < ModalLabel > Amount < /ModalLabel> < ModalInput > < InputBoxDefault type = "text" placeholder = "0" value = { amount } onChange = { onChangeAmount } / > < /ModalInput> < NextButton onClick = { ( ) => { if ( isActiveButton ) nextStep ( ) ; } } active = { isActiveButton } > Next < /NextButton> < /ModalContent> < /ModalContainer> < /Modal>); } ; export default React . memo ( DelegateModal ) ;