"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 __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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 graphql_tag_1 = __importDefault(require("graphql-tag"));
var styled_components_1 = __importDefault(require("styled-components"));
var ethapi_1 = require("@joincivil/ethapi");
var utils_1 = require("@joincivil/utils");
var __1 = require("../");
var Account_1 = require("../Account/");
var BrowserCompatible_1 = require("../BrowserCompatible");
var sendNewsroomWelcomeEmailMutation = graphql_tag_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  mutation sendNewsroomWelcomeMutation {\n    nrsignupSendWelcomeEmail\n  }\n"], ["\n  mutation sendNewsroomWelcomeMutation {\n    nrsignupSendWelcomeEmail\n  }\n"])));
var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: center;\n  margin: 63px 0 32px;\n  padding: 6px 24px 12px;\n  background: white;\n  color: #5f5f5f;\n\n  &:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n\n  a {\n    color: ", ";\n  }\n"], ["\n  text-align: center;\n  margin: 63px 0 32px;\n  padding: 6px 24px 12px;\n  background: white;\n  color: #5f5f5f;\n\n  &:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n\n  a {\n    color: ", ";\n  }\n"])), __1.colors.accent.CIVIL_BLUE);
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.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-bottom: 12px;\n"], ["\n  font-family: ", ";\n  margin-bottom: 12px;\n"])), __1.fonts.MONOSPACE);
var ArrowWrap = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 1px;\n  path {\n    fill: ", ";\n  }\n"], ["\n  margin-left: 1px;\n  path {\n    fill: ", ";\n  }\n"])), __1.colors.accent.CIVIL_BLUE);
var WalletLabel = styled_components_1.default.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 24px;\n  margin-bottom: 10px;\n"], ["\n  font-weight: bold;\n  font-size: 14px;\n  line-height: 24px;\n  margin-bottom: 10px;\n"])));
var MetaMaskIcon = styled_components_1.default(__1.MetaMaskSideIcon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  top: 3px;\n"], ["\n  position: relative;\n  top: 3px;\n"])));
var IntroText = styled_components_1.default(__1.OBSectionDescription)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n"])));
var InstructionsWrapper = styled_components_1.default(__1.OBBorderedSection)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-contents: space-between;\n  margin: 32px auto 18px;\n  max-width: 550px;\n  padding: 24px 12px 0 24px;\n"], ["\n  display: flex;\n  justify-contents: space-between;\n  margin: 32px auto 18px;\n  max-width: 550px;\n  padding: 24px 12px 0 24px;\n"])));
var InstructionsText = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 15px;\n  line-height: 18px;\n  margin-top: 20px;\n  text-align: left;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 15px;\n  line-height: 18px;\n  margin-top: 20px;\n  text-align: left;\n"])), __1.colors.primary.CIVIL_GRAY_1, __1.fonts.SANS_SERIF);
var InstructionsImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 240px;\n  width: auto;\n"], ["\n  height: 240px;\n  width: auto;\n"])));
var InstructionsButtonWrap = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
var GetMetaMaskBox = styled_components_1.default(__1.OBBorderedSectionActive)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin: 24px auto 12px;\n  max-width: 550px;\n  padding: 24px;\n"], ["\n  margin: 24px auto 12px;\n  max-width: 550px;\n  padding: 24px;\n"])));
var GetMetaMaskImg = styled_components_1.default.img(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  width: 85px;\n  height: auto;\n  margin-bottom: 16px;\n"], ["\n  width: 85px;\n  height: auto;\n  margin-bottom: 16px;\n"])));
var GetMetaMaskText = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 17px;\n  font-weight: bold;\n  line-height: 22px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 17px;\n  font-weight: bold;\n  line-height: 22px;\n"])), __1.colors.accent.CIVIL_BLUE, __1.fonts.SANS_SERIF);
var GetMetaMaskMoreHelp = styled_components_1.default(__1.OBSmallParagraph)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  text-align: left;\n"], ["\n  text-align: left;\n"])));
var ContinueButtonWrap = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  margin-top: 48px;\n  margin-bottom: 80px;\n"], ["\n  margin-top: 48px;\n  margin-bottom: 80px;\n"])));
var ConnectedCheck = styled_components_1.default(__1.HollowGreenCheck)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  margin-right: 5px;\n  vertical-align: bottom;\n"], ["\n  margin-right: 5px;\n  vertical-align: bottom;\n"])));
var ConnectedWalletAddressWrap = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: inline-block;\n  margin: 24px auto 12px;\n  text-align: left;\n"], ["\n  display: inline-block;\n  margin: 24px auto 12px;\n  text-align: left;\n"])));
var ConnectedWalletAddress = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 3px;\n  font-family: ", ";\n  font-size: 18px;\n  line-height: 24px;\n  margin-bottom: 12px;\n  padding: 16px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 3px;\n  font-family: ", ";\n  font-size: 18px;\n  line-height: 24px;\n  margin-bottom: 12px;\n  padding: 16px;\n"])), __1.colors.accent.CIVIL_GRAY_6, __1.colors.accent.CIVIL_GRAY_4, __1.fonts.MONOSPACE);
var WarningWrap = styled_components_1.default.p(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 12px;\n\n  ", " {\n    display: inline-block;\n    max-width: 520px;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 12px;\n\n  ", " {\n    display: inline-block;\n    max-width: 520px;\n  }\n"])), __1.colors.accent.CIVIL_RED_ULTRA_FADED, __1.colors.accent.CIVIL_RED_FADED, __1.OBNoteText);
var WalletOnboardingV2 = /** @class */ (function (_super) {
    __extends(WalletOnboardingV2, _super);
    function WalletOnboardingV2(props) {
        var _this = _super.call(this, props) || this;
        _this.renderFaqEtc = function (showDisabledButton) {
            if (showDisabledButton === void 0) { showDisabledButton = true; }
            return (React.createElement(React.Fragment, null,
                showDisabledButton && (React.createElement(ContinueButtonWrap, null,
                    React.createElement(__1.Button, { width: 220, size: __1.buttonSizes.MEDIUM_WIDE, disabled: true }, "Continue"))),
                React.createElement(__1.OBNoteContainer, null,
                    React.createElement(__1.OBNoteHeading, null, "Using a different wallet?"),
                    React.createElement(__1.OBNoteText, null,
                        "Make sure it's unlocked",
                        _this.props.requiredNetworkNiceName && " and connected to the " + _this.props.requiredNetworkNiceName,
                        ". You may need to refresh.")),
                React.createElement(__1.OBCollapsable, { open: false, header: React.createElement(__1.OBCollapsableHeader, null, " What is a cryptocurrency wallet?") },
                    React.createElement(__1.OBSmallParagraph, null, "A cryptocurrency wallet is where you will store your CVL tokens and other crypto assets. It is also one of the main tools you'll need to log in to the Civil Registry and use the Civil plugin."),
                    React.createElement(__1.OBSmallParagraph, null, "Cryptocurrency wallets don\u2019t store any actual money \u2013 they store the Public and Private Keys that provide access to those assets. You keep your cryptocurrency including ETH and CVL tokens in a wallet. When using your wallet on Civil, you use your wallet to pay for fees or transactions. Your wallet address also acts as your identity on the Ethereum blockchain."),
                    React.createElement(__1.OBSmallParagraph, null, "Consider it like your passport to the Civil economy. With your MetaMask wallet you will be able to store CVL tokens, apply, vote, engage on the Registry, and sign, index, archive content using the Publisher plugin.")),
                React.createElement(__1.OBCollapsable, { open: false, header: React.createElement(__1.OBCollapsableHeader, null, " Why do I need a cryptocurrency wallet?") },
                    React.createElement(__1.OBSmallParagraph, null,
                        "Having a wallet is required. We recommend",
                        " ",
                        React.createElement("a", { href: "https://metamask.io/", target: "_blank" }, "MetaMask"),
                        " ",
                        "to log in and manage your transactions."),
                    React.createElement(__1.OBSmallParagraph, null, "You will also use your MetaMask wallet to set up and manage your Newsroom Smart Contract, manage your tokens, as well as sign and index posts to the Ethereum blockchain."),
                    React.createElement(__1.OBSmallParagraph, null,
                        "After you've set up MetaMask, you'll receive a public wallet address. You'll need to fund your wallet with ETH. You can buy ETH with your bank or credit card on a variety of cryptocurrency exchanges.",
                        " ",
                        React.createElement("strong", null, "Note:"),
                        " Processing times can vary, and it can take up to 7 days for the ETH to be deposited in your wallet."),
                    React.createElement(__1.OBSmallParagraph, null, "Make sure you've backed up and saved your MetaMask login and seed phrase in a safe place. We can\u2019t help you regain access if you lose it.")),
                React.createElement(__1.OBCollapsable, { open: false, header: React.createElement(__1.OBCollapsableHeader, null, " Need help setting up your wallet?") },
                    React.createElement(__1.OBSmallParagraph, null,
                        "Head over to our",
                        " ",
                        React.createElement("a", { href: utils_1.urlConstants.FAQ_HOW_TO_SETUP_METAMASK, target: "_blank" }, "FAQ guide"),
                        " ",
                        "on how to install a MetaMask wallet.")),
                React.createElement(GetMetaMaskMoreHelp, null,
                    "Need more info before you start using a crypto wallet?",
                    " ",
                    React.createElement("a", { href: utils_1.urlConstants.FAQ_WALLETS, target: "_blank" },
                        "Learn more in our support area",
                        " ",
                        React.createElement(ArrowWrap, null,
                            React.createElement(__1.NorthEastArrow, null))))));
        };
        _this.ethAddressSaved = function (firstAddressSave) { return __awaiter(_this, void 0, void 0, function () {
            var client, error;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        this.setState({ showWalletConnected: true });
                        if (!(firstAddressSave && this.props.authApplicationType === __1.AuthApplicationEnum.NEWSROOM)) return [3 /*break*/, 2];
                        client = utils_1.getApolloClient();
                        return [4 /*yield*/, client.mutate({
                                mutation: sendNewsroomWelcomeEmailMutation,
                            })];
                    case 1:
                        error = (_a.sent()).error;
                        if (error) {
                            console.error("Failed to send welcome email:", error);
                        }
                        _a.label = 2;
                    case 2: return [2 /*return*/];
                }
            });
        }); };
        _this.enableEthereum = function () { return __awaiter(_this, void 0, void 0, function () {
            var civil, isEthereumEnabled;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        civil = this.props.civil;
                        isEthereumEnabled = false;
                        if (!(civil && civil.currentProvider)) return [3 /*break*/, 2];
                        return [4 /*yield*/, civil.currentProviderEnable()];
                    case 1:
                        isEthereumEnabled = !!(_a.sent());
                        _a.label = 2;
                    case 2:
                        this.setState({ metamaskEnabled: isEthereumEnabled });
                        return [2 /*return*/];
                }
            });
        }); };
        _this.onboardingComplete = function () {
            _this.setState({ showWalletConnected: false });
            if (_this.props.onOnboardingComplete) {
                _this.props.onOnboardingComplete();
            }
        };
        _this.state = {};
        return _this;
    }
    WalletOnboardingV2.getDerivedStateFromProps = function (props, state) {
        return __assign(__assign({}, state), { onboarded: utils_1.isWalletOnboarded(!!props.civil, props.metamaskWalletAddress, props.profileWalletAddress, props.wrongNetwork) });
    };
    WalletOnboardingV2.prototype.componentDidMount = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, this.enableEthereum()];
                    case 1:
                        _a.sent();
                        return [2 /*return*/];
                }
            });
        });
    };
    WalletOnboardingV2.prototype.render = function () {
        if (this.state.onboarded) {
            if (this.state.showWalletConnected || !this.props.children) {
                return this.renderConnected();
            }
            else {
                return React.createElement(React.Fragment, null, this.props.children);
            }
        }
        if (!utils_1.isBrowserCompatible()) {
            return this.renderBrowserIncompatible();
        }
        else if (!ethapi_1.hasInjectedProvider()) {
            return this.renderNoProvider();
        }
        else if (!this.state.metamaskEnabled) {
            return this.renderNotEnabled();
        }
        else if (this.props.civil && this.state.metamaskEnabled && !this.props.metamaskWalletAddress) {
            return this.renderLocked();
        }
        else if (this.props.wrongNetwork) {
            return this.renderWrongNetwork();
        }
        else if (this.props.metamaskWalletAddress) {
            if (!this.props.profileWalletAddress) {
                return this.renderSaveAddress();
            }
            else if (this.props.metamaskWalletAddress.toLowerCase() !== this.props.profileWalletAddress.toLowerCase()) {
                return this.renderAddressMismatch();
            }
        }
        return null;
    };
    WalletOnboardingV2.prototype.renderBrowserIncompatible = function () {
        return (React.createElement(Wrapper, null,
            React.createElement(BrowserCompatible_1.BrowserCompatible, null)));
    };
    WalletOnboardingV2.prototype.renderNoProvider = function () {
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null, "Connect your crypto wallet"),
            React.createElement(IntroText, null, "To log in to your Civil account and continue, you\u2019ll need to use a secure crypto wallet. We recommend using MetaMask."),
            React.createElement(GetMetaMaskBox, null,
                React.createElement("a", { href: "https://metamask.io/", target: "_blank" },
                    React.createElement(GetMetaMaskImg, { src: __1.metaMaskFrontLargeImgUrl }),
                    React.createElement(GetMetaMaskText, null, "Get the MetaMask Browser Extension"))),
            React.createElement(__1.OBSmallestParagraph, null,
                "Once the extension is installed,",
                " ",
                React.createElement("a", { href: "javascript:void(0)", onClick: function () { return window.location.reload(); } }, "refresh this page"),
                "."),
            this.renderFaqEtc()));
    };
    WalletOnboardingV2.prototype.renderNotEnabled = function () {
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null, "Connect your crypto wallet"),
            React.createElement(IntroText, null, "Civil uses MetaMask to view your public wallet address and prompt you with Ethereum transactions, but first we need to connect with MetaMask. Please grant permission to Civil to view your wallet address."),
            React.createElement(InstructionsWrapper, null,
                React.createElement(InstructionsText, null,
                    React.createElement("p", null, "MetaMask will open a new window, and will ask you connect Civil to MetaMask to grant access."),
                    React.createElement(InstructionsButtonWrap, null,
                        React.createElement(__1.MetaMaskLogoButton, { onClick: this.enableEthereum }, "Open MetaMask"))),
                React.createElement(InstructionsImage, { src: __1.metaMaskConnectImgUrl })),
            React.createElement(__1.OBSmallestParagraph, null,
                "If you do not see the MetaMask popup, please click the ",
                React.createElement(MetaMaskIcon, null),
                " icon in your browser address bar."),
            this.renderFaqEtc()));
    };
    WalletOnboardingV2.prototype.renderLocked = function () {
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null, "Log in to your crypto wallet"),
            React.createElement(IntroText, null, "Please open the MetaMask extension and follow the instructions to log in to your crypto wallet. After you are logged in, you can continue."),
            React.createElement(InstructionsWrapper, null,
                React.createElement(InstructionsText, null,
                    React.createElement("p", null, "Open the MetaMask extension in your browser and follow the instructions to unlock and log into your wallet.")),
                React.createElement(InstructionsImage, { src: __1.metaMaskLoginImgUrl })),
            this.renderFaqEtc()));
    };
    WalletOnboardingV2.prototype.renderWrongNetwork = function () {
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null, "Log in to your crypto wallet"),
            React.createElement(IntroText, null, "Please open the MetaMask extension and follow the instructions to log in to your crypto wallet. After you are logged in, you can continue."),
            React.createElement(InstructionsWrapper, null,
                React.createElement(InstructionsText, null,
                    React.createElement("p", null,
                        "Looks like you\u2019re using an unsupported Ethereum network. Make sure you have the",
                        " ",
                        React.createElement("strong", null, this.props.requiredNetworkNiceName),
                        " selected.")),
                React.createElement(InstructionsImage, { src: __1.metaMaskNetworkSwitchImgUrl })),
            this.renderFaqEtc()));
    };
    WalletOnboardingV2.prototype.renderSaveAddress = function () {
        var _this = this;
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null, "Log in to Civil with your crypto wallet"),
            React.createElement(IntroText, null, "Almost there! To set up your Civil account, you need to authenticate your account with a signature. This is similar to signing in with a password. It verifies your account with your crypto wallet."),
            React.createElement(InstructionsWrapper, null,
                React.createElement(InstructionsText, null,
                    React.createElement("p", null, "MetaMask will open a new window, and will require you to sign a message."),
                    React.createElement(InstructionsButtonWrap, null,
                        React.createElement(Account_1.AccountEthAuth, { onAuthenticated: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
                                return [2 /*return*/, this.ethAddressSaved(true)];
                            }); }); }, buttonOnly: true }))),
                React.createElement(InstructionsImage, { src: __1.metaMaskSignImgUrl })),
            this.renderFaqEtc()));
    };
    WalletOnboardingV2.prototype.renderAddressMismatch = function () {
        var _this = this;
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null, "Log in to Civil with your crypto wallet"),
            React.createElement(IntroText, null, "The wallet address saved in your profile does not match your current MetaMask wallet address. Please update your profile, or switch MetaMask to use the wallet that is saved to your profile."),
            React.createElement(WalletLabel, null, "Profile wallet address"),
            React.createElement(ProfileWalletAddress, null, this.props.profileWalletAddress),
            " ",
            React.createElement(WalletLabel, null, "Connected MetaMask wallet address"),
            React.createElement(WalletAddress, { address: this.props.metamaskWalletAddress }),
            " ",
            React.createElement(InstructionsWrapper, null,
                React.createElement(InstructionsText, null,
                    React.createElement("p", null, "Open MetaMask to sign a message to authenticate your MetaMask address and save it to your profile."),
                    React.createElement(InstructionsButtonWrap, null,
                        React.createElement(Account_1.AccountEthAuth, { onAuthenticated: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
                                return [2 /*return*/, this.ethAddressSaved()];
                            }); }); }, buttonOnly: true, buttonText: "Update Profile" }))),
                React.createElement(InstructionsImage, { src: __1.metaMaskSignImgUrl })),
            this.renderFaqEtc()));
    };
    WalletOnboardingV2.prototype.renderConnected = function () {
        return (React.createElement(Wrapper, null,
            React.createElement(__1.OBSectionTitle, null,
                React.createElement(ConnectedCheck, { width: 32, height: 32 }),
                "Wallet Connected"),
            React.createElement(IntroText, null, "Your crypto wallet is connected. Your public wallet address will be linked to your email address on the Civil network so you can log in using your wallet."),
            React.createElement(ConnectedWalletAddressWrap, null,
                React.createElement(WalletLabel, null, "Public Wallet Address"),
                React.createElement(ConnectedWalletAddress, null, this.props.metamaskWalletAddress)),
            React.createElement(WarningWrap, null,
                React.createElement(__1.OBNoteText, null, "Make sure you've backed up and saved your MetaMask login and account details, such as your seed phrase, username and password in a safe place. We can\u2019t help you restore or regain access if you lose it.")),
            React.createElement(ContinueButtonWrap, null,
                React.createElement(__1.Button, { width: 220, size: __1.buttonSizes.MEDIUM_WIDE, onClick: this.onboardingComplete }, "Continue")),
            this.renderFaqEtc(false)));
    };
    return WalletOnboardingV2;
}(React.Component));
exports.WalletOnboardingV2 = WalletOnboardingV2;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
//# sourceMappingURL=WalletOnboardingV2.js.map