rujira.ui 1.0.11 → 1.0.14

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

@@ -36,7 +36,7 @@ const separateClasses = (className) => {
 const TWO_STEP_ALLOWANCE_CHAINS = new Set([rujira_js_1.BSC, rujira_js_1.AVAX]);
 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 { accountProvider, msg, onSuccess, onError, onSimulation, SimulationComponent = DefaultSimulationComponent, children, toastOpts = {}, className, hideSimulation, animateSimulation = true, onClick, ...rest } = props;
     const [simulation, setSimulation] = (0, react_1.useState)();
     const [simulationError, setSimulationError] = (0, react_1.useState)();
     const [isSimulating, setIsSimulating] = (0, react_1.useState)(false);
@@ -49,9 +49,11 @@ const TxButton = (props) => {
     const doSimulate = (msg) => {
         setSimulationError(undefined);
         setSimulation(undefined);
+        onSimulation?.({ simulation: undefined, status: "none" });
         if (msg) {
             const seq = ++simulationSeqRef.current;
             setIsSimulating(true);
+            onSimulation?.({ simulation: undefined, status: "running" });
             const signer = accountProvider.signer(msg.account.address);
             signer
                 .simulate(msg)
@@ -61,6 +63,7 @@ const TxButton = (props) => {
                     return;
                 setIsSimulating(false);
                 setSimulation(sim);
+                onSimulation?.({ simulation: sim, status: "completed" });
             })
                 .catch((err) => {
                 //ignore stale simulation errors
@@ -70,6 +73,7 @@ const TxButton = (props) => {
                 console.error(err);
                 setSimulationError(err);
                 onError && onError(new rujira_js_1.TxError(msg, err, "simulation"));
+                onSimulation?.({ simulation: undefined, status: "failed" });
             });
         }
     };
@@ -181,7 +185,7 @@ const TxButton = (props) => {
                     ? t("waiting")
                     : isRejected
                         ? t("rejected")
-                        : isSimulating
+                        : isSimulating && animateSimulation
                             ? t("simulating")
                             : rest.label}`,
         }),
@@ -190,13 +194,13 @@ const TxButton = (props) => {
                     "button--grey": disabled &&
                         !isSimulating &&
                         !stylingClasses.includes("transparent"),
-                    "button--waiting": (isSigning || isRejected || isSuccess || isSimulating) &&
+                    "button--waiting": (isSigning || isRejected || isSuccess || (isSimulating && animateSimulation)) &&
                         !className?.includes("transparent"),
                     "button--success": isSuccess,
                     "button--rejected": isRejected,
-                    "button--simulating": isSimulating,
+                    "button--simulating": isSimulating && animateSimulation,
                 }), style: {
-                    cursor: isSigning || isSuccess || isRejected || isSimulating
+                    cursor: isSigning || isSuccess || isRejected || (isSimulating && animateSimulation)
                         ? "default"
                         : undefined,
                     ...rest.style,
@@ -205,7 +209,7 @@ const TxButton = (props) => {
                     : undefined, children: [(isSuccess ||
                         isRejected ||
                         isSigning ||
-                        isSimulating ||
+                        (isSimulating && animateSimulation) ||
                         !!simulationError) &&
                         !className?.includes("transparent") && ((0, jsx_runtime_1.jsx)("img", { className: "w-4 h-4 filter-white big", src: isSimulating
                             ? txsimulate_gif_1.default

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

@@ -55,6 +55,7 @@ const bch_png_1 = require("../../assets/tokens/bch.png");
 const bfit_png_1 = require("../../assets/tokens/bfit.png");
 const bnb_png_1 = require("../../assets/tokens/bnb.png");
 const btc_png_1 = require("../../assets/tokens/btc.png");
+const brune_png_1 = require("../../assets/tokens/brune.png");
 const busd_png_1 = require("../../assets/tokens/busd.png");
 const cbbtc_png_1 = require("../../assets/tokens/cbbtc.png");
 const cheq_png_1 = require("../../assets/tokens/cheq.png");
@@ -243,6 +244,7 @@ const getSRC = (src, ghost) => {
         bch: bch_png_1.default,
         bfit: bfit_png_1.default,
         bnb: bnb_png_1.default,
+        brune: brune_png_1.default,
         btc: btc_png_1.default,
         btcb: btc_png_1.default,
         busd: busd_png_1.default,
@@ -378,6 +380,7 @@ const getSRC = (src, ghost) => {
         xdefi: xdefi_png_1.default,
         xrp: xrp_png_1.default,
         xrune: xrune_png_1.default,
+        xusk: usk_png_1.default,
         yfi: yfi_png_1.default,
         yfuzn: fuzn_png_1.default,
         yieldeth: yieldeth_png_1.default,

package/lib/cjs/components/inputs/DecimalInput.js

@@ -29,19 +29,22 @@ const format = (v, decimals) => {
     const lead = str.slice(0, -decimals);
     return (0, react_number_format_1.numericFormatter)(`${lead.length ? lead : "0"}.${str.slice(-decimals)}`, { decimalScale: decimals });
 };
-const DecimalInput = ({ amount, decimals = 8, onAmountchange, disabled, ...rest }) => {
+const DecimalInput = ({ amount, decimals = 8, onAmountchange, disabled, allowNegative = false, ...rest }) => {
     const formatted = format(amount, decimals);
     const trimmed = formatted.replace(trim, "");
     const [previousValue, setPreviousValue] = (0, react_1.useState)(trimmed);
     const [previousAmount, setPreviousAmount] = (0, react_1.useState)(amount);
-    const onValueChange = (0, react_1.useCallback)((values) => {
+    const onValueChange = (0, react_1.useCallback)((values, sourceInfo) => {
         // `values.value` is always a dot separated decimal
         const intValue = parseFixed(values.value, decimals);
         setPreviousValue(values.value);
         setPreviousAmount(intValue);
-        onAmountchange(intValue);
+        // Only propagate changes triggered by the user, not programmatic value prop updates
+        if (sourceInfo.source === "event") {
+            onAmountchange(intValue);
+        }
     }, [decimals]);
-    return ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { allowNegative: false, decimalScale: decimals, decimalSeparator: decimal, thousandSeparator: group, disabled: disabled, placeholder: "0", maxLength: 35, value: 
+    return ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { allowNegative: allowNegative, decimalScale: decimals, decimalSeparator: decimal, thousandSeparator: group, disabled: disabled, placeholder: "0", maxLength: 35, value: 
         // Unique case if decimal digits are deleted up to the separator, causing
         // we want to retain the decimal separator in the input
         // Secondly don't change the input value to `trimmed` if the value hassn't changed

package/lib/cjs/components/inputs/DenomInput.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = require("clsx");
 const react_1 = require("react");
 const helpers_1 = require("../../helpers");
+const fiat_1 = require("../../utils/fiat");
 const i18n_1 = require("../../i18n");
 const Button_1 = require("../buttons/Button");
 const IconDenom_1 = require("../icons/IconDenom");
@@ -15,7 +16,7 @@ const DenomInput = ({ symbol, amount, decimals, onChangeAmount, disabled, readOn
     const { t } = (0, i18n_1.useTranslation)("common");
     const input = (0, react_1.useRef)(null);
     const id = (0, react_1.useMemo)(() => (0, helpers_1.uuidv4)(), []);
-    const fiatAmount = (0, react_1.useMemo)(() => (0, helpers_1.toFiatAmount)(fiat?.price, amount), [fiat?.price, amount]);
+    const fiatAmount = (0, react_1.useMemo)(() => (0, fiat_1.toFiatAmount)(fiat?.price, amount), [fiat?.price, amount]);
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)({
             "denom-select condensed": true,
             "denom-select--full": full,

package/lib/cjs/components/inputs/Numeric.js

@@ -5,14 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = require("clsx");
 const react_1 = require("react");
 const helpers_1 = require("../../helpers");
+const fiat_1 = require("../../utils/fiat");
 const i18n_1 = require("../../i18n");
 const DecimalInput_1 = require("./DecimalInput");
 const Fiat_1 = require("../numbers/Fiat");
-const Numeric = ({ label, amount, decimals = 8, onChangeAmount, onBlur, onFocus, focused, disabled, full, className, children, icon, fiat, }) => {
+const Numeric = ({ label, amount, decimals = 8, onChangeAmount, onBlur, onFocus, focused, disabled, full, className, children, icon, fiat, allowNegative, prefix, suffix, }) => {
     const { t } = (0, i18n_1.useTranslation)("common");
     const input = (0, react_1.useRef)(null);
     const id = (0, react_1.useMemo)(() => (0, helpers_1.uuidv4)(), []);
-    const fiatAmount = (0, react_1.useMemo)(() => (0, helpers_1.toFiatAmount)(fiat?.price, amount), [fiat?.price, amount]);
+    const fiatAmount = (0, react_1.useMemo)(() => (0, fiat_1.toFiatAmount)(fiat?.price, amount), [fiat?.price, amount]);
     (0, react_1.useEffect)(() => {
         if (focused && !disabled) {
             input.current?.focus();
@@ -26,11 +27,9 @@ const Numeric = ({ label, amount, decimals = 8, onChangeAmount, onBlur, onFocus,
         }), onClick: () => {
             if (!disabled)
                 input.current?.focus();
-        }, children: [label && (0, jsx_runtime_1.jsx)("label", { children: t(label) }), children, (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("flex dir-c grow ai-e", {
+        }, children: [label && (0, jsx_runtime_1.jsx)("label", { children: t(label) }), children, (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("numeric-input__content", {
                     "mt-1 mb-1": fiatAmount != undefined && fiatAmount > 0n,
-                    "py-2": fiatAmount === 0n
-                }), children: [(0, jsx_runtime_1.jsx)(DecimalInput_1.DecimalInput, { getInputRef: input, decimals: decimals, disabled: disabled, amount: amount, onAmountchange: onChangeAmount, onBlur: onBlur, onFocus: onFocus, id: id }), fiatAmount != undefined &&
-                        fiatAmount > 0n &&
-                        ((0, jsx_runtime_1.jsx)("div", { className: "flex fs-13 color-grey", children: (0, jsx_runtime_1.jsx)(Fiat_1.Fiat, { amount: fiatAmount, symbol: fiat.symbol, decimals: 8, className: "numeric-input__value color-grey fs-12" }) }))] }), icon] }));
+                    "py-2": fiatAmount === 0n,
+                }), children: [(0, jsx_runtime_1.jsx)(DecimalInput_1.DecimalInput, { getInputRef: input, decimals: decimals, disabled: disabled, amount: amount, onAmountchange: onChangeAmount, onBlur: onBlur, onFocus: onFocus, id: id, allowNegative: allowNegative, prefix: prefix, suffix: suffix }), fiatAmount != undefined && fiatAmount > 0n && ((0, jsx_runtime_1.jsx)("div", { className: "flex fs-13 color-grey", children: (0, jsx_runtime_1.jsx)(Fiat_1.Fiat, { amount: fiatAmount, symbol: fiat.symbol, decimals: 8, className: "numeric-input__value color-grey fs-12" }) }))] }), icon] }));
 };
 exports.Numeric = Numeric;

package/lib/cjs/components/slider/Slider.js

@@ -3,6 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_slider_1 = require("react-slider");
+const _consoleError = console.error;
+console.error = (...args) => {
+    if (typeof args[0] === "string" && args[0].includes('"key" prop is being spread'))
+        return;
+    _consoleError(...args);
+};
 const Slider = (props) => {
     return ((0, jsx_runtime_1.jsx)(react_slider_1.default, { ...props, className: "slider grow", trackClassName: "slider__track", thumbClassName: "slider__thumb" }));
 };

package/lib/cjs/helpers/index.js

@@ -1,25 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bigIntToDecimalString = exports.floatToSubscript = exports.compress = exports.classApr = exports.formatApr = exports.nFormatterInt = exports.nFormatter = exports.uuidv4 = exports.isEmpty = exports.whatDecimalSeparator = exports.getLang = exports.toFiatDisplay = exports.toFiatAmount = void 0;
-const FIAT_SCALE = 10n ** 12n;
-const toFiatAmount = (price, amount) => {
-    return price != null ? (price * amount) / FIAT_SCALE : undefined;
-};
-exports.toFiatAmount = toFiatAmount;
-/**
- * Formats a fiat bigint amount as a display string.
- * @param amount - The bigint value to format.
- * @param options
- * @param options.decimals - Decimal places in the bigint representation. @default 8
- * @param options.rounding - Visible decimal digits in the output. @default 2
- */
-const toFiatDisplay = (amount, options) => {
-    const { decimals: useDecimals = 8, rounding: useRounding = 2 } = options ?? {};
-    const dec = amount % BigInt(10 ** useDecimals);
-    const int = BigInt(Math.floor(Number(amount - dec) / 10 ** useDecimals));
-    return `${(int || "0").toLocaleString()}${(0, exports.whatDecimalSeparator)()}${dec.toString().padStart(useDecimals, "0").substring(0, useRounding)}`;
-};
-exports.toFiatDisplay = toFiatDisplay;
+exports.bigIntToDecimalString = exports.floatToSubscript = exports.compress = exports.classApr = exports.formatApr = exports.nFormatterInt = exports.nFormatter = exports.uuidv4 = exports.isEmpty = exports.whatDecimalSeparator = exports.getLang = void 0;
 const getLang = () => {
     if (navigator.languages != undefined)
         return navigator.languages[0];

package/lib/cjs/i18n/locales/de/strategies.json

@@ -41,7 +41,7 @@
     "totalLiquidity": "Gesamtliquidität",
     "lockedLiquidity": "Gesperrte Liquidität",
     "sevenDayRoi": "7-Tage-ROI",
-    "sevenDayApr": "7-Tage-APR",
+    "sevenDayApr": "APR (7-Tage)",
     "sharpeRatio": "Sharpe-Ratio",
     "risk": "Risiko",
     "interestRateCurve": "Zinskurve",

package/lib/cjs/i18n/locales/en/strategies.json

@@ -41,7 +41,7 @@
     "totalLiquidity": "Total Liquidity",
     "lockedLiquidity": "Locked Liquidity",
     "sevenDayRoi": "7-day ROI",
-    "sevenDayApr": "7-day APR",
+    "sevenDayApr": "APR (7-day)",
     "sharpeRatio": "Sharpe Ratio",
     "risk": "Risk",
     "interestRateCurve": "Interest Rate Curve",

package/lib/cjs/index.js

@@ -69,5 +69,6 @@ __exportStar(require("./hooks/useWindowSize"), exports);
 __exportStar(require("./context/GlobalModal"), exports);
 __exportStar(require("./i18n"), exports);
 __exportStar(require("./helpers"), exports);
+__exportStar(require("./utils/fiat"), exports);
 __exportStar(require("./wallets"), exports);
 exports.wallets = require("./wallets");

package/lib/cjs/utils/fiat.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fiatize = exports.toFiatDisplay = exports.toFiatAmount = void 0;
+const helpers_1 = require("../helpers");
+const FIAT_SCALE = 10n ** 12n;
+const toFiatAmount = (price, amount) => {
+    return price != null ? (price * amount) / FIAT_SCALE : undefined;
+};
+exports.toFiatAmount = toFiatAmount;
+/**
+ * Formats a fiat bigint amount as a display string.
+ * @param amount - The bigint value to format.
+ * @param options
+ * @param options.decimals - Decimal places in the bigint representation. @default 8
+ * @param options.rounding - Visible decimal digits in the output. @default 2
+ */
+const toFiatDisplay = (amount, options) => {
+    const { decimals: useDecimals = 8, rounding: useRounding = 2 } = options ?? {};
+    const dec = amount % BigInt(10 ** useDecimals);
+    const int = BigInt(Math.floor(Number(amount - dec) / 10 ** useDecimals));
+    return `${(int || "0").toLocaleString()}${(0, helpers_1.whatDecimalSeparator)()}${dec.toString().padStart(useDecimals, "0").substring(0, useRounding)}`;
+};
+exports.toFiatDisplay = toFiatDisplay;
+/**
+ * A util that will combine text and asset values into a single display string. Use this
+ * when you want to add the fiat value of 1 or more assets to a component label, or other text.
+ * It will internally sum up the total values for you, and return a string with a fiat value
+ * appended, provided all price values are valid and non-zero. If any price value is
+ * invalid, then the original label will be returned with no fiat value appended as we cannot
+ * compute an accurate fiat value.
+ * @param label The label text.
+ * @param assets The assets to sum up, format and append to the supplied label.
+ * @param symbol The fiat symbol to use.
+ */
+const fiatize = (label, assets, symbol = "$") => {
+    if (!assets || assets.length === 0)
+        return label;
+    let fiatTotal = 0n;
+    let incomplete = false;
+    for (const asset of assets) {
+        // 0n is currently considered an invalid price for the purposes of this function.
+        if (!asset.price) {
+            incomplete = true;
+            break;
+        }
+        fiatTotal = fiatTotal + ((0, exports.toFiatAmount)(asset.price, asset.amount) ?? 0n);
+    }
+    if (incomplete || fiatTotal === 0n)
+        return label;
+    return `${label} (${symbol}${(0, exports.toFiatDisplay)(fiatTotal)})`;
+};
+exports.fiatize = fiatize;

package/lib/cjs/utils/fiat.test.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const fiat_1 = require("./fiat");
+// $1.00 in 1e12 price scale; 1 unit in 8-decimal amount scale → fiat = $1.00
+const PRICE_1 = 1000000000000n;
+const AMOUNT_1 = 100000000n;
+(0, vitest_1.test)("fiatize returns label when assets array is empty", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize returns label when all prices are null", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: null, amount: AMOUNT_1 }])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize returns label when all prices are undefined", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: undefined, amount: AMOUNT_1 }])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize returns label when amount is zero", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: PRICE_1, amount: 0n }])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize returns label when price is zero", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: 0n, amount: AMOUNT_1 }])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize appends formatted fiat for a single positive asset", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: PRICE_1, amount: AMOUNT_1 }])).toEqual("Buy ($1.00)");
+});
+(0, vitest_1.test)("fiatize sums multiple assets", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [
+        { price: PRICE_1, amount: AMOUNT_1 },
+        { price: PRICE_1, amount: AMOUNT_1 },
+    ])).toEqual("Buy ($2.00)");
+});
+(0, vitest_1.test)("fiatize returns label when 1 or more prices are unavailable - null price 1st", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [
+        { price: null, amount: AMOUNT_1 },
+        { price: PRICE_1, amount: AMOUNT_1 },
+    ])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize returns label when 1 or more prices are unavailable - null price 2nd", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [
+        { price: PRICE_1, amount: AMOUNT_1 },
+        { price: null, amount: AMOUNT_1 },
+    ])).toEqual("Buy");
+});
+(0, vitest_1.test)("fiatize uses custom symbol", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: PRICE_1, amount: AMOUNT_1 }], "€")).toEqual("Buy (€1.00)");
+});
+(0, vitest_1.test)("fiatize uses default $ symbol when none provided", () => {
+    (0, vitest_1.expect)((0, fiat_1.fiatize)("Buy", [{ price: PRICE_1, amount: AMOUNT_1 }])).toContain("$");
+});
+// toFiatAmount
+const TEST_PRICE = 75248900000000000n; //$75,248.90 in 1e12
+(0, vitest_1.test)("toFiatAmount returns undefined for undefined price", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatAmount)(undefined, 100n)).toEqual(undefined);
+});
+(0, vitest_1.test)("toFiatAmount returns undefined for null price", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatAmount)(null, 100n)).toEqual(undefined);
+});
+(0, vitest_1.test)("toFiatAmount returns 0n for 0n price and non-zero amount", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatAmount)(0n, 100000000n)).toEqual(0n);
+});
+(0, vitest_1.test)("toFiatAmount returns 0n for non-zero price with 0n amount", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatAmount)(TEST_PRICE, 0n)).toEqual(0n);
+});
+(0, vitest_1.test)("toFiatAmount returns correct amount when price and amount are supplied", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatAmount)(TEST_PRICE, 100000000n)).toEqual(7524890000000n);
+});
+// toFiatDisplay
+const TEST_FIAT_AMOUNT = 123456789n;
+(0, vitest_1.test)("toFiatDisplay returns correctly when no options are supplied", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(TEST_FIAT_AMOUNT)).toEqual("1.23");
+});
+(0, vitest_1.test)("toFiatDisplay returns correctly with empty options", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(TEST_FIAT_AMOUNT, {})).toEqual("1.23");
+});
+(0, vitest_1.test)("toFiatDisplay returns correctly with rounding only option", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(TEST_FIAT_AMOUNT, { rounding: 3 })).toEqual("1.234");
+});
+(0, vitest_1.test)("toFiatDisplay returns correctly with decimals only option", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(TEST_FIAT_AMOUNT, { decimals: 7 })).toEqual("12.34");
+});
+(0, vitest_1.test)("toFiatDisplay returns correctly with decimals and rounding option", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(TEST_FIAT_AMOUNT, { decimals: 7, rounding: 4 })).toEqual("12.3456");
+});
+(0, vitest_1.test)("toFiatDisplay returns correctly for zero amount", () => {
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(0n)).toEqual("0.00");
+});
+(0, vitest_1.test)("toFiatDisplay clamps rounding to available decimal digits", () => {
+    // rounding:10 exceeds decimals:8, substring returns all 8 available digits
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(TEST_FIAT_AMOUNT, { rounding: 10 })).toEqual("1.23456789");
+});
+// integration
+(0, vitest_1.test)("toFiatDisplay correctly formats the output of toFiatAmount", () => {
+    // $1.00 price in 1e12 scale, 1 unit in 8 decimal scale → fiat = 100_000_000n → "$1.00"
+    const fiat = (0, fiat_1.toFiatAmount)(1000000000000n, 100000000n);
+    (0, vitest_1.expect)((0, fiat_1.toFiatDisplay)(fiat)).toEqual("1.00");
+});

package/lib/esm/components/buttons/TxButton.d.ts

@@ -3,6 +3,10 @@ import { Renderable } from "react-hot-toast";
 import { Msg, Simulation, TxResult } from "rujira.js";
 import { AccountProvider } from "../../wallets";
 import { ButtonProps } from "./Button";
+export type SimulationState = {
+    simulation: Simulation | undefined;
+    status: "none" | "running" | "completed" | "failed";
+};
 export type TxButtonProps<T extends ElementType = "button"> = ButtonProps<T> & {
     accountProvider: AccountProvider;
     msg: Msg | null;
@@ -12,7 +16,9 @@ export type TxButtonProps<T extends ElementType = "button"> = ButtonProps<T> & {
     }>;
     onError?: (err: any) => void;
     onSuccess?: (res: TxResult) => void;
+    onSimulation?: (simulationState: SimulationState) => void;
     hideSimulation?: boolean;
+    animateSimulation?: boolean;
     toastOpts?: {
         loading?: Renderable;
         success?: Renderable | ((res: TxResult) => Renderable);

package/lib/esm/components/buttons/TxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TxButton.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/TxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,EAAE,EAMH,MAAM,OAAO,CAAC;AACf,OAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAIL,GAAG,EAIH,UAAU,EAEV,QAAQ,EAGT,MAAM,WAAW,CAAC;AAQnB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAgB/C,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAC7E,eAAe,EAAE,eAAe,CAAC;IACjC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,mBAAmB,CAAC,EAAE,WAAW,CAAC;QAChC,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,OAAO,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,UAAU,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,UAAU,CAAC,CAAC;KACjD,CAAC;CACH,CAAC;AAOF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6QtC,CAAC;AAEF,eAAO,MAAM,WAAW,+CAOvB,CAAC;AACF,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB"}
+{"version":3,"file":"TxButton.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/TxButton.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,EAAE,EAMH,MAAM,OAAO,CAAC;AACf,OAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAIL,GAAG,EAIH,UAAU,EAEV,QAAQ,EAGT,MAAM,WAAW,CAAC;AAQnB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAgB/C,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAC7E,eAAe,EAAE,eAAe,CAAC;IACjC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,mBAAmB,CAAC,EAAE,WAAW,CAAC;QAChC,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,OAAO,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,UAAU,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,UAAU,CAAC,CAAC;KACjD,CAAC;CACH,CAAC;AAOF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAmRtC,CAAC;AAEF,eAAO,MAAM,WAAW,+CAOvB,CAAC;AACF,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB"}

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

@@ -33,7 +33,7 @@ const separateClasses = (className) => {
 const TWO_STEP_ALLOWANCE_CHAINS = new Set([BSC, AVAX]);
 export const TxButton = (props) => {
     const { t } = useTranslation("common");
-    const { accountProvider, msg, onSuccess, onError, SimulationComponent = DefaultSimulationComponent, children, toastOpts = {}, className, hideSimulation, onClick, ...rest } = props;
+    const { accountProvider, msg, onSuccess, onError, onSimulation, SimulationComponent = DefaultSimulationComponent, children, toastOpts = {}, className, hideSimulation, animateSimulation = true, onClick, ...rest } = props;
     const [simulation, setSimulation] = useState();
     const [simulationError, setSimulationError] = useState();
     const [isSimulating, setIsSimulating] = useState(false);
@@ -46,9 +46,11 @@ export const TxButton = (props) => {
     const doSimulate = (msg) => {
         setSimulationError(undefined);
         setSimulation(undefined);
+        onSimulation?.({ simulation: undefined, status: "none" });
         if (msg) {
             const seq = ++simulationSeqRef.current;
             setIsSimulating(true);
+            onSimulation?.({ simulation: undefined, status: "running" });
             const signer = accountProvider.signer(msg.account.address);
             signer
                 .simulate(msg)
@@ -58,6 +60,7 @@ export const TxButton = (props) => {
                     return;
                 setIsSimulating(false);
                 setSimulation(sim);
+                onSimulation?.({ simulation: sim, status: "completed" });
             })
                 .catch((err) => {
                 //ignore stale simulation errors
@@ -67,6 +70,7 @@ export const TxButton = (props) => {
                 console.error(err);
                 setSimulationError(err);
                 onError && onError(new TxError(msg, err, "simulation"));
+                onSimulation?.({ simulation: undefined, status: "failed" });
             });
         }
     };
@@ -178,7 +182,7 @@ export const TxButton = (props) => {
                     ? t("waiting")
                     : isRejected
                         ? t("rejected")
-                        : isSimulating
+                        : isSimulating && animateSimulation
                             ? t("simulating")
                             : rest.label}`,
         }),
@@ -187,13 +191,13 @@ export const TxButton = (props) => {
                     "button--grey": disabled &&
                         !isSimulating &&
                         !stylingClasses.includes("transparent"),
-                    "button--waiting": (isSigning || isRejected || isSuccess || isSimulating) &&
+                    "button--waiting": (isSigning || isRejected || isSuccess || (isSimulating && animateSimulation)) &&
                         !className?.includes("transparent"),
                     "button--success": isSuccess,
                     "button--rejected": isRejected,
-                    "button--simulating": isSimulating,
+                    "button--simulating": isSimulating && animateSimulation,
                 }), style: {
-                    cursor: isSigning || isSuccess || isRejected || isSimulating
+                    cursor: isSigning || isSuccess || isRejected || (isSimulating && animateSimulation)
                         ? "default"
                         : undefined,
                     ...rest.style,
@@ -202,7 +206,7 @@ export const TxButton = (props) => {
                     : undefined, children: [(isSuccess ||
                         isRejected ||
                         isSigning ||
-                        isSimulating ||
+                        (isSimulating && animateSimulation) ||
                         !!simulationError) &&
                         !className?.includes("transparent") && (_jsx("img", { className: "w-4 h-4 filter-white big", src: isSimulating
                             ? txSimulate

package/lib/esm/components/icons/IconDenom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconDenom.d.ts","sourceRoot":"","sources":["../../../../src/components/icons/IconDenom.tsx"],"names":[],"mappings":"AAmaA,eAAO,MAAM,SAAS,6DACG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,6CAQ7D,CAAC"}
+{"version":3,"file":"IconDenom.d.ts","sourceRoot":"","sources":["../../../../src/components/icons/IconDenom.tsx"],"names":[],"mappings":"AAyaA,eAAO,MAAM,SAAS,6DACG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,6CAQ7D,CAAC"}