1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/app/pages/create-account/import-account/json.js
Erik Marks 76a2a9bb8b
@metamask/eslint config@5.0.0 (#10358)
* @metamask/eslint-config@5.0.0
* Update eslintrc and prettierrc
* yarn lint:fix
2021-02-04 10:15:23 -08:00

188 lines
5.1 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { compose } from 'redux';
import { connect } from 'react-redux';
import FileInput from 'react-simple-file-input';
import * as actions from '../../../store/actions';
import { getMetaMaskAccounts } from '../../../selectors';
import Button from '../../../components/ui/button';
import { getMostRecentOverviewPage } from '../../../ducks/history/history';
const HELP_LINK =
'https://metamask.zendesk.com/hc/en-us/articles/360015489331-Importing-an-Account';
class JsonImportSubview extends Component {
state = {
fileContents: '',
isEmpty: true,
};
inputRef = React.createRef();
render() {
const { error, history, mostRecentOverviewPage } = this.props;
const enabled = !this.state.isEmpty && this.state.fileContents !== '';
return (
<div className="new-account-import-form__json">
<p>{this.context.t('usedByClients')}</p>
<a
className="warning"
href={HELP_LINK}
target="_blank"
rel="noopener noreferrer"
>
{this.context.t('fileImportFail')}
</a>
<FileInput
readAs="text"
onLoad={this.onLoad.bind(this)}
style={{
padding: '20px 0px 12px 15%',
fontSize: '15px',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
/>
<input
className="new-account-import-form__input-password"
type="password"
placeholder={this.context.t('enterPassword')}
id="json-password-box"
onKeyPress={this.createKeyringOnEnter.bind(this)}
onChange={() => this.checkInputEmpty()}
ref={this.inputRef}
/>
<div className="new-account-create-form__buttons">
<Button
type="default"
large
className="new-account-create-form__button"
onClick={() => history.push(mostRecentOverviewPage)}
>
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
large
className="new-account-create-form__button"
onClick={() => this.createNewKeychain()}
disabled={!enabled}
>
{this.context.t('import')}
</Button>
</div>
{error ? <span className="error">{error}</span> : null}
</div>
);
}
onLoad(event) {
this.setState({
fileContents: event.target.result,
});
}
createKeyringOnEnter(event) {
if (event.key === 'Enter') {
event.preventDefault();
this.createNewKeychain();
}
}
createNewKeychain() {
const {
firstAddress,
displayWarning,
history,
importNewJsonAccount,
mostRecentOverviewPage,
setSelectedAddress,
} = this.props;
const { fileContents } = this.state;
if (!fileContents) {
const message = this.context.t('needImportFile');
displayWarning(message);
return;
}
const password = this.inputRef.current.value;
importNewJsonAccount([fileContents, password])
.then(({ selectedAddress }) => {
if (selectedAddress) {
history.push(mostRecentOverviewPage);
this.context.metricsEvent({
eventOpts: {
category: 'Accounts',
action: 'Import Account',
name: 'Imported Account with JSON',
},
});
displayWarning(null);
} else {
displayWarning('Error importing account.');
this.context.metricsEvent({
eventOpts: {
category: 'Accounts',
action: 'Import Account',
name: 'Error importing JSON',
},
});
setSelectedAddress(firstAddress);
}
})
.catch((err) => err && displayWarning(err.message || err));
}
checkInputEmpty() {
const password = this.inputRef.current.value;
let isEmpty = true;
if (password !== '') {
isEmpty = false;
}
this.setState({ isEmpty });
}
}
JsonImportSubview.propTypes = {
error: PropTypes.string,
displayWarning: PropTypes.func,
firstAddress: PropTypes.string,
importNewJsonAccount: PropTypes.func,
history: PropTypes.object,
setSelectedAddress: PropTypes.func,
mostRecentOverviewPage: PropTypes.string.isRequired,
};
const mapStateToProps = (state) => {
return {
error: state.appState.warning,
firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
mostRecentOverviewPage: getMostRecentOverviewPage(state),
};
};
const mapDispatchToProps = (dispatch) => {
return {
displayWarning: (warning) => dispatch(actions.displayWarning(warning)),
importNewJsonAccount: (options) =>
dispatch(actions.importNewAccount('JSON File', options)),
setSelectedAddress: (address) =>
dispatch(actions.setSelectedAddress(address)),
};
};
JsonImportSubview.contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
};
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps),
)(JsonImportSubview);