1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 05:07:12 +01:00
metamask-extension/ui/components/app/selected-account/selected-account.component.js
ryanml 68ad9c619f
Adding copy icon to home screen account address (#11460)
* Adding copy icon to home screen account address

Fixes MetaMask/metamask-extension#10145

* Using margin-inline-start
2021-07-06 11:17:13 -07:00

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;