1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/selected-account/selected-account.component.js

78 lines
2.1 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import copyToClipboard from 'copy-to-clipboard';
2021-05-17 23:19:39 +02:00
import { shortenAddress } from '../../../helpers/utils/util';
import Tooltip from '../../ui/tooltip';
import CopyIcon from '../../ui/icon/copy-icon.component';
2021-05-17 23:19:39 +02:00
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import { SECOND } from '../../../../shared/constants/time';
class SelectedAccount extends Component {
state = {
copied: false,
};
static contextTypes = {
t: PropTypes.func,
};
static propTypes = {
selectedIdentity: PropTypes.object.isRequired,
};
2020-11-03 00:41:28 +01:00
componentDidMount() {
this.copyTimeout = null;
}
2020-11-03 00:41:28 +01:00
componentWillUnmount() {
if (this.copyTimeout) {
clearTimeout(this.copyTimeout);
this.copyTimeout = null;
}
}
2020-11-03 00:41:28 +01:00
render() {
const { t } = this.context;
const { selectedIdentity } = this.props;
2021-05-17 23:19:39 +02:00
const checksummedAddress = toChecksumHexAddress(selectedIdentity.address);
return (
<div className="selected-account">
<Tooltip
wrapperClassName="selected-account__tooltip-wrapper"
position="bottom"
2020-11-03 00:41:28 +01:00
title={
this.state.copied ? t('copiedExclamation') : t('copyToClipboard')
}
>
<button
className="selected-account__clickable"
data-testid="selected-account-click"
onClick={() => {
this.setState({ copied: true });
2020-11-03 00:41:28 +01:00
this.copyTimeout = setTimeout(
() => this.setState({ copied: false }),
SECOND * 3,
);
copyToClipboard(checksummedAddress);
}}
>
<div className="selected-account__name">
2020-11-03 00:41:28 +01:00
{selectedIdentity.name}
</div>
<div className="selected-account__address">
2020-11-03 00:41:28 +01:00
{shortenAddress(checksummedAddress)}
<div className="selected-account__copy">
<CopyIcon size={11} color="var(--color-icon-alternative)" />
</div>
</div>
</button>
</Tooltip>
</div>
);
}
}
export default SelectedAccount;