mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-25 04:40:18 +02:00
d5a539e0e5
The old tooltip component was only used in two places. Removing those usages was simple and straight forward. So, instead of colocating the old tooltip styles with the deprecated tooltip component, I removed all old styles and made tooltip-v2 now simply 'tooltip' and removed the deprecated component.
103 lines
3.0 KiB
JavaScript
103 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}/ug)
|
|
.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="#3098DC" />
|
|
</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)
|