"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExtensionPage = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
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 definition_1 = require("../definition");
const installUrl = 'https://chrome.google.com/webstore/detail/polymesh-wallet/jojhfeoedkpkglbfimdfabpdfjaoolaf';
const ExtensionPage = ({ appName, mainPath }) => {
    const { t } = (0, react_i18next_1.useTranslation)(definition_1.TranslationNS.ExtensionPage);
    const connect = () => {
        (0, hardRedirect_1.hardRedirect)(mainPath);
    };
    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { background: polymesh_ui_1.theme.colors.gradient } }, { children: [(0, jsx_runtime_1.jsxs)(polymesh_ui_1.PageWrap, { children: [(0, jsx_runtime_1.jsx)(polymesh_ui_1.Box, Object.assign({ pt: "m" }, { children: (0, jsx_runtime_1.jsx)(polymesh_ui_1.Icon, { Asset: polymesh_ui_1.icons.SvgPolyText, width: 188, color: "brandMain" }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(polymesh_ui_1.Flex, Object.assign({ justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsxs)(polymesh_ui_1.Box, Object.assign({ pt: "xxl", pb: "xxxl", width: "50%" }, { children: [(0, jsx_runtime_1.jsx)(PolyAlertSvg_1.PolyAlertSvg, { style: { marginLeft: -20 } }, void 0), (0, jsx_runtime_1.jsx)(polymesh_ui_1.Heading, Object.assign({ variant: "h4", mb: "m", id: "extension_page_heading" }, { children: t('header', { appName }) }), void 0), (0, jsx_runtime_1.jsx)(polymesh_ui_1.Paragraph, Object.assign({ color: "gray.2", mb: "s" }, { children: t('p1', { appName }) }), void 0), (0, jsx_runtime_1.jsx)(polymesh_ui_1.Paragraph, Object.assign({ color: "gray.2", mb: "s" }, { children: t('p2', { appName }) }), void 0), (0, jsx_runtime_1.jsx)(polymesh_ui_1.Paragraph, Object.assign({ color: "gray.2", mb: "m" }, { children: t('p3', { appName }) }), void 0), (0, jsx_runtime_1.jsxs)(polymesh_ui_1.Flex, Object.assign({ mt: "40px" }, { children: [(0, jsx_runtime_1.jsx)(polymesh_ui_1.Flex, Object.assign({ mr: "m" }, { children: (0, jsx_runtime_1.jsxs)(polymesh_ui_1.ButtonLarge, Object.assign({ id: "extension_page_connect_button", onClick: connect, style: { padding: '0.75rem 1rem' } }, { children: [(0, jsx_runtime_1.jsx)(polymesh_ui_1.IconCircled, { Asset: polymesh_ui_1.icons.SvgPolyNew, width: 24, height: 24, scale: 0.9, color: "brandMain", mr: "s" }, void 0), t('connectWallet')] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(polymesh_ui_1.ButtonLarge, Object.assign({ variant: "secondary", id: "extension_page_install_button", href: installUrl, as: "a", target: "_blank", rel: "noreferrer noopener" }, { children: t('installWallet') }), void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(PolyWalletSvg_1.PolyWalletSvg, { style: { marginTop: 100 } }, void 0)] }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(polymesh_ui_1.Footer, {}, void 0)] }), void 0));
};
exports.ExtensionPage = ExtensionPage;
//# sourceMappingURL=ExtensionPage.js.map