@ -1,25 +1,85 @@
import React from 'react' ;
import React from 'react' ;
import { translate } from '../../translate/translate' ;
import { translate } from '../../translate/translate' ;
import { sendNativeTx } from '../../actions/actionCreators' ;
import Store from '../../store' ;
class WalletsNativeSend extends React . Component {
class WalletsNativeSend extends React . Component {
constructor ( props ) {
constructor ( props ) {
super ( props ) ;
super ( props ) ;
this . state = {
this . state = {
form : null ,
addressType : null ,
to : null ,
sendFrom : null ,
sendFromAmount : 0 ,
sendTo : null ,
amount : 0 ,
amount : 0 ,
fee : 0.0001 ,
fee : 0.0001 ,
addressSelectorOpen : false ,
} ;
} ;
this . updateInput = this . updateInput . bind ( this ) ;
this . updateInput = this . updateInput . bind ( this ) ;
this . handleSubmit = this . handleSubmit . bind ( this ) ;
this . handleSubmit = this . handleSubmit . bind ( this ) ;
this . openDropMenu = this . openDropMenu . bind ( this ) ;
}
renderAddressByType ( type ) {
if ( this . props . ActiveCoin . addresses [ type ] && this . props . ActiveCoin . addresses [ type ] . length ) {
return this . props . ActiveCoin . addresses [ type ] . map ( ( address ) =>
< li data - original - index = "2" key = { address . address } className = { address . amount <= 0 ? 'hide' : '' } >
< a tabIndex = "0" data - tokens = "null" onClick = { ( ) => this . updateAddressSelection ( address . address , type , address . amount ) } > < i className = { type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' } > < / i > < s p a n c l a s s N a m e = " t e x t " > [ { a d d r e s s . a m o u n t } { t h i s . p r o p s . A c t i v e C o i n . c o i n } ] { a d d r e s s . a d d r e s s } < / s p a n > < s p a n c l a s s N a m e = " g l y p h i c o n g l y p h i c o n - o k c h e c k - m a r k " > < / s p a n > < / a >
< / l i >
) ;
} else {
return null ;
}
}
renderSelectorCurrentLabel ( ) {
if ( this . state . sendFrom ) {
return (
< span >
< i className = { this . state . addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' } > < / i > < s p a n c l a s s N a m e = " t e x t " > [ { t h i s . s t a t e . s e n d F r o m A m o u n t } { t h i s . p r o p s . A c t i v e C o i n . c o i n } ] { t h i s . s t a t e . s e n d F r o m } < / s p a n >
< / s p a n >
) ;
} else {
return (
< span > - Select Transparent or Private Address - < / s p a n >
) ;
}
}
}
renderAddressList ( ) {
renderAddressList ( ) {
return this . props . ActiveCoin . addresses . map ( ( address ) =>
return (
< option key = { address } value = { address } > { address } < / o p t i o n >
< div className = { 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + ( this . state . addressSelectorOpen ? 'open' : '' ) } >
< button type = "button" className = "btn dropdown-toggle btn-info" data - toggle = "dropdown" data - id = "kmd_wallet_send_from" title = "- Select Transparent or Private Address -" aria - expanded = "true" onClick = { this . openDropMenu } >
< span className = "filter-option pull-left" > { this . renderSelectorCurrentLabel ( ) } < / s p a n > & n b s p ; < s p a n c l a s s N a m e = " b s - c a r e t " > < s p a n c l a s s N a m e = " c a r e t " > < / s p a n > < / s p a n >
< / b u t t o n >
< div className = "dropdown-menu open" >
< ul className = "dropdown-menu inner" role = "menu" >
< li data - original - index = "1" className = "selected" >
< a tabIndex = "0" data - tokens = "null" > < span className = "text" > - Select Transparent or Private Address - < / s p a n > < s p a n c l a s s N a m e = " g l y p h i c o n g l y p h i c o n - o k c h e c k - m a r k " > < / s p a n > < / a >
< / l i >
{ this . renderAddressByType ( 'public' ) }
{ this . renderAddressByType ( 'private' ) }
< / u l >
< / d i v >
< / d i v >
) ;
) ;
}
}
openDropMenu ( ) {
this . setState ( Object . assign ( { } , this . state , {
addressSelectorOpen : ! this . state . addressSelectorOpen ,
} ) ) ;
}
updateAddressSelection ( address , type , amount ) {
this . setState ( Object . assign ( { } , this . state , {
sendFrom : address ,
addressType : type ,
sendFromAmount : amount ,
addressSelectorOpen : ! this . state . addressSelectorOpen ,
} ) ) ;
}
updateInput ( e ) {
updateInput ( e ) {
this . setState ( {
this . setState ( {
[ e . target . name ] : e . target . value ,
[ e . target . name ] : e . target . value ,
@ -28,6 +88,7 @@ class WalletsNativeSend extends React.Component {
handleSubmit ( ) {
handleSubmit ( ) {
console . log ( this . state ) ;
console . log ( this . state ) ;
Store . dispatch ( sendNativeTx ( this . props . ActiveCoin . coin , this . state ) ) ;
}
}
render ( ) {
render ( ) {
@ -46,13 +107,11 @@ class WalletsNativeSend extends React.Component {
< div className = "row" >
< div className = "row" >
< div className = "col-xlg-12 form-group form-material" >
< div className = "col-xlg-12 form-group form-material" >
< label className = "control-label" data - extcoin = "COIN" htmlFor = "kmd_wallet_send_from" > { translate ( 'INDEX.SEND_FROM' ) } < / l a b e l >
< label className = "control-label" data - extcoin = "COIN" htmlFor = "kmd_wallet_send_from" > { translate ( 'INDEX.SEND_FROM' ) } < / l a b e l >
< select className = "form-control form-material showkmdwalletaddrs show-tick" name = "from" onChange = { this . updateInput } data - extcoin = "COIN" id = "kmd_wallet_send_from" title = "Select Transparent or Private Address" data - size = "5" >
{ this . renderAddressList ( ) }
{ this . renderAddressList ( ) }
< / s e l e c t >
< / d i v >
< / d i v >
< div className = "col-xlg-12 form-group form-material" >
< div className = "col-xlg-12 form-group form-material" >
< label className = "control-label" data - extcoin = "COIN" htmlFor = "kmd_wallet_sendto" > { translate ( 'INDEX.SEND_TO' ) } < / l a b e l >
< label className = "control-label" data - extcoin = "COIN" htmlFor = "kmd_wallet_sendto" > { translate ( 'INDEX.SEND_TO' ) } < / l a b e l >
< input type = "text" className = "form-control" data - extcoin = "COIN" name = "t o" onChange = { this . updateInput } id = "kmd_wallet_sendto" placeholder = "Enter Transparent or Private address" autoComplete = "off" required / >
< input type = "text" className = "form-control" data - extcoin = "COIN" name = "sendT o" onChange = { this . updateInput } id = "kmd_wallet_sendto" placeholder = "Enter Transparent or Private address" autoComplete = "off" required / >
< / d i v >
< / d i v >
< div className = "col-lg-6 form-group form-material" >
< div className = "col-lg-6 form-group form-material" >
< label className = "control-label" htmlFor = "kmd_wallet_amount" data - extcoin = "COIN" id = "kmd_wallet_amount_label" >
< label className = "control-label" htmlFor = "kmd_wallet_amount" data - extcoin = "COIN" id = "kmd_wallet_amount_label" >
@ -66,7 +125,7 @@ class WalletsNativeSend extends React.Component {
< / d i v >
< / d i v >
< div className = "col-lg-12" >
< div className = "col-lg-12" >
< span data - extcoin = "KMD" >
< span data - extcoin = "KMD" >
< b > { translate ( 'INDEX.TOTAL' ) } : < / b > { t h i s . s t a t e . a m o u n t } + { t h i s . s t a t e . f e e } / k b { t h i s . p r o p s . A c t i v e C o i n . c o i n }
< b > { translate ( 'INDEX.TOTAL' ) } : < / b > { t h i s . s t a t e . a m o u n t } - { t h i s . s t a t e . f e e } / k b = { N u m b e r ( t h i s . s t a t e . a m o u n t ) - N u m b e r ( t h i s . s t a t e . f e e ) } { t h i s . p r o p s . A c t i v e C o i n . c o i n }
< / s p a n >
< / s p a n >
< / d i v >
< / d i v >
< div className = "col-lg-12" >
< div className = "col-lg-12" >