"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WrongNetworkPage = void 0;
const react_1 = __importDefault(require("react"));
const polymesh_ui_1 = require("@polymathnetwork/polymesh-ui");
const react_i18next_1 = require("react-i18next");
const PolyWalletSvg_1 = require("./assets/PolyWalletSvg");
const PolyWarningSvg_1 = require("./assets/PolyWarningSvg");
const variables_1 = require("../../data/variables");
const constants_1 = require("../../data/constants");
const hardRedirect_1 = require("../../utils/hardRedirect");
exports.WrongNetworkPage = ({ mainPath, apiConfig }) => {
    const { t } = react_i18next_1.useTranslation();
    const cleanUrl = apiConfig.polyWssNodeUrl.replace(/\/$/, '');
    const supportedNetworkName = constants_1.nameByUrl[cleanUrl].toUpperCase();
    const connect = () => {
        hardRedirect_1.hardRedirect(mainPath);
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        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(PolyWarningSvg_1.PolyWarningSvg, { style: { marginLeft: -20 } }),
                    react_1.default.createElement(polymesh_ui_1.Heading, { variant: "h4", mb: "m" }, t('WrongNetwork.heading', { supportedNetworkName })),
                    react_1.default.createElement(polymesh_ui_1.Paragraph, { color: "gray.2", mb: "m" }, t('WrongNetwork.instruction', { supportedNetworkName })),
                    react_1.default.createElement(polymesh_ui_1.Button, { id: "wrong_network_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('WrongNetwork.connectButton'))),
                react_1.default.createElement(PolyWalletSvg_1.PolyWalletSvg, null))),
        react_1.default.createElement(polymesh_ui_1.Footer, { links: variables_1.footerLinks })));
};
//# sourceMappingURL=WrongNetworkPage.js.map