"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExtensionPage = void 0;
const react_1 = __importDefault(require("react"));
const polymesh_ui_1 = require("@polymathnetwork/polymesh-ui");
const react_i18next_1 = require("react-i18next");
const PolyAlertSvg_1 = require("./assets/PolyAlertSvg");
const PolyWalletSvg_1 = require("./assets/PolyWalletSvg");
const hardRedirect_1 = require("../../utils/hardRedirect");
const installUrl = 'https://chrome.google.com/webstore/detail/polymesh-wallet/jojhfeoedkpkglbfimdfabpdfjaoolaf';
exports.ExtensionPage = ({ appName, mainPath }) => {
    const { t } = react_i18next_1.useTranslation();
    const connect = () => {
        hardRedirect_1.hardRedirect(mainPath);
    };
    return (react_1.default.createElement(polymesh_ui_1.PageWrap, { style: {
            background: polymesh_ui_1.theme.colors.gradient,
        } },
        react_1.default.createElement(polymesh_ui_1.Box, { pt: "m" },
            react_1.default.createElement(polymesh_ui_1.Icon, { Asset: polymesh_ui_1.icons.SvgPolyText, width: 188, color: "brandMain" })),
        react_1.default.createElement(polymesh_ui_1.Flex, { justifyContent: "space-between" },
            react_1.default.createElement(polymesh_ui_1.Box, { pt: "xxl", pb: "xxxl", width: "50%" },
                react_1.default.createElement(PolyAlertSvg_1.PolyAlertSvg, { style: { marginLeft: -20 } }),
                react_1.default.createElement(polymesh_ui_1.Heading, { variant: "h4", mb: "m", id: "extension_page_heading" }, t('Extension.header', { appName })),
                react_1.default.createElement(polymesh_ui_1.Paragraph, { color: "gray.2", mb: "s" }, t('Extension.p1', { appName })),
                react_1.default.createElement(polymesh_ui_1.Paragraph, { color: "gray.2", mb: "s" }, t('Extension.p2', { appName })),
                react_1.default.createElement(polymesh_ui_1.Paragraph, { color: "gray.2", mb: "m" }, t('Extension.p3', { appName })),
                react_1.default.createElement(polymesh_ui_1.Flex, null,
                    react_1.default.createElement(polymesh_ui_1.Flex, { mr: "l" },
                        react_1.default.createElement(polymesh_ui_1.Button, { id: "extension_page_connect_button", onClick: connect },
                            react_1.default.createElement(polymesh_ui_1.IconCircled, { Asset: polymesh_ui_1.icons.SvgPoly, width: 24, height: 24, scale: 0.9, color: "brandMain", mr: "s" }),
                            t('Extension.connectWallet'))),
                    react_1.default.createElement(polymesh_ui_1.Button, { variant: "secondary", id: "extension_page_install_button", href: installUrl, as: "a", target: "_blank", rel: "noreferrer noopener" }, t('Extension.installWallet')))),
            react_1.default.createElement(PolyWalletSvg_1.PolyWalletSvg, { style: { marginTop: 100 } }))));
};
//# sourceMappingURL=ExtensionPage.js.map