1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js

122 lines
3.7 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { getAccountLink } from '@metamask/etherscan-link';
import Modal from '../../modal';
import { addressSummary, getURLHostName } from '../../../../helpers/utils/util';
import Identicon from '../../../ui/identicon';
import { EVENT } from '../../../../../shared/constants/metametrics';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
2018-07-11 01:19:29 +02:00
export default class ConfirmRemoveAccount extends Component {
2018-07-11 01:19:29 +02:00
static propTypes = {
hideModal: PropTypes.func.isRequired,
removeAccount: PropTypes.func.isRequired,
2018-07-12 19:19:51 +02:00
identity: PropTypes.object.isRequired,
chainId: PropTypes.string.isRequired,
rpcPrefs: PropTypes.object.isRequired,
};
2018-07-11 01:19:29 +02:00
static contextTypes = {
t: PropTypes.func,
trackEvent: PropTypes.func,
};
2018-07-11 01:19:29 +02:00
handleRemove = () => {
2020-11-03 00:41:28 +01:00
this.props
.removeAccount(this.props.identity.address)
.then(() => this.props.hideModal());
};
2018-07-11 01:19:29 +02:00
handleCancel = () => {
this.props.hideModal();
};
2020-11-03 00:41:28 +01:00
renderSelectedAccount() {
const { t } = this.context;
const { identity, rpcPrefs, chainId } = this.props;
2018-07-12 19:19:51 +02:00
return (
<div className="confirm-remove-account__account">
<div className="confirm-remove-account__account__identicon">
2020-11-03 00:41:28 +01:00
<Identicon address={identity.address} diameter={32} />
2018-07-12 19:19:51 +02:00
</div>
<div className="confirm-remove-account__account__name">
<span className="confirm-remove-account__account__label">
{t('name')}
</span>
<span className="account_value">{identity.name}</span>
2018-07-12 19:19:51 +02:00
</div>
<div className="confirm-remove-account__account__address">
2020-11-03 00:41:28 +01:00
<span className="confirm-remove-account__account__label">
{t('publicAddress')}
2020-11-03 00:41:28 +01:00
</span>
<span className="account_value">
{addressSummary(identity.address, 4, 4)}
</span>
2018-07-12 19:19:51 +02:00
</div>
<div className="confirm-remove-account__account__link">
2018-07-12 19:19:51 +02:00
<a
onClick={() => {
const accountLink = getAccountLink(
identity.address,
chainId,
rpcPrefs,
);
this.context.trackEvent({
category: EVENT.CATEGORIES.ACCOUNTS,
event: 'Clicked Block Explorer Link',
properties: {
link_type: 'Account Tracker',
action: 'Remove Account',
block_explorer_domain: getURLHostName(accountLink),
},
});
global.platform.openTab({
url: accountLink,
});
}}
target="_blank"
2020-02-24 19:54:35 +01:00
rel="noopener noreferrer"
title={t('etherscanView')}
2018-07-12 19:19:51 +02:00
>
<i
className="fa fa-share-square"
style={{ color: 'var(--color-icon-muted)' }}
title={t('etherscanView')}
/>
2018-07-12 19:19:51 +02:00
</a>
</div>
</div>
);
2018-07-12 19:19:51 +02:00
}
2020-11-03 00:41:28 +01:00
render() {
const { t } = this.context;
2018-07-11 01:19:29 +02:00
return (
<Modal
headerText={`${t('removeAccount')}?`}
onClose={this.handleCancel}
onSubmit={this.handleRemove}
onCancel={this.handleCancel}
submitText={t('remove')}
cancelText={t('nevermind')}
>
<div>
2020-11-03 00:41:28 +01:00
{this.renderSelectedAccount()}
<div className="confirm-remove-account__description">
2020-11-03 00:41:28 +01:00
{t('removeAccountDescription')}
<a
className="confirm-remove-account__link"
rel="noopener noreferrer"
target="_blank"
href={ZENDESK_URLS.IMPORTED_ACCOUNTS}
>
2020-11-03 00:41:28 +01:00
{t('learnMore')}
</a>
2018-07-11 01:19:29 +02:00
</div>
</div>
</Modal>
);
2018-07-11 01:19:29 +02:00
}
}