"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 __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
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 _1 = require("./");
var styled_components_1 = __importDefault(require("styled-components"));
var img_metamask_networkswitch_2x_png_1 = __importDefault(require("./images/img-metamask-networkswitch@2x.png"));
var img_metamask_login_2x_png_1 = __importDefault(require("./images/img-metamask-login@2x.png"));
var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 32px 0;\n  padding: 6px 24px 12px;\n  background: white;\n  border: solid 1px #e5e5e5;\n  color: #5f5f5f;\n\n  &:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n"], ["\n  margin: 32px 0;\n  padding: 6px 24px 12px;\n  background: white;\n  border: solid 1px #e5e5e5;\n  color: #5f5f5f;\n\n  &:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n"])));
var LargeishButton = styled_components_1.default(_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 42px;\n"], ["\n  box-sizing: border-box;\n  height: 42px;\n"])));
var WalletAddress = styled_components_1.default(_1.AddressWithMetaMaskIcon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-bottom: 28px;\n"], ["\n  margin-bottom: 28px;\n"])));
var ProfileWalletAddress = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n"], ["\n  font-family: ", ";\n"])), _1.fonts.MONOSPACE);
var ArrowWrap = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 1px;\n  path {\n    fill: white;\n  }\n"], ["\n  margin-left: 1px;\n  path {\n    fill: white;\n  }\n"])));
var WalletAction = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: 12px;\n  padding-left: 15px;\n  border-left: 1px solid #dddddd;\n"], ["\n  display: inline-block;\n  margin-left: 12px;\n  padding-left: 15px;\n  border-left: 1px solid #dddddd;\n"])));
var WalletLabel = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-weight: bold;\n  margin-bottom: 10px;\n"], ["\n  font-weight: bold;\n  margin-bottom: 10px;\n"])));
var MetaMaskIcon = styled_components_1.default(_1.MetaMaskSideIcon)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  top: 3px;\n"], ["\n  position: relative;\n  top: 3px;\n"])));
var MetaMaskMockImage = styled_components_1.default.img(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  float: right;\n  max-width: 255px;\n  margin-bottom: -12px;\n"], ["\n  float: right;\n  max-width: 255px;\n  margin-bottom: -12px;\n"])));
var WalletOnboarding = /** @class */ (function (_super) {
    __extends(WalletOnboarding, _super);
    function WalletOnboarding(props) {
        var _this = _super.call(this, props) || this;
        _this.saveAddress = function () { return __awaiter(_this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        if (!this.props.saveAddressToProfile) {
                            return [2 /*return*/];
                        }
                        return [4 /*yield*/, this.props.saveAddressToProfile()];
                    case 1:
                        _a.sent();
                        this.setState({ justSaved: true });
                        return [2 /*return*/];
                }
            });
        }); };
        _this.state = {};
        return _this;
    }
    WalletOnboarding.prototype.render = function () {
        var _this = this;
        if (this.props.noProvider) {
            return (React.createElement(Wrapper, null,
                React.createElement(_1.ManagerSectionHeading, null, "It looks like you aren\u2019t logged in to your wallet"),
                React.createElement("p", null,
                    "New to using a digital wallet? Having a wallet is mandatory and we recommend",
                    " ",
                    React.createElement("a", { href: "https://metamask.io/", target: "_blank" }, "MetaMask"),
                    " ",
                    React.createElement(MetaMaskIcon, null),
                    " to manage your transactions.",
                    " ",
                    React.createElement("a", { href: this.props.helpUrl, target: "_blank" }, "Read this FAQ"),
                    "."),
                React.createElement("p", null,
                    React.createElement(_1.Button, { size: _1.buttonSizes.MEDIUM_WIDE, href: "https://metamask.io/", target: "_blank" },
                        "Open MetaMask.io",
                        " ",
                        React.createElement(ArrowWrap, null,
                            React.createElement(_1.NorthEastArrow, null))),
                    React.createElement("span", { style: { fontSize: 13, marginLeft: 16 } },
                        "Once the extension is installed,",
                        " ",
                        React.createElement("a", { href: "javascript:void(0)", onClick: function () { return window.location.reload(); } }, "refresh this page"),
                        ".")),
                React.createElement("p", null, "After you've set up MetaMask, you'll receive a wallet address and you'll be able to buy ETH with your bank or credit card. We recommend purchasing USD$50 of ETH to start. Note: Processing times can vary, and it can take up to 7 days for the ETH to be deposited in your wallet."),
                React.createElement("p", null,
                    "You will use your MetaMask wallet to set up and manage your smart contract, as well as sign, index, and archive posts to the Ethereum blockchain. Make sure you've saved your",
                    " ",
                    React.createElement("a", { href: this.props.helpUrlBase +
                            "articles/360017414652-What-is-a-recovery-phrase-seed-and-why-is-it-important-to-secure-it-", target: "_blank" }, "seed phrase"),
                    " ",
                    "from MetaMask in a safe place."),
                React.createElement("p", { style: { fontSize: 13 } },
                    React.createElement("span", { style: { color: "#23282d", fontWeight: 600 } }, "Already have a wallet?"),
                    React.createElement("span", { style: { color: "#72777c", marginLeft: 12 } },
                        "Make sure it's unlocked and connected to the ",
                        this.props.requiredNetworkNiceName,
                        ", and then",
                        " ",
                        React.createElement("a", { href: "javascript:void(0)", onClick: function () { return window.location.reload(); } }, "refresh this page"),
                        "."))));
        }
        else if (this.props.notEnabled) {
            return (React.createElement(Wrapper, null,
                React.createElement(_1.ManagerSectionHeading, null, "MetaMask not enabled"),
                React.createElement("p", null, "Press this button to enable MetaMask for this domain."),
                React.createElement("p", null,
                    React.createElement(LargeishButton, { size: _1.buttonSizes.MEDIUM_WIDE, onClick: function () { return _this.props.enable(); } }, "Enable")),
                React.createElement("p", null,
                    "If you do not see the MetaMask popup, please click the ",
                    React.createElement(MetaMaskIcon, null),
                    " icon in your browser address bar.")));
        }
        else if (this.props.walletLocked) {
            return (React.createElement(Wrapper, null,
                React.createElement(MetaMaskMockImage, { src: img_metamask_login_2x_png_1.default }),
                React.createElement(_1.ManagerSectionHeading, null, "Not logged in to wallet"),
                React.createElement("p", null,
                    "Please open the MetaMask extension and follow the instructions to log in to your wallet. After you are logged in, you can continue with your newsroom smart contract.",
                    " ",
                    React.createElement("a", { href: this.props.helpUrl, target: "_blank" }, "Need help?")),
                React.createElement("p", null, "Once you are on logged in, refresh this page."),
                React.createElement("p", null,
                    React.createElement(LargeishButton, { size: _1.buttonSizes.MEDIUM_WIDE, onClick: function () { return window.location.reload(); } }, "Refresh"))));
        }
        else if (this.props.wrongNetwork) {
            return (React.createElement(Wrapper, null,
                React.createElement(MetaMaskMockImage, { src: img_metamask_networkswitch_2x_png_1.default }),
                React.createElement(_1.ManagerSectionHeading, null, "Change your network"),
                React.createElement("p", null,
                    "Looks like you\u2019re using an unsupported Ethereum network. Make sure you're using the",
                    " ",
                    this.props.requiredNetworkNiceName,
                    ".",
                    " ",
                    React.createElement("a", { href: this.props.helpUrlBase + "articles/360017414812-How-do-I-switch-networks-in-MetaMask-", target: "_blank" }, "Read this tutorial"),
                    " ",
                    "to switch networks in MetaMask ",
                    React.createElement(MetaMaskIcon, null)),
                React.createElement("p", null, "Once you are on the correct network, refresh this page."),
                React.createElement("p", null,
                    React.createElement(LargeishButton, { size: _1.buttonSizes.MEDIUM_WIDE, onClick: function () { return window.location.reload(); } }, "Refresh"))));
        }
        else if (this.props.metamaskWalletAddress) {
            if (this.props.saveAddressToProfile && !this.props.profileWalletAddress) {
                return (React.createElement(Wrapper, null,
                    React.createElement(_1.ManagerSectionHeading, null, "Wallet Connected"),
                    React.createElement("p", null, "Your wallet is connected. Now you can add your public wallet address to your WordPress user profile."),
                    React.createElement(WalletLabel, null, "Your wallet address"),
                    React.createElement(WalletAddress, { address: this.props.metamaskWalletAddress }),
                    " ",
                    React.createElement(WalletAction, null,
                        React.createElement(_1.Button, { size: _1.buttonSizes.MEDIUM_WIDE, onClick: this.saveAddress, disabled: this.props.profileAddressSaving }, "Save to Your Profile"))));
            }
            else if (this.props.saveAddressToProfile &&
                this.props.metamaskWalletAddress !== this.props.profileWalletAddress) {
                return (React.createElement(Wrapper, null,
                    React.createElement(_1.ManagerSectionHeading, null, "Wallet Connected"),
                    React.createElement("p", { style: { color: "#f2524a" } }, "Your WordPress user profile wallet address does not match your MetaMask wallet address"),
                    React.createElement(WalletLabel, null, "Profile wallet address"),
                    React.createElement(ProfileWalletAddress, null, this.props.profileWalletAddress),
                    " ",
                    React.createElement(WalletLabel, null, "Connected wallet address"),
                    React.createElement(WalletAddress, { address: this.props.metamaskWalletAddress }),
                    " ",
                    React.createElement(WalletAction, null,
                        React.createElement(_1.Button, { size: _1.buttonSizes.MEDIUM_WIDE, onClick: this.saveAddress, disabled: this.props.profileAddressSaving }, "Update Profile Address"))));
            }
            else {
                return (React.createElement(Wrapper, null,
                    React.createElement(_1.ManagerSectionHeading, null, "Wallet Connected"),
                    React.createElement(WalletLabel, null, "Your wallet address"),
                    React.createElement(WalletAddress, { address: this.props.metamaskWalletAddress }),
                    " ",
                    this.props.onContinue && (React.createElement("div", null,
                        React.createElement(_1.Button, { size: _1.buttonSizes.MEDIUM_WIDE, onClick: this.props.onContinue }, "Continue")))));
            }
        }
        else {
            return null;
        }
    };
    return WalletOnboarding;
}(React.Component));
exports.WalletOnboarding = WalletOnboarding;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=WalletOnboarding.js.map