@mojito-inc/connect-wallet
Version:
Connecting wallet via metamask, wallet connect, email
929 lines (928 loc) • 78.3 kB
JavaScript
import { __awaiter } from '../_virtual/_tslib.js';
import * as React from 'react';
import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
import { ethers } from 'ethers';
import bs58 from 'bs58';
import { RPCError, RPCErrorCode } from 'magic-sdk';
import { defineChain } from 'thirdweb';
import { preAuthenticate } from 'thirdweb/wallets/in-app';
import { useConnectWallet } from '@mojito-inc/core-service';
import { WalletReadyState } from '@solana/wallet-adapter-base';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import ConnectWalletContainerLayout from '../layout/ConnectWalletLayout.js';
import '@mui/material/Box';
import '@mui/icons-material/Close';
import '@mui/material/Modal';
import { ModalType } from '../interface/index.js';
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 { useWalletType } from '../provider/WalletTypeProvider.js';
import '@mui/material/FormControl';
import '@mui/material/Autocomplete';
import 'countries-list';
import '@mui/material/Stack';
import '@mui/material/CircularProgress';
import { WalletProviderType, ErrorsType, emailRegex } from '../constant/index.js';
import useWalletConnect from '../hooks/useConnectWallet.js';
import { getBalance, getSolanaBalance } from '../utils/getBalance.utils.js';
import { useNetworkDetails } from '../provider/NetworkProvider.js';
import { useWalletDetails } from '../provider/ConnectedWalletDetailsProvider.js';
import { useWalletProvider } from '../provider/WalletProvider.js';
import { useWeb3ModalWrapper } from '../provider/Web3ModalWrapperProvider.js';
import { getProvider } from '../utils/getProvider.utils.js';
import { getSolanaChainId } from '../utils/getChainId.utils.js';
import { StorageService } from '../utils/storageService.utils.js';
import { useThirdWebClient } from '../provider/ThirdWebClientProvider.js';
import { getEthersSigner, getThirdWebClient } from '../utils/thirdWebClient.utils.js';
import { useMagic } from '../hooks/useMagic.js';
import { useMagicConfig } from '../provider/MagicWalletProvider.js';
import useSolanaWalletsMethod from '../hooks/useSolanaWalletsMethod.js';
import useEthWalletsMethod from '../hooks/useEthWalletsMethod.js';
const ConnectWalletContainer = ({ open, isWeb2Login, walletOptions, config, isDisConnect, image, content, isRefetchBalance, skipSignature, isPaperWallet = false, userEmail, customErrorMessage, skipExternalWalletCheck = false, onCloseModal, getSupportedNetworkData, }) => {
var _a, _b;
const { networkDetails, setNetworkDetails } = useNetworkDetails();
const { walletType } = useWalletType();
const isEthereumWallet = useMemo(() => walletType === 'ethereum', [walletType]);
const isSolanaWallet = useMemo(() => walletType === 'solana', [walletType]);
const { env: solanaEnv, customRPCUrl } = useMagicConfig();
const { magic } = useMagic();
const { walletDetails, connectStatus, setWalletDetails, setConnectStatus, setDisconnectStatus, setRefetchingBalanceStatus, } = useWalletDetails();
const { walletProvider, setWalletProvider } = useWalletProvider();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const { clientId: thirdWebClientId, chainId: thirdWebChainId } = useThirdWebClient();
const { connectedSolanaAddress, solanaWallets, solanaWallet, solanaWalletSelect, disconnectSolanaWallet, solanaSignMessage, } = useSolanaWalletsMethod(walletProvider.providerType);
const { connect, thirdWebDisconnect, thirdWebWallet, activeAccount, connectedThirdWebWallet, thirdWebConnectedChain, connectionStatus, } = useEthWalletsMethod();
const connectedEmailWalletAddress = activeAccount === null || activeAccount === void 0 ? void 0 : activeAccount.address;
const { getSignature, loginWithWallet, isTokenGating } = useWalletConnect({
orgId: config === null || config === void 0 ? void 0 : config.organizationId,
setSupportedNetworksData: getSupportedNetworkData,
});
const { connectExternalWallet } = useConnectWallet();
const web3Provider = useWeb3ModalWrapper();
const { useWeb3ModalAccount, useWeb3Modal, useWeb3ModalProvider, useDisconnect: web3Disconnect, useWeb3ModalEvents, } = web3Provider;
const events = useWeb3ModalEvents === null || useWeb3ModalEvents === void 0 ? void 0 : useWeb3ModalEvents();
const web3ModalEventData = JSON.parse(JSON.stringify((_a = events === null || events === void 0 ? void 0 : events.data) !== null && _a !== void 0 ? _a : '{}'));
const web3ModalAccount = useWeb3ModalAccount === null || useWeb3ModalAccount === void 0 ? void 0 : useWeb3ModalAccount();
const web3ModalDisconnect = web3Disconnect === null || web3Disconnect === void 0 ? void 0 : web3Disconnect();
const web3Modal = useWeb3Modal === null || useWeb3Modal === void 0 ? void 0 : useWeb3Modal();
const web3ModalProvider = useWeb3ModalProvider === null || useWeb3ModalProvider === void 0 ? void 0 : useWeb3ModalProvider();
const [loaderTitle, setLoaderTitle] = useState('');
const [loaderDescription, setLoaderDescription] = useState('');
const [modalState, setModalState] = useState(ModalType.CONNECT_WALLET);
const [error, setError] = useState('');
const [email, setEmail] = useState(userEmail !== null && userEmail !== void 0 ? userEmail : '');
const [otp, setOTP] = useState('');
const [skipErrorTitle, setSkipErrorTitle] = useState(false);
const [openModal, setOpenModal] = useState(false);
// const [newDevice, setIsNewDevice] = useState<boolean>(false);
// const [newUser, setIsNewUser] = useState<boolean>(false);
const [recoveryCode, setRecoveryCode] = useState('');
const [isAuthToken, setIsAuthToken] = useState(false);
const [isReloadApp, setIsReloadApp] = useState(false);
const [connectParam, setConnectParam] = useState({
signatureMessage: '',
walletAddress: '',
signature: '',
networkId: '',
});
const [wallet, setWalletData] = useState({
balance: {
native: 0,
nonNative: 0,
},
networkDetails: {
chainID: 0,
id: '',
isTestnet: false,
name: '',
},
provider: null,
providerType: '',
walletAddress: '',
});
const [providerData, setProviderData] = useState();
const walletConnect = useRef(null);
const thirdWebConnect = useRef(null);
const solanaWalletRef = useRef(null);
const [solanaWalletConnect, setSolanaWalletConnect] = useState(false);
const isSelectSolanaWallet = useRef(null);
const isConnectSolanaWallet = useRef(null);
const connectionError = useCallback((modalType, message) => {
setLoaderTitle(message !== null && message !== void 0 ? message : '');
setModalState(modalType);
}, []);
const onDisConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
try {
setDisconnectStatus('disconnecting');
StorageService.walletDetails.clear();
// if (walletProvider?.providerType === WalletProviderType.EMAIL && paperClient.current && isPaperWallet) {
// await paperClient.current.auth.logout();
// }
if ((walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.WALLET_CONNECT &&
(web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.isConnected)) {
yield (web3ModalDisconnect === null || web3ModalDisconnect === void 0 ? void 0 : web3ModalDisconnect.disconnect());
}
if ((walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.EMAIL &&
connectionStatus === 'connected' &&
connectedThirdWebWallet) {
thirdWebDisconnect(connectedThirdWebWallet);
}
if ((walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.MAGIC && magic) {
const isWalletLoggedIn = yield magic.user.isLoggedIn();
if (isWalletLoggedIn) {
yield magic.user.logout();
}
}
if ((walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.PHANTOM ||
(walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.BACKPACK) {
isSelectSolanaWallet.current = false;
isConnectSolanaWallet.current = false;
solanaWalletRef.current = false;
yield (disconnectSolanaWallet === null || disconnectSolanaWallet === void 0 ? void 0 : disconnectSolanaWallet());
}
setWalletDetails({
address: '',
balance: {
native: 0,
nonNative: 0,
},
walletType: 'ethereum',
});
setWalletProvider({
provider: null,
providerType: '',
});
setNetworkDetails({
chainID: 0,
id: '',
isTestnet: false,
name: '',
});
setSkipErrorTitle(false);
setOTP('');
setEmail('');
setRecoveryCode('');
// setIsNewDevice(false);
setError('');
connectionError(ModalType.CONNECT_WALLET);
setConnectStatus('connect');
setRefetchingBalanceStatus('refetch');
setDisconnectStatus('disconnected');
}
catch (_err) {
setDisconnectStatus('disconnect');
}
}), [
connectionStatus,
walletProvider,
web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.isConnected,
web3ModalDisconnect,
connectedThirdWebWallet,
magic,
thirdWebDisconnect,
connectionError,
setWalletDetails,
setWalletProvider,
setNetworkDetails,
setDisconnectStatus,
setConnectStatus,
setRefetchingBalanceStatus,
disconnectSolanaWallet,
]);
const saveWalletData = useCallback((connectedAddress, balance, provider, providerType, networkDetail) => {
const solanaProvider = providerType === WalletProviderType.MAGIC ? magic : solanaWallet;
const walletsProvider = isEthereumWallet ? provider : solanaProvider;
setWalletDetails(prev => (Object.assign(Object.assign({}, prev), { address: connectedAddress, balance: {
native: balance.native,
nonNative: balance.nonNative,
}, walletType: isEthereumWallet ? 'ethereum' : 'solana' })));
setWalletProvider(prev => (Object.assign(Object.assign({}, prev), { provider: walletsProvider, providerType })));
setNetworkDetails(prev => (Object.assign(Object.assign({}, prev), { chainID: networkDetail.chainID, id: networkDetail.id, isTestnet: networkDetail.isTestnet, name: networkDetail.name })));
setConnectStatus('connected');
setDisconnectStatus('disconnect');
}, [
magic,
solanaWallet,
isEthereumWallet,
setWalletDetails,
setWalletProvider,
setNetworkDetails,
setConnectStatus,
setDisconnectStatus,
]);
const retrieveConnectedData = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
setIsReloadApp(true);
let signer;
let provider;
if (isEthereumWallet) {
if ((data === null || data === void 0 ? void 0 : data.providerType) === WalletProviderType.EMAIL &&
(thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id) &&
activeAccount) {
signer = yield getEthersSigner(thirdWebClientId, thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id, activeAccount);
}
provider = yield getProvider(data === null || data === void 0 ? void 0 : data.providerType, signer, web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider);
}
saveWalletData(data === null || data === void 0 ? void 0 : data.walletAddress, data === null || data === void 0 ? void 0 : data.balance, provider, data === null || data === void 0 ? void 0 : data.providerType, data === null || data === void 0 ? void 0 : data.networkDetails);
}), [
web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider,
thirdWebClientId,
thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id,
activeAccount,
isEthereumWallet,
saveWalletData,
]);
useEffect(() => {
const sessionData = StorageService.walletDetails.getValue();
if (sessionData && !isReloadApp) {
if ((sessionData === null || sessionData === void 0 ? void 0 : sessionData.providerType) !== WalletProviderType.EMAIL ||
((sessionData === null || sessionData === void 0 ? void 0 : sessionData.providerType) === WalletProviderType.EMAIL &&
connectionStatus === 'connected' &&
connectedEmailWalletAddress !== undefined)) {
retrieveConnectedData(sessionData);
setIsReloadApp(true);
}
}
}, [
isReloadApp,
connectionStatus,
connectedEmailWalletAddress,
retrieveConnectedData,
]);
const fetchBalance = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _c, _d;
setRefetchingBalanceStatus('refetching');
if (walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.address) {
let signer;
let balance = {
native: 0,
nonNative: 0,
};
let provider;
if (isEthereumWallet) {
if ((walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.EMAIL &&
(thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id) &&
activeAccount) {
signer = yield getEthersSigner(thirdWebClientId, thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id, activeAccount);
}
provider = yield getProvider(walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType, signer, web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider);
balance = yield getBalance(provider, walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.address, networkDetails === null || networkDetails === void 0 ? void 0 : networkDetails.chainID, walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType);
}
if (isSolanaWallet) {
const solanaBalance = yield getSolanaBalance(walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.address, solanaEnv !== null && solanaEnv !== void 0 ? solanaEnv : 'devnet', customRPCUrl);
balance = solanaBalance;
}
const walletData = {
walletAddress: walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.address,
providerType: walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType,
networkDetails,
balance: {
native: (_c = balance === null || balance === void 0 ? void 0 : balance.native) !== null && _c !== void 0 ? _c : 0,
nonNative: (_d = balance === null || balance === void 0 ? void 0 : balance.nonNative) !== null && _d !== void 0 ? _d : 0,
},
provider: null,
};
setWalletData(walletData);
setProviderData(provider);
StorageService.walletDetails.setValue(walletData);
saveWalletData(walletDetails === null || walletDetails === void 0 ? void 0 : walletDetails.address, balance, provider, walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType, networkDetails);
}
setRefetchingBalanceStatus('refetched');
}), [
walletDetails,
walletProvider,
networkDetails,
web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider,
thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id,
activeAccount,
thirdWebClientId,
isEthereumWallet,
isSolanaWallet,
solanaEnv,
customRPCUrl,
saveWalletData,
setRefetchingBalanceStatus,
]);
useEffect(() => {
(() => __awaiter(void 0, void 0, void 0, function* () {
if (isDisConnect && connectStatus === 'connected') {
yield onDisConnect();
}
}))();
}, [isDisConnect, onDisConnect, connectStatus]);
useEffect(() => {
(() => __awaiter(void 0, void 0, void 0, function* () {
if (isRefetchBalance && connectStatus === 'connected') {
yield fetchBalance();
}
}))();
}, [
isRefetchBalance,
connectStatus,
fetchBalance,
setRefetchingBalanceStatus,
]);
useEffect(() => {
if ((web3ModalEventData === null || web3ModalEventData === void 0 ? void 0 : web3ModalEventData.event) === 'CONNECT_ERROR') {
setConnectStatus('connect');
setDisconnectStatus('disconnect');
setRefetchingBalanceStatus('refetch');
}
}, [
setConnectStatus,
setDisconnectStatus,
setRefetchingBalanceStatus,
web3ModalEventData === null || web3ModalEventData === void 0 ? void 0 : web3ModalEventData.event,
]);
// for now we commented out for the MOJ-7903 the logout issue
// useEffect(() => {
// solanaWallet?.adapter?.addListener('error', (_err) => {
// setConnectStatus('connect');
// setLoaderDescription('');
// connectionError(ModalType.ERROR);
// if (!connectedSolanaAddress?.toString()) {
// if (
// _err?.message?.toLowerCase()?.includes('user rejected') ||
// _err?.message?.toLowerCase()?.includes('plugin closed') ||
// _err?.message?.toLowerCase()?.includes('user denied') ||
// _err?.message?.toLowerCase()?.includes('approval denied')) {
// setError('Transaction has been cancelled by user. Please try again.');
// } else {
// setError(`${ walletProvider.providerType === WalletProviderType.PHANTOM ? 'Phantom' : 'Backpack' } have no active account`);
// }
// } else if (_err?.message?.toLowerCase()?.includes('approval denied')) {
// setError('Transaction has been cancelled by user. Please try again.');
// } else {
// setError('Something went wrong. please try again.');
// }
// });
// return () => {
// // eslint-disable-next-line @typescript-eslint/no-empty-function
// solanaWallet?.adapter?.removeListener('error', (err) => {
// });
// };
// }, [connectedSolanaAddress, connectionError, setConnectStatus, solanaWallet?.adapter, walletProvider.providerType]);
const getNetworkDetailsByChainId = useCallback((networkData, chain) => {
const response = networkData.filter((item) => item.chainID === chain);
return response === null || response === void 0 ? void 0 : response[0];
}, []);
const connectWalletRestriction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _e, _f, _g, _h, _j, _k, _l, _m, _o;
try {
let walletResponse;
if (!skipExternalWalletCheck) {
walletResponse = yield connectExternalWallet({
address: connectParam.walletAddress,
message: connectParam.signatureMessage,
signature: connectParam.signature,
orgID: config === null || config === void 0 ? void 0 : config.organizationId,
networkID: connectParam.networkId,
});
}
saveWalletData(wallet === null || wallet === void 0 ? void 0 : wallet.walletAddress, wallet === null || wallet === void 0 ? void 0 : wallet.balance, providerData, wallet === null || wallet === void 0 ? void 0 : wallet.providerType, wallet === null || wallet === void 0 ? void 0 : wallet.networkDetails);
StorageService.walletDetails.setValue(wallet);
connectionError(ModalType.CONNECT_WALLET);
setLoaderDescription('');
// setIsNewDevice(false);
setOpenModal(false);
onCloseModal(true);
return {
status: true,
message: (_e = walletResponse === null || walletResponse === void 0 ? void 0 : walletResponse.data) === null || _e === void 0 ? void 0 : _e.connectExternalWallet,
};
}
catch (e) {
setLoaderDescription('');
connectionError(ModalType.ERROR);
if ((_f = e === null || e === void 0 ? void 0 : e.message) === null || _f === void 0 ? void 0 : _f.includes(ErrorsType.WRONG_WALLET)) {
setError((_h = (_g = customErrorMessage === null || customErrorMessage === void 0 ? void 0 : customErrorMessage.externalWalletConnection) === null || _g === void 0 ? void 0 : _g.wrongWalletMessage) !== null && _h !== void 0 ? _h : 'For compliance & security reasons, we are allowing only one active wallet for a user. Please disconnect your wallet on another account and retry or contact support.');
}
else if ((_j = e === null || e === void 0 ? void 0 : e.message) === null || _j === void 0 ? void 0 : _j.includes(ErrorsType.HIGH_RISK)) {
setError((_l = (_k = customErrorMessage === null || customErrorMessage === void 0 ? void 0 : customErrorMessage.externalWalletConnection) === null || _k === void 0 ? void 0 : _k.highRiskMessage) !== null && _l !== void 0 ? _l : 'You are not permitted to complete this transaction.');
}
else {
setError((_o = (_m = customErrorMessage === null || customErrorMessage === void 0 ? void 0 : customErrorMessage.externalWalletConnection) === null || _m === void 0 ? void 0 : _m.defaultMessage) !== null && _o !== void 0 ? _o : 'We are unable to connect your wallet');
}
return { status: false, message: e === null || e === void 0 ? void 0 : e.message };
}
}), [
config === null || config === void 0 ? void 0 : config.organizationId,
connectParam,
wallet,
providerData,
customErrorMessage,
skipExternalWalletCheck,
connectExternalWallet,
onCloseModal,
connectionError,
saveWalletData,
]);
useEffect(() => {
if (isAuthToken) {
connectWalletRestriction();
setIsAuthToken(false);
}
}, [isAuthToken, connectWalletRestriction]);
const getSignatureData = useCallback((provider, message, providerType) => __awaiter(void 0, void 0, void 0, function* () {
var _p, _q, _r, _s;
try {
if (isEthereumWallet) {
if (providerType === WalletProviderType.EMAIL) {
const signature = yield provider.signMessage(message);
return {
status: true,
message: 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 {
status: true,
message: signature,
};
}
if (isSolanaWallet) {
if (providerType === WalletProviderType.MAGIC && magic) {
const encodedMessage = new TextEncoder().encode(message);
const signedMessage = yield magic.solana.signMessage(encodedMessage);
const decodedText = bs58.encode(signedMessage);
return {
status: true,
message: decodedText,
};
}
if ((providerType === WalletProviderType.PHANTOM ||
providerType === WalletProviderType.BACKPACK) &&
solanaSignMessage) {
try {
const encodedMessage = new TextEncoder().encode(message);
const signMessage = yield solanaSignMessage(encodedMessage);
if ('signature' in signMessage) {
const decodedText = bs58.encode(signMessage.signature);
return {
status: true,
message: decodedText,
};
}
const decodedText = bs58.encode(signMessage);
return {
status: true,
message: decodedText,
};
}
catch (e) {
setError(e === null || e === void 0 ? void 0 : e.message);
return {
status: false,
message: e === null || e === void 0 ? void 0 : e.message,
};
}
}
}
return {
status: false,
message: 'Something went wrong',
};
}
catch (e) {
setLoaderDescription('');
connectionError(ModalType.ERROR);
StorageService.walletDetails.clear();
if (((_q = (_p = e === null || e === void 0 ? void 0 : e.message) === null || _p === void 0 ? void 0 : _p.toLowerCase()) === null || _q === void 0 ? void 0 : _q.includes('user rejected')) ||
((_s = (_r = e === null || e === void 0 ? void 0 : e.message) === null || _r === void 0 ? void 0 : _r.toLowerCase()) === null || _s === void 0 ? void 0 : _s.includes('user denied'))) {
setError('Transaction has been cancelled by user. Please try again.');
return {
status: false,
message: 'Transaction has been cancelled by user. Please try again.',
};
}
setError('Something went wrong');
return {
status: false,
message: 'Something went wrong',
};
}
}), [
isEthereumWallet,
isSolanaWallet,
magic,
solanaSignMessage,
connectionError,
]);
const getSignatureMessage = useCallback((connectedAddress, provider, chain, providerType, balance) => __awaiter(void 0, void 0, void 0, function* () {
var _t, _u, _v, _w, _x, _y;
try {
setConnectParam({
signatureMessage: '',
walletAddress: '',
signature: '',
networkId: '',
});
const networkData = StorageService.networkDetails.getValue();
if (chain && networkData) {
const networkDetailsByChain = getNetworkDetailsByChainId(networkData, chain);
if (networkDetailsByChain === null || networkDetailsByChain === void 0 ? void 0 : networkDetailsByChain.id) {
const signatureMsg = yield getSignature(connectedAddress, networkDetailsByChain.id);
if (signatureMsg === null || signatureMsg === void 0 ? void 0 : signatureMsg.status) {
const signature = yield getSignatureData(provider, signatureMsg.message, providerType);
if (signature === null || signature === void 0 ? void 0 : signature.status) {
const walletData = {
walletAddress: connectedAddress,
networkDetails: networkDetailsByChain,
providerType: providerType !== null && providerType !== void 0 ? providerType : '',
balance: {
native: (_t = balance === null || balance === void 0 ? void 0 : balance.native) !== null && _t !== void 0 ? _t : 0,
nonNative: (_u = balance === null || balance === void 0 ? void 0 : balance.nonNative) !== null && _u !== void 0 ? _u : 0,
},
provider: isEthereumWallet ? null : signature.message,
};
setProviderData(isEthereumWallet ? provider : signature.message);
setWalletData(walletData);
if (isWeb2Login) {
setConnectParam({
networkId: networkDetailsByChain.id,
signature: signature.message,
signatureMessage: signatureMsg.message,
walletAddress: connectedAddress,
});
setIsAuthToken(true);
setConnectStatus('connected');
return;
}
const walletResponse = yield loginWithWallet(signatureMsg.message, connectedAddress, signature === null || signature === void 0 ? void 0 : signature.message, chain);
if (walletResponse === null || walletResponse === void 0 ? void 0 : walletResponse.status) {
StorageService.authToken.setValue(walletResponse.message);
setConnectParam({
networkId: networkDetailsByChain.id,
signature: signature === null || signature === void 0 ? void 0 : signature.message,
signatureMessage: signatureMsg.message,
walletAddress: connectedAddress,
});
setIsAuthToken(true);
setConnectStatus('connected');
}
if (!(walletResponse === null || walletResponse === void 0 ? void 0 : walletResponse.status)) {
yield onDisConnect().then(() => {
setConnectStatus('connect');
connectionError(ModalType.ERROR, 'Signature Verification Failed, Please retry connecting wallet');
setModalState(ModalType.ERROR);
setError('Signature Verification Failed, Please retry connecting wallet');
});
return;
}
return;
}
setConnectStatus('connect');
connectionError(ModalType.ERROR);
return;
}
setConnectStatus('connect');
connectionError(ModalType.ERROR);
}
else {
setConnectStatus('connect');
setModalState(ModalType.ERROR);
setError(`Invalid network detected. Please Change to valid network (${String(networkData.map((item) => item.name)).replaceAll(',', ', ')})`);
}
}
else {
setConnectStatus('connect');
setModalState(ModalType.ERROR);
setError('No Network found');
}
}
catch (e) {
setConnectStatus('connect');
setLoaderDescription('');
connectionError(ModalType.ERROR);
if (((_w = (_v = e === null || e === void 0 ? void 0 : e.message) === null || _v === void 0 ? void 0 : _v.toLowerCase()) === null || _w === void 0 ? void 0 : _w.includes('user rejected')) ||
((_y = (_x = e === null || e === void 0 ? void 0 : e.message) === null || _x === void 0 ? void 0 : _x.toLowerCase()) === null || _y === void 0 ? void 0 : _y.includes('user denied'))) {
setError('Transaction has been cancelled by user. Please try again.');
}
else {
setError('Something went wrong');
}
}
}), [
getNetworkDetailsByChainId,
getSignature,
setConnectStatus,
connectionError,
getSignatureData,
isEthereumWallet,
isWeb2Login,
loginWithWallet,
onDisConnect,
]);
const connectionSuccess = useCallback((connectedAddress, provider, chain, providerType, balance) => {
var _a, _b;
try {
const networkData = StorageService.networkDetails.getValue();
const networkDetailsByChain = getNetworkDetailsByChainId(networkData, chain);
const walletData = {
walletAddress: connectedAddress,
networkDetails: networkDetailsByChain,
providerType: providerType !== null && providerType !== void 0 ? providerType : '',
balance: {
native: (_a = balance === null || balance === void 0 ? void 0 : balance.native) !== null && _a !== void 0 ? _a : 0,
nonNative: (_b = balance === null || balance === void 0 ? void 0 : balance.nonNative) !== null && _b !== void 0 ? _b : 0,
},
provider: null,
};
setWalletData(walletData);
setProviderData(provider);
saveWalletData(connectedAddress, balance, provider, providerType, networkDetailsByChain);
StorageService.walletDetails.setValue(walletData);
connectionError(ModalType.CONNECT_WALLET);
setLoaderDescription('');
// setIsNewDevice(false);
setOpenModal(false);
onCloseModal(true);
setConnectStatus('connected');
}
catch (e) {
setConnectStatus('connect');
connectionError(ModalType.ERROR);
setError(e === null || e === void 0 ? void 0 : e.message);
}
}, [
getNetworkDetailsByChainId,
onCloseModal,
connectionError,
saveWalletData,
setConnectStatus,
]);
const verifyOTP = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _z;
try {
connectionError(ModalType.LOADING, 'Processing...');
if (isPaperWallet) {
// if (!newDevice || newUser) {
// await paperClient.current.auth.verifyPaperEmailLoginOtp({
// email,
// otp,
// });
// } else {
// await paperClient.current.auth.verifyPaperEmailLoginOtp({
// email,
// otp,
// recoveryCode,
// });
// }
// const userDetails: any = await paperClient.current.getUser();
// const chain = getChainId(userDetails?.wallet?.chain);
// const signer = await userDetails?.wallet?.getEthersJsSigner();
// const balance = await getBalance(signer, userDetails?.walletAddress, chain, WalletProviderType.EMAIL);
// if (skipSignature) {
// connectionSuccess(userDetails?.walletAddress, signer, chain, WalletProviderType.EMAIL, balance);
// return;
// }
// if (userDetails?.walletAddress) {
// getSignatureMessage(userDetails?.walletAddress, signer, chain, WalletProviderType.EMAIL, balance);
// }
}
else {
yield (connect === null || connect === void 0 ? void 0 : connect(() => __awaiter(void 0, void 0, void 0, function* () {
const client = getThirdWebClient(thirdWebClientId);
const chain = defineChain(thirdWebChainId);
yield thirdWebWallet.connect({
client,
strategy: 'email',
email,
verificationCode: otp,
chain,
});
return thirdWebWallet;
})));
thirdWebConnect.current = true;
}
}
catch (e) {
if (((_z = e === null || e === void 0 ? void 0 : e.message) === null || _z === void 0 ? void 0 : _z.includes(ErrorsType.RECOVERY_CODE)) && isPaperWallet) {
setModalState(ModalType.RECOVERY_CODE);
setError('Code is incorrect');
}
else {
thirdWebConnect.current = null;
setError('Code is incorrect');
setModalState(ModalType.OTP);
}
}
}), [
email,
thirdWebClientId,
thirdWebWallet,
otp,
isPaperWallet,
thirdWebChainId,
connect,
connectionError,
]);
const onConnectEmailWallet = useCallback((connectedAddress, connectedChainId, provider) => __awaiter(void 0, void 0, void 0, function* () {
try {
thirdWebConnect.current = null;
connectionError(ModalType.LOADING, 'Connecting wallet...');
if (connectedAddress && connectedChainId) {
const balance = yield getBalance(provider, connectedAddress, connectedChainId, WalletProviderType.EMAIL);
if (skipSignature) {
connectionSuccess(connectedAddress, provider, connectedChainId, WalletProviderType.WALLET_CONNECT, balance);
return;
}
yield getSignatureMessage(connectedAddress, provider, connectedChainId, WalletProviderType.EMAIL, balance);
}
else {
setConnectStatus('connect');
connectionError(ModalType.ERROR);
setError('Something wrong');
}
}
catch (e) {
setConnectStatus('connect');
connectionError(ModalType.ERROR);
setError(e === null || e === void 0 ? void 0 : e.message);
}
}), [
connectionError,
skipSignature,
getSignatureMessage,
connectionSuccess,
setConnectStatus,
]);
useEffect(() => {
(() => __awaiter(void 0, void 0, void 0, function* () {
if (connectionStatus === 'connected' &&
(thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id) &&
connectedEmailWalletAddress &&
thirdWebConnect.current) {
let signer;
if (activeAccount) {
signer = yield getEthersSigner(thirdWebClientId, thirdWebConnectedChain === null || thirdWebConnectedChain === void 0 ? void 0 : thirdWebConnectedChain.id, activeAccount);
}
onConnectEmailWallet(connectedEmailWalletAddress, thirdWebConnectedChain.id, signer);
}
}))();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
connectionStatus,
thirdWebConnectedChain,
connectedEmailWalletAddress,
activeAccount,
thirdWebClientId,
thirdWebConnect.current,
onConnectEmailWallet,
]);
const onClickMetamask = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
try {
if (!isTokenGating) {
setOpenModal(true);
setDisconnectStatus('disconnect');
setConnectStatus('connecting');
if (window && window.ethereum) {
setLoaderDescription('Please open your wallet and confirm the signature. Do not close or reload this window.');
connectionError(ModalType.LOADING, '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: chain } = yield provider.getNetwork();
const balance = yield getBalance(provider, accounts === null || accounts === void 0 ? void 0 : accounts[0], chain, WalletProviderType.METAMASK);
if (skipSignature) {
connectionSuccess(accounts === null || accounts === void 0 ? void 0 : accounts[0], provider, chain, WalletProviderType.METAMASK, balance);
return;
}
if (accounts === null || accounts === void 0 ? void 0 : accounts[0]) {
yield getSignatureMessage(accounts === null || accounts === void 0 ? void 0 : accounts[0], provider, chain, WalletProviderType.METAMASK, balance);
}
}
else {
setConnectStatus('connect');
setLoaderDescription('');
connectionError(ModalType.ERROR);
setError('Meta mask not installed in your browser');
}
}
}
catch (e) {
setConnectStatus('connect');
setLoaderDescription('');
connectionError(ModalType.ERROR);
setError(e === null || e === void 0 ? void 0 : e.message);
}
}), [
skipSignature,
isTokenGating,
getSignatureMessage,
connectionSuccess,
connectionError,
setConnectStatus,
setDisconnectStatus,
]);
const onClickWalletConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
try {
setDisconnectStatus('disconnect');
setConnectStatus('connecting');
setOpenModal(false);
onCloseModal(true);
if (web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.isConnected) {
StorageService.walletDetails.clear();
yield (web3Disconnect === null || web3Disconnect === void 0 ? void 0 : web3Disconnect.disconnect());
}
yield (web3Modal === null || web3Modal === void 0 ? void 0 : web3Modal.openWalletModal({ view: 'Connect' }));
walletConnect.current = true;
}
catch (e) {
setConnectStatus('connect');
walletConnect.current = null;
connectionError(ModalType.ERROR);
setError(e === null || e === void 0 ? void 0 : e.message);
}
}), [
setDisconnectStatus,
setConnectStatus,
onCloseModal,
web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.isConnected,
web3Modal,
web3Disconnect,
connectionError,
]);
const onWalletConnect = useCallback((connectedAddress, connectedChainId, provider) => __awaiter(void 0, void 0, void 0, function* () {
walletConnect.current = null;
try {
web3Modal === null || web3Modal === void 0 ? void 0 : web3Modal.closeWalletModal();
setOpenModal(true);
setLoaderDescription('Please open your wallet and confirm the signature. Do not close or reload this window.');
connectionError(ModalType.LOADING, 'Connecting wallet...');
if (connectedAddress && connectedChainId) {
const ethersProvider = new ethers.providers.Web3Provider(provider);
const balance = yield getBalance(ethersProvider, connectedAddress, connectedChainId, WalletProviderType.WALLET_CONNECT);
if (skipSignature) {
connectionSuccess(connectedAddress, ethersProvider, connectedChainId, WalletProviderType.WALLET_CONNECT, balance);
return;
}
yield getSignatureMessage(connectedAddress, ethersProvider, connectedChainId, WalletProviderType.WALLET_CONNECT, balance);
}
else {
setConnectStatus('connect');
setLoaderDescription('');
connectionError(ModalType.ERROR);
setError('Something wrong');
}
}
catch (e) {
setConnectStatus('connect');
setLoaderDescription('');
connectionError(ModalType.ERROR);
setError(e === null || e === void 0 ? void 0 : e.message);
}
}), [
web3Modal,
connectionError,
skipSignature,
getSignatureMessage,
connectionSuccess,
setConnectStatus,
]);
useEffect(() => {
if ((web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.isConnected) &&
(web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.address) &&
(web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.chainId) &&
walletConnect.current &&
(web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider)) {
onWalletConnect(web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.address, web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.chainId, web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider);
}
}, [
web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.isConnected,
web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.address,
web3ModalAccount === null || web3ModalAccount === void 0 ? void 0 : web3ModalAccount.chainId,
web3ModalProvider === null || web3ModalProvider === void 0 ? void 0 : web3ModalProvider.walletProvider,
onWalletConnect,
]);
useEffect(() => {
var _a, _b;
if ((walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.providerType) === WalletProviderType.METAMASK) {
(_a = window.ethereum) === null || _a === void 0 ? void 0 : _a.on('accountsChanged', onClickMetamask);
(_b = window.ethereum) === null || _b === void 0 ? void 0 : _b.on('chainChanged', onClickMetamask);
return () => {
var _a, _b;
(_a = window.ethereum) === null || _a === void 0 ? void 0 : _a.removeListener('chainChanged', onClickMetamask);
(_b = window.ethereum) === null || _b === void 0 ? void 0 : _b.removeListener('accountsChanged', onClickMetamask);
};
}
return undefined;
}, [onClickMetamask, w