rujira.ui 1.0.1 → 1.0.3

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

@@ -1,5 +1,5 @@
 import TonConnect, { isWalletInfoCurrentlyEmbedded, isWalletInfoCurrentlyInjected, isWalletInfoRemote, } from "@tonconnect/sdk";
-import { Address as TonAddress } from "ton-core/src/address/Address";
+import { Address as TonAddress } from "ton-core";
 class TonKeeper {
     connector = new TonConnect({
         manifestUrl: `https://next.rujira.network/tonconnect-manifest.json`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rujira.ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -28,7 +28,8 @@
   },
   "files": [
     "lib",
-    "src"
+    "src",
+    "**/*.png"
   ],
   "dependencies": {
     "@cosmjs/encoding": "^0.32.4",

package/src/wallets/providers/ton.ts

@@ -5,7 +5,7 @@ import TonConnect, {
   Wallet,
 } from "@tonconnect/sdk";
 import { Address, Msg, Network, Signer, Simulation, TxResult } from "rujira.js";
-import { Address as TonAddress } from "ton-core/src/address/Address";
+import { Address as TonAddress } from "ton-core";
 
 class TonKeeper implements Signer {
   private connector = new TonConnect({

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

@@ -1,21 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-"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

@@ -1,131 +0,0 @@
-"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

@@ -1,52 +0,0 @@
-"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

@@ -1,63 +0,0 @@
-"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

@@ -1,171 +0,0 @@
-"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

@@ -1,39 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-"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;