plurality-esm-wrapper
Version:
A React component for social connect popup.
140 lines (128 loc) • 6.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const antd_1 = require("antd");
const styled_components_1 = __importDefault(require("styled-components"));
const profileIcon_1 = __importDefault(require("../../assets/profileIcon"));
const icons_1 = require("@ant-design/icons");
const profileStar_1 = __importDefault(require("../../assets/profileStar"));
const ConnectedButtonWrapper = (0, styled_components_1.default)(antd_1.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 = (0, styled_components_1.default)(antd_1.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] = (0, react_1.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 === null || iframe === void 0 ? void 0 : 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 === null || iframe === void 0 ? void 0 : 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) => (0, jsx_runtime_1.jsx)(profileStar_1.default, {}, i));
};
const menu = ((0, jsx_runtime_1.jsxs)(StyledMenu, { "$theme": theme, children: [(0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'basic-info', children: [(0, jsx_runtime_1.jsx)("div", { className: 'basic-info-details', children: (0, jsx_runtime_1.jsx)("span", { children: name }) }), (0, jsx_runtime_1.jsx)("div", { className: 'stars', children: renderRatings() })] }) }, "1"), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { style: { marginTop: '10px' }, onClick: () => goToProfile('profile'), children: (0, jsx_runtime_1.jsx)("span", { children: "Profile" }) }, "2"), (0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { style: { marginTop: '10px' }, onClick: () => goToProfile('wallet'), children: (0, jsx_runtime_1.jsx)("span", { children: "Wallet" }) }, "3"), (0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { style: { marginTop: '10px' }, onClick: () => goToProfile('socialConnect'), children: (0, jsx_runtime_1.jsx)("span", { children: "Connect Platforms" }) }, "4"), (0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { style: { marginTop: '10px', marginBottom: '10px' }, onClick: () => goToProfile('profileSettings'), children: (0, jsx_runtime_1.jsx)("span", { children: "Update Profile" }) }, "5"), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { style: { marginTop: '10px', marginBottom: '10px' }, onClick: handleLogout, children: (0, jsx_runtime_1.jsx)("span", { children: "Logout" }) }, "6")] }));
return ((0, jsx_runtime_1.jsxs)("div", { className: 'content-wrapper', children: [(0, jsx_runtime_1.jsx)("div", { className: "vertical-line" }), (0, jsx_runtime_1.jsx)(antd_1.Dropdown, { overlay: menu, trigger: ['hover'], onVisibleChange: toggleDropdown, visible: isDropdownOpen, overlayClassName: "custom-dropdown", children: (0, jsx_runtime_1.jsxs)(ConnectedButtonWrapper, { "$isOpen": isDropdownOpen, "$theme": theme, children: [(0, jsx_runtime_1.jsx)("div", { className: 'avatar', children: icon ? (0, jsx_runtime_1.jsx)("img", { src: icon, alt: 'profile-icon' }) : (0, jsx_runtime_1.jsx)(profileIcon_1.default, {}) }), isDropdownOpen ? (0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {})] }) })] }));
};
exports.default = ProfileConnectedButton;