rujira.ui 1.0.16 → 1.0.17

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

@@ -22,7 +22,7 @@ const footerSections = [
             {
                 kind: "internal",
                 label: "Automated Trading",
-                to: "/trade/BTC/USDC?orders=range&order=tracking&range=t",
+                to: "/trade/BTC/USDC?orders=range&order=tracking",
             },
             {
                 kind: "internal",

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

@@ -6,7 +6,6 @@ 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("../..");
@@ -19,7 +18,7 @@ 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");
+let referral = typeof window !== "undefined" ? localStorage.getItem("referral") : null;
 const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getValue, customActions, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
     const { accounts: allAccounts, disconnectAll, selected } = provider;
@@ -37,7 +36,7 @@ const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getValue, c
                         }, 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, wallets: wallets }) })) : ((0, jsx_runtime_1.jsxs)(MyAccount, { routingElement: routingElement, provider: provider, value: selected ? getValue(rujira_js_1.Account.fromAddress(selected.address)) : 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(rujira_js_1.Account.fromAddress(selected.address)), 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) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !accounts || accounts.length === 0 ? ((0, jsx_runtime_1.jsx)(ConnectAnimation, { routingElement: routingElement, children: (0, jsx_runtime_1.jsx)(exports.Wallets, { provider: provider, wallets: wallets, routingElement: routingElement }) })) : ((0, jsx_runtime_1.jsxs)(MyAccount, { routingElement: routingElement, provider: provider, value: selected ? getValue(rujira_js_1.Account.fromAddress(selected.address)) : 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(rujira_js_1.Account.fromAddress(selected.address)), 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");
@@ -48,19 +47,19 @@ const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getValue, c
                                             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.address === account.address.address &&
-                        selected.provider === account.provider }, `${account.address.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 &&
+                        selected.provider === account.provider }, `${account.address.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)(ResolveLink_1.ResolveLink, { as: routingElement, 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 ConnectAnimation = ({ children, routingElement }) => {
     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.jsxs)(react_router_dom_1.Link, { className: "flex dir-c action transparent", to: "connect", 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] })) })] }));
+    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.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, className: "flex dir-c action transparent", to: "connect", 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, wallets, }) => {
+const Wallets = ({ modalLayout = false, provider, wallets, routingElement, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
     const { connect, isAvailable } = provider;
     const { hideModal } = (0, GlobalModal_1.useGlobalModalContext)();
@@ -86,11 +85,11 @@ const Wallets = ({ modalLayout = false, provider, wallets, }) => {
                                     }
                                     x.provider && connect(x.provider).then(hideModal);
                                 }, children: x.icon }, x.label));
-                        }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: "/tou", className: "terms mb-1", children: "By connecting a wallet, you agree to Rujira's Terms of Use." }), (0, jsx_runtime_1.jsx)("hr", { className: (0, clsx_1.default)({
+                        }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routingElement, to: "/tou", className: "terms mb-1", children: "By connecting a wallet, you agree to Rujira's Terms of Use." }), (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)(react_router_dom_1.Link, { to: "ecosystem/wallets", onClick: hideModal, children: t("needHelpDeciding") })] }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: "wallet-tip", className: "tooltip" })] }));
+                        }) }), (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, }) => {

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

@@ -39,6 +39,13 @@ const Header = ({ accountProvider, className, domain = "", routingElement, walle
     const [scrollY, setScrollY] = (0, react_2.useState)(0);
     const { accounts } = accountProvider;
     const { showModal } = (0, GlobalModal_1.useGlobalModalContext)();
+    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, routingElement: routingElement }) })),
+        });
+    };
     (0, react_2.useEffect)(() => {
         const handleScroll = () => {
             setIsScrolled(window.scrollY > 56);
@@ -49,13 +56,6 @@ const Header = ({ accountProvider, className, domain = "", routingElement, walle
             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,
@@ -158,15 +158,19 @@ const MobileNav = ({ domain, routingElement, accountProvider, staticRoutes, }) =
         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);
+    (0, react_2.useEffect)(() => {
+        let url = location.href;
+        const handler = () => {
+            requestAnimationFrame(() => {
+                if (url !== location.href) {
+                    setShowDrawer(false);
+                    url = location.href;
+                }
+            });
+        };
+        document.body.addEventListener("click", handler, true);
+        return () => document.body.removeEventListener("click", handler, 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: "", staticRoutes: staticRoutes }), (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: "", staticRoutes: staticRoutes }), (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: "", staticRoutes: staticRoutes }), (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: "", staticRoutes: staticRoutes }), (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: "", staticRoutes: staticRoutes }), (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: "", staticRoutes: staticRoutes })] })] })] })] }));
 };
 exports.MobileNav = MobileNav;

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const fixedForwardRef = react_1.forwardRef;
 const UnwrappedAnyComponent = (props, ref) => {
     const { as: Comp = "a", children, domain, isStatic, ...rest } = props;
-    if (!isStatic && props.as !== "a") {
+    if (!isStatic && props.as && props.as !== "a") {
         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 }));

package/lib/cjs/components/logos/RujiraLogo.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RujiraLogo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const helpers_1 = require("../../helpers");
+const react_1 = require("react");
 const RujiraLogo = ({ textColor = "#fff", showText = true, animate = false, className, }) => {
-    const id = (0, helpers_1.uuidv4)();
+    const id = (0, react_1.useId)();
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${showText ? 3710 : 1000} 1000`, xmlns: "http://www.w3.org/2000/svg", className: className, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { x1: "97.12%", y1: "12.295%", x2: "15.952%", y2: "88.858%", id: id, children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#D615EB", offset: "0%" }), (0, jsx_runtime_1.jsx)("stop", { stopColor: "#8436F5", offset: "100%" })] }) }), (0, jsx_runtime_1.jsxs)("g", { fill: "none", fillRule: "nonzero", children: [!animate ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M109.713 718.57c64.466 183.188 203.797 276.949 417.99 281.283 214.195 4.334 357.082-87.26 428.663-274.782 71.581-187.522 55.091-346.445-49.47-476.768C802.337 117.981 666.289 37.628 498.753 7.246 331.216-23.136 208.376 42.026 130.23 202.73c-78.145 160.705-84.984 332.652-20.517 515.84Z", fillOpacity: ".45", fill: "#CE18EC" }), (0, jsx_runtime_1.jsx)("path", { d: "M938.285 742.674c-81.778 172.834-217.066 249.65-405.863 230.445C343.625 953.916 193.193 867.5 81.127 713.868-30.94 560.238-26.902 413.177 93.242 272.686c120.143-140.491 271.08-228.424 452.81-263.8C727.782-26.489 859.03 43.756 939.8 219.623c80.768 175.866 80.264 350.216-1.515 523.05Z", fillOpacity: ".45", fill: "#8535F4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { fill: "#CE18EC", fillOpacity: ".45", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "d", dur: "3897ms", repeatCount: "indefinite", values: "M908.65 772.515c-119.423 173.188-259.837 247.488-421.243 222.9C326 970.826 191.184 884.232 82.957 735.633-25.268 587.033-27.6 434.158 75.96 277.006 179.522 119.854 316.67 28.984 487.407 4.396c170.736-24.59 313.482 53.987 428.24 235.727 114.757 181.74 112.424 359.205-6.998 532.392Z;\n                M905.657 701.408C781.589 850.992 630.329 930.883 451.876 941.082c-178.453 10.199-308.47-64.593-390.048-224.376-81.579-159.782-82.428-320.415-2.55-481.897C139.159 73.326 270.874-4.865 454.426.234c183.552 5.1 335.662 85.84 456.33 242.224 120.67 156.383 118.97 309.366-5.098 458.95Z;\n                M938.285 742.674c-81.778 172.834-217.066 249.65-405.863 230.445C343.625 953.916 193.193 867.5 81.127 713.868-30.94 560.238-26.902 413.177 93.242 272.686c120.143-140.491 271.08-228.424 452.81-263.8C727.782-26.489 859.03 43.756 939.8 219.623c80.768 175.866 80.264 350.216-1.515 523.05Z;\n                M909.194 698.092C791.124 849.094 646.258 945.89 474.596 988.48c-171.662 42.59-307.317-32.91-406.964-226.503-99.648-193.591-89.18-365.888 31.401-516.89C219.615 94.086 358.201 12.777 514.79 1.162c156.589-11.616 290.988 63.885 403.196 226.502 112.208 162.617 109.277 319.426-8.792 470.428Z;\n                M908.65 772.515c-119.423 173.188-259.837 247.488-421.243 222.9C326 970.826 191.184 884.232 82.957 735.633-25.268 587.033-27.6 434.158 75.96 277.006 179.522 119.854 316.67 28.984 487.407 4.396c170.736-24.59 313.482 53.987 428.24 235.727 114.757 181.74 112.424 359.205-6.998 532.392Z;" }) }), (0, jsx_runtime_1.jsx)("path", { fill: "#8535F4", fillOpacity: ".45", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "d", dur: "2975ms", repeatCount: "indefinite", values: "M932.532 715.172C854.38 889.747 710.761 984.14 501.676 998.35 292.591 1012.56 146.943 925.27 64.73 736.486c-82.213-188.785-68.51-353.718 41.106-494.8C215.453 100.607 357.042 20.93 530.603 2.66c173.56-18.27 303.477 52.271 389.75 211.622 86.273 159.351 90.332 326.314 12.18 500.89Z;\n                M885.654 705.273C746.066 828.795 579.708 919.904 386.58 978.599c-193.128 58.695-311.204-3.066-354.228-185.284-43.024-182.217-43.502-364.873-1.434-547.967C72.984 62.255 202.534-18.342 419.564 3.56c217.03 21.9 383.867 113.448 500.51 274.64 116.641 161.193 105.168 303.55-34.42 427.073Z;\n                M962.274 793.5c-49.124 177.855-169.888 240.71-362.29 188.563-192.402-52.145-355.126-141.072-488.17-266.78C-21.23 589.572-36.069 440.585 67.296 268.318 170.66 96.052 333.896 6.659 557 .141c223.104-6.518 358.707 79.615 406.808 258.4 48.1 178.786 47.589 357.106-1.535 534.96Z;\n                M897.318 638.271C761.297 778.402 603.636 888.36 424.336 968.141c-179.3 79.783-306.047 9.718-380.24-210.196-74.193-219.913-54.762-400.958 58.295-543.135C215.447 72.633 343.077 1.034 485.28.01c142.203-1.022 280.432 70.066 414.686 213.266 134.255 143.2 133.371 284.864-2.65 424.995Z;\n                M932.532 715.172C854.38 889.747 710.761 984.14 501.676 998.35 292.591 1012.56 146.943 925.27 64.73 736.486c-82.213-188.785-68.51-353.718 41.106-494.8C215.453 100.607 357.042 20.93 530.603 2.66c173.56-18.27 303.477 52.271 389.75 211.622 86.273 159.351 90.332 326.314 12.18 500.89Z;" }) })] })), (0, jsx_runtime_1.jsxs)("g", { transform: "translate(49 24)", children: [(0, jsx_runtime_1.jsx)("circle", { fill: `url(#${id})`, cx: "475.5", cy: "475.5", r: "475.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M475.5 57.011c-231.125 0-418.489 187.364-418.489 418.489 0 231.125 187.364 418.489 418.489 418.489 231.125 0 418.489-187.364 418.489-418.489 0-231.125-187.364-418.489-418.489-418.489Z", fill: "#1B1821" }), (0, jsx_runtime_1.jsx)("path", { d: "M460.284 232.995v159.944h-58.52l58.52 67.345h-68.973l-60.794-67.345h-45.61v67.345h-51.912V341.027h50.66l-50.66-56.12v-51.912h227.289Zm-152.396 51.912 48.766 56.12h51.718v-56.12H307.888Zm182.828 433.098v-51.912h88.39V542.628h-88.39v-51.912h227.289v51.912h-86.987v123.465h86.987v51.912H490.716Zm-257.721 0V598.748h51.912v67.345h93.716l29.75-29.155v-94.31H346.64v-51.912h113.644v166.96l-60.33 60.329H232.995Zm318.05-257.721-60.329-60.33V232.995h51.912v146.222l29.748 29.155h93.717V232.995h51.912v227.289h-166.96Z", fill: `url(#${id})` })] }), showText && ((0, jsx_runtime_1.jsx)("path", { d: "M1466.453 256.11c96.524 0 159.415 63.144 159.415 153.455 0 87.374-57.043 134.366-115.543 143.91l119.196 192.37h-98.719l-108.22-182.824h-84.827v182.825H1252.2V256.11h214.254Zm-11.697 75.626h-117v155.658h117c48.262 0 83.36-30.838 83.36-77.83 0-46.99-35.098-77.828-83.36-77.828ZM1926.077 751.71c141.25 0 210.775-80.446 210.775-201.848v-294.73h-86.357v292.535c0 77.522-43.178 127.985-124.418 127.985-81.969 0-125.155-50.463-125.155-127.985V255.132h-86.357v295.46c0 119.94 69.524 201.119 211.512 201.119ZM2209.279 937.439c94.103 0 164.133-52.144 164.133-163.783V255.132h-85.346v517.055c0 53.612-32.832 88.866-85.352 88.866-37.205 0-63.465-19.092-83.16-40.395l-39.398 65.366c34.29 36.727 78.788 51.415 129.123 51.415ZM2610.948 745.846V256.11h-84.067v489.736zM2977.695 256.11c96.523 0 159.414 63.144 159.414 153.455 0 87.374-57.042 134.366-115.535 143.91l119.188 192.37h-98.718l-108.22-182.824h-84.827v182.825h-85.556V256.11h214.254Zm-11.697 75.626h-117.001v155.658h117c48.262 0 83.361-30.838 83.361-77.83 0-46.99-35.099-77.828-83.36-77.828ZM3518.168 256.11l191.51 489.736h-97.216l-35.818-93.983h-223.67l-35.817 93.983h-97.216l191.51-489.736h106.717Zm-53.355 86.64-87.715 233.487h175.43l-87.715-233.487Z", fill: textColor }))] })] }));
 };
 exports.RujiraLogo = RujiraLogo;

package/lib/cjs/context/GlobalModal.js

@@ -37,7 +37,7 @@ const GlobalModal = ({ children, }) => {
         document.body.style.overflow = "";
         setModalProps({});
     };
-    const dest = document.getElementById("modal");
+    const dest = typeof document !== "undefined" ? document.getElementById("modal") : null;
     const renderComponent = () => {
         return dest
             ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(i18n_1.TranslationProvider, { namespace: "common", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: !(0, helpers_1.isEmpty)(modalProps) && ((0, jsx_runtime_1.jsx)(ModalContent, { modalProps: modalProps, hideModal: hideModal })) }) }), dest)

package/lib/cjs/hooks/useWindowSize.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWindowDimensions = exports.BreakPoints = void 0;
 exports.useWindowSize = useWindowSize;
 const react_1 = require("react");
+// useLayoutEffect fires synchronously before browser paint, eliminating the
+// flash where size-dependent layout hasn't updated yet. On the server it
+// would warn, so we fall back to useEffect there.
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
 exports.BreakPoints = {
     xsmall: 420,
     small: 576,
@@ -15,10 +19,10 @@ exports.BreakPoints = {
 };
 function useWindowSize() {
     const [windowSize, setWindowSize] = (0, react_1.useState)({
-        width: window.outerWidth,
-        height: window.outerHeight,
+        width: 0,
+        height: 0,
     });
-    (0, react_1.useEffect)(() => {
+    useIsomorphicLayoutEffect(() => {
         function handleResize() {
             setWindowSize({
                 width: window.innerWidth,
@@ -32,20 +36,15 @@ function useWindowSize() {
     return windowSize;
 }
 const useWindowDimensions = (innerWidth) => {
-    const [isMobileSize, setIsMobileSize] = (0, react_1.useState)(window.innerWidth <= innerWidth);
-    (0, react_1.useEffect)(() => {
+    const [isMobileSize, setIsMobileSize] = (0, react_1.useState)(false);
+    useIsomorphicLayoutEffect(() => {
         const windowResizeHandler = () => {
-            const matchMediaString = `(max-width: ${innerWidth}px)`;
-            if (matchMedia(matchMediaString).matches) {
-                setIsMobileSize(true);
-            }
-            else {
-                setIsMobileSize(false);
-            }
+            setIsMobileSize(matchMedia(`(max-width: ${innerWidth}px)`).matches);
         };
         window.addEventListener('resize', windowResizeHandler);
+        windowResizeHandler();
         return () => window.removeEventListener('resize', windowResizeHandler);
-    }, []);
+    }, [innerWidth]);
     return isMobileSize;
 };
 exports.useWindowDimensions = useWindowDimensions;

package/lib/cjs/i18n/config.js

@@ -33,6 +33,8 @@ const SUPPORTED_LANGUAGES = ["en", "de"];
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 exports.SUPPORTED_LANGUAGE_PATTERN = SUPPORTED_LANGUAGES.join("|");
 const detectLanguage = () => {
+    if (typeof window === "undefined")
+        return "en";
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored && SUPPORTED_LANGUAGES.includes(stored)) {
         return stored;

package/lib/cjs/wallets/providers/eip6963.js

@@ -8,8 +8,10 @@ class Eip6963Adapter extends eip1193_1.Eip1193Adapter {
     constructor(rdns, eip712 = false) {
         super(() => this.provider, eip712);
         this.rdns = rdns;
-        window.addEventListener("eip6963:announceProvider", this.handleAnnounce.bind(this));
-        window.dispatchEvent(new Event("eip6963:requestProvider"));
+        if (typeof window !== "undefined") {
+            window.addEventListener("eip6963:announceProvider", this.handleAnnounce.bind(this));
+            window.dispatchEvent(new Event("eip6963:requestProvider"));
+        }
     }
     handleAnnounce(res) {
         if (res.detail.info.rdns.includes(this.rdns)) {

package/lib/cjs/wallets/providers/ton.js

@@ -4,9 +4,15 @@ const sdk_1 = require("@tonconnect/sdk");
 const rujira_js_1 = require("rujira.js");
 const ton_core_1 = require("ton-core");
 class TonKeeper {
-    connector = new sdk_1.default({
-        manifestUrl: `https://next.rujira.network/tonconnect-manifest.json`,
-    });
+    _connector;
+    get connector() {
+        if (!this._connector) {
+            this._connector = new sdk_1.default({
+                manifestUrl: `https://next.rujira.network/tonconnect-manifest.json`,
+            });
+        }
+        return this._connector;
+    }
     constructor() { }
     async connect() {
         const wallets = await this.connector.getWallets();

package/lib/cjs/wallets/providers/xaman.js

@@ -4,12 +4,24 @@ exports.signAndBroadcast = exports.simulate = exports.XamanAdapter = void 0;
 const rujira_js_1 = require("rujira.js");
 const xumm_1 = require("xumm");
 class XamanAdapter {
+    apiKey;
     xumm;
+    pendingCallbacks = [];
     constructor(apiKey) {
-        this.xumm = new xumm_1.Xumm(apiKey);
+        this.apiKey = apiKey;
+    }
+    getXumm() {
+        if (!this.xumm) {
+            this.xumm = new xumm_1.Xumm(this.apiKey);
+            for (const cb of this.pendingCallbacks) {
+                this.xumm.on("success", cb);
+            }
+            this.pendingCallbacks = [];
+        }
+        return this.xumm;
     }
     async connect() {
-        const x = await this.xumm.authorize();
+        const x = await this.getXumm().authorize();
         if (x instanceof Error)
             throw x;
         if (!x)
@@ -23,9 +35,10 @@ class XamanAdapter {
         return (0, exports.signAndBroadcast)(this, msg);
     }
     async submit(payment) {
-        if (!this.xumm.payload)
+        const xumm = this.getXumm();
+        if (!xumm.payload)
             throw new Error(`No xumm payload`);
-        const { resolved, payload } = await this.xumm.payload.createAndSubscribe(payment, (x) => {
+        const { resolved, payload } = await xumm.payload.createAndSubscribe(payment, (x) => {
             if ("signed" in x.data)
                 return x;
         });
@@ -46,10 +59,15 @@ class XamanAdapter {
         return true;
     }
     disconnect() {
-        this.xumm.logout();
+        this.xumm?.logout();
     }
     onChange(cb) {
-        this.xumm.on("success", cb);
+        if (this.xumm) {
+            this.xumm.on("success", cb);
+        }
+        else {
+            this.pendingCallbacks.push(cb);
+        }
     }
     networks() {
         return [rujira_js_1.XRP];

package/lib/cjs/wallets/storage.js

@@ -2,14 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.clearProviderKeys = exports.removeProviderKey = exports.addProviderKey = exports.loadProviderKeys = exports.clearSelected = exports.saveSelected = exports.loadSelected = void 0;
 const providers_1 = require("./providers");
-const STORAGE = window.localStorage;
 const KEY_SELECTED = "rujira-accounts-selected";
 const KEY_CONNECTED = "rujira-accounts-connected";
-/**
- * Fetches the persisted Account
- */
+const store = {
+    getItem: (key) => typeof localStorage !== "undefined" ? localStorage.getItem(key) : null,
+    setItem: (key, value) => {
+        if (typeof localStorage !== "undefined")
+            localStorage.setItem(key, value);
+    },
+    removeItem: (key) => {
+        if (typeof localStorage !== "undefined")
+            localStorage.removeItem(key);
+    },
+};
 const loadSelected = () => {
-    const stored = STORAGE.getItem(KEY_SELECTED);
+    const stored = store.getItem(KEY_SELECTED);
     if (!stored)
         return undefined;
     const parsed = JSON.parse(stored);
@@ -21,22 +28,16 @@ const loadSelected = () => {
     }
 };
 exports.loadSelected = loadSelected;
-/**
- * Persists a selected account
- */
 const saveSelected = (address) => {
-    STORAGE.setItem(KEY_SELECTED, JSON.stringify({ address }));
+    store.setItem(KEY_SELECTED, JSON.stringify({ address }));
 };
 exports.saveSelected = saveSelected;
-/**
- * Clears the persisted Account
- */
 const clearSelected = () => {
-    STORAGE.removeItem(KEY_SELECTED);
+    store.removeItem(KEY_SELECTED);
 };
 exports.clearSelected = clearSelected;
 const loadProviderKeys = () => {
-    const stored = JSON.parse(STORAGE.getItem(KEY_CONNECTED) || "{}");
+    const stored = JSON.parse(store.getItem(KEY_CONNECTED) || "{}");
     return Object.entries(stored)
         .filter(([_, v]) => v)
         .map(([k]) => k)
@@ -44,17 +45,17 @@ const loadProviderKeys = () => {
 };
 exports.loadProviderKeys = loadProviderKeys;
 const addProviderKey = (p) => {
-    const stored = JSON.parse(STORAGE.getItem(KEY_CONNECTED) || "{}");
-    STORAGE.setItem(KEY_CONNECTED, JSON.stringify({ ...stored, [p]: true }));
+    const stored = JSON.parse(store.getItem(KEY_CONNECTED) || "{}");
+    store.setItem(KEY_CONNECTED, JSON.stringify({ ...stored, [p]: true }));
 };
 exports.addProviderKey = addProviderKey;
 const removeProviderKey = (p) => {
-    const stored = JSON.parse(STORAGE.getItem(KEY_CONNECTED) || "{}");
+    const stored = JSON.parse(store.getItem(KEY_CONNECTED) || "{}");
     const { [p]: _d, ...rest } = stored;
-    STORAGE.setItem(KEY_CONNECTED, JSON.stringify(rest));
+    store.setItem(KEY_CONNECTED, JSON.stringify(rest));
 };
 exports.removeProviderKey = removeProviderKey;
 const clearProviderKeys = () => {
-    STORAGE.removeItem(KEY_CONNECTED);
+    store.removeItem(KEY_CONNECTED);
 };
 exports.clearProviderKeys = clearProviderKeys;

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

@@ -19,7 +19,7 @@ const footerSections = [
             {
                 kind: "internal",
                 label: "Automated Trading",
-                to: "/trade/BTC/USDC?orders=range&order=tracking&range=t",
+                to: "/trade/BTC/USDC?orders=range&order=tracking",
             },
             {
                 kind: "internal",

package/lib/esm/components/header/Accounts.d.ts

@@ -28,6 +28,6 @@ interface WalletsProps {
     routingElement?: any;
     wallets: WalletProps[];
 }
-export declare const Wallets: ({ modalLayout, provider, wallets, }: WalletsProps) => ReactElement;
+export declare const Wallets: ({ modalLayout, provider, wallets, routingElement, }: WalletsProps) => ReactElement;
 export {};
 //# sourceMappingURL=Accounts.d.ts.map

package/lib/esm/components/header/Accounts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accounts.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Accounts.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,OAAO,EAAyB,MAAM,WAAW,CAAC;AAC3D,OAAO,EACL,eAAe,EAGf,QAAQ,EAGT,MAAM,OAAO,CAAC;AAaf,UAAU,aAAa;IACrB,QAAQ,EAAE,eAAe,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IACvC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,kFAOlB,aAAa,KAAG,YA+IlB,CAAC;AA4CF,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,eAAe,CAAC;IAC1B,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,wCAIjB,YAAY,KAAG,YAwEjB,CAAC"}
+{"version":3,"file":"Accounts.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Accounts.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,OAAO,EAAyB,MAAM,WAAW,CAAC;AAC3D,OAAO,EACL,eAAe,EAGf,QAAQ,EAGT,MAAM,OAAO,CAAC;AAaf,UAAU,aAAa;IACrB,QAAQ,EAAE,eAAe,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IACvC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,kFAOlB,aAAa,KAAG,YA+IlB,CAAC;AA4CF,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,YAAY;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,eAAe,CAAC;IAC1B,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,wDAKjB,YAAY,KAAG,YAwEjB,CAAC"}

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

@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { AnimatePresence, motion } from "motion/react";
 import { cloneElement, useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { Link } from "react-router-dom";
 import { Tooltip } from "react-tooltip";
 import { Account, isThor, THOR } from "rujira.js";
 import { Button, Input, Spinner, useLocalStorage, } from "../..";
@@ -16,7 +15,7 @@ import { Eye, EyeSlash, LinkDisconnect, Plus, Users } from "../icons/Icons";
 import { NetworkIcon } from "../icons/NetworkIcon";
 import { Fiat } from "../numbers/Fiat";
 import { ResolveLink } from "./ResolveLink";
-let referral = localStorage.getItem("referral");
+let referral = typeof window !== "undefined" ? localStorage.getItem("referral") : null;
 export const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getValue, customActions, }) => {
     const { t } = useTranslation("header");
     const { accounts: allAccounts, disconnectAll, selected } = provider;
@@ -34,7 +33,7 @@ export const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getV
                         }, children: _jsx(Input, { value: `https://rujira.network/?ref=${referral}`, readOnly: true, label: t("clickToCopy") }) }), _jsx("p", { className: "fs-12 color-grey mt-2", children: t("referralValidUntil") }), _jsx("div", { className: "modal__footer mt-4 px-3 py-2 text-right", children: _jsx(Button, { label: t("close"), onClick: hideModal }) })] })),
         });
     };
-    return (_jsx(_Fragment, { children: !accounts || accounts.length === 0 ? (_jsx(ConnectAnimation, { children: _jsx(Wallets, { provider: provider, wallets: wallets }) })) : (_jsxs(MyAccount, { routingElement: routingElement, provider: provider, value: selected ? getValue(Account.fromAddress(selected.address)) : false, onHide: () => setShowBlur(false), children: [selected ? (_jsxs(ResolveLink, { as: routingElement, to: "portfolio", className: "balance", children: [_jsx("div", { className: "flex ai-b", children: showBalance === "true" ? (_jsxs(_Fragment, { children: [_jsx(Fiat, { amount: getValue(Account.fromAddress(selected.address)), decimals: 12, symbol: "~$", padSymbol: false, className: "color-white fs-26 condensed" }), _jsx("button", { className: "transparent ml-1 color-grey hover-white", onClick: (e) => {
+    return (_jsx(_Fragment, { children: !accounts || accounts.length === 0 ? (_jsx(ConnectAnimation, { routingElement: routingElement, children: _jsx(Wallets, { provider: provider, wallets: wallets, routingElement: routingElement }) })) : (_jsxs(MyAccount, { routingElement: routingElement, provider: provider, value: selected ? getValue(Account.fromAddress(selected.address)) : false, onHide: () => setShowBlur(false), children: [selected ? (_jsxs(ResolveLink, { as: routingElement, to: "portfolio", className: "balance", children: [_jsx("div", { className: "flex ai-b", children: showBalance === "true" ? (_jsxs(_Fragment, { children: [_jsx(Fiat, { amount: getValue(Account.fromAddress(selected.address)), decimals: 12, symbol: "~$", padSymbol: false, className: "color-white fs-26 condensed" }), _jsx("button", { className: "transparent ml-1 color-grey hover-white", onClick: (e) => {
                                             e.stopPropagation();
                                             e.preventDefault();
                                             setShowBalance("false");
@@ -45,18 +44,18 @@ export const Accounts = ({ provider, routingElement, wallets, ProviderIcon, getV
                                             setShowBalance("true");
                                             return false;
                                         }, style: { marginRight: "-1rem" }, children: _jsx(EyeSlash, { className: "w-2 h-2" }) })] })) }), _jsx("p", { className: "fs-12 condensed color-grey mt-0.5", children: t("viewPortfolio") })] })) : null, accounts.map((account) => (_jsx(AddressC, { provider: provider, ProviderIcon: ProviderIcon, account: account, selected: selected?.address.address === account.address.address &&
-                        selected.provider === account.provider }, `${account.address.address}:${account.provider}`))), _jsxs("nav", { className: "actions", children: [referral && (_jsxs("button", { className: "action transparent", onClick: ReferralModal, children: [_jsx(Users, {}), _jsx("span", { children: t("referralLink") })] })), _jsxs(Link, { className: "action transparent", to: "connect", children: [_jsx(Plus, {}), _jsx("span", { children: t("connectAnotherWallet") })] }), customActions &&
+                        selected.provider === account.provider }, `${account.address.address}:${account.provider}`))), _jsxs("nav", { className: "actions", children: [referral && (_jsxs("button", { className: "action transparent", onClick: ReferralModal, children: [_jsx(Users, {}), _jsx("span", { children: t("referralLink") })] })), _jsxs(ResolveLink, { as: routingElement, className: "action transparent", to: "connect", children: [_jsx(Plus, {}), _jsx("span", { children: t("connectAnotherWallet") })] }), customActions &&
                             customActions.map((e, index) => cloneElement(e, { key: index })), _jsxs("button", { className: "action transparent", onClick: disconnectAll, children: [_jsx(LinkDisconnect, {}), _jsx("span", { children: t("disconnectAll") })] })] }), showBlur && _jsx("div", { className: "blur" })] })) }));
 };
 /* const Component = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>((props, ref) => {
   return <Link {...props} ref={ref} />;
 }); */
-const ConnectAnimation = ({ children }) => {
+const ConnectAnimation = ({ children, routingElement }) => {
     const { t } = useTranslation("header");
     const [show, setShow] = useState(false);
-    return (_jsxs("div", { className: "relative py-q1 no-underline", onMouseOver: () => setShow(true), onMouseOut: () => setShow(false), children: [_jsxs("div", { className: "rujira-header__connect", children: [_jsx("div", { className: "fs-14 fw-500 fs-15 condensed", children: t("connect") }), _jsx("img", { className: "w-3 h-3 filter-white", src: show ? connect : connectStatic, alt: "Connect" })] }), _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: [_jsxs(Link, { className: "flex dir-c action transparent", to: "connect", children: [_jsx("p", { className: "color-white", children: t("connectYourWallet") }), _jsx("small", { className: "color-grey mb-1", children: t("createOrConnectWallet") })] }), children] })) })] }));
+    return (_jsxs("div", { className: "relative py-q1 no-underline", onMouseOver: () => setShow(true), onMouseOut: () => setShow(false), children: [_jsxs("div", { className: "rujira-header__connect", children: [_jsx("div", { className: "fs-14 fw-500 fs-15 condensed", children: t("connect") }), _jsx("img", { className: "w-3 h-3 filter-white", src: show ? connect : connectStatic, alt: "Connect" })] }), _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: [_jsxs(ResolveLink, { as: routingElement, className: "flex dir-c action transparent", to: "connect", children: [_jsx("p", { className: "color-white", children: t("connectYourWallet") }), _jsx("small", { className: "color-grey mb-1", children: t("createOrConnectWallet") })] }), children] })) })] }));
 };
-export const Wallets = ({ modalLayout = false, provider, wallets, }) => {
+export const Wallets = ({ modalLayout = false, provider, wallets, routingElement, }) => {
     const { t } = useTranslation("header");
     const { connect, isAvailable } = provider;
     const { hideModal } = useGlobalModalContext();
@@ -82,11 +81,11 @@ export const Wallets = ({ modalLayout = false, provider, wallets, }) => {
                                     }
                                     x.provider && connect(x.provider).then(hideModal);
                                 }, children: x.icon }, x.label));
-                        }) }), _jsx(Link, { to: "/tou", className: "terms mb-1", children: "By connecting a wallet, you agree to Rujira's Terms of Use." }), _jsx("hr", { className: clsx({
+                        }) }), _jsx(ResolveLink, { as: routingElement, to: "/tou", className: "terms mb-1", children: "By connecting a wallet, you agree to Rujira's Terms of Use." }), _jsx("hr", { className: clsx({
                             hr: true,
                             "mt-0 mb-1": !modalLayout,
                             "my-2": modalLayout,
-                        }) }), _jsx(Link, { to: "ecosystem/wallets", onClick: hideModal, children: t("needHelpDeciding") })] }), _jsx(Tooltip, { id: "wallet-tip", className: "tooltip" })] }));
+                        }) }), _jsx(ResolveLink, { as: routingElement, to: "ecosystem/wallets", onClick: hideModal, children: t("needHelpDeciding") })] }), _jsx(Tooltip, { id: "wallet-tip", className: "tooltip" })] }));
 };
 const MyAccount = ({ provider, children, onHide, routingElement, value, }) => {
     const [show, setShow] = useState(false);

package/lib/esm/components/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,EAAE,EACF,iBAAiB,EACjB,YAAY,EAIb,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAOpC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAiC1D,OAAO,EAAY,WAAW,EAAW,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAmB,MAAM,WAAW,CAAC;AAGjE,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAEhC,KAAK,WAAW,GAAG;IACjB,eAAe,EAAE,eAAe,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,GAAG,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,EAAE,CAAC;QAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;IACxD,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC9C,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,MAAM,sJAYhB,WAAW,KAAG,YAyFhB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAC9B,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,CAAC,CAYvE,CAAC;AAEF,eAAO,MAAM,IAAI,+CAUhB,CAAC;AAEF,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,OAAO,8CAKjB,YAAY,KAAG,YAwKjB,CAAC;AAEF,eAAO,MAAM,SAAS,+DAKnB;IACD,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,GAAG,CAAC;IACpB,eAAe,EAAE,eAAe,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,4CA+HA,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,EAAE,EACF,iBAAiB,EACjB,YAAY,EAIb,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAOpC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAiC1D,OAAO,EAAY,WAAW,EAAW,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAmB,MAAM,WAAW,CAAC;AAGjE,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAEhC,KAAK,WAAW,GAAG;IACjB,eAAe,EAAE,eAAe,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,GAAG,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,EAAE,CAAC;QAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;IACxD,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC9C,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,MAAM,sJAYhB,WAAW,KAAG,YAwFhB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAC9B,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,CAAC,CAYvE,CAAC;AAEF,eAAO,MAAM,IAAI,+CAUhB,CAAC;AAEF,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,OAAO,8CAKjB,YAAY,KAAG,YAwKjB,CAAC;AAEF,eAAO,MAAM,SAAS,+DAKnB;IACD,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,GAAG,CAAC;IACpB,eAAe,EAAE,eAAe,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,4CA+HA,CAAC"}

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

@@ -22,6 +22,13 @@ export const Header = ({ accountProvider, className, domain = "", routingElement
     const [scrollY, setScrollY] = useState(0);
     const { accounts } = accountProvider;
     const { showModal } = useGlobalModalContext();
+    const ConnectModal = () => {
+        showModal({
+            title: t("connectYourAccount"),
+            backgroundClose: true,
+            children: (_jsx(TranslationProvider, { namespace: "header", children: _jsx(Wallets, { modalLayout: true, provider: accountProvider, wallets: wallets, routingElement: routingElement }) })),
+        });
+    };
     useEffect(() => {
         const handleScroll = () => {
             setIsScrolled(window.scrollY > 56);
@@ -32,13 +39,6 @@ export const Header = ({ accountProvider, className, domain = "", routingElement
             window.removeEventListener("scroll", handleScroll);
         };
     }, []);
-    const ConnectModal = () => {
-        showModal({
-            title: t("connectYourAccount"),
-            backgroundClose: true,
-            children: (_jsx(TranslationProvider, { namespace: "header", children: _jsx(Wallets, { modalLayout: true, provider: accountProvider, wallets: wallets }) })),
-        });
-    };
     return (_jsxs(Container, { style: { backgroundColor: `rgba(15, 17, 23, ${(scrollY / 56) * 0.9})` }, className: clsx({
             [`${className}`]: className,
             "rujira-header--scrolled": isScrolled,
@@ -137,15 +137,19 @@ export const MobileNav = ({ domain, routingElement, accountProvider, staticRoute
         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);
+    useEffect(() => {
+        let url = location.href;
+        const handler = () => {
+            requestAnimationFrame(() => {
+                if (url !== location.href) {
+                    setShowDrawer(false);
+                    url = location.href;
+                }
+            });
+        };
+        document.body.addEventListener("click", handler, true);
+        return () => document.body.removeEventListener("click", handler, true);
+    }, []);
     return (_jsxs(Drawer.Root, { direction: "left", open: showDrawer, onOpenChange: (open) => setShowDrawer(open), children: [_jsx("button", { className: "rujira-header__hamburger", onClick: () => setShowDrawer(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" }) }) }), _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Overlay, { className: "drawer__overlay" }), _jsxs(Drawer.Content, { className: "drawer__content drawer__content--left", children: [_jsx(Drawer.Description, { className: "visually-hidden", children: "Main navigation menu" }), _jsx(Drawer.Title, { className: "visually-hidden", children: "Main Menu" }), _jsxs("div", { className: "drawer__card mobile-drawer", children: [_jsxs(ResolveLink, { as: routingElement, domain: domain, to: ".", className: "flex ai-c", children: [_jsx(Home, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), _jsx("div", { children: _jsx("h4", { className: "fs-14 fw-600", children: t("home") }) })] }), accounts && accounts.length > 0 && (_jsxs(ResolveLink, { as: routingElement, domain: domain, to: "portfolio", className: "flex ai-c mt-2", children: [_jsx(Coins, { className: "color-grey h-3.5 w-a block mr-2 no-shrink" }), _jsx("div", { children: _jsx("h4", { className: "fs-14 fw-600", children: t("portfolio") }) })] })), _jsx("h4", { children: t("trade") }), _jsx(SubTrade, { useRef: useRef(null), domain: domain, routingElement: routingElement, className: "", staticRoutes: staticRoutes }), _jsx("h4", { children: t("earn") }), _jsx(SubEarn, { useRef: useRef(null), domain: domain, routingElement: routingElement, className: "", staticRoutes: staticRoutes }), _jsx("h4", { children: t("borrow") }), _jsx(SubBorrow, { useRef: useRef(null), domain: domain, routingElement: routingElement, className: "", staticRoutes: staticRoutes }), _jsx("h4", { children: t("utilities") }), _jsx(SubUtilities, { useRef: useRef(null), domain: domain, routingElement: routingElement, className: "", staticRoutes: staticRoutes }), _jsx("h4", { children: t("entertainment") }), _jsx(SubEntertainment, { useRef: useRef(null), domain: domain, routingElement: routingElement, className: "", staticRoutes: staticRoutes }), _jsx("h4", { children: t("learnAndHelp") }), _jsx(SubLearn, { useRef: useRef(null), domain: domain, routingElement: routingElement, className: "", staticRoutes: staticRoutes })] })] })] })] }));
 };
 const Popup = ({ children, useRef, className = "rujira-header__popup sub-nav fw-400 p-2", }) => (_jsx(motion.div, { ref: useRef, className: className, initial: { opacity: 0, marginTop: -4 }, animate: { opacity: 1, marginTop: 0 }, exit: { opacity: 0, marginTop: -4 }, children: children }));

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

@@ -3,7 +3,7 @@ import { forwardRef, } from "react";
 const fixedForwardRef = forwardRef;
 export const UnwrappedAnyComponent = (props, ref) => {
     const { as: Comp = "a", children, domain, isStatic, ...rest } = props;
-    if (!isStatic && props.as !== "a") {
+    if (!isStatic && props.as && props.as !== "a") {
         return (_jsx(Comp, { ...rest, ref: ref, children: children }));
     }
     return (_jsx("a", { href: props.to || props.href, ...rest, children: children }));