decentraland-ui/dist/components/Web2TransactionModal/Web2TransactionModal.js

Decentraland's UI components and styles

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Web2TransactionModal = void 0;
var react_1 = __importDefault(require("react"));
var schemas_1 = require("@dcl/schemas");
var Button_1 = require("../Button/Button");
var Modal_1 = require("../Modal/Modal");
var ModalNavigation_1 = require("../ModalNavigation/ModalNavigation");
var Message_1 = require("../Message/Message");
require("./Web2TransactionModal.css");
var chain_id_1 = require("@dcl/schemas/dist/dapps/chain-id");
var Web2TransactionModal = function (props) {
    var _a, _b, _c, _d, _e, _f;
    var chainId = props.chainId, onAccept = props.onAccept, onClose = props.onClose, onReject = props.onReject, i18n = props.i18n, isOpen = props.isOpen, transactionCostAmount = props.transactionCostAmount, userBalanceAmount = props.userBalanceAmount;
    // Build the internationalized strings
    var title = (i18n === null || i18n === void 0 ? void 0 : i18n.title) || 'Confirm Transaction';
    var description = (i18n === null || i18n === void 0 ? void 0 : i18n.description) ||
        (function (networkName) { return (react_1.default.createElement(react_1.default.Fragment, null,
            "You are about to perform a transaction on the ",
            react_1.default.createElement("b", null, networkName),
            ' ',
            "network.")); });
    var gasExplanation = (i18n === null || i18n === void 0 ? void 0 : i18n.gasExplanation) || (react_1.default.createElement(react_1.default.Fragment, null,
        "Network transactions require gas, paid in the network's native currency. For more information about gas, click",
        ' ',
        react_1.default.createElement("a", { href: "https://www.coinbase.com/es-la/learn/crypto-basics/what-are-gas-fees#:~:text=Gas%20fees%20are%20transaction%20costs,during%20periods%20of%20network%20congestion" }, "here"),
        "."));
    var balanceNotEnoughTitle = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.balanceNotEnoughTitle) !== null && _a !== void 0 ? _a : 'Insufficient Balance';
    var balanceNotEnoughContent = (_b = i18n === null || i18n === void 0 ? void 0 : i18n.balanceNotEnoughContent) !== null && _b !== void 0 ? _b : 'Your balance may be insufficient to cover this transaction. If the transaction cannot be completed, please add more of the necessary currency to your account and try again.';
    var transactionCostTitle = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.transactionCostTitle) !== null && _c !== void 0 ? _c : 'Estimated Gas Fee:';
    var userBalanceTitle = (_d = i18n === null || i18n === void 0 ? void 0 : i18n.userBalanceTitle) !== null && _d !== void 0 ? _d : 'Your Balance:';
    var accept = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.accept) !== null && _e !== void 0 ? _e : 'Continue';
    var reject = (_f = i18n === null || i18n === void 0 ? void 0 : i18n.reject) !== null && _f !== void 0 ? _f : 'Cancel';
    var networkName = (0, schemas_1.getChainName)(chainId);
    return (react_1.default.createElement(Modal_1.Modal, { size: "small", open: isOpen, onClose: onClose },
        react_1.default.createElement(ModalNavigation_1.ModalNavigation, { title: title }),
        react_1.default.createElement(Modal_1.Modal.Content, { className: "dcl web2-transaction-modal-content-container" },
            react_1.default.createElement("div", { className: "dcl web2-transaction-modal-content" },
                react_1.default.createElement("p", null, description(networkName)),
                react_1.default.createElement("p", null, gasExplanation),
                react_1.default.createElement("div", { className: "dcl web2-transaction-modal-content-transaction-cost" },
                    react_1.default.createElement("div", { className: "dcl web2-transaction-modal-content-transaction-cost-row" },
                        react_1.default.createElement("div", null, transactionCostTitle),
                        react_1.default.createElement("div", null,
                            transactionCostAmount,
                            ' ',
                            (0, chain_id_1.getNetwork)(chainId) === schemas_1.Network.ETHEREUM ? 'ETH' : 'MATIC')),
                    react_1.default.createElement("div", { className: "dcl web2-transaction-modal-content-transaction-cost-row" },
                        react_1.default.createElement("div", null, userBalanceTitle),
                        react_1.default.createElement("div", null,
                            userBalanceAmount,
                            ' ',
                            (0, chain_id_1.getNetwork)(chainId) === schemas_1.Network.ETHEREUM ? 'ETH' : 'MATIC'))),
                Number(transactionCostAmount) > Number(userBalanceAmount) && (react_1.default.createElement(Message_1.Message, { size: "tiny", visible: true, content: balanceNotEnoughContent, header: balanceNotEnoughTitle, warning: true })))),
        react_1.default.createElement(Modal_1.Modal.Actions, { className: "dcl web2-transaction-modal-actions" },
            react_1.default.createElement(Button_1.Button, { onClick: onReject }, reject),
            react_1.default.createElement(Button_1.Button, { primary: true, onClick: onAccept }, accept))));
};
exports.Web2TransactionModal = Web2TransactionModal;