import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { PLogo } from "./p-logo";
const ConnectWrapper = styled.div `
  cursor: pointer;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  > svg {
    width: 32px;
    height: 32px;
  }

  @media (max-width: 1023px) {
    width: 48px;
    height: 56px;
  }
`;
const ConnectPolkadot = ({ installed, connected, connect }) => {
    const connectInSelect = React.useCallback(async () => {
        if (!installed) {
            const w = window.open("https://polkadot.js.org/extension/", "_blank");
            w?.focus();
        }
        else if (!connected) {
            await connect?.();
        }
    }, [connect, connected, installed]);
    return (_jsx(ConnectWrapper, { onClick: connectInSelect, children: _jsx(PLogo, {}) }));
};
export default ConnectPolkadot;
//# sourceMappingURL=index.js.map