rujira.ui 1.0.18 → 1.0.20

package/lib/cjs/components/AssetLabel.js

@@ -1,10 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetLabel = void 0;
+exports.AssetLabel = exports.assetLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const rujira_js_1 = require("rujira.js");
-const AssetLabel = ({ asset, Container }) => asset ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asset.metadata.symbol, ((asset.metadata.symbol === "USDT" && asset.chain !== rujira_js_1.ETH) ||
-            (asset.metadata.symbol === "ETH" && asset.chain !== rujira_js_1.ETH) ||
-            (asset.metadata.symbol === "USDC" && asset.chain !== rujira_js_1.ETH)) &&
-            asset.type === "SECURED" && (0, jsx_runtime_1.jsxs)(Container, { children: [".", asset.chain] })] })) : null;
+// True when an asset uses an ambiguous symbol that needs its network appended
+// to disambiguate it from the canonical token (e.g. a secured USDT that lives
+// on a chain other than Ethereum).
+const needsNetworkSuffix = (asset) => ((asset.metadata.symbol === "USDT" && asset.chain !== rujira_js_1.ETH) ||
+    (asset.metadata.symbol === "ETH" && asset.chain !== rujira_js_1.ETH) ||
+    (asset.metadata.symbol === "USDC" && asset.chain !== rujira_js_1.ETH)) &&
+    asset.type === "SECURED";
+// String form of <AssetLabel> for contexts that require a plain string rather
+// than JSX (e.g. the `symbol` prop of <Decimal>).
+const assetLabel = (asset) => asset
+    ? asset.metadata.symbol +
+        (needsNetworkSuffix(asset) ? `.${asset.chain}` : "")
+    : "";
+exports.assetLabel = assetLabel;
+const AssetLabel = ({ asset, Container }) => asset ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asset.metadata.symbol, needsNetworkSuffix(asset) && (0, jsx_runtime_1.jsxs)(Container, { children: [".", asset.chain] })] })) : null;
 exports.AssetLabel = AssetLabel;

package/lib/cjs/components/bridges/DepositModal.js

@@ -68,6 +68,21 @@ const Confirm = ({ asset, balance, targets, target: target_, Submit, onSuccess,
     const canSwap = asset.chain !== account?.asset.chain ||
         asset.metadata.symbol !== account.asset.metadata.symbol;
     const shouldSwap = canSwap && !direct;
+    const standardChain = (0, rujira_js_1.networkLabel)(asset.chain);
+    const directChain = account?.asset ? (0, rujira_js_1.networkLabel)(account.asset.chain) : "";
+    const directAsset = account?.asset.metadata.symbol || asset.metadata.symbol;
+    const directAssetChain = account?.asset.chain;
+    const nonStandardDepositWarning = direct
+        ? t("directDepositWarning", {
+            asset: directAsset,
+            standardChain,
+            directChain,
+        })
+        : t("nonStandardDepositWarning", {
+            asset: directAsset,
+            standardChain,
+            directChain,
+        });
     // Determine the actual destination address
     const destination = target === "custom" ? custom : target;
     const isCustomAddressInvalid = target === "custom" && custom !== "" && !(0, rujira_js_1.validateAddress)(rujira_js_1.THOR, custom);
@@ -130,7 +145,9 @@ const Confirm = ({ asset, balance, targets, target: target_, Submit, onSuccess,
                                     "w-2 h-2": true,
                                     "filter-grey": !hoverAd,
                                     "filter-white": hoverAd,
-                                }) }), advanced ? t("hideAdvancedOptions") : t("showAdvancedOptions")] })] }), advanced && ((0, jsx_runtime_1.jsxs)("div", { className: "br-1 p-2 bg-black mt-1 row wrap condensed fs-14 px-2 gap-y-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-4 text-center text-xs-left color-grey fw-500", children: t("destination") }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right", children: (0, jsx_runtime_1.jsxs)(Select_1.Select, { containerClassName: "fs-14", className: "select--inline text-right", value: target, onChange: (e) => setTarget(e.currentTarget.value), children: [targets.map((x) => ((0, jsx_runtime_1.jsx)("option", { value: x.address, className: "bg-darkGrey", children: x.address }, x.address))), (0, jsx_runtime_1.jsx)("option", { className: "bg-darkGrey", value: "custom", children: t("customAddress") })] }) }), target === "custom" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-4 text-center text-xs-left color-grey fw-500", children: t("customDestination") }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right", children: (0, jsx_runtime_1.jsx)(Input_1.Input, { containerClassName: "fs-14", value: custom, onChange: (e) => setCustom(e.currentTarget.value), className: "input--inline text-right", innerRef: ref }) })] })), canSwap && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asset.chain === rujira_js_1.THOR ? null : ((0, jsx_runtime_1.jsx)("div", { className: "col-12 text-center text-xs-right", children: (0, jsx_runtime_1.jsx)(__1.Toggle, { className: "toggle--xs", label: `Deposit ${account?.asset.chain}.${account?.asset.metadata.symbol} directly`, checked: direct, onChange: () => setDirect((prev) => !prev) }) })), direct && ((0, jsx_runtime_1.jsxs)(__1.Warning, { className: "warning--sm condensed flex ai-c mt-1", color: "orange", children: [(0, jsx_runtime_1.jsx)("img", { src: swap_gif_1.default, alt: "", className: "filter-orange block no-shrink", style: { width: "2.5rem", height: "2.5rem" } }), (0, jsx_runtime_1.jsxs)("small", { className: "text-left fs-14", children: ["You are depositing a version of", " ", (0, jsx_runtime_1.jsx)("span", { className: "color-white", children: asset.metadata.symbol }), " ", "that is not the standard on Rujira. Our products use the", " ", (0, jsx_runtime_1.jsx)("span", { className: "color-white", children: "Ethereum" }), " version of", " ", (0, jsx_runtime_1.jsx)("span", { className: "color-white", children: asset.metadata.symbol }), "."] })] }))] })), isCustomAddressInvalid && ((0, jsx_runtime_1.jsx)("div", { className: "flex dir-r jc-c grow mt-1", children: (0, jsx_runtime_1.jsxs)(__1.Warning, { color: "red", className: "condensed iflex grow", children: [(0, jsx_runtime_1.jsx)(__1.Icons.ExclamationTriangle, { className: "color-red" }), (0, jsx_runtime_1.jsx)("span", { className: "warning__msg", children: t("invalidThorAddress") })] }) }))] })), (0, jsx_runtime_1.jsx)(Submit, { selected: account, amount: amount, target: target !== "custom" ? target : custom, swapMemo: "memo", onSuccess: onSuccess, disabled: isCustomAddressInvalid, isDangerous: false, quote: quote, shouldSwap: shouldSwap })] }));
+                                }) }), advanced ? t("hideAdvancedOptions") : t("showAdvancedOptions")] })] }), advanced && ((0, jsx_runtime_1.jsxs)("div", { className: "br-1 p-2 bg-black mt-1 row wrap condensed fs-14 px-2 gap-y-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-4 text-center text-xs-left color-grey fw-500", children: t("destination") }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right", children: (0, jsx_runtime_1.jsxs)(Select_1.Select, { containerClassName: "fs-14", className: "select--inline text-right", value: target, onChange: (e) => setTarget(e.currentTarget.value), children: [targets.map((x) => ((0, jsx_runtime_1.jsx)("option", { value: x.address, className: "bg-darkGrey", children: x.address }, x.address))), (0, jsx_runtime_1.jsx)("option", { className: "bg-darkGrey", value: "custom", children: t("customAddress") })] }) }), target === "custom" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-4 text-center text-xs-left color-grey fw-500", children: t("customDestination") }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right", children: (0, jsx_runtime_1.jsx)(Input_1.Input, { containerClassName: "fs-14", value: custom, onChange: (e) => setCustom(e.currentTarget.value), className: "input--inline text-right", innerRef: ref }) })] })), canSwap && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asset.chain === rujira_js_1.THOR ? null : ((0, jsx_runtime_1.jsx)("div", { className: "col-12 text-center text-xs-right", children: (0, jsx_runtime_1.jsx)(__1.Toggle, { className: "toggle--xs", checked: direct, onChange: () => setDirect((prev) => !prev), children: (0, jsx_runtime_1.jsxs)("span", { className: "toggle__label", children: [t("depositAssetOnChain"), " ", directAsset, directAssetChain && ((0, jsx_runtime_1.jsxs)("span", { className: "color-grey", children: [".", directAssetChain] }))] }) }) })), asset.chain !== rujira_js_1.THOR && ((0, jsx_runtime_1.jsxs)(__1.Warning, { className: "warning--sm condensed flex ai-c mt-1", color: "orange", children: [(0, jsx_runtime_1.jsx)("img", { src: swap_gif_1.default, alt: "", className: "filter-orange block no-shrink", style: { width: "2.5rem", height: "2.5rem" } }), (0, jsx_runtime_1.jsx)("small", { className: "text-left fs-14", dangerouslySetInnerHTML: {
+                                            __html: nonStandardDepositWarning,
+                                        } })] }))] })), isCustomAddressInvalid && ((0, jsx_runtime_1.jsx)("div", { className: "flex dir-r jc-c grow mt-1", children: (0, jsx_runtime_1.jsxs)(__1.Warning, { color: "red", className: "condensed iflex grow", children: [(0, jsx_runtime_1.jsx)(__1.Icons.ExclamationTriangle, { className: "color-red" }), (0, jsx_runtime_1.jsx)("span", { className: "warning__msg", children: t("invalidThorAddress") })] }) }))] })), (0, jsx_runtime_1.jsx)(Submit, { selected: account, amount: amount, target: target !== "custom" ? target : custom, swapMemo: "memo", onSuccess: onSuccess, disabled: isCustomAddressInvalid, isDangerous: false, quote: quote, shouldSwap: shouldSwap })] }));
 };
 const Success = ({ tx, dismiss, }) => {
     const { t } = (0, i18n_1.useTranslation)("common");

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

@@ -6,7 +6,6 @@ const clsx_1 = require("clsx");
 const ResolveLink_1 = require("../header/ResolveLink");
 const Icons_1 = require("../icons/Icons");
 const RujiraLogo_1 = require("../logos/RujiraLogo");
-const SITE_URL = "https://rujira.network";
 const DOCS_URL = "https://docs.rujira.network";
 const DISCORD_URL = "https://discord.com/invite/XPvsxhWKfb";
 const TELEGRAM_URL = "https://t.me/Rujira_Community";
@@ -18,7 +17,7 @@ const footerSections = [
             { kind: "internal", label: "Cross-chain Swaps", to: "swap" },
             { kind: "internal", label: "Orderbook DEX", to: "trade" },
             { kind: "internal", label: "Earn Opportunities", to: "strategies" },
-            { kind: "internal", label: "Money Market", to: "borrow" },
+            { kind: "internal", label: "Money Market", to: "/borrow/BTC/USDC" },
             {
                 kind: "internal",
                 label: "Automated Trading",
@@ -27,41 +26,33 @@ const footerSections = [
             {
                 kind: "internal",
                 label: "bRUNE",
-                to: "/strategies/staking/bRUNE",
+                to: "/stake/bRUNE",
             },
             { kind: "internal", label: "Indices", to: "index" },
             { kind: "internal", label: "Recurring Buys", to: "trade" },
+            { kind: "static", label: "Analytics", to: "/analytics" },
         ],
     },
     {
         title: "Learn",
         links: [
-            {
-                kind: "external",
-                label: "Architecture",
-                href: `${SITE_URL}/architecture`,
-            },
-            { kind: "external", label: "RUJI Token", href: `${SITE_URL}/rujitoken` },
-            {
-                kind: "external",
-                label: "Enshrined Oracles",
-                href: `${SITE_URL}/enshrined-oracles`,
-            },
-            {
-                kind: "external",
-                label: "Secured Assets",
-                href: `${SITE_URL}/secured-assets`,
-            },
-            { kind: "internal", label: "FAQ", to: "faq" },
-            { kind: "internal", label: "Articles", to: "articles" },
-            { kind: "external", label: "Roadmap", href: `${SITE_URL}/roadmap` },
-            { kind: "external", label: "Documentation", href: DOCS_URL },
+            { kind: "static", label: "Discover Rujira", to: "/discover-rujira" },
+            { kind: "static", label: "Architecture", to: "/architecture" },
+            { kind: "static", label: "RUJI Token", to: "/ruji-token" },
+            { kind: "static", label: "Enshrined Oracles", to: "/enshrined-oracles" },
+            { kind: "static", label: "Secured Assets", to: "/secured-assets" },
+            { kind: "static", label: "Cypherpunk", to: "/cypherpunk" },
+            { kind: "static", label: "Omnichain", to: "/omnichain" },
+            { kind: "static", label: "Security", to: "/security" },
+            { kind: "static", label: "Articles", to: "/articles" },
+            { kind: "static", label: "Roadmap", to: "/roadmap" },
+            { kind: "external", label: "Product Docs", href: DOCS_URL },
         ],
     },
     {
         title: "Ecosystem",
         links: [
-            { kind: "internal", label: "Ecosystem", to: "ecosystem" },
+            { kind: "static", label: "Ecosystem", to: "/ecosystem" },
             {
                 kind: "external",
                 label: "Deving Zone",
@@ -95,8 +86,8 @@ const footerSections = [
             },
             {
                 kind: "external",
-                label: "Documentation",
-                href: DOCS_URL,
+                label: "Developer docs",
+                href: `${DOCS_URL}/developers`,
             },
             {
                 kind: "external",
@@ -113,7 +104,10 @@ const footerSections = [
     {
         title: "Support",
         links: [
-            { kind: "internal", label: "Knowledge Hub", to: "support" },
+            { kind: "static", label: "Get Started", to: "/get-started" },
+            { kind: "static", label: "Knowledge Hub", to: "/support" },
+            { kind: "static", label: "FAQ", to: "/faq" },
+            { kind: "static", label: "Deposit", to: "/deposit" },
             {
                 kind: "external",
                 label: "Developer Help",

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

@@ -18,24 +18,12 @@ 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 = 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;
     const [showBlur, setShowBlur] = (0, react_2.useState)(false);
-    const { hideModal, showModal } = (0, GlobalModal_1.useGlobalModalContext)();
     const [showBalance, setShowBalance] = (0, __1.useLocalStorage)("rujira-show-balance", "true");
     const accounts = allAccounts?.filter((a) => (0, rujira_js_1.isThor)(a.address));
-    const ReferralModal = () => {
-        showModal({
-            title: t("referAndEarn"),
-            backgroundClose: true,
-            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "p balance", children: t("referralDescription") }), (0, jsx_runtime_1.jsx)("div", { className: "pointer", onClick: () => {
-                            react_hot_toast_1.default.success(t("referralCopied"));
-                            navigator.clipboard.writeText(`https://rujira.network/?ref=${referral}`);
-                        }, children: (0, jsx_runtime_1.jsx)(__1.Input, { value: `https://rujira.network/?ref=${referral}`, readOnly: true, label: t("clickToCopy") }) }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 color-grey mt-2", children: t("referralValidUntil") }), (0, jsx_runtime_1.jsx)("div", { className: "modal__footer mt-4 px-3 py-2 text-right", children: (0, jsx_runtime_1.jsx)(__1.Button, { label: t("close"), onClick: hideModal }) })] })),
-        });
-    };
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !accounts || accounts.length === 0 ? ((0, jsx_runtime_1.jsx)(ConnectAnimation, { 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();
@@ -47,49 +35,45 @@ 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)(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 &&
+                        selected.provider === account.provider }, `${account.address.address}:${account.provider}`))), (0, jsx_runtime_1.jsxs)("nav", { className: "actions", children: [(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, routingElement }) => {
+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)(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] })) })] }));
+    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", children: t("createOrConnectWallet") })] }), children] })) })] }));
 };
 const Wallets = ({ modalLayout = false, provider, wallets, routingElement, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
     const { connect, isAvailable } = provider;
     const { hideModal } = (0, GlobalModal_1.useGlobalModalContext)();
-    const [first, ...rest] = wallets;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "rujira-header__wallets", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
-                            "flex w-full ai-c jc-c wrap": true,
-                            "mb-1": modalLayout,
-                        }), children: (0, jsx_runtime_1.jsx)("button", { id: "connect-station", "data-tooltip-content": "Coming Soon...", "data-tooltip-id": "wallet-tip", className: (0, clsx_1.default)({
-                                "transparent block pointer medium": true,
-                                "desaturate opacity-10": !first?.provider,
-                            }), disabled: !first?.provider, onClick: () => {
-                                first?.provider && connect(first?.provider).then(hideModal);
-                            }, children: first?.icon }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full ai-c jc-c wrap", children: rest.map((x) => {
-                            const disabled = x.provider ? !isAvailable(x.provider) : true;
-                            return ((0, jsx_runtime_1.jsx)("button", { id: `connect-${x.label}`, "data-tooltip-content": x.label, "data-tooltip-id": "wallet-tip", className: (0, clsx_1.default)({
-                                    "transparent block pointer": true,
-                                    medium: modalLayout,
-                                    "desaturate opacity-10": disabled,
-                                }), onClick: () => {
-                                    if (disabled && x.url) {
-                                        window.open(x.url, "_blank");
-                                        return;
-                                    }
-                                    x.provider && connect(x.provider).then(hideModal);
-                                }, children: x.icon }, x.label));
-                        }) }), (0, jsx_runtime_1.jsx)(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)({
+    const rujiraWalletOrder = ["vultisig", "keplr"];
+    const rujiraWallets = wallets
+        .filter((wallet) => rujiraWalletOrder.includes(wallet.key))
+        .sort((a, b) => rujiraWalletOrder.indexOf(a.key) - rujiraWalletOrder.indexOf(b.key));
+    const otherWallets = wallets.filter((wallet) => !rujiraWalletOrder.includes(wallet.key));
+    const walletButton = (wallet) => {
+        const disabled = wallet.provider ? !isAvailable(wallet.provider) : true;
+        return ((0, jsx_runtime_1.jsx)("button", { id: `connect-${wallet.label}`, "data-tooltip-content": wallet.label, "data-tooltip-id": "wallet-tip", className: (0, clsx_1.default)({
+                "transparent block pointer": true,
+                medium: modalLayout,
+                "desaturate opacity-10": disabled,
+            }), onClick: () => {
+                if (disabled && wallet.url) {
+                    window.open(wallet.url, "_blank");
+                    return;
+                }
+                wallet.provider && connect(wallet.provider).then(hideModal);
+            }, children: wallet.icon }, wallet.label));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("rujira-header__wallets", {
+                    "rujira-header__wallets--modal": modalLayout,
+                }), children: [(0, jsx_runtime_1.jsx)("span", { className: "tag tag--borderless tag--primary no-shrink rujira-header__wallets-support", "data-support-tooltip": t("rujiraSupportTooltip"), children: t("rujiraSupport") }), (0, jsx_runtime_1.jsx)("div", { className: "rujira-header__wallets-row", children: rujiraWallets.map(walletButton) }), (0, jsx_runtime_1.jsx)("hr", { className: "rujira-header__wallets-divider" }), (0, jsx_runtime_1.jsx)("span", { className: "tag tag--borderless tag--orange no-shrink rujira-header__wallets-support", "data-support-tooltip": t("limitedSupportTooltip"), children: t("limitedSupport") }), (0, jsx_runtime_1.jsx)("div", { className: "rujira-header__wallets-row", children: otherWallets.map(walletButton) }), (0, jsx_runtime_1.jsx)("hr", { className: (0, clsx_1.default)({
                             hr: true,
                             "mt-0 mb-1": !modalLayout,
                             "my-2": modalLayout,
-                        }) }), (0, jsx_runtime_1.jsx)(ResolveLink_1.ResolveLink, { as: routingElement, to: "ecosystem/wallets", onClick: hideModal, children: t("needHelpDeciding") })] }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: "wallet-tip", className: "tooltip" })] }));
+                        }) }), (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)(ResolveLink_1.ResolveLink, { as: routingElement, to: "/connect", 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

@@ -183,11 +183,11 @@ const SubTrade = ({ domain, routingElement, useRef, className, staticRoutes, })
 };
 const SubEarn = ({ domain, routingElement, useRef, className, staticRoutes, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
-    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("strategies/staking/RUJI"), domain: domain, to: "strategies/staking/RUJI", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Stake, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("stake") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("stakeDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("strategies"), domain: domain, to: "strategies", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Building, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("strategies") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("strategiesDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("liquidate"), domain: domain, to: "liquidate", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Gavel, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("liquidate") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("liquidateDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("launchpad"), domain: domain, to: "launchpad", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Seedling, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("launchpad") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("launchpadDesc") })] })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("stake/RUJI"), domain: domain, to: "stake/RUJI", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Stake, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("stake") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("stakeDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("trade"), domain: domain, to: "/trade/BTC/USDC?orders=range", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Binary, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("algorithmicTrading") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("algorithmicTradingDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("lending"), domain: domain, to: "lend", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Lend, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("lending") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("lendingDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("liquidate"), domain: domain, to: "liquidate", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Gavel, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("liquidate") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("liquidateDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("strategies"), domain: domain, to: "strategies", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Building, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("strategies") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("strategiesDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("launchpad"), domain: domain, to: "launchpad", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Seedling, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("launchpad") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("launchpadDesc") })] })] })] }) }));
 };
 const SubBorrow = ({ domain, routingElement, useRef, className, staticRoutes, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
-    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("borrow"), domain: domain, to: "borrow", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.MoneyTransfer, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("borrowMenu") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("borrowDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("mint"), domain: domain, to: "mint", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Deposit, { className: "color-grey h-a w-3 block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("mintStablecoin") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("mintStablecoinDesc") })] })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("borrow"), domain: domain, to: "/borrow/BTC/USDC", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.MoneyTransfer, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600 flex ai-c", children: t("borrowMenu") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("borrowDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("mint"), domain: domain, to: "mint", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Deposit, { className: "color-grey h-a w-3 block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("mintStablecoin") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("mintStablecoinDesc") })] })] })] }) }));
 };
 const SubUtilities = ({ domain, routingElement, useRef, className, staticRoutes, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
@@ -199,5 +199,5 @@ const SubEntertainment = ({ domain, routingElement, useRef, className, staticRou
 };
 const SubLearn = ({ domain, routingElement, useRef, className, staticRoutes, }) => {
     const { t } = (0, i18n_1.useTranslation)("header");
-    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("get-started"), domain: domain, to: "/get-started", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Graduate, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("getStarted") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("getStartedDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("support"), domain: domain, to: "/support", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Support, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("support") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("educationDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.rujira.network/", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Code, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("documentation"), " ", (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("documentationDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.rujira.network/developers/getting-started", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Terminal, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("developers"), (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("developersDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("faq"), domain: domain, to: "/faq", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Info, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("commonQuestions") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("supportDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("articles"), domain: domain, to: "/articles", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.History, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("articles") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("articlesDesc") })] })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Popup, { useRef: useRef, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid w-60 mt-1", children: [(0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: true, domain: domain, to: "/get-started", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Graduate, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("getStarted") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("getStartedDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: true, domain: domain, to: "/discover-rujira", className: "flex ai-s", 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.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("discoverRujira") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("discoverRujiraDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("support"), domain: domain, to: "/support", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Support, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("support") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("educationDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("faq"), domain: domain, to: "/faq", className: "flex", children: [(0, jsx_runtime_1.jsx)(Icons_1.Info, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("commonQuestions") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("supportDesc") })] })] }), (0, jsx_runtime_1.jsxs)(ResolveLink_1.ResolveLink, { as: routingElement, isStatic: staticRoutes?.includes("articles"), domain: domain, to: "/articles", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.History, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "fs-14 fw-600", children: t("articles") }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("articlesDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.rujira.network/", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Code, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("documentation"), " ", (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("documentationDesc") })] })] }), (0, jsx_runtime_1.jsxs)("a", { href: "https://docs.rujira.network/developers/getting-started", target: "_blank", className: "flex ai-s", children: [(0, jsx_runtime_1.jsx)(Icons_1.Terminal, { className: "color-grey h-3.5 w-a block mr-2 no-shrink mt-0" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h4", { className: "fs-14 fw-600 flex ai-c", children: [t("developers"), (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "h-1.5 w-a ml-1" })] }), (0, jsx_runtime_1.jsx)("p", { className: "fs-12 mt-0.5", children: t("developersDesc") })] })] })] }) }));
 };

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

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

package/lib/cjs/components/icons/Icons.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GitLab = exports.GitHub = exports.Gear = exports.Gavel = exports.Gamepad = exports.Eye = exports.EyeSlash = exports.ExclamationTriangle = exports.ExclamationCircle = exports.External = exports.Ellipsis = exports.Edit = exports.Earth = exports.Discord = exports.Deposit = exports.CreditCard = exports.Combine = exports.Copy = exports.Coins = exports.Code = exports.ClaimSolid = exports.ClaimAll = exports.Claim = exports.CirclesXMark = exports.CircleXMark = exports.CircleUser = exports.CirclePen = exports.Check = exports.ChartUser = exports.ChartUp = exports.ChartUpDown = exports.ChartMixed = exports.Chart = exports.Building = exports.Bolt = exports.Book = exports.BinarySlash = exports.Binary = exports.ArrowUpRight = exports.ArrowUp = exports.ArrowRight = exports.ArrowRightLeft = exports.ArrowLeft = exports.ArrowDown = exports.AngleUpDown = exports.AngleUp = exports.AnglesRight = exports.AngleRight = exports.AngleLeft = exports.AngleDown = void 0;
-exports.Star = exports.StarSolid = exports.Stake = exports.StakePlus = exports.StakeMinus = exports.Split = exports.SortUp = exports.SortDown = exports.SortDesc = exports.Sliders = exports.Sort = exports.ShieldX = exports.ShieldCheck = exports.Share = exports.Seedling = exports.Rotate = exports.Rocket = exports.Rabbit = exports.Plus = exports.Play = exports.PieChart = exports.Pause = exports.Orca = exports.NFT = exports.NoGas = exports.Nodes = exports.MoneyTransfer = exports.MinusCircle = exports.Minus = exports.MessageCode = exports.Merge = exports.YouTube = exports.TikTok = exports.Reddit = exports.LinkedIn = exports.Instagram = exports.Medium = exports.Locked = exports.LinkConnect = exports.LinkDisconnect = exports.LinkAngle = exports.Key = exports.Info = exports.Href = exports.Home = exports.History = exports.Grid = exports.Graduate = exports.Glass = exports.GlassChart = void 0;
-exports.Xmark = exports.X = exports.Withdraw = exports.Wink = exports.Window = exports.Wallet = exports.Users = exports.Unlocked = exports.Undo = exports.Trophy = exports.TrendUp = exports.TrendDown = exports.Tortoise = exports.Timer = exports.Terminal = exports.Telegram = exports.Swap = exports.Support = exports.Stopwatch = exports.StarAlt = void 0;
+exports.StarSolid = exports.Stake = exports.StakePlus = exports.StakeMinus = exports.Split = exports.SortUp = exports.SortDown = exports.SortDesc = exports.Sliders = exports.Sort = exports.ShieldX = exports.ShieldCheck = exports.Share = exports.Seedling = exports.Rotate = exports.Rocket = exports.Rabbit = exports.Plus = exports.Play = exports.PieChart = exports.Pause = exports.Orca = exports.NFT = exports.NoGas = exports.Nodes = exports.MoneyTransfer = exports.MinusCircle = exports.Minus = exports.MessageCode = exports.Merge = exports.YouTube = exports.TikTok = exports.Reddit = exports.LinkedIn = exports.Instagram = exports.Medium = exports.Locked = exports.Lend = exports.LinkConnect = exports.LinkDisconnect = exports.LinkAngle = exports.Key = exports.Info = exports.Href = exports.Home = exports.History = exports.Grid = exports.Graduate = exports.Glass = exports.GlassChart = void 0;
+exports.Xmark = exports.X = exports.Withdraw = exports.Wink = exports.Window = exports.Wallet = exports.Users = exports.Unlocked = exports.Undo = exports.Trophy = exports.TrendUp = exports.TrendDown = exports.Tortoise = exports.Timer = exports.Terminal = exports.Telegram = exports.Swap = exports.Support = exports.Stopwatch = exports.StarAlt = exports.Star = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SVG = ({ d, children, ...rest }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...rest, children: [d && (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "nonzero", d: d }), children] }));
@@ -192,6 +192,9 @@ exports.LinkDisconnect.displayName = "LinkDisconnect";
 const _LinkConnect = (props) => ((0, jsx_runtime_1.jsx)(SVG, { ...props, d: "M128 128C57.3 128 0 185.3 0 256s57.3 128 128 128h32c8.8 0 16-7.2 16-16s-7.2-16-16-16h-32c-53 0-96-43-96-96s43-96 96-96h176.1c52.9 0 95.9 42.9 95.9 95.9 0 50.3-38.9 92-89 95.6l-8.1.6c-8.8.6-15.4 8.3-14.8 17.1.6 8.8 8.3 15.4 17.1 14.8l8.1-.6c66.9-4.8 118.7-60.5 118.7-127.5 0-70.7-57.2-127.9-127.9-127.9H128Zm384 384c70.7 0 128-57.3 128-128s-57.3-128-128-128h-32c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c53 0 96 43 96 96s-43 96-96 96H335.9c-52.9 0-95.9-42.9-95.9-95.9 0-50.3 38.9-92 89-95.6l8.1-.6c8.8-.6 15.4-8.3 14.8-17.1-.6-8.8-8.3-15.4-17.1-14.8l-8.1.6C259.8 261.4 208 317.1 208 384.1c0 70.7 57.2 127.9 127.9 127.9H512Z" }));
 exports.LinkConnect = (0, react_1.memo)(_LinkConnect);
 exports.LinkConnect.displayName = "LinkConnect";
+const _Lend = (props) => ((0, jsx_runtime_1.jsx)(SVG, { ...props, d: "M304 320c61.856 0 112-50.144 112-112S365.856 96 304 96s-112 50.144-112 112 50.144 112 112 112Zm0-256c79.529 0 144 64.471 144 144s-64.471 144-144 144-144-64.471-144-144S224.471 64 304 64Zm-23.2 111.4c-.4.7-.9 1.6-.8 3.6v.1c0 .4 0 1.9 4.8 4.5 5.6 3 13.5 5.2 23.9 8.2h.2c9.3 2.6 21.1 6 30.5 11.5 10.2 6 20 16.1 20.5 32.3.5 18.2-9.7 30.4-21.7 36.9-5.8 3.1-12.1 5.1-18.3 6.2v10.8c0 8.8-7.2 16-16 16s-16-7.2-16-16v-11.4c-8.6-1.7-16.7-4.3-23.7-6.6-1.7-.6-3.4-1.1-5-1.6-8.4-2.6-13.1-11.6-10.5-20 2.6-8.4 11.6-13.1 20-10.5 2 .6 3.9 1.2 5.8 1.8 11.5 3.6 20.4 6.5 29.9 6.8 6.7.2 13.8-1.1 18.5-3.6 2.2-1.2 3.4-2.4 4-3.3.5-.8 1.1-2.1 1-4.5 0-1.4-.2-3-4.7-5.6-5.3-3.1-12.9-5.4-23.2-8.3l-1.8-.5c-8.9-2.5-19.8-5.6-28.6-10.3-9.9-5.3-20.6-14.7-21.6-30.7-1.2-18.8 10-30.9 21.8-37.2 5.7-3.1 12-5.1 18-6.3v-9.5c0-8.8 7.2-16 16-16s16 7.2 16 16v9.4c6.3.9 12.3 2.3 17.9 3.7 8.6 2.1 13.8 10.8 11.7 19.4-2.1 8.6-10.8 13.8-19.4 11.7-9.3-2.3-18.2-4-26.4-4.1-6.2-.1-13.6 1.3-18.7 4-2.4 1.3-3.6 2.5-4.2 3.4l.1-.3Zm-97.8 206c13.1-8.8 28.6-13.4 44.4-13.4H376c30.9 0 56 25.1 56 56 0 8.6-1.9 16.7-5.4 24h5.6l94.7-56.4c8.3-4.9 17.8-7.6 27.5-7.6h1.3c28.9 0 52.3 23.4 52.3 52.3 0 17.7-9 34.2-23.8 43.8l-119.6 77.8c-18.2 11.8-39.4 18.1-61 18.1H48c-8.8 0-16-7.2-16-16s7.2-16 16-16h355.5c15.5 0 30.6-4.5 43.6-12.9l119.6-77.8c5.8-3.7 9.2-10.2 9.2-17 0-11.2-9.1-20.3-20.3-20.3h-1.3c-3.9 0-7.7 1.1-11.1 3l-98.5 58.7c-2.5 1.5-5.3 2.3-8.2 2.3H288c-8.8 0-16-7.2-16-16s7.2-16 16-16h88c13.3 0 24-10.7 24-24s-10.7-24-24-24H227.4c-9.5 0-18.7 2.8-26.6 8.1l-79.9 53.2c-2.6 1.8-5.7 2.7-8.9 2.7H48c-8.8 0-16-7.2-16-16s7.2-16 16-16h59.2l75.8-50.6Z" }));
+exports.Lend = (0, react_1.memo)(_Lend);
+exports.Lend.displayName = "Lend";
 const _Locked = (props) => ((0, jsx_runtime_1.jsx)(SVG, { ...props, d: "M320 96c53 0 96 43 96 96v64H224v-64c0-53 43-96 96-96Zm-128 96v64h-16c-44.2 0-80 35.8-80 80v160c0 44.2 35.8 80 80 80h288c44.2 0 80-35.8 80-80V336c0-44.2-35.8-80-80-80h-16v-64c0-70.7-57.3-128-128-128s-128 57.3-128 128Zm-16 96h288c26.5 0 48 21.5 48 48v160c0 26.5-21.5 48-48 48H176c-26.5 0-48-21.5-48-48V336c0-26.5 21.5-48 48-48Zm160 88c0-8.8-7.2-16-16-16s-16 7.2-16 16v80c0 8.8 7.2 16 16 16s16-7.2 16-16v-80Z" }));
 exports.Locked = (0, react_1.memo)(_Locked);
 exports.Locked.displayName = "Locked";

package/lib/cjs/components/numbers/Decimal.js

@@ -4,9 +4,23 @@ exports.Decimal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = require("clsx");
 const helpers_1 = require("../../helpers");
-const Decimal = ({ amount, decimals = 8, round = 6, symbol, symbolLeft, padSymbol = true, className, onClick, as: Component = "div", symbolClassName, subscript, }) => {
+const Decimal = ({ amount, decimals = 8, round = 6, symbol, symbolLeft, padSymbol = true, className, onClick, as: Component = "div", symbolClassName, subscript, clip = false, }) => {
     const normalizedAmount = typeof amount === "bigint" ? amount : BigInt(amount || 0);
     const normalizedDecimals = Number(decimals) || 0;
+    const componentClass = (0, clsx_1.default)({
+        decimal: true,
+        "decimal--label-left": symbolLeft,
+        "decimal--no-pad": !padSymbol,
+        [`${className}`]: className,
+    });
+    const symbolEl = symbol && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)({
+            decimal__symbol: true,
+            [`${symbolClassName}`]: symbolClassName,
+        }), children: symbol }));
+    if (clip) {
+        const { intStr, sep, decStr } = (0, helpers_1.clipAmount)(normalizedAmount, normalizedDecimals);
+        return ((0, jsx_runtime_1.jsxs)(Component, { className: componentClass, onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("span", { className: "decimal__int", children: [intStr, sep && (0, helpers_1.whatDecimalSeparator)()] }), sep && (0, jsx_runtime_1.jsx)("span", { className: "decimal__dec", children: decStr }), symbolEl] }));
+    }
     const scale = 10n ** BigInt(normalizedDecimals);
     const dec = normalizedAmount % scale;
     const int = normalizedAmount / scale;
@@ -20,14 +34,6 @@ const Decimal = ({ amount, decimals = 8, round = 6, symbol, symbolLeft, padSymbo
     }
     const truncated = subscript && needsSubscript ? (0, helpers_1.compress)(padded) : padded;
     const trimmed = truncated.substring(0, round);
-    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, clsx_1.default)({
-            decimal: true,
-            "decimal--label-left": symbolLeft,
-            "decimal--no-pad": !padSymbol,
-            [`${className}`]: className,
-        }), onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("span", { className: "decimal__int", children: [(int || "0").toLocaleString(), round > 0 && (0, helpers_1.whatDecimalSeparator)()] }), dec.toString().length && round > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "decimal__dec", children: trimmed })), symbol && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)({
-                    decimal__symbol: true,
-                    [`${symbolClassName}`]: symbolClassName,
-                }), children: symbol }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Component, { className: componentClass, onClick: onClick, children: [(0, jsx_runtime_1.jsxs)("span", { className: "decimal__int", children: [(int || "0").toLocaleString(), round > 0 && (0, helpers_1.whatDecimalSeparator)()] }), dec.toString().length && round > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "decimal__dec", children: trimmed })), symbolEl] }));
 };
 exports.Decimal = Decimal;

package/lib/cjs/components/numbers/Fiat.js

@@ -4,19 +4,25 @@ exports.Fiat = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = require("clsx");
 const helpers_1 = require("../../helpers");
-const Fiat = ({ amount, decimals = 2, symbol, className, symbolRight = false, padSymbol = true, symbolSmall = false, as: Component = "div", }) => {
+const Fiat = ({ amount, decimals = 2, symbol, className, symbolRight = false, padSymbol = true, symbolSmall = false, as: Component = "div", clip = false, }) => {
+    const componentClass = (0, clsx_1.default)({
+        fiat: true,
+        "fiat--symbol-right": symbolRight,
+        [`${className}`]: className,
+    });
+    const symbolEl = symbol && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)({
+            fiat__symbol: true,
+            "fiat__symbol--small": symbolSmall,
+            "mr-0.5": padSymbol && !symbolRight,
+            "ml-0.5": padSymbol && symbolRight,
+        }), children: symbol }));
+    if (clip) {
+        const { intStr, sep, decStr } = (0, helpers_1.clipAmount)(amount, decimals);
+        return ((0, jsx_runtime_1.jsxs)(Component, { className: componentClass, children: [(0, jsx_runtime_1.jsxs)("span", { className: "fiat__int", children: [intStr, sep && (0, helpers_1.whatDecimalSeparator)()] }), sep && (0, jsx_runtime_1.jsx)("span", { className: "fiat__dec", children: decStr }), symbolEl] }));
+    }
     const dec = amount % BigInt(10 ** decimals);
     const int = BigInt(Math.floor(Number(amount - dec) / 10 ** decimals));
     const round = 2;
-    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, clsx_1.default)({
-            fiat: true,
-            "fiat--symbol-right": symbolRight,
-            [`${className}`]: className,
-        }), children: [(0, jsx_runtime_1.jsxs)("span", { className: "fiat__int", children: [(int || "0").toLocaleString(), (0, helpers_1.whatDecimalSeparator)()] }), (0, jsx_runtime_1.jsx)("span", { className: "fiat__dec", children: dec.toString().padStart(decimals, "0").substring(0, round) }), symbol && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)({
-                    fiat__symbol: true,
-                    "fiat__symbol--small": symbolSmall,
-                    "mr-0.5": padSymbol && !symbolRight,
-                    "ml-0.5": padSymbol && symbolRight,
-                }), children: symbol }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Component, { className: componentClass, children: [(0, jsx_runtime_1.jsxs)("span", { className: "fiat__int", children: [(int || "0").toLocaleString(), (0, helpers_1.whatDecimalSeparator)()] }), (0, jsx_runtime_1.jsx)("span", { className: "fiat__dec", children: dec.toString().padStart(decimals, "0").substring(0, round) }), symbolEl] }));
 };
 exports.Fiat = Fiat;

package/lib/cjs/helpers/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bigIntToDecimalString = exports.floatToSubscript = exports.compress = exports.classApr = exports.formatApr = exports.nFormatterInt = exports.nFormatter = exports.uuidv4 = exports.isEmpty = exports.whatDecimalSeparator = exports.getLang = void 0;
+exports.clipFloat = clipFloat;
+exports.clipAmount = clipAmount;
 const getLang = () => {
     if (navigator.languages != undefined)
         return navigator.languages[0];
@@ -151,6 +153,62 @@ const floatToSubscript = (floatValue, rounding, fractionDigits) => {
     return intPart + separator + trimmed;
 };
 exports.floatToSubscript = floatToSubscript;
+function clipFloat(value) {
+    if (!isFinite(value) || value === 0)
+        return "0";
+    const abs = Math.abs(value);
+    const sign = value < 0 ? "-" : "";
+    const sep = (0, exports.whatDecimalSeparator)();
+    if (abs >= 1000)
+        return sign + Math.round(abs).toLocaleString();
+    if (abs >= 100)
+        return sign + abs.toLocaleDecimal(1);
+    if (abs >= 10)
+        return sign + abs.toLocaleDecimal(2);
+    if (abs >= 1)
+        return sign + abs.toLocaleDecimal(3);
+    if (abs >= 0.1)
+        return sign + abs.toLocaleDecimal(4);
+    // < 0.1: 4 significant figures, subscript notation if > 3 leading zeros
+    const leadingZeros = Math.max(0, -Math.floor(Math.log10(abs)) - 1);
+    const totalDecimals = leadingZeros + 4;
+    const formatted = abs.toLocaleString(undefined, {
+        minimumFractionDigits: totalDecimals,
+        maximumFractionDigits: totalDecimals,
+    });
+    const [intPart, decPart] = formatted.split(sep);
+    return sign + (intPart ?? "0") + sep + (0, exports.compress)((decPart ?? "").replace(/0+$/, ""));
+}
+function clipAmount(amount, decimals) {
+    const scale = 10n ** BigInt(decimals);
+    const intPart = amount / scale;
+    const fracPart = amount % scale;
+    const fracStr = fracPart.toString().padStart(decimals, "0");
+    const intNum = Number(intPart);
+    const withDec = (raw, int = String(intNum)) => ({
+        intStr: int,
+        sep: true,
+        decStr: raw,
+    });
+    if (intNum >= 1000)
+        return { intStr: (intPart || "0").toLocaleString(), sep: false, decStr: "" };
+    if (intNum >= 100)
+        return withDec(fracStr.substring(0, 1));
+    if (intNum >= 10)
+        return withDec(fracStr.substring(0, 2));
+    if (intNum >= 1)
+        return withDec(fracStr.substring(0, 3));
+    if (fracPart === 0n)
+        return { intStr: "0", sep: false, decStr: "" };
+    const leadingZeros = (fracStr.match(/^(0*)/) ?? ["", ""])[1].length;
+    if (leadingZeros === 0)
+        return withDec(fracStr.substring(0, 4).replace(/0+$/, ""), "0");
+    // < 0.1: 4 significant figures, trailing zeros trimmed
+    const sigFigStr = fracStr.substring(0, leadingZeros + 4).replace(/0+$/, "");
+    if (leadingZeros > 3)
+        return { intStr: "0", sep: true, decStr: (0, exports.compress)(sigFigStr) };
+    return { intStr: "0", sep: true, decStr: sigFigStr };
+}
 /**
  * A function that uses string manipulation to convert a bigint into a floating point number,
  * avoiding the floating points maths issues that sometimes arise when generating this number

package/lib/cjs/helpers/number.js

@@ -1,8 +1,8 @@
 "use strict";
 // Add the method to the Number prototype
-Number.prototype.toLocaleDecimal = function (decimals = 0) {
+Number.prototype.toLocaleDecimal = function (decimals = 0, shrink = false) {
     return this.toLocaleString(undefined, {
         maximumFractionDigits: decimals,
-        minimumFractionDigits: decimals,
+        minimumFractionDigits: shrink ? 0 : decimals,
     });
 };