1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/detected-token/detected-token-address/detected-token-address.js
George Marshall 05a20bb721
Add responsive props to Box component (#15106)
* Adding responsive props to Box component

* Updating margin array prop instances

* Updating padding array prop instances

* Updates to docs, tests and margin, padding instances

* Optimizing class name object

* Simplifying single value logic

* replacing for loop with switch statement

* Memoizing generateClassNames function
2022-07-20 13:47:51 -07:00

60 lines
1.6 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import Box from '../../../ui/box';
import Button from '../../../ui/button';
import Typography from '../../../ui/typography';
import Tooltip from '../../../ui/tooltip';
import {
COLORS,
DISPLAY,
TYPOGRAPHY,
} from '../../../../helpers/constants/design-system';
import { shortenAddress } from '../../../../helpers/utils/util';
const DetectedTokenAddress = ({ tokenAddress }) => {
const t = useI18nContext();
const [copied, handleCopy] = useCopyToClipboard();
return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
{`${t('tokenAddress')}:`}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.PRIMARY_DEFAULT}
marginLeft={2}
marginRight={2}
>
{shortenAddress(tokenAddress)}
</Typography>
<Tooltip
position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<Button
type="link"
className="detected-token-address__copy-link"
onClick={() => {
handleCopy(tokenAddress);
}}
>
<i className="fa fa-copy" />
</Button>
</Tooltip>
</Box>
);
};
DetectedTokenAddress.propTypes = {
tokenAddress: PropTypes.string,
};
export default DetectedTokenAddress;