mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-11 20:27:12 +01:00
68ad9c619f
* Adding copy icon to home screen account address Fixes MetaMask/metamask-extension#10145 * Using margin-inline-start
77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import copyToClipboard from 'copy-to-clipboard';
|
|
import { shortenAddress } from '../../../helpers/utils/util';
|
|
|
|
import Tooltip from '../../ui/tooltip';
|
|
import CopyIcon from '../../ui/icon/copy-icon.component';
|
|
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,
|
|
};
|
|
|
|
componentDidMount() {
|
|
this.copyTimeout = null;
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.copyTimeout) {
|
|
clearTimeout(this.copyTimeout);
|
|
this.copyTimeout = null;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { t } = this.context;
|
|
const { selectedIdentity } = this.props;
|
|
const checksummedAddress = toChecksumHexAddress(selectedIdentity.address);
|
|
|
|
return (
|
|
<div className="selected-account">
|
|
<Tooltip
|
|
wrapperClassName="selected-account__tooltip-wrapper"
|
|
position="bottom"
|
|
title={
|
|
this.state.copied ? t('copiedExclamation') : t('copyToClipboard')
|
|
}
|
|
>
|
|
<button
|
|
className="selected-account__clickable"
|
|
onClick={() => {
|
|
this.setState({ copied: true });
|
|
this.copyTimeout = setTimeout(
|
|
() => this.setState({ copied: false }),
|
|
SECOND * 3,
|
|
);
|
|
copyToClipboard(checksummedAddress);
|
|
}}
|
|
>
|
|
<div className="selected-account__name">
|
|
{selectedIdentity.name}
|
|
</div>
|
|
<div className="selected-account__address">
|
|
{shortenAddress(checksummedAddress)}
|
|
<div className="selected-account__copy">
|
|
<CopyIcon size={11} color="#989a9b" />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SelectedAccount;
|