rujira.ui 0.1.0 → 1.0.0

package/lib/cjs/assets/tokens/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wink = exports.rkuji = exports.nstk = exports.nami = exports.mnta = exports.lvn = exports.kuji = exports.fuzn = exports.auto = void 0;
+const auto_png_1 = require("./auto.png");
+exports.auto = auto_png_1.default;
+const fuzn_png_1 = require("./fuzn.png");
+exports.fuzn = fuzn_png_1.default;
+const kuji_png_1 = require("./kuji.png");
+exports.kuji = kuji_png_1.default;
+const lvn_png_1 = require("./lvn.png");
+exports.lvn = lvn_png_1.default;
+const mnta_png_1 = require("./mnta.png");
+exports.mnta = mnta_png_1.default;
+const nami_png_1 = require("./nami.png");
+exports.nami = nami_png_1.default;
+const nstk_png_1 = require("./nstk.png");
+exports.nstk = nstk_png_1.default;
+const rkuji_png_1 = require("./rkuji.png");
+exports.rkuji = rkuji_png_1.default;
+const wink_png_1 = require("./wink.png");
+exports.wink = wink_png_1.default;

package/lib/cjs/components/AssetLabel.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AssetLabel = ({ asset, Container }) => asset ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asset.metadata.symbol, ((asset.metadata.symbol === "USDT" && asset.chain !== "ETH") ||
+            (asset.metadata.symbol === "ETH" && asset.chain !== "ETH") ||
+            (asset.metadata.symbol === "USDC" && asset.chain !== "ETH")) &&
+            asset.type === "SECURED" && (0, jsx_runtime_1.jsxs)(Container, { children: [".", asset.chain] })] })) : null;
+exports.AssetLabel = AssetLabel;

package/lib/cjs/components/balance/OmniBalance.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OmniBalance = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const rujira_js_1 = require("rujira.js");
+const helpers_1 = require("../../helpers");
+const NetworkIcon_1 = require("../icons/NetworkIcon");
+const Decimal_1 = require("../numbers/Decimal");
+const accountSorter = (a, b) => {
+    const aIsSecured = a.asset.type === "SECURED";
+    const bIsSecured = b.asset.type === "SECURED";
+    if (aIsSecured && !bIsSecured)
+        return -1;
+    if (!aIsSecured && bIsSecured)
+        return 1;
+    return Number(b.balance - a.balance);
+};
+const OmniBalance = ({ balance, onClick, className, }) => {
+    const sortedAccounts = balance?.accounts
+        ? [...balance.accounts].sort(accountSorter)
+        : [];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "omni-balance", children: [(0, jsx_runtime_1.jsx)(Decimal_1.Decimal, { amount: balance?.balance || 0n, className: className, onClick: () => balance && onClick?.(balance) }), sortedAccounts.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "omni-balance__networks", children: sortedAccounts.map((x) => {
+                    const n = x.asset.type === "SECURED" ? "THOR" : x.asset.chain;
+                    return ((0, jsx_runtime_1.jsx)("button", { "data-tooltip-id": "global-tip", "data-tooltip-html": `
+                    <div class="condensed fs-16 fw-500">${(0, helpers_1.nFormatter)(x.balance, 6)}</div><div class="fs-14 lh-16 color-grey">on ${(0, rujira_js_1.networkLabel)(n)}</div>`, className: `omni-balance__network-button omni-balance__network-button--${n.toLowerCase()}`, onClick: () => onClick?.(x), children: (0, jsx_runtime_1.jsx)(NetworkIcon_1.NetworkIcon, { network: n }) }, n));
+                }) }))] }));
+};
+exports.OmniBalance = OmniBalance;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuyModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BuyModal = () => {
+    return (0, jsx_runtime_1.jsx)("h3", { className: "h3", children: "Buy Crypto" });
+};
+exports.BuyModal = BuyModal;

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

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DepositModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rujira_js_1 = require("rujira.js");
+const i18n_1 = require("../../i18n");
+const IconDenom_1 = require("../icons/IconDenom");
+const Icons_1 = require("../icons/Icons");
+const Input_1 = require("../inputs/Input");
+/* import { useClickOutside } from "../../hooks/useClickOutside";
+import { BreakPoints, useWindowSize } from "../../hooks/useWindowSize";
+import { AnimatePresence, motion } from "motion/react"; */
+const clsx_1 = require("clsx");
+const date_fns_1 = require("date-fns");
+const react_hot_toast_1 = require("react-hot-toast");
+const __1 = require("../..");
+const deposited_gif_1 = require("../../assets/images/deposited.gif");
+const filters_gif_1 = require("../../assets/images/filters.gif");
+const filters_png_1 = require("../../assets/images/filters.png");
+const swap_gif_1 = require("../../assets/images/swap.gif");
+const Select_1 = require("../inputs/Select");
+const DepositModal = ({ title = "deposit", options, targets, selected, dismiss, Submit, queryClient, amount, target, label, }) => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    const [token, setToken] = (0, react_1.useState)(selected ? selected.asset.metadata.symbol : undefined);
+    const [asset, setAsset] = (0, react_1.useState)(selected?.asset);
+    const [tx, setTx] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "deposit-modal", children: [(token || asset) && !selected && !tx && ((0, jsx_runtime_1.jsxs)("button", { className: "transparent color-white hover-primary1 flex ai-c mb-1 fs-14 fw-500 pointer", onClick: () => {
+                    setAsset(undefined);
+                    setToken(undefined);
+                }, children: [(0, jsx_runtime_1.jsx)(Icons_1.AngleLeft, { className: "block w-2 h-2 mr-0.5" }), t("back")] })), (0, jsx_runtime_1.jsxs)("h3", { className: "h3 flex ai-b mb-0", children: [asset && ((0, jsx_runtime_1.jsx)(IconDenom_1.IconDenom, { denom: asset.metadata.symbol, className: "as-c w-4 h-4 mr-1" })), t(title), " ", asset && asset.metadata.symbol, asset && ((0, jsx_runtime_1.jsx)("small", { className: "ml-1 color-grey fw-400", children: t("toRujira") }))] }), label, (0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [!token && ((0, jsx_runtime_1.jsx)(TokenSelect, { options: options, onSelect: (a) => {
+                            setToken(a.metadata.symbol);
+                            setAsset(a);
+                        } })), asset && !tx && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Confirm, { asset: asset, amount: amount, balance: selected ||
+                                options.find((a) => a.asset.asset === asset.asset)?.balance, target: target, targets: targets, Submit: Submit, onSuccess: setTx, queryClient: queryClient }) })), tx && (0, jsx_runtime_1.jsx)(Success, { tx: tx, dismiss: dismiss })] })] }));
+};
+exports.DepositModal = DepositModal;
+const TokenSelect = ({ options, onSelect }) => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [all, setAll] = (0, react_1.useState)(!options.length);
+    const filtered = options.filter((i) => {
+        const q = i.asset.metadata.symbol
+            .toLowerCase()
+            .includes(search.toLowerCase());
+        return all ? q : q && i.balance;
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { containerClassName: "grow", label: t("search"), value: search, onChange: (e) => setSearch(e.currentTarget.value), children: search !== "" && ((0, jsx_runtime_1.jsx)(Icons_1.MinusCircle, { className: "input-container__clear", onClick: () => setSearch("") })) }), (0, jsx_runtime_1.jsx)(__1.Toggle, { label: t("showAll"), className: "toggle--xs color-white as-c ml-1", checked: all, onChange: (e) => setAll(e.currentTarget.checked) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "deposit-modal__content row wrap pad-mini mt-1.5", children: [filtered.map((i) => ((0, jsx_runtime_1.jsx)("div", { className: "col-12 col-md-col-6", children: (0, jsx_runtime_1.jsxs)("button", { className: "card card--hover-border mt-0.5 mb-0.5 p-2 flex ai-c", onClick: () => {
+                                onSelect(i.asset);
+                                setSearch("");
+                            }, children: [(0, jsx_runtime_1.jsx)(IconDenom_1.IconDenom, { denom: i.asset.metadata.symbol, className: "block w-4 h-4" }), (0, jsx_runtime_1.jsx)("p", { className: "ml-1 fw-600 color-white", children: i.asset.metadata.symbol }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-a text-right", children: [i.balance ? ((0, jsx_runtime_1.jsx)("div", { className: "tag tag--teal tag--borderless", children: (0, jsx_runtime_1.jsx)(__1.Decimal, { amount: i.balance.balance, decimals: i.asset.metadata.decimals }) })) : null, (0, jsx_runtime_1.jsx)("br", {}), i.valueUsd ? ((0, jsx_runtime_1.jsx)("small", { className: "color-grey", children: (0, jsx_runtime_1.jsx)(__1.Fiat, { symbol: "$", className: "fs-12 mr-1", amount: i.valueUsd, decimals: i.asset.metadata.decimals }) })) : null] })] }) }, i.asset.asset))), filtered.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "color-grey my-2 w-full text-center", children: t("noBalancesFound") }))] })] }));
+};
+const Confirm = ({ asset, balance, targets, target: target_, Submit, onSuccess, queryClient, amount: requestAmount, }) => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    const ref = (0, react_1.useRef)(null);
+    const [amount, setAmount] = (0, react_1.useState)(requestAmount || 0n);
+    const [target, setTarget] = (0, react_1.useState)(target_ || "");
+    const [custom, setCustom] = (0, react_1.useState)("");
+    const [direct, setDirect] = (0, react_1.useState)(false);
+    const [advanced, setAdvanced] = (0, react_1.useState)(false);
+    const [hoverAd, setHoverAd] = (0, react_1.useState)(false);
+    const [quote, setQuote] = (0, react_1.useState)();
+    const [account, setAccount] = (0, react_1.useState)(balance?.accounts[0]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current && target === "custom") {
+            ref.current.focus();
+        }
+    }, [target, ref]);
+    const shouldSwap = asset.chain !== account?.asset.chain ||
+        asset.metadata.symbol !== account.asset.metadata.symbol;
+    // Determine the actual destination address
+    const destination = target === "custom" ? custom : target;
+    // Fetch swap quote when conditions are met
+    (0, react_1.useEffect)(() => {
+        setQuote(undefined);
+        if (!account)
+            return;
+        if (!shouldSwap)
+            return;
+        if (!amount)
+            return;
+        if (direct)
+            return;
+        setQuote("loading");
+        queryClient.thorchain
+            .getSwapQuote({
+            fromAsset: account.asset.asset,
+            toAsset: asset.asset,
+            amount: amount,
+            streamingInterval: 1n,
+            streamingQuantity: 0n,
+            destination,
+        })
+            .then(setQuote)
+            .catch(setQuote);
+    }, [account, amount, destination, asset, direct]);
+    const depositAmount = typeof quote === "object" && "memo" in quote
+        ? quote.expectedAmountOut
+        : amount;
+    const depositFee = (typeof quote === "object" && "memo" in quote && quote.fees?.total) || 0n;
+    const price = asset.price?.current || 0n;
+    const feeValue = price ? (price * depositFee) / 10n ** 12n : 0n;
+    const receivedValue = price ? (price * depositAmount) / 10n ** 12n : 0n;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [balance && balance.accounts.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "fs-14 fw-500 color-grey mb-1 ml-1", children: t("selectSourceAccount") }), (0, jsx_runtime_1.jsx)("div", { className: "br-1 p-2 bg-black mb-2 flex dir-c gap-y-1", children: balance.accounts.map((x) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => {
+                                setAccount(x);
+                            }, className: (0, clsx_1.default)({
+                                "flex ai-c fs-14 condensed pointer": true,
+                                "color-grey": account !== x,
+                                "color-white": account === x,
+                            }), children: [(0, jsx_runtime_1.jsx)(__1.Radio, { checked: account === x, readOnly: true }), (0, jsx_runtime_1.jsx)("div", { "data-tooltip-content": x.address, "data-tooltip-id": "modal-tip", onClick: () => {
+                                        react_hot_toast_1.default.success("Address copied to clipboard");
+                                        navigator.clipboard.writeText(x.address);
+                                    }, className: "inconsolata mx-1", children: x.address.substring(0, 6) + "…" + x.address.slice(-6) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex ai-c gap-0.5", children: [(0, jsx_runtime_1.jsx)(__1.NetworkIcon, { network: x.asset.chain, className: "w-2 h-2" }), (0, jsx_runtime_1.jsx)("span", { className: "", children: (0, rujira_js_1.networkLabel)(x.asset.chain) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex dir-r ai-e ml-a", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
+                                                "tag tag--md ml-a": true,
+                                                "tag--teal": account === x,
+                                            }), children: (0, jsx_runtime_1.jsx)(__1.Decimal, { amount: x.balance, symbol: x.asset.metadata.symbol, symbolClassName: "condensed fw-500" }) }), x.valueUsd ? ((0, jsx_runtime_1.jsxs)("div", { className: "iflex ml-0.5 ml-sm-1 fs-13 color-grey", style: { marginBottom: "0.05rem" }, children: ["(", (0, jsx_runtime_1.jsx)(__1.Fiat, { amount: x.valueUsd, symbol: "$", decimals: 8, className: "fs-12 color-grey" }), ")"] })) : null] })] }, x.address + x.asset.chain))) })] })) : null, (0, jsx_runtime_1.jsx)(__1.DenomInput, { className: "mt-2.5 bg-black", symbol: asset.metadata.symbol, amount: amount, decimals: 8, onChangeAmount: setAmount, max: BigInt(account?.balance || 0), maxLabel: `${t("balance")}:`, fiat: { price, symbol: "$" } }), (0, jsx_runtime_1.jsxs)("div", { className: "row wrap mt-1.5 mt-sm-2 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("swapFee") }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 col-xs-8 text-center text-xs-right", children: [(0, jsx_runtime_1.jsx)(__1.Decimal, { amount: depositFee, symbol: direct ? account?.asset.metadata.symbol : asset.metadata.symbol, className: direct || !shouldSwap ? "color-grey" : undefined, symbolClassName: "color-grey fs-14 condensed fw-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "iflex ml-1 fs-13 color-grey", children: ["(", (0, jsx_runtime_1.jsx)(__1.Fiat, { amount: feeValue ?? 0n, symbol: "$", decimals: 8, className: "numeric-input__value color-grey fs-12" }), ")"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-4 text-center text-xs-left color-grey fw-500", children: t("receivedAmount") }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 col-xs-8 text-center text-xs-right", children: [(0, jsx_runtime_1.jsx)(__1.Decimal, { amount: depositAmount, symbol: direct ? account?.asset.metadata.symbol : asset.metadata.symbol, symbolClassName: "color-grey fs-14 condensed fw-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "iflex ml-1 fs-13 color-grey", children: ["(", (0, jsx_runtime_1.jsx)(__1.Fiat, { amount: receivedValue ?? 0n, symbol: "$", decimals: 8, className: "numeric-input__value color-grey fs-12" }), ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full jc-c ai-c gap-0.5 pointer color-grey hover-white", onMouseEnter: () => setHoverAd(true), onMouseLeave: () => setHoverAd(false), onClick: () => setAdvanced((prev) => !prev), children: [(0, jsx_runtime_1.jsx)("img", { src: hoverAd ? filters_gif_1.default : filters_png_1.default, className: (0, clsx_1.default)({
+                                    "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, className: "bg-darkGrey", children: x }, x))), (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 }) })] })), shouldSwap && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [asset.chain === "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 }), "."] })] }))] }))] })), (0, jsx_runtime_1.jsx)(Submit, { selected: account, amount: amount, target: target !== "custom" ? target : custom, swapMemo: "memo", onSuccess: onSuccess, disabled: false, isDangerous: false, quote: quote, shouldSwap: shouldSwap })] }));
+};
+const Success = ({ tx, dismiss, }) => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex ai-c br-2 bg-teal-10 p-2", children: [(0, jsx_runtime_1.jsx)("img", { src: deposited_gif_1.default, alt: "", className: "filter-teal block w-6 h-a no-shrink" }), (0, jsx_runtime_1.jsx)("span", { className: "color-teal fs-18 fw-600 mx-1", children: t("depositStarted") })] }), (0, jsx_runtime_1.jsx)("div", { className: "table table--no-hover mt-1", children: (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsxs)("td", { className: "color-grey", children: [(0, rujira_js_1.networkLabel)(tx.network), " ", t("depositEta")] }), (0, jsx_runtime_1.jsx)("td", { children: (0, date_fns_1.formatDuration)((0, date_fns_1.intervalToDuration)({
+                                        start: 0,
+                                        end: (0, rujira_js_1.networkConfirmationTime)(tx.network),
+                                    }), { format: ["hours", "minutes", "seconds"], zero: false }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "color-grey", children: t("viewTx") }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("a", { href: (0, rujira_js_1.networkTxLink)(tx), target: "_blank", className: "color-white hover-primary1 no-underline", children: [(0, rujira_js_1.networkExplorerLabel)(tx.network), (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "inline-block w-1.5 h-1.5 ml-0.5" })] }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "color-grey", children: t("trackDeposit") }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("a", { href: (0, rujira_js_1.networkTxLink)({
+                                            network: "THOR",
+                                            txHash: tx.txHash.replace(/^0x/, "").toUpperCase(),
+                                        }), target: "_blank", className: "color-white hover-primary1 no-underline", children: ["THORChain.net", (0, jsx_runtime_1.jsx)(Icons_1.External, { className: "inline-block w-1.5 h-1.5 ml-0.5" })] }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "modal__footer p-3 text-right", children: (0, jsx_runtime_1.jsx)(__1.Button, { label: "Close", onClick: dismiss }) })] }));
+};

package/lib/cjs/components/buttons/Button.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const fixedForwardRef = react_2.forwardRef;
+const UnwrappedAnyComponent = (props, ref) => {
+    const { as: Comp = "button", label, children, className, ...rest } = props;
+    // Remove button--outline if button--waiting is present
+    const processedClassName = className?.includes("button--waiting")
+        ? className.replace(/button--outline/g, "").trim()
+        : className;
+    const mouseX = (0, react_1.useMotionValue)(0);
+    const mouseY = (0, react_1.useMotionValue)(0);
+    function handleMouseMove({ currentTarget, clientX, clientY }) {
+        const { left, top } = currentTarget.getBoundingClientRect();
+        mouseX.set(clientX - left);
+        mouseY.set(clientY - top);
+    }
+    let gradient = "214, 21, 235, 1";
+    if (className?.includes("button--grey")) {
+        gradient = "96, 125, 139, 1";
+    }
+    else if (className?.includes("button--red")) {
+        gradient = "244, 81, 30, 1";
+    }
+    else if (className?.includes("button--blue")) {
+        gradient = "96, 251, 208, 1";
+    }
+    else if (className?.includes("button--dark")) {
+        gradient = "214, 21, 235, 0.25";
+    }
+    else if (className?.includes("button--orange")) {
+        gradient = "245, 123, 0, 0.25";
+    }
+    const buttonElement = ((0, jsx_runtime_1.jsxs)(Comp, { ...rest, ref: ref, onMouseMove: handleMouseMove, className: (0, clsx_1.default)({
+            button: !className?.includes("transparent"),
+            [`${processedClassName}`]: processedClassName,
+        }), children: [!className?.includes("transparent") && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "button__motion", style: {
+                    background: (0, react_1.useMotionTemplate) `
+          radial-gradient(
+            150px circle at ${mouseX}px ${mouseY}px,
+            rgba(${gradient}),
+            transparent 100%
+            )
+            `,
+                } })), label && (0, jsx_runtime_1.jsx)("span", { children: label }), children] }));
+    return className?.includes("button--waiting") ? ((0, jsx_runtime_1.jsx)("div", { className: "button-container", children: buttonElement })) : (buttonElement);
+};
+exports.Button = fixedForwardRef(UnwrappedAnyComponent);

package/lib/cjs/components/buttons/Popout.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const Icons_1 = require("../icons/Icons");
+const Button_1 = require("./Button");
+const react_dom_1 = require("react-dom");
+const Popout = ({ children, className, buttonClassName }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const container = (0, react_1.useRef)(null);
+    const navElement = document.getElementById("popout");
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            document.addEventListener("mousedown", handleClickOutside);
+            window.addEventListener("resize", position);
+            navElement.classList.add("open");
+            position();
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            window.removeEventListener("resize", position);
+            navElement.classList.remove("open");
+        };
+    }, [open]);
+    const handleClickOutside = (e) => {
+        if (navElement.contains(e.target)) {
+            return;
+        }
+        setOpen(false);
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        return false;
+    };
+    const position = () => {
+        const containerElementElement = container.current;
+        if (navElement && containerElementElement) {
+            const rightPosition = window.scrollX +
+                window.innerWidth -
+                containerElementElement.getBoundingClientRect().left -
+                parseInt(getComputedStyle(containerElementElement).borderLeftWidth, 10);
+            const bottomPosition = -window.scrollY +
+                window.innerHeight -
+                containerElementElement.getBoundingClientRect().top -
+                parseInt(getComputedStyle(containerElementElement).borderTopWidth, 10) -
+                containerElementElement.offsetHeight;
+            navElement.style.right = `${rightPosition + 4}px`;
+            navElement.style.bottom = `${bottomPosition - 4}px`;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: container, className: (0, clsx_1.default)({
+            popout: true,
+            [`${className}`]: className,
+        }), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(!open), className: (0, clsx_1.default)({
+                    "button--grey button--small": !buttonClassName,
+                    [`${buttonClassName}`]: buttonClassName,
+                }), children: !open ? (0, jsx_runtime_1.jsx)(Icons_1.Ellipsis, {}) : (0, jsx_runtime_1.jsx)(Icons_1.AngleLeft, {}) }), open && (0, react_dom_1.createPortal)(children, navElement)] }));
+};
+exports.Popout = Popout;

package/lib/cjs/components/buttons/TxButton.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TxButtonTip = exports.TxButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const react_hot_toast_1 = require("react-hot-toast");
+const react_tooltip_1 = require("react-tooltip");
+const rujira_js_1 = require("rujira.js");
+const unlock_gif_1 = require("../../assets/images/unlock.gif");
+const i18n_1 = require("../../i18n");
+const Warning_1 = require("../notices/Warning");
+const Decimal_1 = require("../numbers/Decimal");
+const Button_1 = require("./Button");
+const txsuccess_gif_1 = require("../../assets/images/txsuccess.gif");
+const txfail_gif_1 = require("../../assets/images/txfail.gif");
+const txsign_gif_1 = require("../../assets/images/txsign.gif");
+const Loader_1 = require("../loader/Loader");
+// Helper to identify spacing/layout classes
+const SPACING_CLASS_REGEX = /^(m|p)(l|r|t|b|x|y)?-\d+$/;
+const isSpacingClass = (className) => SPACING_CLASS_REGEX.test(className);
+// Separate spacing classes from styling classes
+const separateClasses = (className) => {
+    const classes = className?.split(" ") || [];
+    return {
+        spacing: classes.filter(isSpacingClass),
+        styling: classes.filter((c) => !isSpacingClass(c)),
+    };
+};
+const TxButton = (props) => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    const { accountProvider, msg, onSuccess, onError, SimulationComponent = DefaultSimulationComponent, children, toastOpts = {}, className, hideSimulation, onClick, ...rest } = props;
+    const [simulation, setSimulation] = (0, react_1.useState)();
+    const [simulationError, setSimulationError] = (0, react_1.useState)();
+    const { loading, success, error } = toastOpts;
+    const [isSigning, setIsSigning] = (0, react_1.useState)(false);
+    const [isSuccess, setIsSuccess] = (0, react_1.useState)(false);
+    const [isRejected, setIsRejected] = (0, react_1.useState)(false);
+    const doSimulate = (msg) => {
+        setSimulationError(undefined);
+        setSimulation(undefined);
+        if (msg) {
+            const signer = accountProvider.signer(msg.account.address);
+            signer
+                .simulate(msg)
+                .then(setSimulation)
+                .catch((err) => {
+                console.error(err);
+                setSimulationError(err);
+                onError && onError(new rujira_js_1.TxError(msg, err, "simulation"));
+            });
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        doSimulate(msg);
+    }, [msg]);
+    const handleSign = (e) => {
+        if (isSigning || isSuccess || isRejected)
+            return;
+        if (!simulation)
+            throw new Error(`Simulation required`);
+        if (!msg)
+            throw new Error(`Msg required`);
+        setIsSigning(true);
+        const signer = accountProvider.signer(msg.account.address);
+        if (onClick)
+            onClick(e);
+        const p = signer
+            .signAndBroadcast(simulation, msg)
+            .then((res) => {
+            onSuccess && onSuccess(res);
+            setIsSigning(false);
+            setIsSuccess(true);
+            setTimeout(() => {
+                setIsSuccess(false);
+            }, 3000);
+            return res;
+        })
+            .catch((err) => {
+            console.error(err);
+            onError && onError(new rujira_js_1.TxError(msg, err, "signAndBroadcast"));
+            setIsSigning(false);
+            setIsRejected(true);
+            setTimeout(() => {
+                setIsRejected(false);
+            }, 3000);
+            throw err;
+        });
+        react_hot_toast_1.default.promise(p, {
+            loading: loading || t("submittingTransaction"),
+            success: success || ((res) => successHandler(res, t)),
+            error: error ||
+                ((err) => {
+                    console.error(err);
+                    const defaultError = t("errorSubmittingTransaction");
+                    switch (typeof err) {
+                        case "string":
+                            return (0, rujira_js_1.translateError)(err) || defaultError;
+                        case "object":
+                            return "message" in err
+                                ? (0, rujira_js_1.translateError)(err.message) || defaultError
+                                : defaultError;
+                        default:
+                            return defaultError;
+                    }
+                }),
+        });
+    };
+    const disabled = !msg || !simulation || !!simulationError || rest.disabled;
+    // Separate spacing classes (always applied) from styling classes (conditionally applied)
+    const { spacing: spacingClasses, styling: stylingClasses } = separateClasses(className);
+    // Determine if tooltip should be shown
+    const showTooltip = simulationError && simulationError.message !== "";
+    const allowanceMsg = (0, react_1.useMemo)(() => {
+        if (!msg)
+            return null;
+        if (!simulationError)
+            return null;
+        if (!(simulationError instanceof rujira_js_1.InsufficientAllowanceError))
+            return null;
+        return new rujira_js_1.MsgErc20IncreaseAllowance(msg.account, simulationError);
+    }, [msg, simulationError]);
+    if (allowanceMsg)
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.TxButton, { ...props, toastOpts: {
+                        loading: t("increasingAllowance"),
+                        success: t("allowanceIncreased"),
+                    }, label: t("stepApprove"), msg: allowanceMsg, onSuccess: () => doSimulate(msg) }), (0, jsx_runtime_1.jsx)(InsufficientAllowanceWarning, {})] }));
+    const modProps = {
+        ...rest,
+        ...(rest.label && {
+            label: `${isSuccess
+                ? t("success")
+                : isSigning
+                    ? t("waiting")
+                    : isRejected
+                        ? t("rejected")
+                        : rest.label}`,
+        }),
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, { ...modProps, onClick: handleSign, className: (0, clsx_1.default)(stylingClasses.length > 0 ? stylingClasses : "button", spacingClasses, {
+                    "button--grey": disabled && !stylingClasses.includes("transparent"),
+                    "button--waiting": (isSigning || isRejected || isSuccess) &&
+                        !className?.includes("transparent"),
+                    "button--success": isSuccess,
+                    "button--rejected": isRejected,
+                }), style: {
+                    cursor: isSigning || isSuccess || isRejected ? "default" : undefined,
+                    ...rest.style,
+                }, disabled: disabled, "data-tooltip-id": "tx-button-tip", "data-tooltip-html": showTooltip
+                    ? `<p class="fs-12 lh-16 fw-400 w-36 mb-0.5">${(0, rujira_js_1.translateError)(simulationError.message)}</p>`
+                    : undefined, children: [(isSuccess || isRejected || isSigning) &&
+                        !className?.includes("transparent") && ((0, jsx_runtime_1.jsx)("img", { className: "w-4 h-4 filter-white big", src: isSigning ? txsign_gif_1.default : isSuccess ? txsuccess_gif_1.default : txfail_gif_1.default, alt: "lock" })), (isSigning || isRejected || isSuccess) &&
+                        className?.includes("transparent") ? ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { className: "w-full h-full" })) : (((!isSigning && !isRejected && !isSuccess) ||
+                        className?.includes("transparent")) &&
+                        children)] }), hideSimulation ? null : msg ? ((0, jsx_runtime_1.jsx)(SimulationComponent, { simulation: simulation, error: simulationError })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }))] }));
+};
+exports.TxButton = TxButton;
+const TxButtonTip = () => ((0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: "tx-button-tip", className: "tooltip", float: true, style: { zIndex: 203 } }));
+exports.TxButtonTip = TxButtonTip;
+const DefaultSimulationComponent = ({ simulation, error, }) => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    if (error instanceof rujira_js_1.InsufficientAllowanceError) {
+        return (0, jsx_runtime_1.jsx)(InsufficientAllowanceWarning, {});
+    }
+    return ((0, jsx_runtime_1.jsx)("small", { className: "fs-12 text-center mt-1 color-grey block", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [t("networkFee"), " ", simulation ? ((0, jsx_runtime_1.jsx)(Decimal_1.Decimal, { amount: simulation.amount, decimals: simulation.decimals, symbol: simulation.symbol, className: "color-white" })) : ((0, jsx_runtime_1.jsx)("span", { children: t("calculating") }))] }) }));
+};
+const InsufficientAllowanceWarning = () => {
+    const { t } = (0, i18n_1.useTranslation)("common");
+    return ((0, jsx_runtime_1.jsxs)(Warning_1.Warning, { className: "warning mt-2 condensed flex ai-c", color: "orange", children: [(0, jsx_runtime_1.jsx)("img", { src: unlock_gif_1.default, alt: "lock" }), (0, jsx_runtime_1.jsx)("div", { className: "text-left", children: t("insufficientAllowanceWarning") })] }));
+};
+const successHandler = (res, t) => res.label ? ((0, jsx_runtime_1.jsx)("p", { children: res.label })) : ((0, jsx_runtime_1.jsxs)("p", { children: [t("transactionSucceeded"), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("a", { href: (0, rujira_js_1.networkTxLink)(res), target: "_blank", className: "color-white no-underline fs-12", children: res.txHash.slice(0, 8) + "..." + res.txHash.slice(-8) })] }));

package/lib/cjs/components/buttons/__Popout.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopout = exports.Popout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const Popout = ({ children, position, visible }) => {
+    const node = (0, react_1.useRef)(null);
+    if (!visible)
+        return null;
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("nav", { ref: node, className: "popout condensed", style: {
+            top: position.top - (node.current?.offsetHeight || 0) + 8,
+            left: position.left - (node.current?.offsetWidth || 0),
+        }, children: children }), document.body);
+};
+exports.Popout = Popout;
+const usePopout = () => {
+    const [popoutState, setPopoutState] = (0, react_1.useState)({
+        content: "",
+        position: { top: 0, left: 0 },
+        visible: false,
+    });
+    const showPopout = (content, target) => {
+        const rect = target.getBoundingClientRect();
+        setPopoutState({
+            content,
+            position: {
+                top: rect.top + window.scrollY + rect.height,
+                left: rect.left + window.scrollX,
+            },
+            visible: true,
+        });
+    };
+    const hidePopout = () => {
+        setPopoutState((prev) => ({ ...prev, visible: false }));
+    };
+    return { popoutState, showPopout, hidePopout };
+};
+exports.usePopout = usePopout;

package/lib/cjs/components/cards/Card.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const Card = ({ className, children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
+            "card p-3 color-white": true,
+            [`${className}`]: className,
+        }), children: children }));
+};
+exports.Card = Card;

package/lib/cjs/components/cards/GradientCard.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GradientCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const GradientCard = ({ className, children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)({
+            "gradient-card bg-black p-3 color-white": true,
+            [`${className}`]: className,
+        }), children: children }));
+};
+exports.GradientCard = GradientCard;

package/lib/cjs/components/cards/ShareCard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const ShareCard = ({ className, backgroundImage, leftComponent, rightComponent, badgeComponent, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)({
+            "share-card": true,
+            [`${className}`]: className,
+        }), style: {
+            backgroundImage: backgroundImage
+                ? `url(${backgroundImage})`
+                : undefined,
+        }, children: [badgeComponent && ((0, jsx_runtime_1.jsx)("div", { className: "share-card__badge", children: badgeComponent })), (0, jsx_runtime_1.jsxs)("div", { className: "share-card__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "share-card__left", children: leftComponent }), (0, jsx_runtime_1.jsx)("div", { className: "share-card__right", children: rightComponent })] })] }));
+};
+exports.ShareCard = ShareCard;