1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/flask/copyable/copyable.js
Erik Marks a861cc6dae
[FLASK] Add snap alerts and prompts via snap_dialog RPC method (#16048)
Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com>
Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
2022-12-01 16:46:06 +01:00

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,
};