@mojito-inc/connect-wallet/esm/public/TokenGatingContainer.js

Connecting wallet via metamask, wallet connect, email

import { __awaiter } from '../_virtual/_tslib.js';
import * as React from 'react';
import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
import { ethers } from 'ethers';
import { defineChain } from 'thirdweb';
import { useConnect, useActiveAccount, useDisconnect, useActiveWallet, useActiveWalletChain, useActiveWalletConnectionStatus } from 'thirdweb/react';
import { inAppWallet, preAuthenticate } from 'thirdweb/wallets/in-app';
import '@mui/material/useMediaQuery';
import '@mui/material/Box';
import '@mui/material/styles';
import '@mui/icons-material/Close';
import '@mui/material/Modal';
import '@mui/material/Typography';
import 'html-react-parser';
import '@mui/material/Button';
import '@mui/material/TextField';
import '@mui/icons-material/ErrorOutline';
import 'mui-one-time-password-input';
import '@mui/icons-material/Email';
import '@mui/material/Divider';
import '../provider/WalletTypeProvider.js';
import '@mui/material/FormControl';
import '@mui/material/Autocomplete';
import 'countries-list';
import '@mui/material/Stack';
import '@mui/material/CircularProgress';
import { ModalType } from '../interface/index.js';
import TokenGatingLayout from '../layout/TokenGatingLayout.js';
import { WalletProviderType, emailRegex } from '../constant/index.js';
import useWalletConnect from '../hooks/useConnectWallet.js';
import { useTokenGating } from '../hooks/useTokenGating.js';
import { useWeb3ModalWrapper } from '../provider/Web3ModalWrapperProvider.js';
import { StorageService } from '../utils/storageService.utils.js';
import { useThirdWebClient } from '../provider/ThirdWebClientProvider.js';
import { getThirdWebClient, getEthersSigner } from '../utils/thirdWebClient.utils.js';

const TokenGatingContainer = ({ open, config, screenConfig, walletConnectScreenDetails, errorScreenDetails, claimTokenScreenDetails, gatingErrorDetails, gatingLoaderDetails, invoiceID, onCloseModal, setInvoice, getInvoiceDetails, }) => {
    const { clientId: thirdWebClientId, chainId: thirdWebChainId } = useThirdWebClient();
    const thirdWebWallet = inAppWallet();
    const { connect } = useConnect();
    const activeAccount = useActiveAccount();
    const connectedEmailWalletAddress = activeAccount === null || activeAccount === void 0 ? void 0 : activeAccount.address;
    const { disconnect: thirdWebDisconnect } = useDisconnect();
    const connectedThirdWebWallet = useActiveWallet();
    const thirdWebConnectedChain = useActiveWalletChain();
    const connectionStatus = useActiveWalletConnectionStatus();
    const web3Provider = useWeb3ModalWrapper();
    const { useWeb3ModalAccount, useWeb3Modal, useWeb3ModalProvider, useDisconnect: web3Disconnect } = web3Provider;
    const { address, chainId: chain, isConnected } = useWeb3ModalAccount();
    const { disconnect } = web3Disconnect();
    const { open: openWalletModal, close: closeWalletModal } = useWeb3Modal();
    const { walletProvider: signMessageAsync } = useWeb3ModalProvider();
    const thirdWebConnect = useRef(null);
    const walletDetails = useMemo(() => {
        return StorageService.walletDetails.getValue();
    }, []);
    const [recoveryCode, setRecoveryCode] = useState('');
    const [loaderTitle, setLoaderTitle] = useState('');
    const [modalState, setModalState] = useState(ModalType.CONNECT_WALLET);
    const [walletConnect, setWalletConnect] = useState(false);
    const [error, setError] = useState('');
    const [email, setEmail] = useState('');
    const [otp, setOTP] = useState('');
    const [openModal, setOpenModal] = useState(false);
    const { getSignature, loginWithWallet, isTokenGating } = useWalletConnect(Object.assign(Object.assign({}, config), { isTokenGating: true }));
    const [connectedWalletAddress, setConnectedWalletAddress] = useState('');
    const tokenGatingConfig = useMemo(() => {
        var _a;
        return {
            data: {
                buyerAddress: connectedWalletAddress,
                groupID: (_a = config === null || config === void 0 ? void 0 : config.groupId) !== null && _a !== void 0 ? _a : '',
                ruleID: config === null || config === void 0 ? void 0 : config.ruleId,
            },
        };
    }, [config, connectedWalletAddress]);
    const { gatedTokens, redeemItem, loading: apiLoading, error: isAPIError, errorMessage, handleReCheckTokenGating, redeemEarnableToken, getClaimInvoiceDetails, } = useTokenGating(tokenGatingConfig);
    const isGatedToken = useMemo(() => {
        var _a;
        return ({
            isGated: (_a = gatedTokens === null || gatedTokens === void 0 ? void 0 : gatedTokens.checkTokenGating) === null || _a === void 0 ? void 0 : _a.isGated,
        });
    }, [gatedTokens]);
    const getNetworkDetailsByChainId = useCallback((networkData, chainId) => {
        const response = networkData.filter((item) => item.chainID === chainId);
        return response === null || response === void 0 ? void 0 : response[0];
    }, []);
    const getSignatureData = useCallback((provider, message, providerType) => __awaiter(void 0, void 0, void 0, function* () {
        var _a, _b, _c, _d;
        try {
            if (providerType === WalletProviderType.EMAIL) {
                const signature = yield provider.signMessage(message);
                return signature;
            }
            const signer = provider === null || provider === void 0 ? void 0 : provider.getSigner();
            const signature = yield (signer === null || signer === void 0 ? void 0 : signer.signMessage(message));
            return signature;
        }
        catch (err) {
            setLoaderTitle('');
            setModalState(ModalType.ERROR);
            if (((_b = (_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes('user rejected')) || ((_d = (_c = err === null || err === void 0 ? void 0 : err.message) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes('user denied'))) {
                setError('Signature request has been cancelled by user. Please try again.');
            }
            else {
                setError('Something went wrong');
            }
            return '';
        }
    }), []);
    const getSignatureMessage = useCallback((connectedAddress, provider, chainId, providerType) => __awaiter(void 0, void 0, void 0, function* () {
        var _e, _f, _g, _h, _j;
        try {
            const networkData = StorageService.networkDetails.getValue();
            StorageService.walletDetails.setValue({
                walletAddress: connectedAddress,
                providerType,
            });
            if (chainId && networkData) {
                const networkDetails = getNetworkDetailsByChainId(networkData, chainId);
                const sessionData = StorageService.walletDetails.getValue();
                StorageService.walletDetails.setValue(Object.assign(Object.assign({}, sessionData), { networkDetails }));
                if (networkDetails === null || networkDetails === void 0 ? void 0 : networkDetails.id) {
                    const signatureMsg = yield getSignature(connectedAddress, networkDetails === null || networkDetails === void 0 ? void 0 : networkDetails.id);
                    if (signatureMsg === null || signatureMsg === void 0 ? void 0 : signatureMsg.status) {
                        const signature = yield getSignatureData(provider, signatureMsg === null || signatureMsg === void 0 ? void 0 : signatureMsg.message, providerType);
                        if (signature) {
                            const walletResponse = yield loginWithWallet(signatureMsg.message, connectedAddress, signature, chainId);
                            setConnectedWalletAddress(connectedAddress);
                            if (walletResponse === null || walletResponse === void 0 ? void 0 : walletResponse.status) {
                                StorageService.authToken.setValue(walletResponse.message);
                                handleReCheckTokenGating();
                            }
                        }
                        return;
                    }
                    setLoaderTitle('');
                    setModalState(ModalType.ERROR);
                    setError((_e = signatureMsg === null || signatureMsg === void 0 ? void 0 : signatureMsg.message) !== null && _e !== void 0 ? _e : 'Something went wrong');
                    return;
                }
                setLoaderTitle('');
                setModalState(ModalType.ERROR);
                setError(`Invalid network detected. Please Change to valid network (${String(networkData.map((item) => item.name)).replaceAll(',', ', ')})`);
                return;
            }
            setLoaderTitle('');
            setModalState(ModalType.ERROR);
            setError('No network found');
        }
        catch (err) {
            setLoaderTitle('');
            setModalState(ModalType.ERROR);
            if (((_g = (_f = err === null || err === void 0 ? void 0 : err.message) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === null || _g === void 0 ? void 0 : _g.includes('user rejected')) || ((_j = (_h = err === null || err === void 0 ? void 0 : err.message) === null || _h === void 0 ? void 0 : _h.toLowerCase()) === null || _j === void 0 ? void 0 : _j.includes('user denied'))) {
                setError('Signature request has been cancelled by user. Please try again.');
            }
            else {
                setError('Something went wrong');
            }
        }
    }), [getNetworkDetailsByChainId, getSignature, getSignatureData, loginWithWallet, handleReCheckTokenGating]);
    const onClickMetamask = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        try {
            if (isTokenGating) {
                setOpenModal(true);
                if (window && window.ethereum) {
                    setLoaderTitle('Connecting wallet...');
                    setModalState(ModalType.LOADING);
                    const isAccount = () => __awaiter(void 0, void 0, void 0, function* () {
                        const provider = new ethers.providers.Web3Provider(window.ethereum);
                        const accounts = yield provider.listAccounts();
                        return accounts.length !== 0;
                    });
                    const accountStatus = yield isAccount();
                    if (!accountStatus) {
                        const { ethereum } = window;
                        yield ethereum.request({ method: 'eth_requestAccounts' });
                    }
                    const provider = new ethers.providers.Web3Provider(window.ethereum);
                    const accounts = yield provider.listAccounts();
                    const { chainId } = yield provider.getNetwork();
                    if (accounts === null || accounts === void 0 ? void 0 : accounts[0]) {
                        yield getSignatureMessage(accounts === null || accounts === void 0 ? void 0 : accounts[0], provider, chainId, WalletProviderType.METAMASK);
                    }
                }
                else {
                    setLoaderTitle('');
                    setModalState(ModalType.ERROR);
                    setError('Meta mask not installed in your browser');
                }
            }
        }
        catch (err) {
            setLoaderTitle('');
            setError(err === null || err === void 0 ? void 0 : err.message);
            setModalState(ModalType.ERROR);
        }
    }), [getSignatureMessage, isTokenGating]);
    const onClickEmail = useCallback(() => {
        setModalState(ModalType.EMAIL);
    }, []);
    const onClickWalletConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        try {
            setOpenModal(false);
            onCloseModal(true);
            if (isConnected) {
                StorageService.walletDetails.clear();
                yield disconnect();
            }
            yield openWalletModal({ view: 'Connect' });
            setWalletConnect(true);
        }
        catch (e) {
            setWalletConnect(false);
            setLoaderTitle('');
            setModalState(ModalType.ERROR);
            setError(e === null || e === void 0 ? void 0 : e.message);
        }
    }), [isConnected, onCloseModal, openWalletModal, disconnect]);
    const onWalletConnect = useCallback((connectedAddress, connectedChainId, walletProvider) => __awaiter(void 0, void 0, void 0, function* () {
        try {
            onCloseModal(true);
            closeWalletModal();
            setWalletConnect(false);
            setOpenModal(true);
            setLoaderTitle('Connecting to wallet..');
            setModalState(ModalType.LOADING);
            if (walletProvider && connectedAddress && connectedChainId) {
                const ethersProvider = new ethers.providers.Web3Provider(walletProvider);
                yield getSignatureMessage(connectedAddress, ethersProvider, connectedChainId, WalletProviderType.WALLET_CONNECT);
            }
            else {
                setLoaderTitle('');
                setModalState(ModalType.ERROR);
                setError('Something wrong');
            }
        }
        catch (e) {
            setLoaderTitle('');
            setModalState(ModalType.ERROR);
            setError(e === null || e === void 0 ? void 0 : e.message);
        }
    }), [getSignatureMessage, closeWalletModal, onCloseModal]);
    useEffect(() => {
        if (isConnected && address && chain && walletConnect && signMessageAsync) {
            onWalletConnect(address, chain, signMessageAsync);
            setWalletConnect(false);
        }
    }, [isConnected, address, chain, walletConnect, signMessageAsync, onWalletConnect]);
    const walletScreenActions = useMemo(() => ({
        onClickEmail,
        onClickMetamask,
        onClickWalletConnect,
    }), [onClickEmail, onClickMetamask, onClickWalletConnect]);
    const handleRetry = useCallback(() => {
        setError('');
        setModalState(ModalType.CONNECT_WALLET);
    }, []);
    const onDisConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        setOTP('');
        setEmail('');
        setLoaderTitle('');
        setError('');
        StorageService.walletDetails.clear();
        if ((walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.providerType) === WalletProviderType.WALLET_CONNECT && isConnected) {
            yield disconnect();
        }
        if ((walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.providerType) === WalletProviderType.EMAIL && connectionStatus === 'connected' && connectedThirdWebWallet) {
            thirdWebDisconnect(connectedThirdWebWallet);
        }
    }), [walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.providerType, thirdWebDisconnect, connectionStatus, isConnected, disconnect, connectedThirdWebWallet]);
    const onDisconnectWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        var _k;
        yield onDisConnect();
        (_k = errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.onClickTertiaryButton) === null || _k === void 0 ? void 0 : _k.call(errorScreenDetails);
        setOpenModal(false);
    }), [errorScreenDetails, onDisConnect]);
    const onSwitchWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        var _l;
        yield onDisConnect();
        (_l = errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.onClickSecondaryButton) === null || _l === void 0 ? void 0 : _l.call(errorScreenDetails);
        setModalState(ModalType.CONNECT_WALLET);
    }), [onDisConnect, errorScreenDetails]);
    const handleRedirect = useCallback((url) => {
        if (typeof window !== undefined) {
            window.open(url, '_blank');
        }
    }, []);
    const onClickPrimaryButton = useCallback(() => {
        var _a;
        (_a = errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.onClickPrimaryButton) === null || _a === void 0 ? void 0 : _a.call(errorScreenDetails);
        if (errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.redirectionPageURL) {
            setModalState(ModalType.CONNECT_WALLET);
            setOpenModal(false);
            handleRedirect(errorScreenDetails === null || errorScreenDetails === void 0 ? void 0 : errorScreenDetails.redirectionPageURL);
        }
        if (!open) {
            setOpenModal(false);
        }
    }, [errorScreenDetails, open, handleRedirect]);
    const errorScreenDetailsData = useMemo(() => (Object.assign(Object.assign({}, errorScreenDetails), { onClickSecondaryButton: onSwitchWallet, onClickTertiaryButton: onDisconnectWallet, onClickPrimaryButton })), [errorScreenDetails, onSwitchWallet, onDisconnectWallet, onClickPrimaryButton]);
    const handleClose = useCallback(() => {
        setOpenModal(false);
        onCloseModal();
    }, [onCloseModal]);
    const onClickClaimToken = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        var _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
        if (((_m = gatedTokens === null || gatedTokens === void 0 ? void 0 : gatedTokens.checkTokenGating) === null || _m === void 0 ? void 0 : _m.isGated) && config.isClaimToken) {
            const gatedResponse = gatedTokens === null || gatedTokens === void 0 ? void 0 : gatedTokens.checkTokenGating;
            yield redeemEarnableToken(config.collectionItemId || '', gatedResponse.walletAddress, {
                ruleId: (_p = (_o = gatedResponse.gatedTokens) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.gatingRuleId,
                contractAddress: (_r = (_q = gatedResponse.gatedTokens) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.contractAddress,
                tokenId: (_u = (_t = (_s = gatedResponse.gatedTokens) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.id) === null || _u === void 0 ? void 0 : _u.toString(),
                ownerWallet: gatedResponse.walletAddress,
            });
        }
        if (config.isClaimToken) {
            if (redeemItem) {
                setModalState(ModalType.CONNECT_WALLET);
                setOpenModal(false);
            }
        }
        if (!config.isClaimToken && (claimTokenScreenDetails === null || claimTokenScreenDetails === void 0 ? void 0 : claimTokenScreenDetails.redirectionPageURL)) {
            setModalState(ModalType.CONNECT_WALLET);
            setOpenModal(false);
            handleRedirect(claimTokenScreenDetails === null || claimTokenScreenDetails === void 0 ? void 0 : claimTokenScreenDetails.redirectionPageURL);
        }
        const filterGatedTokenList = (_w = (_v = gatedTokens === null || gatedTokens === void 0 ? void 0 : gatedTokens.checkTokenGating) === null || _v === void 0 ? void 0 : _v.gatedTokens) === null || _w === void 0 ? void 0 : _w.map((item) => {
            return { tokenId: item === null || item === void 0 ? void 0 : item.id, contractAddress: item === null || item === void 0 ? void 0 : item.contractAddress };
        });
        (_x = claimTokenScreenDetails === null || claimTokenScreenDetails === void 0 ? void 0 : claimTokenScreenDetails.onSuccess) === null || _x === void 0 ? void 0 : _x.call(claimTokenScreenDetails, filterGatedTokenList);
    }), [
        claimTokenScreenDetails,
        config.collectionItemId,
        config.isClaimToken,
        gatedTokens === null || gatedTokens === void 0 ? void 0 : gatedTokens.checkTokenGating,
        redeemItem,
        redeemEarnableToken,
        handleRedirect,
    ]);
    useEffect(() => {
        var _a, _b, _c, _d;
        if (apiLoading.gatingLoading || apiLoading.redeemEarnableLoading || apiLoading.invoiceLoading) {
            setModalState(ModalType.GATING_LOADING);
        }
        if (!apiLoading.gatingLoading && !isAPIError) {
            if (Object.entries((_a = gatedTokens === null || gatedTokens === void 0 ? void 0 : gatedTokens.checkTokenGating) !== null && _a !== void 0 ? _a : {}).length > 0) {
                if (isGatedToken.isGated) {
                    setModalState(ModalType.CLAIM_DISCOUNT);
                }
                else {
                    setModalState(ModalType.NO_CLAIM);
                }
            }
        }
        if (!apiLoading.redeemEarnableLoading &&
            !isAPIError &&
            !errorMessage.redeemEarnableMessage &&
            ((_b = redeemItem === null || redeemItem === void 0 ? void 0 : redeemItem.redeemEarnableItem) === null || _b === void 0 ? void 0 : _b.invoiceID)) {
            setInvoice === null || setInvoice === void 0 ? void 0 : setInvoice((_d = (_c = redeemItem === null || redeemItem === void 0 ? void 0 : redeemItem.redeemEarnableItem) === null || _c === void 0 ? void 0 : _c.invoiceID) !== null && _d !== void 0 ? _d : '');
        }
        if (isAPIError) {
            if (errorMessage.invoiceMessage || errorMessage.redeemEarnableMessage || errorMessage.gatingMessage) {
                setModalState(ModalType.GATING_ERROR);
            }
        }
    }, [apiLoading, isGatedToken, gatedTokens, isAPIError, errorMessage, redeemItem === null || redeemItem === void 0 ? void 0 : redeemItem.redeemEarnableItem, setInvoice]);
    const onChangeEmail = useCallback((event) => {
        setError('');
        setEmail(event.target.value);
    }, []);
    const onClickContinueWithEmail = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        try {
            if (!email) {
                setError('Email is required');
                return;
            }
            if (emailRegex.test(email)) {
                setError('');
                setLoaderTitle('Processing...');
                setModalState(ModalType.LOADING);
                if (connectionStatus === 'connected' && connectedEmailWalletAddress !== undefined && connectedThirdWebWallet) {
                    thirdWebDisconnect(connectedThirdWebWallet);
                }
                const client = getThirdWebClient(thirdWebClientId);
                yield preAuthenticate({ client, email, strategy: 'email' });
                setModalState(ModalType.OTP);
                thirdWebConnect.current = true;
            }
            else {
                setError('Please enter a valid email');
            }
        }
        catch (e) {
            thirdWebConnect.current = null;
            setLoaderTitle('');
            setModalState(ModalType.OTP);
            setError(e === null || e === void 0 ? void 0 : e.message);
        }
    }), [email, connectionStatus, connectedEmailWalletAddress, connectedThirdWebWallet, thirdWebClientId, thirdWebDisconnect]);
    const onConnectEmailWallet = useCallback((connectedAddress, connectedChainId, provider) => __awaiter(void 0, void 0, void 0, function* () {
        try {
            thirdWebConnect.current = null;
            setLoaderTitle('Connecting wallet...');
            setModalState(ModalType.LOADING);
            if (connectedAddress && connectedChainId) {
                yield getSignatureMessage(connectedAddress, provider, connectedChainId, WalletProviderType.EMAIL);
            }
            else {
                setLoaderTitle('');
                setModalState(ModalType.ERROR);
                setError('Something wrong');
            }
        }
        catch (e) {
            setLoaderTitle('');
            setModalState(ModalType.ERROR);
            setError(e === null || e === void 0 ? void 0 : e.message);
        }
    }), [getSignatureMessage]);
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            if (connectionStatus === 'connected' && thirdWebConnectedChain && connectedEmailWalletAddress && thirdWebConnect.current) {
                let signer;
                if (activeAccount) {
                    signer = yield getEthersSigner(thirdWebClientId, thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id, activeAccount);
                }
                onConnectEmailWallet(connectedEmailWalletAddress, thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id, signer);
            }
        }))();
    }, [connectionStatus, thirdWebConnectedChain, connectedEmailWalletAddress, activeAccount, thirdWebClientId, onConnectEmailWallet]);
    const onChangeOTP = useCallback((event) => {
        setError('');
        setOTP(event);
    }, []);
    const onChangeRecoveryCode = useCallback((event) => {
        setError('');
        setRecoveryCode(event.target.value);
    }, []);
    const onClickRecoveryCode = useCallback(() => {
        if (!recoveryCode) {
            setError('Recovery code is required');
            return;
        }
        setModalState(ModalType.OTP);
    }, [recoveryCode]);
    const verifyOTP = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        try {
            setLoaderTitle('Processing...');
            setModalState(ModalType.LOADING);
            yield connect(() => __awaiter(void 0, void 0, void 0, function* () {
                const client = getThirdWebClient(thirdWebClientId);
                const chainId = defineChain(thirdWebChainId);
                yield thirdWebWallet.connect({
                    client,
                    strategy: 'email',
                    email,
                    verificationCode: otp,
                    chain: chainId,
                });
                return thirdWebWallet;
            }));
            thirdWebConnect.current = true;
        }
        catch (e) {
            thirdWebConnect.current = null;
            setError('Code is incorrect');
            setModalState(ModalType.OTP);
        }
    }), [email, otp, thirdWebClientId, thirdWebChainId, thirdWebWallet, connect]);
    const handleErrorOnAPI = useCallback(() => {
        var _a;
        handleRetry();
        (_a = gatingErrorDetails === null || gatingErrorDetails === void 0 ? void 0 : gatingErrorDetails.onClickButton) === null || _a === void 0 ? void 0 : _a.call(gatingErrorDetails);
    }, [gatingErrorDetails, handleRetry]);
    const gatingError = useMemo(() => (Object.assign(Object.assign({}, gatingErrorDetails), { onClickButton: handleErrorOnAPI })), [gatingErrorDetails, handleErrorOnAPI]);
    useEffect(() => {
        if (!openModal) {
            setModalState(ModalType.CONNECT_WALLET);
        }
    }, [openModal]);
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            if (invoiceID) {
                const response = yield getClaimInvoiceDetails(invoiceID);
                if (response) {
                    getInvoiceDetails === null || getInvoiceDetails === void 0 ? void 0 : getInvoiceDetails(response);
                }
            }
        }))();
    }, [getClaimInvoiceDetails, getInvoiceDetails, invoiceID]);
    const apiErrorMessage = useMemo(() => errorMessage.gatingMessage || errorMessage.redeemEarnableMessage || errorMessage.invoiceMessage, [errorMessage]);
    return (React.createElement(TokenGatingLayout, { open: openModal || open, currentModalState: modalState, otp: otp, error: error, email: email, loaderTitle: loaderTitle, recoveryCode: recoveryCode, walletScreenActions: walletScreenActions, walletScreenDetails: walletConnectScreenDetails, errorScreenDetails: errorScreenDetailsData, tokenClaimDetails: claimTokenScreenDetails === null || claimTokenScreenDetails === void 0 ? void 0 : claimTokenScreenDetails.tokenDetail, gatingErrorDetails: gatingError, gatingLoaderDetails: gatingLoaderDetails, screenConfig: screenConfig, errorMessage: apiErrorMessage, handleRetry: handleRetry, onClickContinueWithEmail: onClickContinueWithEmail, onChangeEmail: onChangeEmail, onClickVerifyOTP: verifyOTP, onChangeOTP: onChangeOTP, onCloseModal: handleClose, onSuccess: onClickClaimToken, onChangeRecoveryCode: onChangeRecoveryCode, onClickRecoveryCode: onClickRecoveryCode }));
};

export { TokenGatingContainer as default };