Jacky Chan
7 years ago
committed by
Chi Kei Chan
parent
1a9b217558
commit
449bce5eea
@ -0,0 +1,185 @@ |
||||
import React, {Component, PropTypes} from 'react' |
||||
import classnames from 'classnames' |
||||
import {importNewAccount} from '../../../../ui/app/actions' |
||||
import {connect} from 'react-redux'; |
||||
|
||||
const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => ( |
||||
<div className="import-account__input-wrapper"> |
||||
<div className="import-account__input-label">{label}</div> |
||||
<input |
||||
type={type} |
||||
placeholder={placeholder} |
||||
className={classnames('first-time-flow__input import-account__input', { |
||||
'first-time-flow__input--error': errorMessage |
||||
})} |
||||
onChange={onChange} |
||||
/> |
||||
<div className="import-account__input-error-message">{errorMessage}</div> |
||||
</div> |
||||
) |
||||
|
||||
class ImportAccountScreen extends Component { |
||||
static OPTIONS = { |
||||
PRIVATE_KEY: 'private_key', |
||||
JSON_FILE: 'json_file', |
||||
}; |
||||
|
||||
static propTypes = { |
||||
warning: PropTypes.string, |
||||
back: PropTypes.func.isRequired, |
||||
next: PropTypes.func.isRequired, |
||||
importNewAccount: PropTypes.func.isRequired, |
||||
}; |
||||
|
||||
state = { |
||||
selectedOption: ImportAccountScreen.OPTIONS.PRIVATE_KEY, |
||||
privateKey: '', |
||||
jsonFile: {}, |
||||
} |
||||
|
||||
isValid() { |
||||
const { OPTIONS } = ImportAccountScreen; |
||||
const { privateKey, jsonFile, password } = this.state; |
||||
|
||||
switch (this.state.selectedOption) { |
||||
case OPTIONS.JSON_FILE: |
||||
return Boolean(jsonFile && password) |
||||
case OPTIONS.PRIVATE_KEY: |
||||
default: |
||||
return Boolean(privateKey) |
||||
} |
||||
} |
||||
|
||||
onClick = () => { |
||||
const { OPTIONS } = ImportAccountScreen; |
||||
const { importNewAccount, next } = this.props; |
||||
const { privateKey, jsonFile, password } = this.state; |
||||
|
||||
switch (this.state.selectedOption) { |
||||
case OPTIONS.JSON_FILE: |
||||
return importNewAccount('JSON File', [ jsonFile, password ]) |
||||
.then(next) |
||||
case OPTIONS.PRIVATE_KEY: |
||||
default: |
||||
return importNewAccount('Private Key', [ privateKey ]) |
||||
.then(next) |
||||
} |
||||
} |
||||
|
||||
renderPrivateKey() { |
||||
return Input({ |
||||
label: 'Add Private Key String', |
||||
placeholder: 'Enter private key', |
||||
onChange: e => this.setState({ privateKey: e.target.value }), |
||||
errorMessage: this.props.warning && 'Something went wrong. Please make sure your private key is correct.' |
||||
}) |
||||
} |
||||
|
||||
renderJsonFile() { |
||||
const { jsonFile: { name } } = this.state; |
||||
const { warning } = this.props; |
||||
|
||||
return ( |
||||
<div className=""> |
||||
<div className="import-account__input-wrapper"> |
||||
<div className="import-account__input-label">Upload File</div> |
||||
<div className="import-account__file-picker-wrapper"> |
||||
<input |
||||
type="file" |
||||
id="file" |
||||
className="import-account__file-input" |
||||
onChange={e => this.setState({ jsonFile: e.target.files[0] })} |
||||
/> |
||||
<label |
||||
htmlFor="file" |
||||
className={classnames('import-account__file-input-label', { |
||||
'import-account__file-input-label--error': warning |
||||
})} |
||||
> |
||||
Choose File |
||||
</label> |
||||
<div className="import-account__file-name">{name}</div> |
||||
</div> |
||||
<div className="import-account__input-error-message"> |
||||
{warning && 'Something went wrong. Please make sure your JSON file is properly formatted.'} |
||||
</div> |
||||
</div> |
||||
{Input({ |
||||
label: 'Enter Password', |
||||
placeholder: 'Enter Password', |
||||
type: 'password', |
||||
onChange: e => this.setState({ password: e.target.value }), |
||||
errorMessage: warning && 'Please make sure your password is correct.' |
||||
})} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
renderContent() { |
||||
const { OPTIONS } = ImportAccountScreen; |
||||
|
||||
switch (this.state.selectedOption) { |
||||
case OPTIONS.JSON_FILE: |
||||
return this.renderJsonFile() |
||||
case OPTIONS.PRIVATE_KEY: |
||||
default: |
||||
return this.renderPrivateKey() |
||||
} |
||||
} |
||||
|
||||
render() { |
||||
const { OPTIONS } = ImportAccountScreen; |
||||
const { selectedOption } = this.state; |
||||
|
||||
return ( |
||||
<div className="import-account"> |
||||
<a |
||||
className="import-account__back-button" |
||||
onClick={e => { |
||||
e.preventDefault() |
||||
this.props.back() |
||||
}} |
||||
href="#" |
||||
> |
||||
{`< Back`} |
||||
</a> |
||||
<div className="import-account__title"> |
||||
Import an Account |
||||
</div> |
||||
<div className="import-account__selector-label"> |
||||
How would you like to import your account? |
||||
</div> |
||||
<select |
||||
className="import-account__dropdown" |
||||
value={selectedOption} |
||||
onChange={e => this.setState({ selectedOption: e.target.value })} |
||||
> |
||||
<option value={OPTIONS.PRIVATE_KEY}>Private Key</option> |
||||
<option value={OPTIONS.JSON_FILE}>JSON File</option> |
||||
</select> |
||||
{this.renderContent()} |
||||
<button |
||||
className="first-time-flow__button" |
||||
disabled={!this.isValid()} |
||||
onClick={this.onClick} |
||||
> |
||||
Import |
||||
</button> |
||||
<a |
||||
href="https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file" |
||||
className="first-time-flow__link import-account__faq-link" |
||||
target="_blank" |
||||
> |
||||
File import not working? |
||||
</a> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
export default connect( |
||||
({ appState: { isLoading, warning } }) => ({ isLoading, warning }), |
||||
dispatch => ({ |
||||
importNewAccount: (strategy, args) => dispatch(importNewAccount(strategy, args)) |
||||
}) |
||||
)(ImportAccountScreen) |
||||
Loading…
Reference in new issue