rujira.ui 0.1.0

package/lib/esm/src/components/footer/Footer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { RujiraLogo } from "../logos/RujiraLogo";
+import { Discord, Telegram, X } from "../icons/Icons";
+import { ResolveLink } from "../header/ResolveLink";
+export const Footer = ({ className, domain = "", routerElement, }) => {
+    return (_jsx("div", { className: clsx({
+            rujira__footer: true,
+            [`${className}`]: className,
+        }), children: _jsxs("div", { className: "rujira__inner", children: [_jsxs("div", { className: "flex wrap pad-tight", children: [_jsxs("div", { className: "col-12 col-xs-6 col-lg-3", children: [_jsx("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Everyone" }), _jsxs("nav", { className: "flex dir-c", children: [_jsx(ResolveLink, { as: routerElement, domain: domain, to: "/migrate", children: "Migrate" }), _jsx("a", { href: "https://docs.rujira.network", target: "_blank", children: "Documentation" }), _jsx("a", { href: "https://docs.rujira.network/resources/branding", target: "_blank", children: "Brand Assets" }), _jsx("a", { href: "https://runescan.io", target: "_blank", children: "Blockchain Explorer" })] })] }), _jsxs("div", { className: "col-12 col-xs-6 col-lg-3 mt-3 mt-xs-0", children: [_jsx("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Developers" }), _jsxs("nav", { className: "flex dir-c", children: [_jsx(ResolveLink, { as: routerElement, domain: domain, to: "/developers", children: "Getting Started" }), _jsx(ResolveLink, { as: routerElement, domain: domain, to: "/developer-tools", children: "Developer Tools" }), _jsx("a", { href: "https://docs.rujira.network/developers/getting-started", target: "_blank", children: "Documentation" }), _jsx("a", { href: "https://gitlab.com/thorchain/rujira", target: "_blank", children: "GitLab" }), _jsx("a", { href: "https://gitlab.com/thorchain/rujira-ui", target: "_blank", children: "Rujira.ui" })] })] }), _jsxs("div", { className: "col-12 col-xs-6 col-lg-3 mt-3 mt-lg-0", children: [_jsx("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Ecosystem" }), _jsxs("nav", { className: "flex dir-c", children: [_jsx(ResolveLink, { as: routerElement, domain: domain, to: "/ecosystem", children: "Built on Rujira" }), _jsx("a", { href: "https://station.rujira.network/", target: "_blank", children: "Station Wallet" })] })] }), _jsxs("div", { className: "col-12 col-xs-6 col-lg-3 mt-3 mt-lg-0", children: [_jsx("h4", { className: "fs-14 lh-18 fw-600 color-white", children: "Community" }), _jsxs("nav", { className: "flex wrap mt-1", children: [_jsx("a", { href: "https://x.com/RujiraNetwork", target: "_blank", className: "block px-0.5", children: _jsx(X, { className: "h-3 w-a" }) }), _jsx("a", { href: "https://t.me/team_kujira", target: "_blank", className: "block px-0.5", children: _jsx(Telegram, { className: "h-3 w-a" }) }), _jsx("a", { href: "https://discord.gg/ddWCkJjD4u", target: "_blank", className: "block px-0.5", children: _jsx(Discord, { className: "h-3 w-a" }) })] })] })] }), _jsxs("div", { className: "mt-4 flex wrap ai-c", children: [_jsx(RujiraLogo, { animate: true, textColor: "#fff", className: "block w-a h-8 mr-3" }), _jsx("p", { className: "fs-12 lh-16 fw-500 color-grey my-2", children: "All Rujira brand is in public domain. No rights reserved." })] })] }) }));
+};

package/lib/esm/src/components/header/Accounts.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { AnimatePresence, motion, useAnimate } from "motion/react";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { Network, networkLabel, Provider, } from "rujira.js";
+import { useGlobalModalContext } from "../../context/GlobalModal";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
+import { i18n } from "../../i18n";
+import { AngleDown, CircleUser, Deposit, LinkConnect, LinkDisconnect, Plus, Users, } from "../icons/Icons";
+import { Ctrl, Keplr, KeplrSimple, Leap, LeapSimple, MetaMask, MetaMaskSimple, Sonar, SonarSimple, StationSimple, StationText, Vultisig, VultisigSimple, } from "../icons/Wallets";
+import { Fiat } from "../numbers/Fiat";
+import { ResolveLink } from "./ResolveLink";
+import { Button, Input, NetworkIcons } from "../..";
+let referral = localStorage.getItem("referral");
+export const Accounts = ({ provider, routingElement }) => {
+    const { accounts, disconnectAll, selected } = provider;
+    const [hoverBalance, setHoverBalance] = useState(false);
+    const [showBlur, setShowBlur] = useState(false);
+    const { hideModal, showModal } = useGlobalModalContext();
+    const ConnectModal = () => {
+        showModal({
+            title: "Connect Your Account",
+            backgroundClose: true,
+            children: _jsx(Wallets, { modalLayout: true, provider: provider }),
+        });
+    };
+    const ReferralModal = () => {
+        showModal({
+            title: "Refer And Earn",
+            backgroundClose: true,
+            children: (_jsxs(_Fragment, { children: [_jsx("p", { className: "p balance", children: "Share your unique referral link and earn affiliate fees on trades, swaps, and all DeFi interactions." }), _jsx("div", { className: "pointer", onClick: () => {
+                            toast.success("referral copied to clipboard");
+                            navigator.clipboard.writeText(`https://rujira.network/?ref=${referral}`);
+                        }, children: _jsx(Input, { value: `https://rujira.network/?ref=${referral}`, readOnly: true, label: "Click to copy" }) }), _jsx("p", { className: "fs-12 color-grey mt-2", children: "This referral link is valid until ..." }), _jsx("div", { className: "modal__footer mt-4 px-3 py-2 text-right", children: _jsx(Button, { label: "Close", onClick: hideModal }) })] })),
+        });
+    };
+    const grouped = accounts.reduce((a, v) => {
+        const current = a.find((x) => x.primary.provider === v.provider);
+        return [
+            ...a.filter((x) => x.primary.provider !== v.provider),
+            current
+                ? // If this is the currently selected provider, the selected account needs to be primary
+                    selected?.provider === v.provider && selected.network === v.network
+                        ? { primary: v, other: [...current.other, current.primary] }
+                        : { ...current, other: [...current.other, v] }
+                : { primary: v, other: [] },
+        ];
+    }, []);
+    return (_jsx(_Fragment, { children: accounts.length === 0 ? (_jsx(ConnectAnimation, { children: _jsx(Wallets, { provider: provider, routingElement: routingElement }) })) : (_jsxs(MyAccount, { routingElement: routingElement, address: accounts[0].address, onHide: () => setShowBlur(false), children: [_jsxs(ResolveLink, { as: routingElement, to: "/portfolio", className: "balance", onMouseEnter: () => setHoverBalance(true), onMouseLeave: () => setHoverBalance(false), children: [_jsx(Fiat, { amount: 0n, symbol: "~$", padSymbol: false, className: "color-white fs-26 condensed" }), _jsx("p", { className: "fs-12 condensed color-grey mt-0.5", children: !hoverBalance
+                                ? i18n.t("Approximate value for selected account")
+                                : i18n.t("View portfolio") })] }), grouped.map((g) => (_jsx(Address, { provider: provider, account: g.primary, other: g.other, showBlur: setShowBlur, selected: !!selected && selected.provider === g.primary.provider }, g.primary.provider))), _jsx("hr", { className: "hr hr--dark mt-1.5 mb-0" }), _jsxs("nav", { className: "actions", children: [referral && (_jsxs("button", { className: "action transparent", onClick: ReferralModal, children: [_jsx(Users, {}), _jsx("span", { children: "Referral Link" })] })), _jsxs("button", { className: "action transparent", onClick: ConnectModal, children: [_jsx(Plus, {}), _jsx("span", { children: "Connect another account" })] }), _jsxs("button", { className: "action transparent", children: [_jsx(Deposit, {}), _jsx("span", { children: "Deposit" })] }), _jsxs("button", { className: "action transparent", onClick: disconnectAll, children: [_jsx(LinkDisconnect, {}), _jsx("span", { children: "Disconnect all" })] })] }), showBlur && _jsx("div", { className: "blur" })] })) }));
+};
+const ConnectAnimation = ({ children }) => {
+    const [show, setShow] = useState(false);
+    const [scope, animate] = useAnimate();
+    useEffect(() => {
+        if (show) {
+            animate(scope.current, { width: 98, color: "#ffffff" });
+        }
+        else {
+            animate(scope.current, {
+                width: scope.current.clientHeight,
+                color: "#161721",
+            });
+        }
+    }, [show]);
+    return (_jsxs("div", { id: "connect-wallet", className: "relative py-q1", onMouseOver: () => setShow(true), onMouseOut: () => setShow(false), children: [_jsxs(motion.a, { className: "rujira-header__connect", ref: scope, initial: { width: 36 }, children: [_jsx(AnimatePresence, { children: show && (_jsx(motion.div, { className: "fs-14 fw-500 condensed", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: i18n.t("Connect") })) }), _jsx(LinkConnect, {})] }), _jsx(AnimatePresence, { children: show && (_jsxs(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: [_jsx(i18n.p, { className: "color-white", children: "Connect Your Account" }), _jsx(i18n.small, { className: "color-grey mb-1", children: "Create or connect an existing account" }), children] })) })] }));
+};
+const Wallets = ({ modalLayout = false, provider, routingElement }) => {
+    const { connect } = provider;
+    const { hideModal } = useGlobalModalContext();
+    return (_jsxs("div", { className: "rujira-header__wallets", children: [_jsx("div", { className: clsx({
+                    "flex w-full ai-c jc-c wrap": true,
+                    "mb-1": modalLayout,
+                }), children: _jsx("button", { id: "connect-station", className: clsx({
+                        "transparent block pointer big": true,
+                        //"desaturate opacity-10": !window.station,
+                    }), 
+                    //disabled={!window.station}
+                    onClick: () => {
+                        connect(Provider.Station).then(hideModal);
+                    }, children: _jsx(StationText, {}) }) }), _jsxs("div", { className: "flex w-full ai-c jc-c wrap", children: [_jsx("button", { id: "connect-vultisig", className: clsx({
+                            "transparent block pointer": true,
+                            medium: modalLayout,
+                            //"desaturate opacity-10": !window.vultisig,
+                        }), 
+                        //disabled={!window.vultisig}
+                        onClick: () => {
+                            connect(Provider.Vultisig).then(hideModal);
+                        }, children: _jsx(Vultisig, {}) }), _jsx("button", { className: clsx({
+                            "transparent block pointer": true,
+                            medium: modalLayout,
+                        }), onClick: () => {
+                            connect(Provider.Sonar).then(hideModal);
+                        }, children: _jsx(Sonar, {}) }), _jsx("button", { id: "connect-keplr", className: clsx({
+                            "transparent block pointer": true,
+                            medium: modalLayout,
+                            //"desaturate opacity-10": !window.keplr,
+                        }), 
+                        //disabled={!window.keplr}
+                        onClick: () => {
+                            connect(Provider.Keplr).then(hideModal);
+                        }, children: _jsx(Keplr, {}) }), _jsx("button", { id: "connect-leap", className: clsx({
+                            "transparent block pointer": true,
+                            medium: modalLayout,
+                            // "desaturate opacity-10": !window.leap,
+                        }), 
+                        //disabled={!window.leap}
+                        onClick: () => {
+                            connect(Provider.Leap).then(hideModal);
+                        }, children: _jsx(Leap, {}) }), !modalLayout && _jsx("div", { className: "break" }), _jsx("button", { id: "connect-ctrl", className: clsx({
+                            "transparent block pointer": true,
+                            medium: modalLayout,
+                            //"desaturate opacity-10": !window.xfi,
+                        }), 
+                        //disabled={!window.xfi}
+                        onClick: () => {
+                            connect(Provider.Ctrl).then(hideModal);
+                        }, children: _jsx(Ctrl, { className: "color-white" }) }), _jsx("button", { id: "connect-mm", className: clsx({
+                            "transparent block pointer": true,
+                            medium: modalLayout,
+                        }), onClick: () => {
+                            connect(Provider.Metamask).then(hideModal);
+                        }, children: _jsx(MetaMask, {}) })] }), _jsx("hr", { className: clsx({
+                    hr: true,
+                    "my-1.5": !modalLayout,
+                    "my-2": modalLayout,
+                }) }), _jsx(ResolveLink, { as: routingElement, to: "/ecosystem/wallets", children: "Need help deciding?" })] }));
+};
+const MyAccount = ({ address, children, onHide, routingElement, }) => {
+    const [show, setShow] = useState(false);
+    const [avatar] = useLocalStorage("avatar:" + address, "");
+    useEffect(() => {
+        onHide();
+    }, [show]);
+    return (_jsxs("div", { className: "relative py-q1", onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [_jsx(ResolveLink, { as: routingElement, path: "/portfolio", className: "rujira-header__pfp", style: avatar !== ""
+                    ? {
+                        backgroundImage: `url(${avatar})`,
+                    }
+                    : {}, children: avatar === "" && _jsx(CircleUser, {}) }), _jsx(AnimatePresence, { children: show && (_jsx(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 ProviderIcon = ({ provider, selected, }) => {
+    switch (provider) {
+        case Provider.Keplr:
+            return selected ? (_jsx(Keplr, { className: "address__wallet" })) : (_jsx(KeplrSimple, { className: "address__wallet" }));
+        case Provider.Leap:
+            return selected ? (_jsx(Leap, { className: "address__wallet" })) : (_jsx(LeapSimple, { className: "address__wallet" }));
+        case Provider.Metamask:
+            return selected ? (_jsx(MetaMask, { className: "address__wallet" })) : (_jsx(MetaMaskSimple, { className: "address__wallet" }));
+        case Provider.Sonar:
+            return (_jsx(SonarSimple, { className: clsx({ address__wallet: true, "color-white": selected }) }));
+        case Provider.Station:
+            return _jsx(StationSimple, { className: "address__wallet", gradient: selected });
+        case Provider.Vultisig:
+            return selected ? (_jsx(Vultisig, { className: "address__wallet" })) : (_jsx(VultisigSimple, { className: "address__wallet" }));
+        case Provider.Ctrl:
+            return (_jsx(Ctrl, { className: clsx({ address__wallet: true, "color-white": selected }) }));
+    }
+};
+export const NetworkIcon = ({ network, className, }) => {
+    switch (network) {
+        case Network.Avalanche:
+            return _jsx(NetworkIcons.Avalanche, { className: className });
+        case Network.Bitcoin:
+            return _jsx(NetworkIcons.Bitcoin, { className: className });
+        case Network.BitcoinCash:
+            return _jsx(NetworkIcons.BitcoinCash, { className: className });
+        case Network.Bsc:
+            return _jsx(NetworkIcons.BinanceSmartChain, { className: className });
+        case Network.Dogecoin:
+            return _jsx(NetworkIcons.Doge, { className: className });
+        case Network.Ethereum:
+            return _jsx(NetworkIcons.Ethereum, { className: className });
+        case Network.Gaia:
+            return _jsx(NetworkIcons.Cosmos, { className: className });
+        case Network.Kujira:
+            return _jsx(NetworkIcons.Kujira, { className: className });
+        case Network.Litecoin:
+            return _jsx(NetworkIcons.Litecoin, { className: className });
+        case Network.Thorchain:
+            return _jsx(NetworkIcons.Thorchain, { className: className });
+    }
+};
+const Address = ({ account, showBlur, selected, other, provider }) => {
+    const [showNetworkSelect, setShowNetworkSelect] = useState(false);
+    const { select, disconnect } = provider;
+    const networks = [account.network, ...other.map((x) => x.network)].sort((a, b) => a.localeCompare(b));
+    return (_jsxs("div", { className: clsx({
+            "flex ai-c px-1 address": true,
+            "address--selected": selected,
+        }), children: [_jsx(ProviderIcon, { provider: account.provider, selected: selected }), _jsxs("p", { className: "address__address pointer", onClick: () => {
+                    if (selected) {
+                        toast.success("address copied to clipboard");
+                        navigator.clipboard.writeText(account.address);
+                    }
+                    else {
+                        select(account);
+                    }
+                }, children: [account.address.substring(0, 10), "...", account.address.slice(-12)] }), selected && (_jsxs("div", { className: "relative ml-a mr-1", children: [_jsxs("button", { className: "address__network transparent", onClick: () => {
+                            setShowNetworkSelect(true);
+                            showBlur(true);
+                        }, children: [_jsx(NetworkIcon, { network: account.network }), _jsx(AngleDown, {})] }), showNetworkSelect && (_jsx("div", { className: "address__network-select", children: networks.map((a) => (_jsxs("button", { className: clsx({
+                                transparent: true,
+                                selected: account.network === a,
+                            }), onClick: () => {
+                                select({ network: a, provider: account.provider });
+                                showBlur(false);
+                                setShowNetworkSelect(false);
+                            }, children: [_jsx(NetworkIcon, { network: a }), _jsx("span", { children: networkLabel(a) })] }, a))) }))] })), _jsx(LinkDisconnect, { className: "address__disconnect", onClick: () => disconnect(account.provider) })] }));
+};

package/lib/esm/src/components/header/Header.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { useWindowSize } from "../../hooks/useWindowSize";
+import { i18n } from "../../i18n";
+import { AngleDown, Book, Building, Chart, ChartUp, ChartUpDown, Earth, External, Gavel, MoneyTransfer, NFT, PieChart, Seedling, Stake, Swap, Terminal, } from "../icons/Icons";
+import { RujiraLogo } from "../logos/RujiraLogo";
+import { Accounts } from "./Accounts";
+import { QuickLauncher } from "./QuickLauncher";
+import { ResolveLink } from "./ResolveLink";
+export * from "./Accounts";
+export * from "./QuickLauncher";
+export const Header = ({ accountProvider, className, domain = "", routingElement, }) => {
+    return (_jsxs(Container, { className: className, children: [_jsx(ResolveLink, { as: routingElement, to: "/", children: _jsx(Logo, {}) }), _jsx(MobileNav, { domain: domain, routingElement: routingElement }), _jsx(MainNav, { domain: domain, accountProvider: accountProvider, routingElement: routingElement }), _jsxs("div", { className: "ml-a mr-0 flex ai-c", children: [_jsx(QuickLauncher, { domain: domain || "", routingElement: routingElement }), _jsx(Accounts, { provider: accountProvider, routingElement: routingElement })] })] }));
+};
+export const Container = ({ children, className, }) => {
+    return (_jsx("div", { className: clsx({
+            "rujira-header": true,
+            [`${className}`]: className,
+        }), children: children }));
+};
+export const Logo = () => {
+    const size = useWindowSize();
+    return (_jsx(RujiraLogo, { textColor: "#fff", className: "rujira-header__logo", showText: size.width >= 1024, animate: true }));
+};
+export const MainNav = ({ domain, accountProvider, routingElement }) => {
+    const { accounts } = accountProvider;
+    const [showTrade, setShowTrade] = useState(false);
+    const [showEarn, setShowEarn] = useState(false);
+    const [showMore, setShowMore] = useState(false);
+    const [showDiscover, setShowDiscover] = useState(false);
+    useEffect(() => {
+        if (showTrade || showMore || showDiscover || showEarn) {
+            const popup = document.querySelector(".rujira-header__popup");
+            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, showMore, showDiscover, showEarn]);
+    return (_jsxs("nav", { className: "rujira-header__nav", children: [accounts.length > 0 && (_jsx(ResolveLink, { as: routingElement, domain: domain, to: "/portfolio", children: i18n.t("Portfolio") })), _jsxs("span", { onMouseOver: () => setShowTrade(true), onMouseOut: () => setShowTrade(false), children: [i18n.t("Trade"), _jsx(AngleDown, {}), _jsx(AnimatePresence, { children: showTrade && (_jsx(SubTrade, { domain: domain, routingElement: routingElement })) })] }), _jsxs("span", { onMouseOver: () => setShowEarn(true), onMouseOut: () => setShowEarn(false), children: [i18n.t("Earn"), _jsx(AngleDown, {}), _jsx(AnimatePresence, { children: showEarn && (_jsx(SubEarn, { domain: domain, routingElement: routingElement })) })] }), _jsxs("span", { onMouseOver: () => setShowMore(true), onMouseOut: () => setShowMore(false), children: [i18n.t("Market"), _jsx(AngleDown, {}), _jsx(AnimatePresence, { children: showMore && (_jsx(SubMore, { domain: domain, routingElement: routingElement })) })] }), _jsxs("span", { onMouseOver: () => setShowDiscover(true), onMouseOut: () => setShowDiscover(false), children: [i18n.t("Discover"), _jsx(AngleDown, {}), _jsx(AnimatePresence, { children: showDiscover && (_jsx(SubDiscover, { domain: domain, routingElement: routingElement })) })] })] }));
+};
+export const MobileNav = ({ domain, routingElement, }) => {
+    const [showMobile, setShowMobile] = useState(false);
+    useEffect(() => {
+        if (showMobile) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "auto";
+        }
+    }, [showMobile]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "rujira-header__hamburger", onClick: () => setShowMobile(true), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: _jsx("path", { d: "M0 64H448v48H0V64zM0 224H448v48H0V224zM448 384v48H0V384H448z", fill: "currentColor" }) }) }), _jsx(AnimatePresence, { children: showMobile && (_jsxs(motion.nav, { className: "rujira-header__mobile-nav", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [_jsx("button", { className: "rujira-header__mobile-close", onClick: () => setShowMobile(false), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", children: _jsx("path", { fill: "currentColor", d: "M345 137l17-17L328 86.1l-17 17-119 119L73 103l-17-17L22.1 120l17 17 119 119L39 375l-17 17L56 425.9l17-17 119-119L311 409l17 17L361.9 392l-17-17-119-119L345 137z" }) }) }), _jsx(MobileMenu, { domain: domain, routingElement: routingElement, setShowMobile: setShowMobile })] })) })] }));
+};
+const Popup = ({ children }) => (_jsx(motion.div, { className: "rujira-header__popup sub-nav fw-400 p-2", initial: { opacity: 0, marginTop: -4 }, animate: { opacity: 1, marginTop: 0 }, exit: { opacity: 0, marginTop: -4 }, children: children }));
+const SubTrade = ({ domain, routingElement }) => (_jsx(Popup, { children: _jsxs("div", { className: "row wrap pad w-60 mt-1", children: [_jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/swap", className: "col-6 flex", children: [_jsx(Swap, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Token Swap" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Swap tokens at the best available rate" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/trade", className: "col-6 flex", children: [_jsx(Chart, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Spot Trading" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Buy and sell on the spot market without slippage" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/options", className: "col-6 flex mt-3", children: [_jsx(ChartUp, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Options" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Designed to simplify options trading" })] })] }), _jsxs(ResolveLink, { as: "a", href: "http://perps.rujira.network/perps", target: "_blank", className: "col-6 flex mt-3", children: [_jsx(ChartUpDown, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Perps" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Buy and sell perpetual futures contracts" })] })] })] }) }));
+const SubEarn = ({ domain, routingElement }) => (_jsx(Popup, { children: _jsxs("div", { className: "row wrap pad w-60 mt-1", children: [_jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/stake", className: "col-6 flex ai-s", children: [_jsx(Stake, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Stake" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Earn a percentage of fees and secure the network" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/provide", className: "col-6 flex ai-s", children: [_jsx(Building, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Liquidity Pools" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Multi-strategy automated market maker pools" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/money-market", className: "col-6 flex mt-3 ai-s", children: [_jsx(MoneyTransfer, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Lend & Borrow" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Earn yield by lending your tokens to others" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/liquidate", className: "col-6 flex mt-3", children: [_jsx(Gavel, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Liquidate" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Beat the bots and bid on liquidated collateral" })] })] })] }) }));
+const SubMore = ({ domain, routingElement }) => (_jsx(Popup, { children: _jsxs("div", { className: "row wrap pad w-60 mt-1", children: [_jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/ventures", className: "col-6 flex ai-s", children: [_jsx(Seedling, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600 flex ai-c", children: "Ventures" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Early access to promising protocols & opportunities" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/nfts", className: "col-6 flex ai-s", children: [_jsx(NFT, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600 flex ai-c", children: "Collections (Gojira)" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "A sustainable NFT marketplace" })] })] })] }) }));
+const SubDiscover = ({ domain, routingElement }) => (_jsx(Popup, { children: _jsxs("div", { className: "row wrap pad w-60 mt-1", children: [_jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/ecosystem", className: "col-6 flex ai-s", children: [_jsx(Earth, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Ecosystem" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Protocols, products and services calling Rujira their home" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/dashboard", className: "col-6 flex ai-s", children: [_jsx(PieChart, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Token Analytics" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Discover RUJI tokenomics and analytics" })] })] }), _jsxs(ResolveLink, { as: routingElement, domain: domain, to: "/developers", className: "col-6 flex mt-3", children: [_jsx(Terminal, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Developers" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Rujira is built for builders, get started here." })] })] }), _jsxs("a", { href: "https://docs.rujira.network/", target: "_blank", className: "col-6 flex mt-3 ai-s", children: [_jsx(Book, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsxs(i18n.h4, { className: "fs-14 fw-600 flex ai-c", children: ["Documentation ", _jsx(External, { className: "h-1.5 w-a ml-1" })] }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Dive deep into the Rujira network" })] })] })] }) }));
+const MobileMenu = ({ domain, routingElement, setShowMobile }) => (_jsxs(_Fragment, { children: [_jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/swap", className: "mt-3 flex", children: [_jsx(Swap, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Token Swap" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Swap tokens at the best available rate" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/trade", className: "mt-3 flex", children: [_jsx(Chart, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Spot Trading" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Buy and sell on the spot market without slippage" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/options", className: "flex mt-3", children: [_jsx(ChartUp, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Options" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Designed to simplify options trading" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: "a", href: "http://perps.rujira.network/perps", target: "_blank", className: "mt-3 flex", children: [_jsx(ChartUpDown, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Futures" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Buy and sell perpetual futures contracts" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/stake", className: "mt-3 flex ai-s", children: [_jsx(Stake, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Stake" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Earn a percentage of fees and secure the network" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/provide", className: "flex mt-3 ai-s", children: [_jsx(Building, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Liquidity Pools" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Multi-strategy automated market maker pools" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/money-market", className: "flex mt-3 ai-s", children: [_jsx(MoneyTransfer, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Lend & Borrow" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Earn yield by lending your tokens to others" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/liquidate", className: "flex mt-3", children: [_jsx(Gavel, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Liquidate" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Beat the bots and bid on liquidated collateral" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/ventures", className: "flex mt-3 ai-s", children: [_jsx(Seedling, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600 flex ai-c", children: "Ventures" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Early access to promising protocols and opportunities" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/nfts", className: "flex mt-3 ai-s", children: [_jsx(NFT, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600 flex ai-c", children: "Collections (Gojira)" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "A sustainable NFT marketplace" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/ecosystem", className: "mt-3 flex ai-s", children: [_jsx(Earth, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Ecosystem" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Protocols, products and services calling Rujira their home" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/dashboard", className: "mt-3 flex ai-s", children: [_jsx(PieChart, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Token Analytics" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Discover RUJI tokenomics and analytics" })] })] }), _jsxs(ResolveLink, { onClick: () => setShowMobile && setShowMobile(false), as: routingElement, domain: domain, to: "/developers", className: "flex mt-3", children: [_jsx(Terminal, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Developers" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Rujira is built for builders, get started here." })] })] }), _jsxs("a", { href: "https://docs.rujira.network/", target: "_blank", className: "flex mt-3 ai-s", children: [_jsx(Book, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsxs("div", { children: [_jsx(i18n.h4, { className: "fs-14 fw-600", children: "Documentation" }), _jsx(i18n.p, { className: "fs-12 mt-0.5", children: "Dive deep into the Rujira network" })] })] })] }));

package/lib/esm/src/components/header/QuickLauncher.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { Grid } from "../icons/Icons";
+import { useState } from "react";
+import { ResolveLink } from "./ResolveLink";
+import { i18n } from "../../i18n";
+export const QuickLauncher = ({ domain, routingElement, }) => {
+    const [showMenu, setShowMenu] = useState(false);
+    return (_jsxs("div", { className: "rujira-header__quick", onMouseOver: () => setShowMenu(true), onMouseOut: () => setShowMenu(false), children: [_jsx(Grid, {}), _jsx(AnimatePresence, { children: showMenu && (_jsxs(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: [_jsx(ResolveLink, { domain: domain, as: routingElement, to: "/buy", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Buy Crypto" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/swap", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Token Swap" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/trade", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Spot Trading" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/options", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Options" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/perps", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Perps" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/stake", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Stake" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/lp", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Liquidity Pools" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/money-market", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Lend & Borrow" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/liquidate", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Liquidate" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/ventures", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Ventures" }) }), _jsx(ResolveLink, { domain: domain, as: routingElement, to: "/nfts", children: _jsx(i18n.span, { className: "fs-12 fw-500", children: "Collections" }) })] })) })] }));
+};

package/lib/esm/src/components/header/ResolveLink.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+const fixedForwardRef = forwardRef;
+export const UnwrappedAnyComponent = (props, ref) => {
+    const { as: Comp = "a", children, domain, ...rest } = props;
+    if (!domain ||
+        window.location.hostname === "rujira.network" ||
+        domain === "") {
+        return (_jsx(Comp, { ...rest, ref: ref, children: children }));
+    }
+    return (_jsx("a", { href: props.to || props.href, ...rest, children: children }));
+};
+export const ResolveLink = fixedForwardRef(UnwrappedAnyComponent);