import React , { FunctionComponent , useEffect , useState } from "react" ; import { HeaderLayout } from "../../../layouts" ; import { AddressInput , Input , MemoInput } from "../../../components/form" ; import { useStore } from "../../../stores" ; import { Button } from "reactstrap" ; import { FormattedMessage , useIntl } from "react-intl" ; import { observer } from "mobx-react-lite" ; import { AddressBookConfig , MemoConfig , RecipientConfig , } from "@keplr-wallet/hooks" ; param closeModal param addAddressBook param chainInfo param index param addressBookKVStore constructor export const AddAddressModal = observer ( ( { closeModal , recipientConfig , memoConfig , addressBookConfig , index , chainId , } ) => { const intl = useIntl ( ) ; const { chainStore , analyticsStore } = useStore ( ) ; const [ name , setName ] = useState ( "" ) ; useEffect ( ( ) => { if ( index >= 0 ) { const data = addressBookConfig . addressBookDatas [ index ] ; setName ( data . name ) ; recipientConfig . setRawRecipient ( data . address ) ; memoConfig . setMemo ( data . memo ) ; } } , [ addressBookConfig . addressBookDatas , index , memoConfig , recipientConfig , ] ) ; return ( < HeaderLayout showChainName = { false } canChangeChainInfo = { false } alternativeTitle = { index >= 0 ? intl . formatMessage ( { id : "setting.address-book.edit-address.title" , } ) : intl . formatMessage ( { id : "setting.address-book.add-address.title" , } ) } onBackButton = { ( ) => { recipientConfig . setRawRecipient ( "" ) ; memoConfig . setMemo ( "" ) ; closeModal ( ) ; } } > < form style = { { display : "flex" , flexDirection : "column" , height : "100%" } } > < Input type = "text" label = { intl . formatMessage ( { id : "setting.address-book.name" } ) } autoComplete = "off" value = { name } onChange = { ( e ) => { setName ( e . target . value ) ; } } /> < AddressInput recipientConfig = { recipientConfig } label = { intl . formatMessage ( { id : "setting.address-book.address" } ) } disableAddressBook = { true } / > < MemoInput memoConfig = { memoConfig } label = { intl . formatMessage ( { id : "setting.address-book.memo" } ) } / > < div style = { { flex : 1 } } /> < Button type = "submit" color = "primary" disabled = { ! name || recipientConfig . getError ( ) != null || memoConfig . getError ( ) != null } onClick = { async ( e ) => { e . preventDefault ( ) ; e . stopPropagation ( ) ; if ( ! recipientConfig . recipient ) { throw new Error ( "Invalid address" ) ; } if ( index < 0 ) { await addressBookConfig . addAddressBook ( { name , address : recipientConfig . recipient , memo : memoConfig . memo , } ) ; analyticsStore . logEvent ( "Add address finished" , { chainId , chainName : chainStore . getChain ( chainId ) . chainName , } ) ; } else { await addressBookConfig . editAddressBookAt ( index , { name , address : recipientConfig . recipient , memo : memoConfig . memo , } ) ; } recipientConfig . setRawRecipient ( "" ) ; memoConfig . setMemo ( "" ) ; closeModal ( ) ; } } > < FormattedMessage id = { "setting.address-book.button.save" } /> < /Button> < /form> < /HeaderLayout>); } ) ;