@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
36 lines • 2.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CopyToClipBoard = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../primitives/index.js");
const Tooltip_js_1 = tslib_1.__importDefault(require("../primitives/Tooltip.js"));
const usehooks_ts_1 = require("usehooks-ts");
const framer_motion_1 = require("framer-motion");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const CopyToClipBoard = ({ text }) => {
const [value, copy] = (0, usehooks_ts_1.useCopyToClipboard)();
const [isCopied, setIsCopied] = (0, react_1.useState)(false);
const [open, setOpen] = (0, react_1.useState)(false);
const handleCopy = () => {
copy(text);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 1000);
};
return ((0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { align: "center", side: "top", open: open, content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body2", children: isCopied ? 'Copied!' : 'Copy' }), children: (0, jsx_runtime_1.jsx)(index_js_1.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: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, mode: "wait", children: (0, jsx_runtime_1.jsx)(framer_motion_1.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 ? ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, width: 16, height: 16 })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCopy, width: 16, height: 16 })) }, isCopied ? 'Copied' : 'Copy') }) }) }));
};
exports.CopyToClipBoard = CopyToClipBoard;
//# sourceMappingURL=CopyToClipBoard.js.map