@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
26 lines (25 loc) • 1.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import CopyToClipboardIcon from "../CopyToClipboard/CopyToClipboardIcon";
import { Skeleton } from "../Skeleton";
import { CopyIconWrap, CopyRow, LabelRow, LabelText, MainRow, SmallText, ValueContainer, ValueText } from "./styles";
export function CopyRowOrThrobber({ title, value, valueText, smallText, disabled }) {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
if (disabled)
return;
if (!value)
return;
const str = value.trim();
if (navigator.clipboard) {
navigator.clipboard.writeText(str);
}
setCopied(true);
setTimeout(() => setCopied(false), 1000);
};
if (!value) {
return (_jsxs(CopyRow, { children: [_jsx(LabelRow, { children: _jsx(LabelText, { children: title }) }), _jsx(MainRow, { children: _jsx(Skeleton, {}) })] }));
}
const displayValue = valueText || value;
return (_jsxs(CopyRow, { as: "button", onClick: handleCopy, disabled: disabled, children: [_jsxs("div", { children: [_jsx(LabelRow, { children: _jsx(LabelText, { children: title }) }), _jsx(MainRow, { children: _jsxs(ValueContainer, { children: [_jsx(ValueText, { children: displayValue }), smallText && _jsx(SmallText, { children: smallText })] }) })] }), _jsx(CopyIconWrap, { children: _jsx(CopyToClipboardIcon, { copied: copied, dark: true }) })] }));
}