@mojito-inc/connect-wallet
Version:
Connecting wallet via metamask, wallet connect, email
74 lines (71 loc) • 5.88 kB
JavaScript
import * as React from 'react';
import { useMemo } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
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 '@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 ExistingWalletContainer from '../component/ExistingWalletContainer.js';
import RecoveryCodeContainer from '../component/RecoveryCodeContainer.js';
import '@mui/material/Stack';
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 '@mui/material/CircularProgress';
import { ModalType } from '../interface/index.js';
const ConnectWalletContainerLayout = ({ open, error, email, otp, walletOptions, image, currentModalState, loaderTitle, content, recoveryCode, loaderDescription, skipErrorTitle, onChangeEmail, onChangeOTP, onChangeRecoveryCode, onClickVerifyOTP, onClickContinueWithEmail, onClickEmail, handleRetry, onClickMetamask, onClickWalletConnect, onClickRecoveryCode, onCloseModal, onClickBackPackWallet, onClickPhantomWallet, handleChangeMobile, }) => {
var _a, _b, _c, _d;
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.up('sm'));
const modalStyle = useMemo(() => {
var _a, _b, _c;
return {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: {
lg: '400px',
md: '400px',
sm: '400px',
xs: 'calc(100% - 20px)',
},
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 : '',
borderRadius: '4px',
boxShadow: 24,
maxHeight: { xs: 'calc(100% - 50px)', lg: 'calc(100% - 100px)' },
overflowY: 'auto',
padding: '16px 16px 30px 16px',
};
}, [theme]);
const isLoading = useMemo(() => {
return (currentModalState === ModalType.LOADING ||
currentModalState === ModalType.ERROR);
}, [currentModalState]);
return (React.createElement(Modal, { open: open },
React.createElement(Box, { sx: modalStyle }, isLoading ? (React.createElement(Box, { sx: {
padding: { lg: '0px', xs: '10px', md: '30px' },
marginTop: { xs: 0, lg: 0 },
} },
currentModalState === ModalType.LOADING && (React.createElement(LoadingContainer, { loaderTitle: loaderTitle, description: ((_a = content === null || content === void 0 ? void 0 : content.loadingContentData) === null || _a === void 0 ? void 0 : _a.description) || loaderDescription })),
currentModalState === ModalType.ERROR && (React.createElement(ErrorContainer, { skipErrorTitle: skipErrorTitle, onCloseModal: onCloseModal, errorImage: image === null || image === void 0 ? void 0 : image.error, errorMessage: error, handleRetry: handleRetry })))) : (React.createElement(React.Fragment, null,
React.createElement(Box, { sx: { display: 'flex', justifyContent: 'flex-end' } },
React.createElement(CloseIcon, { sx: { cursor: 'pointer', color: (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.secondary }, onClick: onCloseModal })),
React.createElement(Box, { sx: { padding: '10px' } },
currentModalState === ModalType.EMAIL && (React.createElement(ConnectWithEmailContainer, { content: content === null || content === void 0 ? void 0 : content.emailContentData, email: email, onChangeEmail: onChangeEmail, error: error, onClickContinueWithEmail: onClickContinueWithEmail, logoUrl: image === null || image === void 0 ? void 0 : image.logo })),
currentModalState === ModalType.OTP && (React.createElement(OTPContainer, { content: content === null || content === void 0 ? void 0 : content.otpContentData, email: email, otp: otp, error: error, onChangeOTP: onChangeOTP, onClickVerifyOTP: onClickVerifyOTP, onClickRequestNewCode: onClickContinueWithEmail, logo: image === null || image === void 0 ? void 0 : image.logo })),
currentModalState === ModalType.CONNECT_WALLET && (React.createElement(ExistingWalletContainer, { walletOptions: walletOptions, image: image, isMobile: isMobile, content: content === null || content === void 0 ? void 0 : content.walletOptionsContentData, onClickMetamask: onClickMetamask, onClickWalletConnect: onClickWalletConnect, onClickBackPackWallet: onClickBackPackWallet, onClickPhantomWallet: onClickPhantomWallet, onSubmitMobile: handleChangeMobile, onClickEmail: onClickEmail })),
currentModalState === ModalType.RECOVERY_CODE && (React.createElement(RecoveryCodeContainer, { recoveryCode: recoveryCode, logo: image === null || image === void 0 ? void 0 : image.logo, error: error, description: (_d = content === null || content === void 0 ? void 0 : content.recoverCodeContentData) === null || _d === void 0 ? void 0 : _d.description, onChangeRecoveryCode: onChangeRecoveryCode, onClickRecoveryCode: onClickRecoveryCode }))))))));
};
export { ConnectWalletContainerLayout as default };