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

A React component for social connect popup.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PluralitySocialConnect = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./css/styles.css");
const PluralityModal_1 = __importDefault(require("./PluralityModal"));
const PluralityApi_1 = __importDefault(require("./PluralityApi"));
const ConnectedProfile_1 = __importDefault(require("./components/ConnectedProfile"));
const profileButton_1 = __importDefault(require("./components/profileButton"));
const antd_1 = require("antd");
const validSteps = ['profile', 'socialConnect', 'wallet', 'profileSettings'];
const baseUrl = process.env.REACT_APP_WIDGET_BASE_URL || '*';
const shouldDisableButton = false;
class PluralitySocialConnect extends react_1.Component {
    constructor(props) {
        super(props);
        this.openSocialConnectPopup = () => {
            const targetOrigin = this.getBaseUrl() || '*';
            this.setState({
                iframeStyle: Object.assign(Object.assign({}, this.state.iframeStyle), { width: '100%', height: 600 }),
                isOpen: true,
                showMask: true,
                isDisabled: shouldDisableButton,
            });
            const iframe = document.getElementById('iframe');
            if (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) {
                iframe.contentWindow.postMessage({ data: 'refresh' }, targetOrigin);
            }
        };
        this.openInvisiblePopup = () => {
            this.setState({
                iframeStyle: Object.assign(Object.assign({}, this.state.iframeStyle), { width: 0, height: 0 }),
                isOpen: true,
                isDisabled: shouldDisableButton,
            });
            this.performAsyncTasks();
        };
        this.closeSocialConnectPopup = () => {
            this.setState({
                iframeStyle: Object.assign(Object.assign({}, 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) => {
            var _b, _c, _d, _e;
            if (event.origin !== baseUrl)
                return;
            const { eventName, data } = event.data;
            if (eventName === "metamaskConnection") {
                this.setState({ isMetamaskConnected: data.isConnected });
                if (data === null || data === void 0 ? void 0 : data.isConnected) {
                    localStorage.setItem('metamask', 'true');
                }
                else {
                    localStorage.setItem('metamask', 'false');
                }
            }
            else if (eventName === "litConnection") {
                this.setState({ isLitConnected: data.isConnected });
                if (data === null || data === void 0 ? void 0 : data.isConnected) {
                    const loginData = {
                        status: data.isConnected,
                        pluralityToken: data.token
                    };
                    localStorage.setItem('lit', 'true');
                    (_c = (_b = this.props).onDataReturned) === null || _c === void 0 ? void 0 : _c.call(_b, loginData);
                }
                else {
                    localStorage.setItem('lit', 'false');
                }
                if (data === null || data === void 0 ? void 0 : data.logout) {
                    const logoutData = {
                        logout: data.logout,
                        message: 'User logged out successfully!'
                    };
                    (_e = (_d = this.props).onProfileLogout) === null || _e === void 0 ? void 0 : _e.call(_d, logoutData);
                }
            }
            else if (eventName === "userData") {
                this.setState((prevState) => ({
                    userData: Object.assign(Object.assign(Object.assign({}, 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 === null || data === void 0 ? void 0 : data.consent) || eventName === "getMessageSignature") {
                    this.closeSocialConnectPopup();
                }
            }
            else if (eventName === "walletSendTransaction") {
                console.log("Wallet tsx", data);
                antd_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.props.options.headless ?
                    this.state.isMetamaskConnected || this.state.isLitConnected
                        ? (0, jsx_runtime_1.jsx)(ConnectedProfile_1.default, { theme: this.props.options.theme, userData: this.state.userData, handleClick: this.openSocialConnectPopup })
                        : (0, jsx_runtime_1.jsx)(profileButton_1.default, { customizations: this.props.customization, text: this.props.options.text || 'Connect Profile', handleClick: this.openSocialConnectPopup })
                    : null, (0, jsx_runtime_1.jsx)(PluralityModal_1.default, { closePlurality: this.closeSocialConnectPopup, isOpen: !this.state.isOpen, showMask: this.state.showMask, frameUrl: this.getBaseUrl(), style: this.state.iframeStyle })] }));
    }
}
exports.PluralitySocialConnect = PluralitySocialConnect;
_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_1.default.sendRequest("getAllAccounts");
};
PluralitySocialConnect.getConnectedAccount = async (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return await PluralityApi_1.default.sendRequest("getConnectedAccount");
};
PluralitySocialConnect.getBalance = (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getBalance");
};
PluralitySocialConnect.getMessageSignature = (messageToSign) => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.instance.openSocialConnectPopup();
    }
    return PluralityApi_1.default.sendRequest("getMessageSignature", messageToSign);
};
PluralitySocialConnect.verifyMessageSignature = (plainMessage, signedMessage) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("verifyMessageSignature", plainMessage, signedMessage);
};
PluralitySocialConnect.sendTransaction = (rawTx, rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.openSocialConnectPopup();
    }
    return PluralityApi_1.default.sendRequest("sendTransaction", rawTx, rpc, chainId);
};
PluralitySocialConnect.getBlockNumber = (rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getBlockNumber");
};
PluralitySocialConnect.getTransactionCount = (address, rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getTransactionCount", address, rpc, chainId);
};
PluralitySocialConnect.readFromContract = (address, abi, methodName, methodParams, rpc = '', chainId = '') => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.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_1.default.sendRequest("writeToContract", address, abi, methodName, methodParams, rpc, chainId, options);
};
PluralitySocialConnect.getLoginInfo = () => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getLoginInfo");
};
// EAS Immplementation
PluralitySocialConnect.setPublicData = (key, value) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("setPublicData", key, value);
};
PluralitySocialConnect.getPublicData = (key) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getPublicData", key);
};
PluralitySocialConnect.setPrivateData = (key, value) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("setPrivateData", key, value);
};
PluralitySocialConnect.getPrivateData = (key) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getPrivateData", key);
};
PluralitySocialConnect.updateConsentOption = () => {
    if (!_a.checkLitConnection())
        return;
    if (_a.instance) {
        _a.instance.openSocialConnectPopup();
    }
    return PluralityApi_1.default.sendRequest("updateConsentData");
};
PluralitySocialConnect.getSmartProfileData = () => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getSmartProfile");
};
PluralitySocialConnect.getAppData = (key) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("getAppData", key);
};
PluralitySocialConnect.setAppData = (key, value) => {
    if (!_a.checkLitConnection())
        return;
    return PluralityApi_1.default.sendRequest("setAppData", key, value);
};
PluralitySocialConnect.navigateTo = (step) => {
    if (!_a.checkLitConnection())
        return;
    if (!validSteps.includes(step)) {
        alert('This page does not exist!');
        return false;
    }
    PluralityApi_1.default.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 === null || iframe === void 0 ? void 0 : iframe.contentWindow) {
        const messageId = `msg-${Date.now()}`;
        const payload = { id: messageId, type: 'logoutRequest' };
        iframe.contentWindow.postMessage(payload, baseUrl);
    }
};