import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box } from "../grid";
import Text from "../text";
import Icons from "../icons";
import { ellipsis } from "./util";
import { currentTheme } from "../../theme";
const Identicon = React.lazy(() => import("@polkadot/react-identicon"));
const Header = ({ account, network, onClick }) => (_jsxs("div", { className: "header", onClick: onClick, children: [_jsx(React.Suspense, { fallback: _jsx("div", {}), children: _jsx(Identicon, { value: account.address, size: 24, theme: "polkadot" }) }), _jsxs(Box, { pl: "7px", mr: "auto", children: [_jsx(Text.F1, { children: ellipsis(account.meta?.name ?? "", 16) }), _jsxs("div", { children: [_jsxs(Text.F3, { className: "header__address", as: "span", fontFamily: "CourierBold", gray: true, children: [account.address.slice(0, 4), "...", account.address.slice(-4)] }), _jsx(Text.F3, { as: "span", fontFamily: "CourierBold", primary: true, children: network?.name })] })] }), _jsx(Icons.Settings, { color: currentTheme.colors.gray })] }));
export default Header;
//# sourceMappingURL=header.js.map