rujira.ui 0.1.0 → 1.0.0

package/lib/cjs/components/chart/RangeLiquidityChart.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeLiquidityChart = exports.yToPrice = exports.priceToY = exports.clamp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./RangeLiquidityChart.css");
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+exports.clamp = clamp;
+const priceToY = (price, min, max, height) => {
+    // y = 0 at top
+    if (max === min)
+        return height / 2;
+    const p = (price - min) / (max - min);
+    return height - p * height;
+};
+exports.priceToY = priceToY;
+const yToPrice = (y, min, max, height) => {
+    const p = (0, exports.clamp)(1 - y / height, 0, 1);
+    return min + p * (max - min);
+};
+exports.yToPrice = yToPrice;
+const RangeLiquidityChart = ({ width = 900, height = 160, series, leftBuckets = [], rightBuckets = [], minPrice, maxPrice, initialRange, onRangeChange, }) => {
+    const svgRef = (0, react_1.useRef)(null);
+    const prices = series.map((s) => s.price);
+    const minP = minPrice ?? Math.min(...prices);
+    const maxP = maxPrice ?? Math.max(...prices);
+    const padding = { left: 36, right: 72, top: 12, bottom: 26 };
+    const innerW = width - padding.left - padding.right;
+    const innerH = height - padding.top - padding.bottom;
+    // range state in price units
+    const [range, setRange] = (0, react_1.useState)(() => {
+        if (initialRange)
+            return initialRange;
+        // default: center 30% of price span
+        const span = maxP - minP;
+        return { min: minP + span * 0.35, max: minP + span * 0.65 };
+    });
+    (0, react_1.useEffect)(() => onRangeChange?.(range), [range, onRangeChange]);
+    // line path
+    const step = series.length > 1 ? innerW / (series.length - 1) : 0;
+    const path = series
+        .map((p, i) => {
+        const x = padding.left + i * step;
+        const y = padding.top + (0, exports.priceToY)(p.price, minP, maxP, innerH);
+        return `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+        .join(" ");
+    // current price marker at last point
+    const last = series[series.length - 1];
+    const currentX = padding.left + (series.length - 1) * step;
+    const currentY = padding.top + (0, exports.priceToY)(last.price, minP, maxP, innerH);
+    // histograms
+    const maxBucket = Math.max(1, ...leftBuckets.map((b) => b.value), ...rightBuckets.map((b) => b.value));
+    const barWidth = 10;
+    // slider interactions
+    const dragging = (0, react_1.useRef)(null);
+    const onPointerDownHandle = (which, e) => {
+        dragging.current = which;
+        e.target.setPointerCapture(e.pointerId);
+    };
+    const onPointerUp = (e) => {
+        if (dragging.current) {
+            try {
+                e.target.releasePointerCapture(e.pointerId);
+            }
+            catch { }
+        }
+        dragging.current = null;
+    };
+    const onPointerMove = (e) => {
+        if (!dragging.current || !svgRef.current)
+            return;
+        const rect = svgRef.current.getBoundingClientRect();
+        const y = (0, exports.clamp)(e.clientY - rect.top - padding.top, 0, innerH);
+        const price = (0, exports.yToPrice)(y, minP, maxP, innerH);
+        if (dragging.current === "min") {
+            const v = Math.min(price, range.max - (maxP - minP) * 0.001);
+            setRange((r) => ({ ...r, min: (0, exports.clamp)(v, minP, maxP) }));
+        }
+        else if (dragging.current === "max") {
+            const v = Math.max(price, range.min + (maxP - minP) * 0.001);
+            setRange((r) => ({ ...r, max: (0, exports.clamp)(v, minP, maxP) }));
+        }
+        else if (dragging.current === "band") {
+            // band drag: compute delta from start
+            // Not implemented: simple noop for now
+        }
+    };
+    // computed y positions for handles
+    const yMin = padding.top + (0, exports.priceToY)(range.min, minP, maxP, innerH);
+    const yMax = padding.top + (0, exports.priceToY)(range.max, minP, maxP, innerH);
+    // build histogram bars
+    const leftBars = leftBuckets.map((b) => {
+        const y = padding.top + (0, exports.priceToY)(b.price, minP, maxP, innerH);
+        const h = Math.max(2, (b.value / maxBucket) * innerH * 0.5);
+        return {
+            x: padding.left - 8 - barWidth,
+            y: y - h / 2,
+            w: barWidth,
+            h,
+            value: b.value,
+        };
+    });
+    const rightBars = rightBuckets.map((b) => {
+        const y = padding.top + (0, exports.priceToY)(b.price, minP, maxP, innerH);
+        const h = Math.max(2, (b.value / maxBucket) * innerH * 0.5);
+        return {
+            x: padding.left + innerW + 8,
+            y: y - h / 2,
+            w: barWidth,
+            h,
+            value: b.value,
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: "rlc-root", style: { width }, children: (0, jsx_runtime_1.jsxs)("svg", { ref: svgRef, width: width, height: height, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, className: "rlc-svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "priceGrad", x1: "0", x2: "0", y1: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "#ff55d1", stopOpacity: "0.22" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "#ff55d1", stopOpacity: "0.02" })] }) }), (0, jsx_runtime_1.jsx)("rect", { x: padding.left, y: yMax, width: innerW, height: Math.max(1, yMin - yMax), fill: "#ff49c8", opacity: 0.18 }), (0, jsx_runtime_1.jsx)("g", { className: "rlc-bars left", children: leftBars.map((b, i) => ((0, jsx_runtime_1.jsx)("rect", { className: "rlc-bar", x: b.x, y: b.y, width: b.w, height: b.h, rx: 4 }, i))) }), (0, jsx_runtime_1.jsx)("g", { className: "rlc-bars right", children: rightBars.map((b, i) => ((0, jsx_runtime_1.jsx)("rect", { className: "rlc-bar", x: b.x, y: b.y, width: b.w, height: b.h, rx: 4 }, i))) }), (0, jsx_runtime_1.jsx)("path", { d: path, className: "rlc-line", fill: "none", stroke: "#ff57d8", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: currentX, cy: currentY, r: 4.5, fill: "#ff7cd9", stroke: "#fff", strokeWidth: 1 }), (0, jsx_runtime_1.jsxs)("g", { className: "rlc-slider", transform: `translate(${padding.left + innerW + 40},0)`, children: [(0, jsx_runtime_1.jsx)("rect", { x: -12, y: padding.top, width: 24, height: innerH, rx: 12, fill: "#2b2b2b", opacity: 0.14 }), (0, jsx_runtime_1.jsx)("rect", { x: -12, y: yMax, width: 24, height: Math.max(4, yMin - yMax), rx: 8, fill: "#ff49c8", opacity: 0.9 }), (0, jsx_runtime_1.jsx)("g", { className: "rlc-handle rlc-handle-min", transform: `translate(0,${yMin})`, onPointerDown: (e) => onPointerDownHandle("min", e), children: (0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: 0, r: 10, fill: "#fff", stroke: "#ff49c8", strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)("g", { className: "rlc-handle rlc-handle-max", transform: `translate(0,${yMax})`, onPointerDown: (e) => onPointerDownHandle("max", e), children: (0, jsx_runtime_1.jsx)("circle", { cx: 0, cy: 0, r: 10, fill: "#fff", stroke: "#ff49c8", strokeWidth: 3 }) })] })] }) }));
+};
+exports.RangeLiquidityChart = RangeLiquidityChart;
+exports.default = exports.RangeLiquidityChart;

package/lib/cjs/components/footer/Footer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const ResolveLink_1 = require("../header/ResolveLink");
+const Icons_1 = require("../icons/Icons");
+const RujiraLogo_1 = require("../logos/RujiraLogo");
+const Footer = ({ className, domain = "", routerElement, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
+            rujira__footer: true,
+            [`${className}`]: className,
+        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "rujira__inner", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex wrap pad-tight", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-12 col-xs-6 col-lg-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Everyone" }), (0, jsx_runtime_1.jsxs)("nav", { className: "flex dir-c", children: [(0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routerElement, domain: domain, to: "merge", children: "Merge" }), (0, jsx_runtime_1.jsx)("a", { href: "https://docs.rujira.network", target: "_blank", children: "Documentation" }), (0, jsx_runtime_1.jsx)("a", { href: "https://docs.rujira.network/resources/branding", target: "_blank", children: "Brand Assets" }), (0, jsx_runtime_1.jsx)("a", { href: "https://thorchain.net", target: "_blank", children: "Blockchain Explorer" }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routerElement, domain: domain, to: "privacypolicy", children: "Privacy Policy" }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routerElement, domain: domain, to: "tou", children: "Terms of Use" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 col-xs-6 col-lg-3 mt-3 mt-xs-0", children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Developers" }), (0, jsx_runtime_1.jsxs)("nav", { className: "flex dir-c", children: [(0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routerElement, domain: domain, to: "developer/tools", children: "Developer Tools" }), (0, jsx_runtime_1.jsx)("a", { href: "https://docs.rujira.network/developers/getting-started", target: "_blank", children: "Documentation" }), (0, jsx_runtime_1.jsx)("a", { href: "https://gitlab.com/thorchain/rujira", target: "_blank", children: "GitLab" }), (0, jsx_runtime_1.jsx)("a", { href: "https://gitlab.com/thorchain/rujira-ui", target: "_blank", children: "Rujira.ui" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 col-xs-6 col-lg-3 mt-3 mt-lg-0", children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Ecosystem" }), (0, jsx_runtime_1.jsx)("nav", { className: "flex dir-c", children: (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routerElement, domain: domain, to: "ecosystem", children: "Built on Rujira" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 col-xs-6 col-lg-3 mt-3 mt-lg-0", children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Community" }), (0, jsx_runtime_1.jsxs)("nav", { className: "flex wrap mt-1", children: [(0, jsx_runtime_1.jsx)("a", { href: "https://x.com/RujiraNetwork", target: "_blank", className: "block px-0.5", children: (0, jsx_runtime_1.jsx)(Icons_1.X, { className: "h-3 w-a" }) }), (0, jsx_runtime_1.jsx)("a", { href: "https://t.me/Rujira_Community", target: "_blank", className: "block px-0.5", children: (0, jsx_runtime_1.jsx)(Icons_1.Telegram, { className: "h-3 w-a" }) }), (0, jsx_runtime_1.jsx)("a", { href: "https://discord.gg/XPvsxhWKfb", target: "_blank", className: "block px-0.5", children: (0, jsx_runtime_1.jsx)(Icons_1.Discord, { className: "h-3 w-a" }) }), (0, jsx_runtime_1.jsx)("a", { href: "https://medium.com/rujiranetwork", target: "_blank", className: "block px-0.5", children: (0, jsx_runtime_1.jsx)(Icons_1.Medium, { className: "h-3 w-a" }) })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 lh-16 fw-500 color-grey my-2", children: "Powered by THORChain" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex wrap ai-c", children: [(0, jsx_runtime_1.jsx)(RujiraLogo_1.RujiraLogo, { animate: true, textColor: "#fff", className: "block w-a h-4 mr-3" }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 lh-16 fw-500 color-grey my-2", children: "All Rujira brand is in public domain. No rights reserved." })] })] }) }));
+};
+exports.Footer = Footer;

package/lib/cjs/components/header/Accounts.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wallets = exports.Accounts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const react_hot_toast_1 = require("react-hot-toast");
+const react_router_dom_1 = require("react-router-dom");
+const react_tooltip_1 = require("react-tooltip");
+const rujira_js_1 = require("rujira.js");
+const __1 = require("../..");
+const combined_png_1 = require("../../assets/images/combined.png");
+const connect_gif_1 = require("../../assets/images/connect.gif");
+const connect_png_1 = require("../../assets/images/connect.png");
+const GlobalModal_1 = require("../../context/GlobalModal");
+const i18n_1 = require("../../i18n");
+const Icons_1 = require("../icons/Icons");
+const NetworkIcon_1 = require("../icons/NetworkIcon");
+const Fiat_1 = require("../numbers/Fiat");
+const ResolveLink_1 = require("./ResolveLink");
+let referral = localStorage.getItem("referral");
+const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getValue, customActions, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const { accounts: allAccounts, disconnectAll, selected } = provider;
+    const [showBlur, setShowBlur] = (0, react_2.useState)(false);
+    const { hideModal, showModal } = (0, GlobalModal_1.useGlobalModalContext)();
+    const [showBalance, setShowBalance] = (0, __1.useLocalStorage)("rujira-show-balance", "true");
+    const accounts = allAccounts?.filter((a) => (0, rujira_js_1.isThor)(a.address));
+    const ReferralModal = () => {
+        showModal({
+            title: t("referAndEarn"),
+            backgroundClose: true,
+            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "p balance", children: t("referralDescription") }), (0, jsx_runtime_1.jsx)("div", { className: "pointer", onClick: () => {
+                            react_hot_toast_1.default.success(t("referralCopied"));
+                            navigator.clipboard.writeText(`https://rujira.network/?ref=${referral}`);
+                        }, children: (0, jsx_runtime_1.jsx)(__1.Input, { value: `https://rujira.network/?ref=${referral}`, readOnly: true, label: t("clickToCopy") }) }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 color-grey mt-2", children: t("referralValidUntil") }), (0, jsx_runtime_1.jsx)("div", { className: "modal__footer mt-4 px-3 py-2 text-right", children: (0, jsx_runtime_1.jsx)(__1.Button, { label: t("close"), onClick: hideModal }) })] })),
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !accounts || accounts.length === 0 ? ((0, jsx_runtime_1.jsx)(ConnectAnimation, { children: (0, jsx_runtime_1.jsx)(exports.Wallets, { provider: provider, routingElement: routingElement, wallets: wallets }) })) : ((0, jsx_runtime_1.jsxs)(MyAccount, { routingElement: routingElement, provider: provider, value: selected
+                ? getValue({
+                    address: selected.address,
+                    network: "THOR",
+                })
+                : false, onHide: () => setShowBlur(false), children: [selected ? ((0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, to: "portfolio", className: "balance", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex ai-b", children: showBalance === "true" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Fiat_1.Fiat, { amount: getValue({
+                                            address: selected.address,
+                                            network: "THOR",
+                                        }), decimals: 12, symbol: "~$", padSymbol: false, className: "color-white fs-26 condensed" }), (0, jsx_runtime_1.jsx)("button", { className: "transparent ml-1 color-grey hover-white", onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            setShowBalance("false");
+                                            return false;
+                                        }, style: { marginRight: "-1rem" }, children: (0, jsx_runtime_1.jsx)(Icons_1.Eye, { className: "w-2 h-2" }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "fiat color-grey fs-22", style: { fontFamily: "monospace" }, children: "****" }), (0, jsx_runtime_1.jsx)("button", { className: "transparent ml-1 color-grey hover-white", onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            setShowBalance("true");
+                                            return false;
+                                        }, style: { marginRight: "-1rem" }, children: (0, jsx_runtime_1.jsx)(Icons_1.EyeSlash, { className: "w-2 h-2" }) })] })) }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 condensed color-grey mt-0.5", children: t("viewPortfolio") })] })) : null, accounts.map((account) => ((0, jsx_runtime_1.jsx)(AddressC, { provider: provider, ProviderIcon: ProviderIcon, account: account, selected: selected?.address === account.address &&
+                        selected.provider === account.provider }, account.address + account.provider))), (0, jsx_runtime_1.jsxs)("nav", { className: "actions", children: [referral && ((0, jsx_runtime_1.jsxs)("button", { className: "action transparent", onClick: ReferralModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.Users, {}), (0, jsx_runtime_1.jsx)("span", { children: t("referralLink") })] })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Link, { className: "action transparent", to: "connect", children: [(0, jsx_runtime_1.jsx)(Icons_1.Plus, {}), (0, jsx_runtime_1.jsx)("span", { children: t("connectAnotherWallet") })] }), customActions &&
+                            customActions.map((e, index) => (0, react_2.cloneElement)(e, { key: index })), (0, jsx_runtime_1.jsxs)("button", { className: "action transparent", onClick: disconnectAll, children: [(0, jsx_runtime_1.jsx)(Icons_1.LinkDisconnect, {}), (0, jsx_runtime_1.jsx)("span", { children: t("disconnectAll") })] })] }), showBlur && (0, jsx_runtime_1.jsx)("div", { className: "blur" })] })) }));
+};
+exports.Accounts = Accounts;
+/* const Component = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>((props, ref) => {
+  return <Link {...props} ref={ref} />;
+}); */
+const ConnectAnimation = ({ children }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const [show, setShow] = (0, react_2.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative py-q1 no-underline", onMouseOver: () => setShow(true), onMouseOut: () => setShow(false), children: [(0, jsx_runtime_1.jsxs)("div", { className: "rujira-header__connect", children: [(0, jsx_runtime_1.jsx)("div", { className: "fs-14 fw-500 fs-15 condensed", children: t("connect") }), (0, jsx_runtime_1.jsx)("img", { className: "w-3 h-3 filter-white", src: show ? connect_gif_1.default : connect_png_1.default, alt: "Connect" })] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { className: "rujira-header__popup right condensed w-32 text-center p-2", initial: { opacity: 0, marginTop: -4 }, animate: { opacity: 1, marginTop: 4 }, exit: { opacity: 0, marginTop: -4 }, children: [(0, jsx_runtime_1.jsx)("p", { className: "color-white", children: t("connectYourWallet") }), (0, jsx_runtime_1.jsx)("small", { className: "color-grey mb-1", children: t("createOrConnectWallet") }), children] })) })] }));
+};
+const Wallets = ({ modalLayout = false, provider, routingElement, wallets, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const { connect, isAvaialable } = provider;
+    const { hideModal } = (0, GlobalModal_1.useGlobalModalContext)();
+    const [first, ...rest] = wallets;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "rujira-header__wallets", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
+                            "flex w-full ai-c jc-c wrap": true,
+                            "mb-1": modalLayout,
+                        }), children: (0, jsx_runtime_1.jsx)("button", { id: "connect-station", "data-tooltip-content": "Coming Soon...", "data-tooltip-id": "wallet-tip", className: (0, clsx_1.default)({
+                                "transparent block pointer medium": true,
+                                "desaturate opacity-10": !first?.provider,
+                            }), disabled: !first?.provider, onClick: () => {
+                                first?.provider && connect(first?.provider).then(hideModal);
+                            }, children: first?.icon }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full ai-c jc-c wrap", children: rest.map((x) => {
+                            const disabled = x.provider ? !isAvaialable(x.provider) : true;
+                            return ((0, jsx_runtime_1.jsx)("button", { id: `connect-${x.label}`, "data-tooltip-content": x.label, "data-tooltip-id": "wallet-tip", className: (0, clsx_1.default)({
+                                    "transparent block pointer": true,
+                                    medium: modalLayout,
+                                    "desaturate opacity-10": disabled,
+                                }), onClick: () => {
+                                    if (disabled && x.url) {
+                                        window.open(x.url, "_blank");
+                                        return;
+                                    }
+                                    x.provider && connect(x.provider).then(hideModal);
+                                }, children: x.icon }, x.label));
+                        }) }), (0, jsx_runtime_1.jsx)("hr", { className: (0, clsx_1.default)({
+                            hr: true,
+                            "mt-0 mb-1": !modalLayout,
+                            "my-2": modalLayout,
+                        }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routingElement, to: "ecosystem/wallets", onClick: hideModal, children: t("needHelpDeciding") })] }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: "wallet-tip", className: "tooltip" })] }));
+};
+exports.Wallets = Wallets;
+const MyAccount = ({ provider, children, onHide, routingElement, value, }) => {
+    const [show, setShow] = (0, react_2.useState)(false);
+    const { accounts, selected } = provider;
+    const [showBalance] = (0, __1.useLocalStorage)("rujira-show-balance", "true");
+    (0, react_2.useEffect)(() => {
+        onHide();
+    }, [show]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative py-q1", onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, to: "portfolio", className: "rujira-header__pfp", children: [value !== false && showBalance === "true" && ((0, jsx_runtime_1.jsx)(Fiat_1.Fiat, { amount: value, symbol: "~$", decimals: 12, padSymbol: false })), selected && (0, jsx_runtime_1.jsx)(NetworkIcon_1.NetworkIcon, { network: "THOR" }), accounts?.length && !selected && (0, jsx_runtime_1.jsx)("img", { src: combined_png_1.default, alt: "combined" }), provider.isLoading && (0, jsx_runtime_1.jsx)(__1.Spinner, {})] }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "rujira-header__popup right condensed p-1.5 br-2", initial: { opacity: 0, marginTop: -4, right: -8 }, animate: { opacity: 1, marginTop: 4, right: -8 }, exit: { opacity: 0, marginTop: -4, right: -8 }, children: children })) })] }));
+};
+const AddressC = ({ account, selected, provider, ProviderIcon, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const { select, disconnect } = provider;
+    const [hover, setHover] = (0, react_2.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { onMouseOver: () => setHover(true), onMouseOut: () => setHover(false), className: (0, clsx_1.default)({
+            "flex ai-c px-1 address": true,
+            "address--selected": selected,
+        }), children: [(0, jsx_runtime_1.jsx)(NetworkIcon_1.NetworkIcon, { network: "THOR", className: "address__wallet", selected: selected || hover }), (0, jsx_runtime_1.jsx)("p", { className: "address__address pointer", onClick: () => {
+                    if (selected) {
+                        react_hot_toast_1.default.success(t("addressCopied"));
+                        navigator.clipboard.writeText(account.address);
+                    }
+                    else {
+                        select(account);
+                    }
+                }, children: hover && selected ? (t("copyAddress")) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.address.substring(0, 8), " ... ", account.address.slice(-8)] })) }), hover ? ((0, jsx_runtime_1.jsx)(Icons_1.LinkDisconnect, { className: "address__disconnect", onClick: () => disconnect(account.provider) })) : ((0, jsx_runtime_1.jsx)(ProviderIcon, { className: "address__disconnect", provider: account.provider, selected: selected }))] }));
+};

package/lib/cjs/components/header/Header.js

@@ -0,0 +1,197 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNav = exports.MainNav = exports.Logo = exports.Container = exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const vaul_1 = require("vaul");
+const deposit_gif_1 = require("../../assets/images/deposit.gif");
+const deposit_png_1 = require("../../assets/images/deposit.png");
+const GlobalModal_1 = require("../../context/GlobalModal");
+const useWindowSize_1 = require("../../hooks/useWindowSize");
+const i18n_1 = require("../../i18n");
+const Icons_1 = require("../icons/Icons");
+const RujiraLogo_1 = require("../logos/RujiraLogo");
+const Accounts_1 = require("./Accounts");
+const Pending_1 = require("./Pending");
+const ResolveLink_1 = require("./ResolveLink");
+__exportStar(require("./Accounts"), exports);
+__exportStar(require("./QuickLauncher"), exports);
+const Header = ({ accountProvider, className, domain = "", routingElement, wallets, ProviderIcon, onDeposit, deposits, getAccountValue, customActions, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const [hover, setHover] = (0, react_2.useState)(false);
+    const [isScrolled, setIsScrolled] = (0, react_2.useState)(false);
+    const [scrollY, setScrollY] = (0, react_2.useState)(0);
+    const { accounts } = accountProvider;
+    const { showModal } = (0, GlobalModal_1.useGlobalModalContext)();
+    (0, react_2.useEffect)(() => {
+        const handleScroll = () => {
+            setIsScrolled(window.scrollY > 56);
+            setScrollY(window.scrollY <= 56 ? window.scrollY : 56);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    const ConnectModal = () => {
+        showModal({
+            title: t("connectYourAccount"),
+            backgroundClose: true,
+            children: ((0, jsx_runtime_1.jsx)(i18n_1.TranslationProvider, { namespace: "header", children: (0, jsx_runtime_1.jsx)(Accounts_1.Wallets, { modalLayout: true, provider: accountProvider, wallets: wallets }) })),
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(exports.Container, { style: { backgroundColor: `rgba(15, 17, 23, ${(scrollY / 56) * 0.9})` }, className: (0, clsx_1.default)({
+            [`${className}`]: className,
+            "rujira-header--scrolled": isScrolled,
+        }), children: [(0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routingElement, to: ".", children: (0, jsx_runtime_1.jsx)(exports.Logo, {}) }), (0, jsx_runtime_1.jsx)(exports.MainNav, { domain: domain, accountProvider: accountProvider, routingElement: routingElement }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-a mr-0 flex ai-c gradient-card-container", children: [deposits && (0, jsx_runtime_1.jsx)(Pending_1.PendingDeposits, { ...deposits }), onDeposit && ((0, jsx_runtime_1.jsxs)("button", { id: "deposit", className: "transparent rujira-header__deposit condensed", onMouseOver: () => setHover(true), onMouseOut: () => setHover(false), onClick: () => {
+                            accounts?.length === 0 ? ConnectModal() : onDeposit();
+                        }, children: [(0, jsx_runtime_1.jsx)("img", { src: hover ? deposit_gif_1.default : deposit_png_1.default, alt: "Deposit" }), (0, jsx_runtime_1.jsx)("span", { children: t("deposit") })] })), (0, jsx_runtime_1.jsx)(Accounts_1.Accounts, { provider: accountProvider, ProviderIcon: ProviderIcon, routingElement: routingElement, wallets: wallets, getValue: getAccountValue, 
+                        //hideNetworkSwitch={hideNetworkSwitch}
+                        customActions: customActions })] }), (0, jsx_runtime_1.jsx)(exports.MobileNav, { domain: domain, routingElement: routingElement, accountProvider: accountProvider })] }));
+};
+exports.Header = Header;
+const Container = ({ children, className, style = {} }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
+            "rujira-header": true,
+            [`${className}`]: className,
+        }), style: style, children: children }));
+};
+exports.Container = Container;
+const Logo = () => {
+    const size = (0, useWindowSize_1.useWindowSize)();
+    return ((0, jsx_runtime_1.jsx)(RujiraLogo_1.RujiraLogo, { textColor: "#fff", className: "rujira-header__logo", showText: size.width >= 520, animate: true }));
+};
+exports.Logo = Logo;
+const MainNav = ({ domain, 
+//accountProvider,
+routingElement, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    //const { accounts } = accountProvider;
+    const [showTrade, setShowTrade] = (0, react_2.useState)(false);
+    const [showEarn, setShowEarn] = (0, react_2.useState)(false);
+    const [showBorrow, setShowBorrow] = (0, react_2.useState)(false);
+    const [showUtilities, setShowUtilities] = (0, react_2.useState)(false);
+    const [showEntertainment, setShowEntertainment] = (0, react_2.useState)(false);
+    const [showLearn, setShowLearn] = (0, react_2.useState)(false);
+    const trade = (0, react_2.useRef)(null);
+    const earn = (0, react_2.useRef)(null);
+    const borrow = (0, react_2.useRef)(null);
+    const utilities = (0, react_2.useRef)(null);
+    const entertainment = (0, react_2.useRef)(null);
+    const learn = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        if (showTrade ||
+            showBorrow ||
+            showUtilities ||
+            showEarn ||
+            showEntertainment ||
+            showLearn) {
+            let popup = null;
+            if (showTrade) {
+                popup = trade.current;
+            }
+            else if (showEarn) {
+                popup = earn.current;
+            }
+            else if (showBorrow) {
+                popup = borrow.current;
+            }
+            else if (showUtilities) {
+                popup = utilities.current;
+            }
+            else if (showEntertainment) {
+                popup = entertainment.current;
+            }
+            else if (showLearn) {
+                popup = learn.current;
+            }
+            if (popup) {
+                const box = popup.getBoundingClientRect();
+                const body = document.body;
+                const docEl = document.documentElement;
+                const scrollLeft = window.scrollX || docEl.scrollLeft || body.scrollLeft;
+                const clientLeft = docEl.clientLeft || body.clientLeft || 0;
+                const left = box.left + scrollLeft - clientLeft;
+                if (left + box.width > window.innerWidth - 20) {
+                    const diff = Math.round(left + box.width - window.innerWidth + 20);
+                    popup.style.transform = "translateX(-" + diff + "px)";
+                }
+            }
+        }
+    }, [
+        showTrade,
+        showBorrow,
+        showUtilities,
+        showEarn,
+        showEntertainment,
+        showLearn,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: "rujira-header__nav", children: [(0, jsx_runtime_1.jsxs)("span", { onMouseOver: () => setShowTrade(true), onMouseOut: () => setShowTrade(false), children: [t("trade"), (0, jsx_runtime_1.jsx)(Icons_1.AngleDown, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showTrade && ((0, jsx_runtime_1.jsx)(SubTrade, { useRef: trade, domain: domain, routingElement: routingElement })) })] }), (0, jsx_runtime_1.jsxs)("span", { onMouseOver: () => setShowEarn(true), onMouseOut: () => setShowEarn(false), children: [t("earn"), (0, jsx_runtime_1.jsx)(Icons_1.AngleDown, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showEarn && ((0, jsx_runtime_1.jsx)(SubEarn, { useRef: earn, domain: domain, routingElement: routingElement })) })] }), (0, jsx_runtime_1.jsxs)("span", { onMouseOver: () => setShowBorrow(true), onMouseOut: () => setShowBorrow(false), children: [t("borrow"), (0, jsx_runtime_1.jsx)(Icons_1.AngleDown, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showBorrow && ((0, jsx_runtime_1.jsx)(SubBorrow, { useRef: borrow, domain: domain, routingElement: routingElement })) })] }), (0, jsx_runtime_1.jsxs)("span", { onMouseOver: () => setShowUtilities(true), onMouseOut: () => setShowUtilities(false), children: [t("utilities"), (0, jsx_runtime_1.jsx)(Icons_1.AngleDown, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showUtilities && ((0, jsx_runtime_1.jsx)(SubUtilities, { useRef: utilities, domain: domain, routingElement: routingElement })) })] }), (0, jsx_runtime_1.jsxs)("span", { onMouseOver: () => setShowEntertainment(true), onMouseOut: () => setShowEntertainment(false), children: [t("entertainment"), (0, jsx_runtime_1.jsx)(Icons_1.AngleDown, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showEntertainment && ((0, jsx_runtime_1.jsx)(SubEntertainment, { useRef: entertainment, domain: domain, routingElement: routingElement })) })] }), (0, jsx_runtime_1.jsxs)("span", { onMouseOver: () => setShowLearn(true), onMouseOut: () => setShowLearn(false), children: [t("learnAndHelp"), (0, jsx_runtime_1.jsx)(Icons_1.AngleDown, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showLearn && ((0, jsx_runtime_1.jsx)(SubLearn, { useRef: learn, domain: domain, routingElement: routingElement })) })] })] }));
+};
+exports.MainNav = MainNav;
+const MobileNav = ({ domain, routingElement, accountProvider, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const [showDrawer, setShowDrawer] = (0, react_2.useState)(false);
+    const { accounts } = accountProvider;
+    /*const mobile = useRef<HTMLDivElement | null>(null);
+  
+     useEffect(() => {
+      if (showMobile) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "auto";
+      }
+    }, [showMobile]);*/
+    let url = location.href;
+    document.body.addEventListener("click", () => {
+        requestAnimationFrame(() => {
+            if (url !== location.href) {
+                setShowDrawer(false);
+                url = location.href;
+            }
+        });
+    }, true);
+    return ((0, jsx_runtime_1.jsxs)(vaul_1.Drawer.Root, { direction: "left", open: showDrawer, onOpenChange: (open) => setShowDrawer(open), children: [(0, jsx_runtime_1.jsx)("button", { className: "rujira-header__hamburger", onClick: () => setShowDrawer(true), children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 64H448v48H0V64zM0 224H448v48H0V224zM448 384v48H0V384H448z", fill: "currentColor" }) }) }), (0, jsx_runtime_1.jsxs)(vaul_1.Drawer.Portal, { children: [(0, jsx_runtime_1.jsx)(vaul_1.Drawer.Overlay, { className: "drawer__overlay" }), (0, jsx_runtime_1.jsxs)(vaul_1.Drawer.Content, { className: "drawer__content drawer__content--left", children: [(0, jsx_runtime_1.jsx)(vaul_1.Drawer.Description, { className: "visually-hidden", children: "Main navigation menu" }), (0, jsx_runtime_1.jsx)(vaul_1.Drawer.Title, { className: "visually-hidden", children: "Main Menu" }), (0, jsx_runtime_1.jsxs)("div", { className: "drawer__card mobile-drawer", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: ".", className: "flex ai-c", children: [(0, jsx_runtime_1.jsx)(Icons_1.Home, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("home") }) })] }), accounts && accounts.length > 0 && ((0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "portfolio", className: "flex ai-c mt-2", children: [(0, jsx_runtime_1.jsx)(Icons_1.Coins, { className: "color-grey h-3.5 w-a block mr-2 no-shrink" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("portfolio") }) })] })), (0, jsx_runtime_1.jsx)("h4", { children: t("trade") }), (0, jsx_runtime_1.jsx)(SubTrade, { useRef: (0, react_2.useRef)(null), domain: domain, routingElement: routingElement, className: "" }), (0, jsx_runtime_1.jsx)("h4", { children: t("earn") }), (0, jsx_runtime_1.jsx)(SubEarn, { useRef: (0, react_2.useRef)(null), domain: domain, routingElement: routingElement, className: "" }), (0, jsx_runtime_1.jsx)("h4", { children: t("borrow") }), (0, jsx_runtime_1.jsx)(SubBorrow, { useRef: (0, react_2.useRef)(null), domain: domain, routingElement: routingElement, className: "" }), (0, jsx_runtime_1.jsx)("h4", { children: t("utilities") }), (0, jsx_runtime_1.jsx)(SubUtilities, { useRef: (0, react_2.useRef)(null), domain: domain, routingElement: routingElement, className: "" }), (0, jsx_runtime_1.jsx)("h4", { children: t("entertainment") }), (0, jsx_runtime_1.jsx)(SubEntertainment, { useRef: (0, react_2.useRef)(null), domain: domain, routingElement: routingElement, className: "" }), (0, jsx_runtime_1.jsx)("h4", { children: t("learnAndHelp") }), (0, jsx_runtime_1.jsx)(SubLearn, { useRef: (0, react_2.useRef)(null), domain: domain, routingElement: routingElement, className: "" })] })] })] })] }));
+};
+exports.MobileNav = MobileNav;
+const Popup = ({ children, useRef, className = "rujira-header__popup sub-nav fw-400 p-2", }) => ((0, jsx_runtime_1.jsx)(react_1.motion.div, { ref: useRef, className: className, initial: { opacity: 0, marginTop: -4 }, animate: { opacity: 1, marginTop: 0 }, exit: { opacity: 0, marginTop: -4 }, children: children }));
+const SubTrade = ({ domain, routingElement, useRef, className }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "swap", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Swap, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("tokenSwap") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("tokenSwapDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "trade", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Chart, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("spotTrading") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("spotTradingDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "/perps/trade", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.ChartUpDown, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("perps") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("perpsDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "index", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.PieChart, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("index") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("indexDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "options", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.ChartUp, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("options") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("optionsDesc") })] })] })] }) }));
+};
+const SubEarn = ({ domain, routingElement, useRef, className }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "strategies/staking/RUJI", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Stake, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("stake") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("stakeDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "strategies", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Building, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("strategies") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("strategiesDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "liquidate", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Gavel, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("liquidate") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("liquidateDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "launchpad", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Seedling, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("launchpad") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("launchpadDesc") })] })] })] }) }));
+};
+const SubBorrow = ({ domain, routingElement, useRef, className }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "borrow", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.MoneyTransfer, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("borrowMenu") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("borrowDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "mint", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Deposit, { className: "color-grey h-a w-3 block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("mintStablecoin") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("mintStablecoinDesc") })] })] })] }) }));
+};
+const SubUtilities = ({ domain, routingElement, useRef, className, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)("a", { href: "https://ai.autorujira.app/", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Terminal, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600", children: [t("rujiAi"), (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("rujiAiDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "dashboard", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.ChartMixed, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("analytics") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("analyticsDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "buy", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.CreditCard, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("buyCrypto") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("buyCryptoDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://daodao.zone", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Users, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("daodao"), " ", (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("daodaoDesc") })] })] })] }) }));
+};
+const SubEntertainment = ({ domain, routingElement, useRef, className, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "leaderboard", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Trophy, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("leagues") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("leaguesDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "games", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Gamepad, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("games") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("gamesDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "predict", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.ChartUser, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("predict") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("predictDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "omniverse", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Nodes, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("omniverse") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("omniverseDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "nfts", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.NFT, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("collections") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("collectionsDesc") })] })] })] }) }));
+};
+const SubLearn = ({ domain, routingElement, useRef, className }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "getstarted", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Graduate, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("getStarted") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("getStartedDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "ecosystem", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Earth, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("ecosystem") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("ecosystemDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "education", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Book, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("education") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("educationDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.rujira.network/", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Code, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("documentation"), " ", (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("documentationDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: " https://docs.rujira.network/developers/getting-started", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Terminal, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("developers"), (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("developersDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, domain: domain, to: "support", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Support, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("support") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("supportDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://medium.com/rujiranetwork", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Medium, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("articles"), " ", (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("articlesDesc") })] })] })] }) }));
+};

package/lib/cjs/components/header/Pending.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PendingDeposits = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const clsx_1 = require("clsx");
+const rujira_js_1 = require("rujira.js");
+const alert_gif_1 = require("../../assets/images/alert.gif");
+const alert_png_1 = require("../../assets/images/alert.png");
+const helpers_1 = require("../../helpers");
+const Icons_1 = require("../icons/Icons");
+const NetworkIcon_1 = require("../icons/NetworkIcon");
+const PendingDeposits = ({ deposits, dismissDeposit, clearAll, }) => {
+    const [showMenu, setShowMenu] = (0, react_2.useState)(false);
+    if (!deposits.length)
+        return null;
+    const isAlert = !!deposits.find((x) => x.status === "succeeded");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)({
+            "rujira-header__pending": true,
+            "rujira-header__alert": isAlert,
+        }), onMouseOver: () => setShowMenu(true), onMouseLeave: () => setShowMenu(false), children: [(0, jsx_runtime_1.jsx)("img", { src: isAlert ? alert_gif_1.default : alert_png_1.default, alt: "Pending transactions" }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showMenu && ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { className: "rujira-header__popup sub-nav fw-400 px-2 py-1.5", initial: { opacity: 0, marginTop: -4 }, animate: { opacity: 1, marginTop: 0 }, exit: { opacity: 0, marginTop: -4 }, children: [deposits.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-right mb-1.5", children: (0, jsx_runtime_1.jsx)("a", { className: "tag tag--md hover-white", onClick: clearAll, children: "clear all" }) })), deposits.sort(sorter).map((x) => ((0, jsx_runtime_1.jsx)(Deposit, { deposit: x, dismiss: () => dismissDeposit(x.hash) }, x.hash)))] })) })] }));
+};
+exports.PendingDeposits = PendingDeposits;
+const Deposit = ({ deposit, dismiss, }) => {
+    const { hash, status, network, timestamp, message } = deposit;
+    const [elapsed, setElapsed] = (0, react_2.useState)((new Date().getTime() - timestamp.getTime()) / 1000);
+    (0, react_2.useEffect)(() => {
+        const int = setInterval(() => {
+            setElapsed((new Date().getTime() - timestamp.getTime()) / 1000);
+        }, 1000);
+        return () => clearInterval(int);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex rujira-header__pending-tx mb-2", children: [(0, jsx_runtime_1.jsx)(NetworkIcon_1.NetworkIcon, { network: network, className: "w-3 h-3 mr-1" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex dir-c grow", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex", children: [(0, jsx_runtime_1.jsxs)("div", { className: "fs-14 condensed color-white", children: [(0, helpers_1.nFormatter)(deposit.coin.amount, 6, 8), " ", deposit.coin.symbol] }), (0, jsx_runtime_1.jsxs)("div", { className: "ar flex", children: [status === "pending" && ((0, jsx_runtime_1.jsx)("div", { className: "fs-12 condensed color-grey mr-2 wrap-reset", children: (0, jsx_runtime_1.jsx)("span", { className: "color-white", children: elapsed < 60
+                                                ? `${elapsed}s`
+                                                : elapsed < 3600
+                                                    ? `${Math.floor(elapsed / 60)}m ${Math.floor(elapsed % 60)}s`
+                                                    : elapsed < 36000
+                                                        ? `${Math.floor(elapsed / 3600)}h ${Math.floor((elapsed % 3600) / 60)}m ${Math.floor(elapsed % 60)}s`
+                                                        : "> 10h" }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)({
+                                            "tag tag--sm": true,
+                                            "tag--orange": status === "pending",
+                                            "tag--teal": status === "succeeded",
+                                            "tag--red": ["refunded", "failed"].includes(status),
+                                        }), children: [(0, jsx_runtime_1.jsx)("b", {}), " ", status] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex mt-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "fs-13 condensed color-grey no-underline mr-3", children: [timestamp.toLocaleTimeString(), " ", timestamp.toLocaleDateString()] }), (0, jsx_runtime_1.jsxs)("a", { href: (0, rujira_js_1.networkTxLink)({ network, txHash: hash }), target: "_blank", className: "fs-13 condensed color-grey no-underline hover-white ar", children: [hash.slice(0, 4), "...", hash.slice(-6)] })] }), message && ((0, jsx_runtime_1.jsx)("div", { className: "flex mt-0.5", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-13 condensed color-orange no-underline mr-3", children: message }) }))] }), status !== "pending" && ((0, jsx_runtime_1.jsx)("button", { className: "transparent ml-1.5 mr-0 color-grey hover-white pointer", onClick: dismiss, children: (0, jsx_runtime_1.jsx)(Icons_1.Xmark, { className: "w-2 h-2" }) }))] }));
+};
+const sorter = (a, b) => b.timestamp.getTime() - a.timestamp.getTime();

package/lib/cjs/components/header/QuickLauncher.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickLauncher = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const i18n_1 = require("../../i18n");
+const Icons_1 = require("../icons/Icons");
+const ResolveLink_1 = require("./ResolveLink");
+const QuickLauncher = ({ domain, routingElement, }) => {
+    const { t } = (0, i18n_1.useTranslation)("header");
+    const [showMenu, setShowMenu] = (0, react_2.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rujira-header__quick", onMouseOver: () => setShowMenu(true), onMouseOut: () => setShowMenu(false), children: [(0, jsx_runtime_1.jsx)(Icons_1.Grid, {}), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: showMenu && ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { className: "rujira-header__popup sub-nav fw-400 px-2 py-1.5", initial: { opacity: 0, marginTop: -4 }, animate: { opacity: 1, marginTop: 0 }, exit: { opacity: 0, marginTop: -4 }, children: [(0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "buy", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("buyCrypto") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "swap", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("tokenSwap") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "trade", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("spotTrading") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "options", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("options") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "/perps", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("perps") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "strategies/staking/RUJI", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("stake") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "lp", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("liquidityPools") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "money-market", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("lendAndBorrow") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "liquidate", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("liquidate") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "ventures", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("ventures") }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { domain: domain, as: routingElement, to: "nfts", children: (0, jsx_runtime_1.jsx)("span", { className: "fs-12 fw-500", children: t("collections") }) })] })) })] }));
+};
+exports.QuickLauncher = QuickLauncher;

package/lib/cjs/components/header/ResolveLink.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResolveLink = exports.UnwrappedAnyComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const fixedForwardRef = react_1.forwardRef;
+const UnwrappedAnyComponent = (props, ref) => {
+    const { as: Comp = "a", children, domain, ...rest } = props;
+    if (!domain ||
+        window.location.hostname === "rujira.network" ||
+        domain === "") {
+        return ((0, jsx_runtime_1.jsx)(Comp, { ...rest, ref: ref, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)("a", { href: props.to || props.href, ...rest, children: children }));
+};
+exports.UnwrappedAnyComponent = UnwrappedAnyComponent;
+exports.ResolveLink = fixedForwardRef(exports.UnwrappedAnyComponent);