@mojito-inc/connect-wallet/esm/layout/TokenGatingLayout.js

Connecting wallet via metamask, wallet connect, email

import * as React from 'react';
import { useMemo } from 'react';
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import CloseIcon from '@mui/icons-material/Close';
import Modal from '@mui/material/Modal';
import { ModalType } from '../interface/index.js';
import '@mui/material/Typography';
import 'html-react-parser';
import LoadingContainer from '../component/LoadingContainer.js';
import ConnectWithEmailContainer from '../component/ConnectWithEmailContainer.js';
import ErrorContainer from '../component/ErrorContainer.js';
import OTPContainer from '../component/OTPContainer.js';
import '@mui/material/Button';
import '@mui/icons-material/Email';
import '@mui/material/Divider';
import '../provider/WalletTypeProvider.js';
import '@mui/material/FormControl';
import '@mui/material/TextField';
import '@mui/material/Autocomplete';
import 'countries-list';
import RecoveryCodeContainer from '../component/RecoveryCodeContainer.js';
import TokenGatingConnectWalletContainer from '../component/TokenGatingConnectWalletContainer.js';
import TokenGatingNoClaimContainer from '../component/TokenGatingNoClaimContainer.js';
import TokenGatingClaimContainer from '../component/TokenGatingClaimContainer.js';
import TokenGatingLoadingContainer from '../component/TokenGatingLoadingContainer.js';
import TokenGatingErrorContainer from '../component/TokenGatingErrorContainer.js';

const TokenGatingLayout = ({ currentModalState, error, otp, loaderTitle, email, open, walletScreenDetails, walletScreenActions, tokenClaimDetails, errorScreenDetails, recoveryCode, gatingLoaderDetails, gatingErrorDetails, screenConfig, errorMessage, handleRetry, onChangeEmail, onChangeOTP, onClickVerifyOTP, onClickContinueWithEmail, onCloseModal, onSuccess, onChangeRecoveryCode, onClickRecoveryCode, }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
    const theme = useTheme();
    const modalStyle = useMemo(() => {
        var _a, _b, _c;
        return {
            position: 'absolute',
            bottom: '0',
            width: 'calc(100% - 32px)',
            height: {
                lg: '60%',
                md: '60%',
                sm: '60%',
                xs: '50%',
            },
            background: (_c = (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.primary) !== null && _c !== void 0 ? _c : '',
            overflowY: 'auto',
            padding: '16px 16px 30px 16px',
        };
    }, [theme]);
    const isLoading = useMemo(() => {
        return (currentModalState === ModalType.LOADING ||
            currentModalState === ModalType.ERROR ||
            currentModalState === ModalType.GATING_LOADING ||
            currentModalState === ModalType.GATING_ERROR);
    }, [currentModalState]);
    const isTokenGating = useMemo(() => currentModalState === ModalType.GATING_LOADING ||
        currentModalState === ModalType.GATING_ERROR, [currentModalState]);
    return (React.createElement(Modal, { open: open },
        React.createElement(Box, { sx: modalStyle },
            (!isLoading || isTokenGating) && (React.createElement(Box, { sx: { position: 'fixed', right: '20px' } },
                React.createElement(CloseIcon, { sx: { cursor: 'pointer', color: (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.primary }, onClick: onCloseModal }))),
            React.createElement(Box, { sx: { height: '100%', display: 'grid', justifyContent: 'center', alignItems: 'center' } },
                React.createElement(Box, { sx: { maxWidth: '375px' } }, isLoading ? (React.createElement(Box, null,
                    currentModalState === ModalType.LOADING && (React.createElement(LoadingContainer, { loaderTitle: loaderTitle })),
                    currentModalState === ModalType.ERROR && (React.createElement(ErrorContainer, { onCloseModal: onCloseModal, errorImage: (_d = (_c = walletScreenDetails === null || walletScreenDetails === void 0 ? void 0 : walletScreenDetails.image) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : '', errorMessage: error, handleRetry: handleRetry })),
                    currentModalState === ModalType.GATING_LOADING && (React.createElement(TokenGatingLoadingContainer, { loaderTitle: (_e = screenConfig === null || screenConfig === void 0 ? void 0 : screenConfig.title) !== null && _e !== void 0 ? _e : gatingLoaderDetails === null || gatingLoaderDetails === void 0 ? void 0 : gatingLoaderDetails.loaderTitle, loaderSubtitle: (_f = screenConfig === null || screenConfig === void 0 ? void 0 : screenConfig.subTitle) !== null && _f !== void 0 ? _f : gatingLoaderDetails === null || gatingLoaderDetails === void 0 ? void 0 : gatingLoaderDetails.loaderSubtitle })),
                    currentModalState === ModalType.GATING_ERROR && (React.createElement(TokenGatingErrorContainer, { buttonName: gatingErrorDetails === null || gatingErrorDetails === void 0 ? void 0 : gatingErrorDetails.buttonName, errorMessage: gatingErrorDetails === null || gatingErrorDetails === void 0 ? void 0 : gatingErrorDetails.errorMessage, apiErrorMessage: errorMessage, subTitle: (_g = screenConfig === null || screenConfig === void 0 ? void 0 : screenConfig.subTitle) !== null && _g !== void 0 ? _g : gatingErrorDetails === null || gatingErrorDetails === void 0 ? void 0 : gatingErrorDetails.subTitle, title: (_h = screenConfig === null || screenConfig === void 0 ? void 0 : screenConfig.title) !== null && _h !== void 0 ? _h : gatingErrorDetails === null || gatingErrorDetails === void 0 ? void 0 : gatingErrorDetails.title, onClickButton: gatingErrorDetails === null || gatingErrorDetails === void 0 ? void 0 : gatingErrorDetails.onClickButton })))) : (React.createElement(React.Fragment, null,
                    currentModalState === ModalType.CONNECT_WALLET && (React.createElement(TokenGatingConnectWalletContainer, { image: walletScreenDetails.image, onClickEmail: walletScreenActions.onClickEmail, onClickMetamask: walletScreenActions.onClickMetamask, onClickWalletConnect: walletScreenActions.onClickWalletConnect, onClickBackPackWallet: walletScreenActions.onClickBackPackWallet, onClickPhantomWallet: walletScreenActions.onClickPhantomWallet, onSubmitMobile: walletScreenActions.onSubmitMobile, subTitle: (_j = screenConfig === null || screenConfig === void 0 ? void 0 : screenConfig.subTitle) !== null && _j !== void 0 ? _j : walletScreenDetails.subTitle, title: (_k = screenConfig === null || screenConfig === void 0 ? void 0 : screenConfig.title) !== null && _k !== void 0 ? _k : walletScreenDetails.title, walletOptions: walletScreenDetails.walletOptions })),
                    currentModalState === ModalType.EMAIL && (React.createElement(ConnectWithEmailContainer, { email: email, onChangeEmail: onChangeEmail, error: error, onClickContinueWithEmail: onClickContinueWithEmail, logoUrl: (_l = walletScreenDetails === null || walletScreenDetails === void 0 ? void 0 : walletScreenDetails.image) === null || _l === void 0 ? void 0 : _l.logo })),
                    currentModalState === ModalType.OTP && (React.createElement(OTPContainer, { email: email, otp: otp, error: error, onChangeOTP: onChangeOTP, onClickVerifyOTP: onClickVerifyOTP, onClickRequestNewCode: onClickContinueWithEmail, logo: (_m = walletScreenDetails === null || walletScreenDetails === void 0 ? void 0 : walletScreenDetails.image) === null || _m === void 0 ? void 0 : _m.logo })),
                    currentModalState === ModalType.CLAIM_DISCOUNT && (React.createElement(TokenGatingClaimContainer, { tokenDetail: tokenClaimDetails, onSuccess: onSuccess })),
                    currentModalState === ModalType.NO_CLAIM && (React.createElement(TokenGatingNoClaimContainer, { onClickSecondaryButton: errorScreenDetails.onClickSecondaryButton, onClickTertiaryButton: errorScreenDetails.onClickTertiaryButton, onClickPrimaryButton: errorScreenDetails.onClickPrimaryButton, primaryButtonTitle: errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.primaryButtonTitle, title: errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.title, secondaryButtonTitle: errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.secondaryButtonTitle, tertiaryButtonTitle: errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.tertiaryButtonTitle })),
                    currentModalState === ModalType.RECOVERY_CODE && (React.createElement(RecoveryCodeContainer, { recoveryCode: recoveryCode, logo: (_o = walletScreenDetails === null || walletScreenDetails === void 0 ? void 0 : walletScreenDetails.image) === null || _o === void 0 ? void 0 : _o.logo, error: error, onChangeRecoveryCode: onChangeRecoveryCode, onClickRecoveryCode: onClickRecoveryCode })))))))));
};

export { TokenGatingLayout as default };