1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
Guillaume Roux a7ac83f9d3
Dark Mode: Swap hex colors in ui/pages (#14214)
* swap hex colors in ui/pages

* update snapshots
2022-03-25 15:15:31 -07:00

100 lines
3.0 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
import Identicon from '../../../../components/ui/identicon';
import Copy from '../../../../components/ui/icon/copy-icon.component';
import Button from '../../../../components/ui/button/button.component';
import Tooltip from '../../../../components/ui/tooltip';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
function quadSplit(address) {
return `0x ${address
.slice(2)
.match(/.{1,4}/gu)
.join(' ')}`;
}
function ViewContact({
history,
name,
address,
checkSummedAddress,
memo,
editRoute,
listRoute,
}) {
const t = useI18nContext();
const [copied, handleCopy] = useCopyToClipboard();
if (!address) {
return <Redirect to={{ pathname: listRoute }} />;
}
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<div className="settings-page__header address-book__header">
<Identicon address={address} diameter={60} />
<div className="address-book__header__name">{name}</div>
</div>
<div className="address-book__view-contact__group">
<Button
type="secondary"
onClick={() => {
history.push(`${editRoute}/${address}`);
}}
>
{t('edit')}
</Button>
</div>
<div className="address-book__view-contact__group">
<div className="address-book__view-contact__group__label">
{t('ethereumPublicAddress')}
</div>
<div className="address-book__view-contact__group__value">
<div className="address-book__view-contact__group__static-address">
{quadSplit(checkSummedAddress)}
</div>
<Tooltip
position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<button
className="address-book__view-contact__group__static-address--copy-icon"
onClick={() => {
handleCopy(checkSummedAddress);
}}
>
<Copy size={20} color="var(--color-primary-default)" />
</button>
</Tooltip>
</div>
</div>
<div className="address-book__view-contact__group">
<div className="address-book__view-contact__group__label--capitalized">
{t('memo')}
</div>
<div className="address-book__view-contact__group__static-address">
{memo}
</div>
</div>
</div>
</div>
);
}
ViewContact.propTypes = {
name: PropTypes.string,
address: PropTypes.string,
history: PropTypes.object,
checkSummedAddress: PropTypes.string,
memo: PropTypes.string,
editRoute: PropTypes.string,
listRoute: PropTypes.string.isRequired,
};
export default React.memo(ViewContact);