import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Button from "../button";
import { Box } from "../grid";
import Space from "../space";
import Tabs from "../tabs";
import TextBase from "../text";
import { PolkadotConnect } from "../polkadot/connect";
import { PolkadotInstallExtension } from "../polkadot/installExtension";
import { t } from "ttag";
import styled, { useTheme } from "styled-components";
const Link = styled.a `
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
`;
const GetStarted = ({ ready, network, networks, onNetworkChange, connected }) => {
    const theme = useTheme();
    const primary910 = theme?.new?.colors?.primary910 ?? "#B84218";
    const primary900 = theme?.new?.colors?.primary900 ?? "#E8662D";
    return (_jsxs(_Fragment, { children: [networks.length > 1 ? (_jsx(Box, { className: "tabs", p: "16px 16px", children: _jsx(Tabs, { items: networks.map(({ name }) => ({
                        value: name,
                        label: name,
                    })), selectedValue: network?.name, onChange: (tab) => {
                        onNetworkChange?.(networks.find(({ name }) => name === tab));
                    }, type: "control" }) })) : undefined, _jsxs("div", { className: "center", children: [_jsx(Box, { mb: "21px", style: { minHeight: 68 }, children: connected ? (_jsxs(_Fragment, { children: [_jsx(Box, { mt: "36px" }), _jsx(TextBase.H2, { children: t `NO POLKADOT ACCOUNTS` }), _jsx(Space, { height: 12 }), _jsx(TextBase.F2, { fontFamily: "Medium", children: t `You don't have any accounts in your Polkadot.js extension or you have denied access to this site` }), _jsx(Space, { height: 18 }), _jsx(TextBase.F1, { color: primary910, children: t `1. Install Polkadot` }), _jsx(Space, { height: 4 }), _jsxs(TextBase.F2, { fontFamily: "Medium", children: [t `How to`, "\u00A0", _jsx(Link, { href: "https://polkadot.js.org/extension", target: "_blank", rel: "noreferrer", style: { color: primary900, textDecoration: "none" }, children: t `Install wallet` })] }), _jsx(Space, { height: 18 }), _jsx(TextBase.F1, { color: primary910, children: t `2. Add new Polkadot account` }), _jsx(Space, { height: 4 }), _jsx(TextBase.F2, { fontFamily: "Medium", children: t `Create a new one via Polkadot extension.` }), _jsx(Space, { height: 18 }), _jsx(TextBase.F1, { color: primary910, children: t `3. Connect wallet to Genshiro` }), _jsx(Space, { height: 4 }), _jsx(TextBase.F2, { fontFamily: "Medium", children: t `Go to your extension Settings → "Manage website access", switch to "allowed" for current domain` })] })) : (_jsxs(Box, { mt: "92px", mb: "8px", children: [_jsx(TextBase.H2, { textAlign: "center", fontSize: 32, children: t `Get started`.toUpperCase() }), _jsx(Box, { mt: "18px" }), _jsxs(TextBase.F1, { textAlign: "center", fontFamily: "Medium", children: [t `by connecting one of the`, " ", _jsx("br", {}), " ", t `wallets below`] })] })) }), !connected ? (_jsxs(_Fragment, { children: [_jsx(PolkadotConnect, { className: "sidebar-connect-wallet", disabled: !ready, btnSize: "md", btnWidth: "100%", onError: () => {
                                    /* TODO */
                                } }), _jsx(Box, { m: "auto 0 32px", children: _jsx(PolkadotInstallExtension, { className: "sidebar-install-wallet" }) })] })) : (_jsx(Box, { m: "auto 0 32px", children: _jsx(Button, { onClick: () => window.location.reload(), width: "100%", texted: true, children: _jsx(TextBase.F1, { color: primary900, children: t `Refresh` }) }) }))] })] }));
};
export default GetStarted;
//# sourceMappingURL=get-started.js.map