import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DotsLoader } from "@powerhousedao/connect";
import IconRenown from "@powerhousedao/connect/assets/icons/renown.svg?react";
import { PowerhouseButton } from "@powerhousedao/design-system";
import { openRenown } from "@powerhousedao/reactor-browser";
import { useLoginStatus, useUser, } from "@powerhousedao/reactor-browser/connect";
export const Login = () => {
    const user = useUser();
    const status = useLoginStatus();
    return (_jsx("div", { children: status === "checking" ? (_jsxs("h2", { className: "px-4 py-5 text-center text-xl font-medium", children: [_jsx("span", { children: "Checking Authorization" }), _jsx("span", { className: "inline-block w-5 text-left", children: _jsx(DotsLoader, {}) })] })) : status !== "authorized" ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("h2", { className: "mb-1 text-2xl font-semibold", children: "Log in with" }), _jsx(IconRenown, { className: "mb-3" }), _jsx("p", { className: "mb-5 text-center text-lg leading-6", children: "Click on the button below to start signing messages in Connect on behalf of your Ethereum identity" }), _jsx(PowerhouseButton, { onClick: () => openRenown(), className: "mb-3 w-full p-0 text-white shadow-none transition-colors", children: _jsx("p", { className: "block h-10 px-7 leading-10 text-slate-50", children: "Authorize Connect" }) })] })) : (_jsxs("p", { className: "p-4 pb-5", children: ["Logged in with address: ", user?.address] })) }));
};
//# sourceMappingURL=login.js.map