mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
a861cc6dae
Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com> Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Box from '../../../ui/box';
|
|
import IconCopied from '../../../ui/icon/icon-copied';
|
|
import IconCopy from '../../../ui/icon/icon-copy';
|
|
import Typography from '../../../ui/typography';
|
|
import {
|
|
ALIGN_ITEMS,
|
|
BORDER_RADIUS,
|
|
COLORS,
|
|
JUSTIFY_CONTENT,
|
|
OVERFLOW_WRAP,
|
|
FLEX_DIRECTION,
|
|
TYPOGRAPHY,
|
|
} from '../../../../helpers/constants/design-system';
|
|
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
|
|
|
|
export const Copyable = ({ text }) => {
|
|
const [copied, handleCopy] = useCopyToClipboard();
|
|
return (
|
|
<Box
|
|
className="copyable"
|
|
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
|
alignItems={ALIGN_ITEMS.STRETCH}
|
|
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
|
|
borderRadius={BORDER_RADIUS.SM}
|
|
paddingLeft={4}
|
|
paddingRight={4}
|
|
paddingTop={2}
|
|
paddingBottom={2}
|
|
>
|
|
<Typography
|
|
variant={TYPOGRAPHY.H6}
|
|
color={COLORS.TEXT_ALTERNATIVE}
|
|
marginRight={2}
|
|
overflowWrap={OVERFLOW_WRAP.ANYWHERE}
|
|
>
|
|
{text}
|
|
</Typography>
|
|
<Box
|
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
|
alignItems={ALIGN_ITEMS.CENTER}
|
|
justifyContent={JUSTIFY_CONTENT.FLEX_START}
|
|
marginTop={2}
|
|
marginBottom={1}
|
|
>
|
|
{copied ? (
|
|
<IconCopied
|
|
color="var(--color-icon-alternative)"
|
|
className="copyable__icon"
|
|
size={18}
|
|
/>
|
|
) : (
|
|
<IconCopy
|
|
className="copyable__icon"
|
|
color="var(--color-icon-alternative)"
|
|
onClick={() => handleCopy(text)}
|
|
size={18}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
Copyable.propTypes = {
|
|
text: PropTypes.string,
|
|
};
|