plurality-esm-wrapper/dist/esm/PluralitySocialConnect.js

A React component for social connect popup.

var _a;
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import './css/styles.css';
import PluralityModal from './PluralityModal';
import PluralityApi from './PluralityApi';
import ProfileConnectedButton from './components/ConnectedProfile';
import ProfileButton from './components/profileButton';
import { message } from 'antd';
const validSteps = ['profile', 'socialConnect', 'wallet', 'profileSettings'];
const baseUrl = process.env.REACT_APP_WIDGET_BASE_URL || '*';
const shouldDisableButton = false;
export class PluralitySocialConnect extends Component {
    constructor(props) {
        super(props);
        this.openSocialConnectPopup = () => {
            const targetOrigin = this.getBaseUrl() || '*';
            this.setState({
                iframeStyle: {
                    ...this.state.iframeStyle,
                    width: '100%',
                    height: 600,
                },
                isOpen: true,
                showMask: true,
                isDisabled: shouldDisableButton,
            });
            const iframe = document.getElementById('iframe');
            if (iframe?.contentWindow) {
                iframe.contentWindow.postMessage({ data: 'refresh' }, targetOrigin);
            }
        };
        this.openInvisiblePopup = () => {
            this.setState({
                iframeStyle: {
                    ...this.state.iframeStyle,
                    width: 0,
                    height: 0,
                },
                isOpen: true,
                isDisabled: shouldDisableButton,
            });
            this.performAsyncTasks();
        };
        this.closeSocialConnectPopup = () => {
            this.setState({
                iframeStyle: {
                    ...this.state.iframeStyle,
                    width: 0,
                    height: 0,
                },
                isOpen: false,
                isDisabled: shouldDisableButton,
            });
        };
        // static switchNetwork = (rpc: string, chainId: string) => {
        //     if (!this.checkLitConnection()) return;
        //     return PluralityApi.sendRequest("switchNetwork", rpc, chainId);
        // }
        // static fetchNetwork = () => {
        //     if (!this.checkLitConnection()) return;
        //     return PluralityApi.sendRequest("fetchNetwork");
        // }
        this.sleep = (ms) => {
            return new Promise(resolve => setTimeout(resolve, ms));
        };
        this.handleIframeMessage = (event) => {
            if (event.origin !== baseUrl)
                return;
            const { eventName, data } = event.data;
            if (eventName === "metamaskConnection") {
                this.setState({ isMetamaskConnected: data.isConnected });
                if (data?.isConnected) {
                    localStorage.setItem('metamask', 'true');
                }
                else {
                    localStorage.setItem('metamask', 'false');
                }
            }
            else if (eventName === "litConnection") {
                this.setState({ isLitConnected: data.isConnected });
                if (data?.isConnected) {
                    const loginData = {
                        status: data.isConnected,
                        pluralityToken: data.token
                    };
                    localStorage.setItem('lit', 'true');
                    this.props.onDataReturned?.(loginData);
                }
                else {
                    localStorage.setItem('lit', 'false');
                }
                if (data?.logout) {
                    const logoutData = {
                        logout: data.logout,
                        message: 'User logged out successfully!'
                    };
                    this.props.onProfileLogout?.(logoutData);
                }
            }
            else if (eventName === "userData") {
                this.setState((prevState) => ({
                    userData: {
                        ...prevState.userData,
                        username: data.name,
                        profileIcon: data.avatar,
                        ratings: data.rating,
                        consent: data.consent,
                        ...(data.scores && { scores: data.scores })
                    }
                }));
                localStorage.setItem('userData', JSON.stringify(data));
            }
            else if (eventName === "consentData" || eventName === "getMessageSignature") {
                if (data?.consent || eventName === "getMessageSignature") {
                    this.closeSocialConnectPopup();
                }
            }
            else if (eventName === "walletSendTransaction") {
                console.log("Wallet tsx", data);
                message.error(data);
            }
            if (eventName === "smartProfileData") {
                window.localStorage.setItem("smartProfileData", data.profileData);
            }
        };
        _a.instance = this;
        this.state = {
            iframeStyle: {
                width: '100%',
                height: 0,
                border: 'none',
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translate(-50%, -50%)',
                background: 'transparent',
            },
            isOpen: false,
            showMask: false,
            isDisabled: false,
            isMetamaskConnected: false,
            isLitConnected: false,
            userData: {
                username: '',
                profileIcon: '',
                ratings: 0,
                scores: [],
                consent: false
            }
        };
    }
    getBaseUrl() {
        if (!this.props.options.clientId)
            return baseUrl;
        return `${baseUrl}/?client_id=${this.props.options.clientId}`;
    }
    async performAsyncTasks() {
        await this.sleep(1);
        this.closeSocialConnectPopup();
    }
    componentDidMount() {
        this.openInvisiblePopup();
        window.addEventListener("message", this.handleIframeMessage);
    }
    componentWillUnmount() {
        window.removeEventListener("message", this.handleIframeMessage);
    }
    render() {
        return (_jsxs(_Fragment, { children: [!this.props.options.headless ?
                    this.state.isMetamaskConnected || this.state.isLitConnected
                        ? _jsx(ProfileConnectedButton, { theme: this.props.options.theme, userData: this.state.userData, handleClick: this.openSocialConnectPopup })
                        : _jsx(ProfileButton, { customizations: this.props.customization, text: this.props.options.text || 'Connect Profile', handleClick: this.openSocialConnectPopup })
                    : null, _jsx(PluralityModal, { closePlurality: this.closeSocialConnectPopup, isOpen: !this.state.isOpen, showMask: this.state.showMask, frameUrl: this.getBaseUrl(), style: this.state.iframeStyle })] }));
    }
}
_a = PluralitySocialConnect;
PluralitySocialConnect.instance = null;
PluralitySocialConnect.openSocialConnectPopup = () => {
    if (_a.instance) {
        _a.instance.openSocialConnectPopup();
    }
};
PluralitySocialConnect.checkLitConnection = () => {
    const isConnected = localStorage.getItem('lit') || 'false';
    if (!JSON.parse(isConnected)) {
        alert('Connect Profile first');
        return false;
    }
    return true;
};
PluralitySocialConnect.checkConnection = () => {
    const isConnected = localStorage.getItem('lit') || 'false';
    if (JSON.parse(isConnected)) {
        alert('Profile already connected!');
        return false;
    }
    return true;
};
PluralitySocialConnect.getAllAccounts = async (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getAllAccounts");
};
PluralitySocialConnect.getConnectedAccount = async (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return await PluralityApi.sendRequest("getConnectedAccount");
};
PluralitySocialConnect.getBalance = (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getBalance");
};
PluralitySocialConnect.getMessageSignature = (messageToSign) => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.instance.openSocialConnectPopup();
    }
    return PluralityApi.sendRequest("getMessageSignature", messageToSign);
};
PluralitySocialConnect.verifyMessageSignature = (plainMessage, signedMessage) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("verifyMessageSignature", plainMessage, signedMessage);
};
PluralitySocialConnect.sendTransaction = (rawTx, rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.openSocialConnectPopup();
    }
    return PluralityApi.sendRequest("sendTransaction", rawTx, rpc, chainId);
};
PluralitySocialConnect.getBlockNumber = (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getBlockNumber");
};
PluralitySocialConnect.getTransactionCount = (address, rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getTransactionCount", address, rpc, chainId);
};
PluralitySocialConnect.readFromContract = (address, abi, methodName, methodParams, rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("readFromContract", address, abi, methodName, methodParams, rpc, chainId);
};
PluralitySocialConnect.writeToContract = (address, abi, methodName, methodParams, rpc = '', chainId = '', options) => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.instance.openSocialConnectPopup();
    }
    return PluralityApi.sendRequest("writeToContract", address, abi, methodName, methodParams, rpc, chainId, options);
};
PluralitySocialConnect.getLoginInfo = () => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getLoginInfo");
};
// EAS Immplementation
PluralitySocialConnect.setPublicData = (key, value) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("setPublicData", key, value);
};
PluralitySocialConnect.getPublicData = (key) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getPublicData", key);
};
PluralitySocialConnect.setPrivateData = (key, value) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("setPrivateData", key, value);
};
PluralitySocialConnect.getPrivateData = (key) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getPrivateData", key);
};
PluralitySocialConnect.updateConsentOption = () => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.instance.openSocialConnectPopup();
    }
    return PluralityApi.sendRequest("updateConsentData");
};
PluralitySocialConnect.getSmartProfileData = () => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getSmartProfile");
};
PluralitySocialConnect.getAppData = (key) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("getAppData", key);
};
PluralitySocialConnect.setAppData = (key, value) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi.sendRequest("setAppData", key, value);
};
PluralitySocialConnect.navigateTo = (step) => {
    if (!_a.checkLitConnection())
        return;
    if (!validSteps.includes(step)) {
        alert('This page does not exist!');
        return false;
    }
    PluralityApi.sendRequest("navigateTo", step);
    _a.openSocialConnectPopup();
};
PluralitySocialConnect.connectProfile = () => {
    if (!_a.checkConnection())
        return;
    _a.openSocialConnectPopup();
};
PluralitySocialConnect.disconnectProfile = () => {
    if (!_a.checkLitConnection())
        return;
    const iframe = document.getElementById('iframe');
    if (iframe?.contentWindow) {
        const messageId = `msg-${Date.now()}`;
        const payload = { id: messageId, type: 'logoutRequest' };
        iframe.contentWindow.postMessage(payload, baseUrl);
    }
};