import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { t } from "ttag";
import Metamask from "../../assets/metamask";
import { useEthereum } from "../../contexts/ethereum";
import Button from "../button";
export const EthConnect = ({ onCopy }) => {
    const { address, connect, installed, startOnboarding } = useEthereum();
    const [pending, setPending] = React.useState(false);
    const [label, setLabel] = React.useState(t `Install`);
    React.useEffect(() => {
        if (!installed) {
            setLabel(t `Install`);
        }
        else if (!address) {
            setLabel(t `Connect Metamask`);
        }
        else {
            setLabel(t `Copy from Metamask`);
        }
    }, [address, installed, onCopy]);
    const handleClick = React.useCallback(async () => {
        if (!installed) {
            startOnboarding();
        }
        else if (!address) {
            setPending(true);
            await connect();
            setPending(false);
        }
        else {
            onCopy
                ? onCopy(address)
                : console.error(t `Provide on copy or hide component`);
        }
    }, [address, connect, installed, onCopy, startOnboarding]);
    return (_jsxs(Button, { className: "eth-connect", onClick: handleClick, pending: pending, width: "210px", texted: true, children: [_jsx(Metamask, { style: { marginRight: 8 } }), _jsx("span", { children: t `${label}` })] }));
};
//# sourceMappingURL=connect.js.map