@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
31 lines • 1.93 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Text } from '../primitives/index.js';
import Tooltip from '../primitives/Tooltip.js';
import { useCopyToClipboard } from 'usehooks-ts';
import { AnimatePresence, motion } from 'framer-motion';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
export const CopyToClipBoard = ({ text }) => {
const [value, copy] = useCopyToClipboard();
const [isCopied, setIsCopied] = useState(false);
const [open, setOpen] = useState(false);
const handleCopy = () => {
copy(text);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 1000);
};
return (_jsx(Tooltip, { align: "center", side: "top", open: open, content: _jsx(Text, { style: "body2", children: isCopied ? 'Copied!' : 'Copy' }), children: _jsx(Button, { color: "ghost", size: "none", onClick: (e) => {
e.preventDefault();
handleCopy();
}, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), onTouchStart: () => {
handleCopy();
setOpen(true);
setTimeout(() => setOpen(false), 1000);
}, css: { color: 'gray9', _hover: { color: 'gray11' } }, children: _jsx(AnimatePresence, { initial: false, mode: "wait", children: _jsx(motion.span, { transition: {
type: 'spring',
duration: 0.15,
bounce: 0
}, initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0 }, children: isCopied ? (_jsx(FontAwesomeIcon, { icon: faCheck, width: 16, height: 16 })) : (_jsx(FontAwesomeIcon, { icon: faCopy, width: 16, height: 16 })) }, isCopied ? 'Copied' : 'Copy') }) }) }));
};
//# sourceMappingURL=CopyToClipBoard.js.map