"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var _1 = require(".");
var img_metamask_modalconfirm_2x_png_1 = __importDefault(require("./images/img-metamask-modalconfirm@2x.png"));
var img_metamask_confirm_2x_png_1 = __importDefault(require("./images/img-metamask-confirm@2x.png"));
var img_metamaskmodal_new_signature_png_1 = __importDefault(require("./images/img-metamaskmodal-new-signature.png"));
var ModalP = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 16px;\n  color: #5f5f5f;\n  line-height: 26px;\n\n  && {\n    margin: 16px 0;\n  }\n"], ["\n  font-size: 16px;\n  color: #5f5f5f;\n  line-height: 26px;\n\n  && {\n    margin: 16px 0;\n  }\n"])));
var HalfPWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 55%;\n"], ["\n  width: 55%;\n"])));
var MainImg = styled_components_1.default.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 40%;\n  height: 240px;\n  object-fit: cover;\n"], ["\n  width: 40%;\n  height: 240px;\n  object-fit: cover;\n"])));
exports.MetaMaskStepCounter = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
var ContentSectionWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  margin-top: -20px;\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  margin-top: -20px;\n"])), function (props) { return (props.row ? "row" : "column"); });
var IB = styled_components_1.default(_1.BorderlessButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: 400;\n  margin-right: 30px;\n"], ["\n  font-weight: 400;\n  margin-right: 30px;\n"])));
var ImgWrapperSmall = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 2px;\n  padding: 4px 5px 1px 5px;\n  border: 1px solid #dddddd;\n  display: inline-blocks;\n  vertical-align: middle;\n"], ["\n  border-radius: 2px;\n  padding: 4px 5px 1px 5px;\n  border: 1px solid #dddddd;\n  display: inline-blocks;\n  vertical-align: middle;\n"])));
var ImgWrapperFull = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-align: center;\n  line-height: 0;\n"], ["\n  text-align: center;\n  line-height: 0;\n"])));
var ButtonContainer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 19px 24px;\n  margin: 0 -25px;\n  border-top: 1px solid #dddddd;\n  margin-top: -1px;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  padding: 19px 24px;\n  margin: 0 -25px;\n  border-top: 1px solid #dddddd;\n  margin-top: -1px;\n"])));
var WaitingButton = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: 1px solid #dddddd;\n  padding: 12px 23px;\n  color: #5f5f5f;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n"], ["\n  border: 1px solid #dddddd;\n  padding: 12px 23px;\n  color: #5f5f5f;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n"])));
var SpanWithMargin = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin-right: 10px;\n  font-weight: 600;\n  font-size: 14px;\n"], ["\n  margin-right: 10px;\n  font-weight: 600;\n  font-size: 14px;\n"])));
exports.MetaMaskModal = function (props) {
    var buttonSection;
    if (props.ipfsPost) {
    }
    else if (props.alert) {
        buttonSection = (React.createElement(ButtonContainer, null,
            React.createElement(_1.Button, { onClick: props.cancelTransaction, size: _1.buttonSizes.MEDIUM }, "OK")));
    }
    else if (!props.waiting) {
        buttonSection = (React.createElement(ButtonContainer, null,
            React.createElement(IB, { onClick: props.cancelTransaction }, "Cancel"),
            props.denied ? (React.createElement(_1.TransactionButtonNoModal, { transactions: props.denialRestartTransactions, Button: _1.MetaMaskLogoButton },
                " ",
                "Try Again",
                " ")) : (React.createElement(_1.MetaMaskLogoButton, { onClick: props.startTransaction }, "Open MetaMask"))));
    }
    else {
        buttonSection = (React.createElement(ButtonContainer, null,
            React.createElement(WaitingButton, null,
                React.createElement(SpanWithMargin, null,
                    "Waiting for ",
                    props.signing ? "signature" : "confirmation"),
                React.createElement(_1.ClipLoader, { size: 19 }))));
    }
    var paragraph;
    if (props.ipfsPost) {
        paragraph = React.createElement(ModalP, null, "Your statement is being uploaded to IPFS");
    }
    else if (props.signing) {
        paragraph = !props.waiting ? (React.createElement(ModalP, null, props.bodyText || "MetaMask will open a new window and request a signature.")) : (React.createElement(ModalP, null,
            "You need to sign this message in your wallet. MetaMask will open a new window to confirm. If you don't see it, please click the icon",
            " ",
            React.createElement(ImgWrapperSmall, null,
                React.createElement(_1.MetaMaskSideIcon, null)),
            " ",
            "in the browser bar."));
    }
    else {
        paragraph = !props.waiting ? (React.createElement(ModalP, null, props.bodyText || "MetaMask will open a new window for you to confirm this transaction with your wallet.")) : (React.createElement(ModalP, null,
            "This transaction needs to be confirmed in your wallet. MetaMask will open a new window for you to confirm. If you don't see it, please click the MetaMask icon",
            " ",
            React.createElement(ImgWrapperSmall, null,
                React.createElement(_1.MetaMaskSideIcon, null)),
            " ",
            "in your browser bar."));
    }
    if (props.denied) {
        paragraph = (React.createElement(HalfPWrapper, null,
            React.createElement(ModalP, null, "You have canceled this transaction in your wallet."),
            !!props.denialText && React.createElement(ModalP, null, props.denialText)));
    }
    var image;
    if (props.ipfsPost || props.alert) {
        image = undefined;
    }
    else if (props.denied) {
        image = React.createElement(MainImg, { src: img_metamask_confirm_2x_png_1.default });
    }
    else {
        image = (React.createElement(ImgWrapperFull, null,
            React.createElement("img", { width: 512, height: 248, src: props.signing ? img_metamaskmodal_new_signature_png_1.default : img_metamask_modalconfirm_2x_png_1.default })));
    }
    return (React.createElement(_1.Modal, { width: 560, padding: "8px 26px 0 26px" },
        props.children,
        React.createElement(ContentSectionWrapper, { row: props.denied },
            paragraph,
            image),
        buttonSection));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
//# sourceMappingURL=MetaMaskModal.js.map