"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OnRampTxDetailsTable = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_icons_1 = require("@radix-ui/react-icons");
const utils_js_1 = require("../../../../../../../chains/utils.js");
const formatNumber_js_1 = require("../../../../../../../utils/formatNumber.js");
const index_js_1 = require("../../../../../../core/design-system/index.js");
const useChainQuery_js_1 = require("../../../../../../core/hooks/others/useChainQuery.js");
const Spacer_js_1 = require("../../../../components/Spacer.js");
const basic_js_1 = require("../../../../components/basic.js");
const buttons_js_1 = require("../../../../components/buttons.js");
const text_js_1 = require("../../../../components/text.js");
const USDIcon_js_1 = require("../../../icons/currencies/USDIcon.js");
const TokenInfoRow_js_1 = require("../tx-history/TokenInfoRow.js");
/**
 * Show a table with the details of a "OnRamp" transaction step in the "Buy with Fiat" flow.
 * - Show OnRamp token as "Receive"
 * - Show fiat amount as "Pay"
 */
function OnRampTxDetailsTable(props) {
    const onRampChainQuery = (0, useChainQuery_js_1.useChainQuery)((0, utils_js_1.getCachedChain)(props.token.chainId));
    const onrampTxHash = props.statusMeta?.txHash;
    const lineSpacer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Line, {}), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" })] }));
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TokenInfoRow_js_1.TokenInfoRow, { chainId: props.token.chainId, client: props.client, label: "Receive", tokenAmount: props.token.amount, tokenSymbol: props.token.symbol, tokenAddress: props.token.address }), lineSpacer, (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", style: {
                    justifyContent: "space-between",
                }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { children: "Pay" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "column", gap: "xxs", style: {
                            alignItems: "flex-end",
                        }, children: (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", gap: "xs", center: "y", children: [props.fiat.currencySymbol === "USD" && ((0, jsx_runtime_1.jsx)(USDIcon_js_1.USDIcon, { size: index_js_1.iconSize.sm })), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { color: "primaryText", children: [(0, formatNumber_js_1.formatNumber)(Number(props.fiat.amount), 4), " ", props.fiat.currencySymbol] })] }) })] }), props.statusMeta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [lineSpacer, (0, jsx_runtime_1.jsxs)(basic_js_1.Container, { flex: "row", center: "y", style: {
                            justifyContent: "space-between",
                        }, children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { children: "Status" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", gap: "xs", center: "y", children: (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: props.statusMeta.color, children: props.statusMeta.text }) })] })] })), lineSpacer, onrampTxHash && onRampChainQuery.data?.explorers?.[0]?.url && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsxs)(buttons_js_1.ButtonLink, { fullWidth: true, variant: "outline", href: `${onRampChainQuery.data.explorers[0].url || ""}/tx/${onrampTxHash}`, target: "_blank", gap: "xs", style: {
                            fontSize: index_js_1.fontSize.sm,
                        }, children: ["View on Explorer", (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkIcon, { width: index_js_1.iconSize.sm, height: index_js_1.iconSize.sm })] })] }))] }));
}
exports.OnRampTxDetailsTable = OnRampTxDetailsTable;
//# sourceMappingURL=FiatTxDetailsTable.js.map