2019-01-16 07:48:28 -08:00
import React , { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import actions from '../../../../ui/app/actions'
2017-11-14 08:04:23 -08:00
import Select from 'react-select'
2019-01-16 07:48:28 -08:00
import { importTypes } from './enums'
import { nestedJsonObjToArray } from './helpers'
2017-11-14 08:04:23 -08:00
// Subviews
2019-01-17 12:50:32 -08:00
import JsonImportView from './json.js'
import PrivateKeyImportView from './private-key.js'
import ContractImportView from './contract.js'
2017-11-14 08:04:23 -08:00
2019-01-16 07:48:28 -08:00
const menuItems = nestedJsonObjToArray ( importTypes )
2017-11-14 08:04:23 -08:00
2019-01-16 07:48:28 -08:00
class AccountImportSubview extends Component {
2019-01-17 12:50:32 -08:00
constructor ( props ) {
super ( props )
this . state = {
description : '' ,
type : importTypes . PRIVATE _KEY ,
}
}
2019-01-16 07:48:28 -08:00
static propTypes = {
menuItems : PropTypes . object . Array ,
warning : PropTypes . node ,
goHome : PropTypes . func ,
displayWarning : PropTypes . func ,
showImportPage : PropTypes . func ,
2017-11-14 08:04:23 -08:00
}
2019-01-16 07:48:28 -08:00
render ( ) {
const props = this . props
const state = this . state || { }
const { menuItems } = props
const { type } = state
2017-11-14 08:04:23 -08:00
2019-01-16 07:48:28 -08:00
return (
< div style = { {
2018-08-07 06:23:56 -07:00
width : '100%' ,
2019-01-16 07:48:28 -08:00
} } >
< div className = "section-title" style = { {
height : '1px' ,
2018-08-07 06:23:56 -07:00
width : '100%' ,
2019-01-16 07:48:28 -08:00
} } / >
< div style = { {
width : '100%' ,
padding : '0 30px' ,
} } >
< div className = "flex-row flex-center" >
< div
className = "i fa fa-arrow-left fa-lg cursor-pointer"
onClick = { ( event ) => { props . goHome ( ) } }
style = { {
position : 'absolute' ,
left : '30px' ,
} }
/ >
< h2 className = "page-subtitle" style = { {
2018-08-08 03:33:56 -07:00
fontFamily : 'Nunito SemiBold' ,
2019-01-16 07:48:28 -08:00
} }
> Import Accounts < / h 2 >
< / d i v >
< div
className = "error"
style = { {
display : 'inline-block' ,
alignItems : 'center' ,
} } >
< span > Imported accounts will not be associated with your originally created Nifty Wallet account seedphrase . < / s p a n >
< / d i v >
< div style = { { padding : '10px 0' } } >
< h3 style = { { padding : '3px' } } > Select Type < / h 3 >
< Select { ... {
name : 'import-type-select' ,
clearable : false ,
value : type || menuItems [ 0 ] ,
options : menuItems . map ( ( type ) => {
return {
value : type ,
label : type ,
}
} ) ,
onChange : ( opt ) => {
props . showImportPage ( )
2019-01-17 12:50:32 -08:00
const type = opt . value
let description
switch ( type ) {
case importTypes . PRIVATE _KEY :
case importTypes . JSON _FILE :
description = ''
break
case importTypes . CONTRACT . DEFAULT :
description = ` Contract type will automatically retrieve its ABI, if it was verified in <a href='https://blockscout.com' target='_blank'>Blockscout</a> `
break
case importTypes . CONTRACT . PROXY :
description = ` Proxy contract type will automatically contain ABI of implementation, if proxy and implementation were both verified in <a href='https://blockscout.com' target='_blank'>Blockscout</a> `
break
default :
description = ''
break
}
this . setState ( { type , description } )
2019-01-16 07:48:28 -08:00
} ,
} } / >
2019-01-17 12:50:32 -08:00
< p className = "hw-connect__header__msg" dangerouslySetInnerHTML = { { _ _html : this . state . description } } / >
2019-01-16 07:48:28 -08:00
< / d i v >
{ this . renderImportView ( ) }
< / d i v >
< / d i v >
)
}
2018-08-07 06:23:56 -07:00
2019-01-16 07:48:28 -08:00
componentWillUnmount ( ) {
this . props . displayWarning ( '' )
}
renderImportView ( ) {
const { menuItems } = this . props
const state = this . state || { }
const { type } = state
const current = type || menuItems [ 0 ]
2017-11-14 08:04:23 -08:00
2019-01-16 07:48:28 -08:00
switch ( current ) {
case importTypes . PRIVATE _KEY :
return < PrivateKeyImportView / >
case importTypes . JSON _FILE :
return < JsonImportView / >
case importTypes . CONTRACT . DEFAULT :
2019-01-17 12:50:32 -08:00
return < ContractImportView type = { importTypes . CONTRACT . DEFAULT } / >
2019-01-16 07:48:28 -08:00
case importTypes . CONTRACT . PROXY :
2019-01-17 12:50:32 -08:00
return < ContractImportView type = { importTypes . CONTRACT . PROXY } / >
2019-01-16 07:48:28 -08:00
default :
return < JsonImportView / >
}
}
2017-11-14 08:04:23 -08:00
}
2019-01-16 07:48:28 -08:00
const mapStateToProps = ( state ) => {
return {
menuItems ,
}
2018-09-11 02:58:46 -07:00
}
2019-01-16 07:48:28 -08:00
const mapDispatchToProps = dispatch => {
return {
goHome : ( ) => dispatch ( actions . goHome ( ) ) ,
displayWarning : warning => dispatch ( actions . displayWarning ( warning ) ) ,
showImportPage : options => dispatch ( actions . showImportPage ( ) ) ,
2017-11-14 08:04:23 -08:00
}
}
2019-01-16 07:48:28 -08:00
module . exports = connect ( mapStateToProps , mapDispatchToProps ) ( AccountImportSubview )