@ -30,10 +30,14 @@ class WalletsNativeSend extends React.Component {
}
renderAddressByType ( type ) {
if ( this . props . ActiveCoin . addresses && this . props . ActiveCoin . addresses [ type ] && this . props . ActiveCoin . addresses [ type ] . length ) {
if ( this . props . ActiveCoin . addresses &&
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" 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 >
< li data - original - index = "2" key = { address . address } className = { address . amount <= 0 ? 'hide' : '' } >
< a
tabIndex = "0"
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 {
@ -45,29 +49,37 @@ class WalletsNativeSend extends React.Component {
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 >
< 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 >
< span > - { translate ( 'SEND.SELECT_T_OR_Z_ADDR' ) } - < / s p a n >
) ;
}
}
renderAddressList ( ) {
return (
< 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 >
< 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"
title = "- { translate('SEND.SELECT_T_OR_Z_ADDR') } -"
aria - expanded = "true"
onClick = { this . openDropMenu } >
< span className = "filter-option pull-left" > { this . renderSelectorCurrentLabel ( ) } < / s p a n >
< span className = "bs-caret" >
< span className = "caret" > < / 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 >
< li className = "selected" >
< a tabIndex = "0" > < span className = "text" > - { translate ( 'SEND.SELECT_T_OR_Z_ADDR' ) } - < / 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' ) }
{ this . renderAddressByType ( 'public' ) }
{ this . renderAddressByType ( 'private' ) }
< / u l >
< / d i v >
< / d i v >
@ -78,55 +90,55 @@ class WalletsNativeSend extends React.Component {
if ( opid . status === 'queued' ) {
return (
< span className = "label label-warning" >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . Q U E U E D ' ) } < / s p a n >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . Q U E U E D ' ) } < / s p a n >
< / s p a n >
) ;
}
if ( opid . status === 'executing' ) {
return (
< span className = "label label-info" >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . E X E C U T I N G ' ) } < / s p a n >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . E X E C U T I N G ' ) } < / s p a n >
< / s p a n >
) ;
}
if ( opid . status === 'failed' ) {
return (
< span className = "label label-danger" >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . F A I L E D ' ) } < / s p a n >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . F A I L E D ' ) } < / s p a n >
< / s p a n >
) ;
}
if ( opid . status === 'success' ) {
return (
< span className = "label label-success" >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . S U C C E S S ' ) } < / s p a n >
< i className = "icon fa-eye" > < / i > < s p a n > { t r a n s l a t e ( ' K M D _ N A T I V E . S U C C E S S ' ) } < / s p a n >
< / s p a n >
) ;
}
}
renderOPIDResult ( opid ) {
var isWaitingStatus = true ;
let isWaitingStatus = true ;
if ( opid . status === 'queued' ) {
isWaitingStatus = false ;
return (
< i > Awaiting in queue ... < / i >
< i > { translate ( 'SEND.AWAITING' ) } ... < / i >
) ;
}
if ( opid . status === 'executing' ) {
isWaitingStatus = false ;
return (
< i > Processing ... < / i >
< i > { translate ( 'SEND.PROCESSING' ) } ... < / i >
) ;
}
if ( opid . status === 'failed' ) {
isWaitingStatus = false ;
return (
< span >
< b > Error Code : < / b > < s p a n > { o p i d . e r r o r . c o d e } < / s p a n >
< strong > { translate ( 'SEND.ERROR_CODE' ) } : < / s t r o n g > < s p a n > { o p i d . e r r o r . c o d e } < / s p a n >
< br / >
< b > { translate ( 'KMD_NATIVE.MESSAGE' ) } : < / b > < s p a n > { o p i d . e r r o r . m e s s a g e } < / s p a n >
< strong > { translate ( 'KMD_NATIVE.MESSAGE' ) } : < / s t r o n g > < s p a n > { o p i d . e r r o r . m e s s a g e } < / s p a n >
< / s p a n >
) ;
}
@ -134,27 +146,28 @@ class WalletsNativeSend extends React.Component {
isWaitingStatus = false ;
return (
< span >
< b > txid : < / b > < s p a n > { o p i d . r e s u l t . t x i d } < / s p a n >
< strong > txid : < / s t r o n g > < s p a n > { o p i d . r e s u l t . t x i d } < / s p a n >
< br / >
< b > { translate ( 'KMD_NATIVE.EXECUTION_SECONDS' ) } : < / b > < s p a n > { o p i d . e x e c u t i o n _ s e c s } < / s p a n >
< strong > { translate ( 'KMD_NATIVE.EXECUTION_SECONDS' ) } : < / s t r o n g > < s p a n > { o p i d . e x e c u t i o n _ s e c s } < / s p a n >
< / s p a n >
) ;
}
if ( isWaitingStatus ) {
return (
< span > Waiting ... < / s p a n >
< span > { translate ( 'SEND.WAITING' ) } ... < / s p a n >
) ;
}
}
renderOPIDList ( ) {
if ( this . props . ActiveCoin . opids && this . props . ActiveCoin . opids . length ) {
if ( this . props . ActiveCoin . opids &&
this . props . ActiveCoin . opids . length ) {
return this . props . ActiveCoin . opids . map ( ( opid ) =>
< tr key = { opid . id } >
< td > { this . renderOPIDLabel ( opid ) } < / t d >
< td > { opid . id } < / t d >
< td > { secondsToString ( opid . creation_time ) } < / t d >
< td > { this . renderOPIDResult ( opid ) } < / t d >
< tr key = { opid . id } >
< td > { this . renderOPIDLabel ( opid ) } < / t d >
< td > { opid . id } < / t d >
< td > { secondsToString ( opid . creation_time ) } < / t d >
< td > { this . renderOPIDResult ( opid ) } < / t d >
< / t r >
) ;
} else {
@ -209,7 +222,7 @@ class WalletsNativeSend extends React.Component {
}
if ( this . state . sendTo === '' ) {
Store . dispatch ( triggerToaster ( true , 'Couldn\'t find any ' + this . props . ActiveCoin . coin + ' addresses' , 'OpenAlias' , 'error' ) ) ;
Store . dispatch ( triggerToaster ( true , 'Couldn\'t find any ' + this . props . ActiveCoin . coin + ' addresses' , 'OpenAlias' , 'error' ) ) ;
}
} else {
Store . dispatch ( triggerToaster ( true , 'Couldn\'t find any addresses' , 'OpenAlias' , 'error' ) ) ;
@ -222,11 +235,25 @@ class WalletsNativeSend extends React.Component {
return (
< div className = "row" >
< div className = "col-lg-6 form-group form-material" >
< label className = "control-label" data - extcoin = "COIN" htmlFor = "kmd_wallet_sendto" > { translate ( 'INDEX.SEND_TO' ) } via Openalias address < / l a b e l >
< input type = "text" className = "form-control" data - extcoin = "COIN" name = "sendToOA" onChange = { this . updateInput } id = "kmd_wallet_sendto" placeholder = "Enter an alias as address@site.com" autoComplete = "off" required / >
< label
className = "control-label"
htmlFor = "kmd_wallet_sendto" > { translate ( 'INDEX.SEND_TO' ) } via Openalias address < / l a b e l >
< input
type = "text"
className = "form-control"
name = "sendToOA"
onChange = { this . updateInput }
id = "kmd_wallet_sendto"
placeholder = "Enter an alias as address@site.com"
autoComplete = "off"
required / >
< / d i v >
< div className = "col-lg-6 form-group form-material" >
< button type = "button" className = "btn btn-primary waves-effect waves-light" data - toggle = "modal" id = "kmd_wallet_send_coins_btn" onClick = { this . getOAdress } >
< button
type = "button"
className = "btn btn-primary waves-effect waves-light"
id = "kmd_wallet_send_coins_btn"
onClick = { this . getOAdress } >
Get address
< / b u t t o n >
< / d i v >
@ -238,48 +265,80 @@ class WalletsNativeSend extends React.Component {
}
render ( ) {
if ( this . props && this . props . ActiveCoin && this . props . ActiveCoin . nativeActiveSection === 'send' ) {
if ( this . props &&
this . props . ActiveCoin &&
this . props . ActiveCoin . nativeActiveSection === 'send' ) {
return (
< div data - extcoin = "COIN" id = "kmd_wallet_send" >
< div id = "kmd_wallet_send" >
< div className = "col-xlg-12 col-md-12 col-sm-12 col-xs-12" >
< div className = "panel" id = "projects" >
< div className = "panel-heading" >
< h3 data - extcoin = "COIN" className = "panel-title" >
{ translate ( 'INDEX.SEND' ) } < span data - extcoinname = "COIN" > < / s p a n >
{ translate ( 'INDEX.SEND' ) } { this . props . ActiveCoin . coin }
< / h 3 >
< / d i v >
< div className = "panel-body container-fluid" >
< form className = "extcoin-send-form" data - extcoin = "COIN" method = "post" role = "form" autoComplete = "off" >
< form className = "extcoin-send-form" method = "post" role = "form" autoComplete = "off" >
< div className = "row" >
< 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 >
{ this . renderAddressList ( ) }
< label
className = "control-label"
htmlFor = "kmd_wallet_send_from" > { translate ( 'INDEX.SEND_FROM' ) } < / l a b e l >
{ this . renderAddressList ( ) }
< / d i v >
< / d i v >
{ this . renderOASendUI ( ) }
{ this . renderOASendUI ( ) }
< div className = "row" >
< 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 >
< input type = "text" className = "form-control" data - extcoin = "COIN" name = "sendTo" onChange = { this . updateInput } value = { this . state . sendTo } id = "kmd_wallet_sendto" placeholder = "Enter Transparent or Private address" autoComplete = "off" required / >
< label className = "control-label" htmlFor = "kmd_wallet_sendto" > { translate ( 'INDEX.SEND_TO' ) } < / l a b e l >
< input
type = "text"
className = "form-control"
name = "sendTo"
onChange = { this . updateInput }
value = { this . state . sendTo }
id = "kmd_wallet_sendto"
placeholder = "{ translate('SEND.ENTER_T_OR_Z_ADDR') }"
autoComplete = "off"
required / >
< / d i v >
< 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" >
{ this . props . ActiveCoin . coin }
< label className = "control-label" htmlFor = "kmd_wallet_amount" id = "kmd_wallet_amount_label" >
{ this . props . ActiveCoin . coin }
< / l a b e l >
< input type = "text" className = "form-control" name = "amount" onChange = { this . updateInput } data - extcoin = "COIN" id = "kmd_wallet_amount" placeholder = "0.000" autoComplete = "off" / >
< input
type = "text"
className = "form-control"
name = "amount"
onChange = { this . updateInput }
id = "kmd_wallet_amount"
placeholder = "0.000"
autoComplete = "off" / >
< / d i v >
< div className = "col-lg-6 form-group form-material" >
< label className = "control-label" data - extcoin = "COIN" htmlFor = "kmd_wallet_fee" > { translate ( 'INDEX.FEE' ) } < / l a b e l >
< input type = "text" className = "form-control" name = "fee" onChange = { this . updateInput } data - extcoin = "COIN" id = "kmd_wallet_fee" placeholder = "0.000" value = { this . state . fee } autoComplete = "off" / >
< label className = "control-label" htmlFor = "kmd_wallet_fee" > { translate ( 'INDEX.FEE' ) } < / l a b e l >
< input
type = "text"
className = "form-control"
name = "fee"
onChange = { this . updateInput }
id = "kmd_wallet_fee"
placeholder = "0.000"
value = { this . state . fee }
autoComplete = "off" / >
< / d i v >
< div className = "col-lg-12" >
< 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 = { 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 }
< span >
< strong > { translate ( 'INDEX.TOTAL' ) } : < / s t r o n g > { 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 >
< / d i v >
< div className = "col-lg-12" >
< button type = "button" className = "btn btn-primary waves-effect waves-light pull-right" data - toggle = "modal" id = "kmd_wallet_send_coins_btn" onClick = { this . handleSubmit } >
{ translate ( 'INDEX.SEND' ) } { this . state . amount } { this . props . ActiveCoin . coin }
< button
type = "button"
className = "btn btn-primary waves-effect waves-light pull-right"
id = "kmd_wallet_send_coins_btn"
onClick = { this . handleSubmit } >
{ translate ( 'INDEX.SEND' ) } { this . state . amount } { this . props . ActiveCoin . coin }
< / b u t t o n >
< / d i v >
< / d i v >
@ -291,31 +350,34 @@ class WalletsNativeSend extends React.Component {
< div className = "col-xs-12" >
< div className = "row" >
< div className = "panel nav-tabs-horizontal" >
< div data - extcoin = "COIN" id = "kmd_wallet_opids_status_section" >
< div id = "kmd_wallet_opids_status_section" >
< div className = "col-xlg-12 col-lg-12 col-sm-12 col-xs-12" >
< div className = "panel" >
< header className = "panel-heading" >
< h3 className = "panel-title" > { translate ( 'INDEX.OPERATIONS_STATUSES' ) } < / h 3 >
< h3 className = "panel-title" > { translate ( 'INDEX.OPERATIONS_STATUSES' ) } < / h 3 >
< / h e a d e r >
< div className = "panel-body" >
< table className = "table table-hover dataTable table-striped" data - extcoin = "COIN" id = "kmd-opid-status-tbl" width = "100%" >
< table
className = "table table-hover dataTable table-striped"
id = "kmd-opid-status-tbl"
width = "100%" >
< thead >
< tr >
< th > { translate ( 'INDEX.STATUS' ) } < / t h >
< th > { translate ( 'INDEX.STATUS' ) } < / t h >
< th > ID < / t h >
< th > { translate ( 'INDEX.TIME' ) } < / t h >
< th > { translate ( 'INDEX.RESULT' ) } < / t h >
< th > { translate ( 'INDEX.TIME' ) } < / t h >
< th > { translate ( 'INDEX.RESULT' ) } < / t h >
< / t r >
< / t h e a d >
< tbody >
{ this . renderOPIDList ( ) }
{ this . renderOPIDList ( ) }
< / t b o d y >
< tfoot >
< tr >
< th > { translate ( 'INDEX.STATUS' ) } < / t h >
< th > { translate ( 'INDEX.STATUS' ) } < / t h >
< th > ID < / t h >
< th > { translate ( 'INDEX.TIME' ) } < / t h >
< th > { translate ( 'INDEX.RESULT' ) } < / t h >
< th > { translate ( 'INDEX.TIME' ) } < / t h >
< th > { translate ( 'INDEX.RESULT' ) } < / t h >
< / t r >
< / t f o o t >
< / t a b l e >
Petr Balashov
8 years ago