rujira.ui 1.0.6 → 1.0.8

package/lib/cjs/components/AssetLabel.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;
+exports.AssetLabel = AssetLabel;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OmniBalance = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_tooltip_1 = require("react-tooltip");
+const rujira_js_1 = require("rujira.js");
+const helpers_1 = require("../../helpers");
+const ProviderIcon_1 = require("../icons/ProviderIcon");
+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, accountProviders, }) => {
+    const tooltipId = (0, react_1.useId)();
+    const providerLookup = (0, react_1.useMemo)(() => new Map(accountProviders?.map(({ address, provider }) => [address, provider])), [accountProviders]);
+    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" ? rujira_js_1.THOR : x.asset.chain;
+                    const provider = providerLookup.get(x.address);
+                    const tipId = `${tooltipId}-${n}`;
+                    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { "data-tooltip-id": tipId, 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 }) }), (0, jsx_runtime_1.jsx)(react_tooltip_1.Tooltip, { id: tipId, className: "tooltip", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex ai-c gap-1", children: [provider && ((0, jsx_runtime_1.jsx)(ProviderIcon_1.ProviderIcon, { provider: provider, selected: true, className: "w-3 h-3 block" })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "condensed fs-16 fw-500", children: (0, helpers_1.nFormatter)(x.balance, 6) }), (0, jsx_runtime_1.jsxs)("div", { className: "fs-14 lh-16 color-grey", children: ["on ", (0, rujira_js_1.networkLabel)(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,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DepositModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const date_fns_1 = require("date-fns");
+const react_1 = require("react");
+const react_hot_toast_1 = require("react-hot-toast");
+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");
+const LoaderWithContent_1 = require("../loader/LoaderWithContent");
+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, inboundAddresses, }) => {
+    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, inboundAddresses: inboundAddresses }) })), 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, inboundAddresses, }) => {
+    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]);
+    const dustThreshold = inboundAddresses?.find((a) => a.chain === account?.asset.chain)?.dustThreshold;
+    (0, react_1.useEffect)(() => {
+        if (ref.current && target === "custom") {
+            ref.current.focus();
+        }
+    }, [target, ref]);
+    const canSwap = asset.chain !== account?.asset.chain ||
+        asset.metadata.symbol !== account.asset.metadata.symbol;
+    const shouldSwap = canSwap && !direct;
+    // 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);
+    // 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: (0, clsx_1.default)("col-12 col-xs-4 text-center text-xs-left fw-500", amount > 0n && amount < (dustThreshold ?? 0n)
+                            ? "color-red"
+                            : "color-grey"), children: t("minimumDeposit") }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right color-grey", children: (dustThreshold ?? 0n) > 0n && ((0, jsx_runtime_1.jsx)(__1.Decimal, { amount: dustThreshold, symbol: account?.asset.metadata.symbol, className: (0, clsx_1.default)("pointer", {
+                                "color-red": amount > 0n && amount < dustThreshold,
+                                "color-grey": amount > 0n && amount > dustThreshold,
+                            }), symbolClassName: (0, clsx_1.default)("fs-14 condensed fw-500", {
+                                "color-red": amount > 0n && amount < dustThreshold,
+                                "color-grey": amount > 0n && amount > dustThreshold,
+                            }), onClick: () => setAmount(dustThreshold ?? 0n) })) }), (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.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right color-teal", children: (0, jsx_runtime_1.jsx)(LoaderWithContent_1.LoaderWithContent, { loading: quote === "loading", content: (0, jsx_runtime_1.jsxs)("div", { className: "color-grey", 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.jsx)("div", { className: "col-12 col-xs-8 text-center text-xs-right color-teal", children: (0, jsx_runtime_1.jsx)(LoaderWithContent_1.LoaderWithContent, { loading: quote === "loading", content: (0, jsx_runtime_1.jsxs)("div", { className: "color-white", 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 }) })] })), 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 })] }));
+};
+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: rujira_js_1.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;