plurality-esm-wrapper/dist/esm/components/ConnectedProfile/index.js

A React component for social connect popup.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Menu, Dropdown } from 'antd';
import styled from 'styled-components';
import ProfileIcon from '../../assets/profileIcon';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import ProfileStars from '../../assets/profileStar';
const ConnectedButtonWrapper = styled(Button) `
  width: 180px;
  border-radius: 70px;
  border: none;
  background-color: ${props => (props.$theme === 'dark' ? '#000000 !important' : 'transparent !important')};
  color: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  box-shadow: none;
  transition: background-color 0.8s ease;
  overflow: hidden;
  padding: 25px 10px !important;

  .avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .anticon-caret-down, .anticon-caret-up {
    color: lightgray !important;
  }

  &:hover {
    background-color: #acacac !important;
    color: #fff !important;
  }

  > svg:first-of-type {
    width: 50px;
    height: 60px;
  }
`;
const StyledMenu = styled(Menu) `
  background-color: #F9F9F9 !important;
  width: 270px;
  max-width: 100%;
  border-radius: 25px !important;

  span {
    color: #545454 !important;
  }

  .ant-dropdown-menu-item {
    padding: 0 15px !important;
    font-family: 'Lexend';
    font-size: 16px;
    font-weight: 400;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #F9F9F9 !important;
      color: #000;
    }

    .basic-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10px;
      span {
        font-family: 'Lexend';
        font-size: 16px;
        font-weight: 400;
      }

      .basic-info-details {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
      }
    }
  }

  @media (max-width: 768px) {
    width: 100%;
    max-width: 100;
  }
`;
const baseUrl = process.env.REACT_APP_WIDGET_BASE_URL || '*';
const ProfileConnectedButton = ({ theme, userData, handleClick }) => {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const { profileIcon: icon, username: name, ratings } = userData;
    const toggleDropdown = () => {
        setIsDropdownOpen(!isDropdownOpen);
    };
    const handleLogout = () => {
        const iframe = document.getElementById('iframe');
        const isMetamaskConnected = localStorage.getItem('metamask');
        const connectedPlatform = isMetamaskConnected ? 'metamask' : 'lit';
        if (iframe?.contentWindow) {
            const messageId = `msg-${Date.now()}`;
            const payload = { id: messageId, type: 'logoutRequest', platform: connectedPlatform };
            iframe.contentWindow.postMessage(payload, baseUrl);
        }
    };
    const goToProfile = (step) => {
        const iframe = document.getElementById('iframe');
        if (iframe?.contentWindow) {
            const messageId = `msg-${Date.now()}`;
            const payload = { id: messageId, type: 'goToStep', step };
            iframe.contentWindow.postMessage(payload, baseUrl);
        }
        handleClick();
    };
    const renderRatings = () => {
        return Array.from({ length: ratings || 0 }, (_, i) => _jsx(ProfileStars, {}, i));
    };
    const menu = (_jsxs(StyledMenu, { "$theme": theme, children: [_jsx(Menu.Item, { children: _jsxs("div", { className: 'basic-info', children: [_jsx("div", { className: 'basic-info-details', children: _jsx("span", { children: name }) }), _jsx("div", { className: 'stars', children: renderRatings() })] }) }, "1"), _jsx("hr", {}), _jsx(Menu.Item, { style: { marginTop: '10px' }, onClick: () => goToProfile('profile'), children: _jsx("span", { children: "Profile" }) }, "2"), _jsx(Menu.Item, { style: { marginTop: '10px' }, onClick: () => goToProfile('wallet'), children: _jsx("span", { children: "Wallet" }) }, "3"), _jsx(Menu.Item, { style: { marginTop: '10px' }, onClick: () => goToProfile('socialConnect'), children: _jsx("span", { children: "Connect Platforms" }) }, "4"), _jsx(Menu.Item, { style: { marginTop: '10px', marginBottom: '10px' }, onClick: () => goToProfile('profileSettings'), children: _jsx("span", { children: "Update Profile" }) }, "5"), _jsx("hr", {}), _jsx(Menu.Item, { style: { marginTop: '10px', marginBottom: '10px' }, onClick: handleLogout, children: _jsx("span", { children: "Logout" }) }, "6")] }));
    return (_jsxs("div", { className: 'content-wrapper', children: [_jsx("div", { className: "vertical-line" }), _jsx(Dropdown, { overlay: menu, trigger: ['hover'], onVisibleChange: toggleDropdown, visible: isDropdownOpen, overlayClassName: "custom-dropdown", children: _jsxs(ConnectedButtonWrapper, { "$isOpen": isDropdownOpen, "$theme": theme, children: [_jsx("div", { className: 'avatar', children: icon ? _jsx("img", { src: icon, alt: 'profile-icon' }) : _jsx(ProfileIcon, {}) }), isDropdownOpen ? _jsx(CaretUpOutlined, {}) : _jsx(CaretDownOutlined, {})] }) })] }));
};
export default ProfileConnectedButton;