@streambird/streambird-react/lib/esm/Streambird.js

Streambird React

var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import React, { useEffect, useState } from "react";
import { loadStreambird, ProductTypes, WalletType } from "@streambird/streambird-js";
var useStreambirdFactory = function () {
    var _a = __read(useState(), 2), streambirdFactory = _a[0], setStreambirdFactory = _a[1];
    useEffect(function () {
        loadStreambird().then(function (globalStreambird) { return setStreambirdFactory(function () { return globalStreambird; }); });
    }, []);
    return streambirdFactory;
};
export var Streambird = function (props) {
    var StreambirdFactory = useStreambirdFactory();
    var divId = 'streambird_io_login';
    var publicToken = props.publicToken, config = props.config, callbacks = props.callbacks;
    useEffect(function () {
        if (!StreambirdFactory) {
            return;
        }
        var streambird = StreambirdFactory(publicToken);
        var getAutoVerify = function () {
            if (config && config.emailMagicLink) {
                if (config.emailMagicLink.hasOwnProperty('autoVerify')) {
                    return config.emailMagicLink.autoVerify;
                }
            }
            return true;
        };
        var getRequiresVerification = function () {
            if (config && config.emailMagicLink) {
                if (config.emailMagicLink.hasOwnProperty('requiresVerification')) {
                    return config.emailMagicLink.requiresVerification;
                }
            }
            return true;
        };
        var getShowHeaderText = function () {
            if (config && config.componentStyle) {
                if (config.componentStyle.hasOwnProperty('showHeaderText')) {
                    return config.componentStyle.showHeaderText;
                }
            }
            return true;
        };
        var options = {
            elementId: divId,
            enabledProducts: [ProductTypes.EmailMagicLink],
            config: {
                emailMagicLink: {
                    loginRedirectUrl: config.emailMagicLink.loginRedirectUrl ? config.emailMagicLink.loginRedirectUrl : '',
                    registrationRedirectUrl: config.emailMagicLink.registrationRedirectUrl ? config.emailMagicLink.registrationRedirectUrl : '',
                    loginExpiresIn: config.emailMagicLink.loginExpiresIn ? config.emailMagicLink.loginExpiresIn : 5,
                    registrationExpireIn: config.emailMagicLink.registrationExpireIn ? config.emailMagicLink.registrationExpireIn : 5,
                    requiresVerification: getRequiresVerification(),
                    autoVerify: getAutoVerify()
                },
                componentStyle: {
                    width: config.componentStyle.width ? config.componentStyle.width : 500,
                    showHeaderText: getShowHeaderText(),
                    headerText: config.componentStyle.headerText ? config.componentStyle.headerText : 'Sign in or register',
                    headerTextColor: config.componentStyle.headerTextColor ? config.componentStyle.headerTextColor : '',
                    bodyText: config.componentStyle.bodyText ? config.componentStyle.bodyText : 'Please enter your email address and sign up with a magic link to start using decentralized applications.',
                    bodyTextColor: config.componentStyle.bodyTextColor ? config.componentStyle.bodyTextColor : '#333333',
                    buttonTextColor: config.componentStyle.buttonTextColor ? config.componentStyle.buttonTextColor : '#FFFFFF',
                    buttonColor: config.componentStyle.buttonColor ? config.componentStyle.buttonColor : '',
                    errMsgColor: config.componentStyle.errMsgColor ? config.componentStyle.errMsgColor : ''
                }
            },
            callbacks: callbacks
        };
        if (config.wallet) {
            options.config['wallet'] = {
                walletType: config.wallet.walletType ? config.wallet.walletType : WalletType.Ethereum
            };
        }
        if (config.apiHost && config.apiHost.length > 0) {
            options.config['apiHost'] = config.apiHost;
        }
        streambird.init(options);
    }, [StreambirdFactory, divId]);
    return divId ? React.createElement("div", { id: divId }) : null;
};