"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Summary", {
    enumerable: true,
    get: function() {
        return Summary;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _utils = require("@orderly.network/utils");
const _num = require("../../../utils/num");
const _icon = require("../../../icon");
const _modal = require("../../../modal");
const _divider = require("../../../divider");
const _utils1 = require("../utils");
const _hooks = require("@orderly.network/hooks");
const Summary = /*#__PURE__*/ (0, _react.memo)((props)=>{
    const { nativeToken, depositFee = 0n } = props;
    const { data: symbolPrice } = (0, _hooks.useIndexPrice)(`SPOT_${nativeToken?.symbol}_USDC`);
    const dstGasFee = new _utils.Decimal(depositFee.toString())?.div(new _utils.Decimal(10).pow(18)).toString();
    const feeAmount = `${new _utils.Decimal(dstGasFee).toFixed((0, _utils1.feeDecimalsOffset)(4), _utils.Decimal.ROUND_UP)} ${nativeToken?.symbol}`;
    // Using useMemo causes a delay in data display
    const getFeeElement = ()=>{
        const totalFee = new _utils.Decimal(dstGasFee)?.mul(symbolPrice || 0)?.toFixed(3, _utils.Decimal.ROUND_UP);
        return `Fee ≈ $ ${totalFee || 0} ${Number(depositFee) ? `(${feeAmount})` : ""}`;
    };
    const onShowFee = (0, _react.useCallback)(()=>{
        const message = [];
        let dstGasFee = new _utils.Decimal(depositFee.toString())?.div(new _utils.Decimal(10).pow(18)).toString();
        if (dstGasFee) {
            message.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        children: [
                            "Destination gas fee:",
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                className: "orderly-text-base-contrast/60 orderly-mx-2",
                                children: feeAmount
                            })
                        ]
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        children: "Additional gas tokens are required to cover operations on the destination chain."
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {})
                ]
            }));
        }
        _modal.modal.alert({
            title: "Fee",
            message: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-text-base-contrast/30 orderly-space-y-3 orderly-text-3xs desktop:orderly-text-xs",
                children: message
            })
        });
    }, [
        nativeToken?.symbol,
        props.src?.symbol,
        depositFee
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-flex-1 orderly-text-4xs orderly-text-base-contrast-36 desktop:orderly-text-3xs",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-flex orderly-items-center orderly-justify-between",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    children: `1 ${props.src?.symbol || "USDC"} = ${props.price ? (0, _num.parseNumber)(props.price, {
                        precision: 3,
                        rule: "price"
                    }) : "-"} ${props.dst.symbol || "USDC"}`
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-mt-1 orderly-inline-flex orderly-items-center",
                onClick: onShowFee,
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.InfoIcon, {
                        size: 14,
                        className: "orderly-mr-1"
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                        children: getFeeElement()
                    })
                ]
            })
        ]
    });
});

//# sourceMappingURL=summary.js.map