import { Input } from '@emeraldplatform/ui' ; import * as React from 'react' ; import FormLabel from '../FormLabel' ; import { IState } from "@emeraldwallet/store" ; import { BigAmount , Units } from "@emeraldpay/bigamount" ; import { FormatterBuilder } from "@emeraldpay/bigamount" ; import { makeStyles } from "@material-ui/core/styles" ; import { Button , createStyles , Theme } from "@material-ui/core" ; import { connect } from "react-redux" ; import { Dispatch } from "react" ; import { init } from "@emeraldwallet/store/lib/txhistory/actions" ; const useStyles = makeStyles < Theme > ( ( theme ) => createStyles ( { input : { width : '200px' , marginRight : '10px' } , button : { height : '30px' , minWidth : '35px' , fontSize : '11px' } } ) ) ; function amountOrDefault ( amount ) { if ( typeof amount != "undefined" && amount != null ) { return new FormatterBuilder ( ) . useTopUnit ( ) . number ( 6 , true ) . build ( ) . format ( amount ) ; } return "0" ; } /**
 *
 */ const Component = ( ( { onMaxClicked , onChangeAmount , onClear , units , initialAmount } ) => { const styles = useStyles ( ) ; const [ originalAmount , setOriginalAmount ] = React . useState ( initialAmount ) ; const [ amount , setAmount ] = React . useState ( amountOrDefault ( initialAmount ) ) ; const [ errorText , setErrorText ] = React . useState ( "" ) ; React . useEffect ( ( ) => { if ( typeof originalAmount == "undefined" || ( typeof initialAmount != "undefined" && initialAmount . isPositive ( ) && ! originalAmount . equals ( initialAmount ) ) ) { setOriginalAmount ( initialAmount ) ; setAmount ( amountOrDefault ( initialAmount ) ) ; } } ) ; const handleChangeAmount = ( event ) => { let amountStr = event . target . value || '' ; setAmount ( amountStr ) ; amountStr = amountStr . trim ( ) ; if ( amountStr === '' ) { setErrorText ( "Required" ) ; onClear ( ) ; return ; } let valid = amountStr . match ( /^\d*(\.\d+)?$/ ) ; if ( ! valid ) { setErrorText ( "Invalid number" ) ; onClear ( ) ; return ; } try { const parsed = parseFloat ( amountStr ) ; if ( parsed < 0 ) { setErrorText ( 'Value must be positive number' ) ; onClear ( ) ; return ; } const changedTo = new BigAmount ( 1 , units ) . multiply ( units . top . multiplier ) . multiply ( parsed ) ; setErrorText ( "" ) ; onChangeAmount ( changedTo ) ; } catch ( e ) { console . error ( "failed to parse amount" , e ) ; setErrorText ( 'Invalid value' ) ; onClear ( ) ; } } ; return < React . Fragment > < FormLabel > Amount < /FormLabel> < div className = { styles . input } > < Input value = { amount } onChange = { handleChangeAmount } errorText = { errorText } / > < /div> < Button className = { styles . button } color = { "primary" } onClick = { onMaxClicked } > MAX < /Button> < /React.Fragment>; } ) ; interface Props { } interface Actions { onClear : ( ) => void ; } interface OwnProps { units : Units ; initialAmount ? : BigAmount | undefined ; onChangeAmount : ( amount : BigAmount ) => void ; onMaxClicked ? : ( ) => void ; } export default connect ( ( state , ownProps ) : Props => { return { } ; } , ( dispatch , ownProps ) : Actions => { return { onClear : ( ) => { ownProps . onChangeAmount ( new BigAmount ( 0 , ownProps . units ) ) ; } } ; } ) ( ( Component ) ) ;