mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Button from '../../../components/ui/button';
|
|
import MetaFoxLogo from '../../../components/ui/metafox-logo';
|
|
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
|
|
import {
|
|
INITIALIZE_CREATE_PASSWORD_ROUTE,
|
|
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
|
|
} from '../../../helpers/constants/routes';
|
|
|
|
export default class SelectAction extends PureComponent {
|
|
static propTypes = {
|
|
history: PropTypes.object,
|
|
isInitialized: PropTypes.bool,
|
|
setFirstTimeFlowType: PropTypes.func,
|
|
nextRoute: PropTypes.string,
|
|
metaMetricsId: PropTypes.string,
|
|
};
|
|
|
|
static contextTypes = {
|
|
trackEvent: PropTypes.func,
|
|
t: PropTypes.func,
|
|
};
|
|
|
|
componentDidMount() {
|
|
const { history, isInitialized, nextRoute } = this.props;
|
|
|
|
if (isInitialized) {
|
|
history.push(nextRoute);
|
|
}
|
|
}
|
|
|
|
handleCreate = () => {
|
|
const { metaMetricsId } = this.props;
|
|
const { trackEvent } = this.context;
|
|
this.props.setFirstTimeFlowType('create');
|
|
trackEvent(
|
|
{
|
|
category: EVENT.CATEGORIES.ONBOARDING,
|
|
event: EVENT_NAMES.WALLET_SETUP_STARTED,
|
|
properties: {
|
|
account_type: EVENT.ACCOUNT_TYPES.DEFAULT,
|
|
},
|
|
},
|
|
{
|
|
isOptIn: true,
|
|
metaMetricsId,
|
|
flushImmediately: true,
|
|
},
|
|
);
|
|
this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE);
|
|
};
|
|
|
|
handleImport = () => {
|
|
const { metaMetricsId } = this.props;
|
|
const { trackEvent } = this.context;
|
|
this.props.setFirstTimeFlowType('import');
|
|
trackEvent(
|
|
{
|
|
category: EVENT.CATEGORIES.ONBOARDING,
|
|
event: EVENT_NAMES.WALLET_SETUP_STARTED,
|
|
properties: {
|
|
account_type: EVENT.ACCOUNT_TYPES.IMPORTED,
|
|
},
|
|
},
|
|
{
|
|
isOptIn: true,
|
|
metaMetricsId,
|
|
flushImmediately: true,
|
|
},
|
|
);
|
|
this.props.history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE);
|
|
};
|
|
|
|
render() {
|
|
const { t } = this.context;
|
|
|
|
return (
|
|
<div className="select-action">
|
|
<MetaFoxLogo />
|
|
|
|
<div className="select-action__wrapper">
|
|
<div className="select-action__body">
|
|
<div className="select-action__body-header">
|
|
{t('newToMetaMask')}
|
|
</div>
|
|
<div className="select-action__select-buttons">
|
|
<div className="select-action__select-button">
|
|
<div className="select-action__button-content">
|
|
<div className="select-action__button-symbol">
|
|
<i className="fa fa-download fa-2x" />
|
|
</div>
|
|
<div className="select-action__button-text-big">
|
|
{t('noAlreadyHaveSeed')}
|
|
</div>
|
|
<div className="select-action__button-text-small">
|
|
{t('importYourExisting')}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="primary"
|
|
className="first-time-flow__button"
|
|
onClick={this.handleImport}
|
|
data-testid="import-wallet-button"
|
|
>
|
|
{t('importWallet')}
|
|
</Button>
|
|
</div>
|
|
<div className="select-action__select-button">
|
|
<div className="select-action__button-content">
|
|
<div className="select-action__button-symbol">
|
|
<i className="fa fa-plus fa-2x" />
|
|
</div>
|
|
<div className="select-action__button-text-big">
|
|
{t('letsGoSetUp')}
|
|
</div>
|
|
<div className="select-action__button-text-small">
|
|
{t('thisWillCreate')}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="primary"
|
|
className="first-time-flow__button"
|
|
onClick={this.handleCreate}
|
|
data-testid="create-wallet-button"
|
|
>
|
|
{t('createAWallet')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|