this is whole code of wallet connection
import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";
import { useMoralis } from "react-moralis";
import { getEllipsisTxt } from "helpers/formatters";
import Blockie from "./Blockie";
import { Button, Card, Modal } from "antd";
// import { createClient, configureChains, defaultChains, WagmiConfig } from 'wagmi';
// import { publicProvider } from 'wagmi/providers/public';
import { useState } from "react";
import Address from "./Address/Address";
import { SelectOutlined } from "@ant-design/icons";
import { getExplorer } from "helpers/networks";
import Connectors from "./Connectors";
import Moralis from "moralis-v1";
// const { provider, webSocketProvider } = configureChains(defaultChains, [publicProvider()]);
// const client = createClient({
// provider,
// webSocketProvider,
// autoConnect: true,
// });
const styles = {
account: {
height: "42px",
padding: "0 15px",
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "fit-content",
borderRadius: "12px",
backgroundColor: "rgb(244, 244, 244)",
cursor: "pointer",
},
text: {
color: "#21BF96",
},
wallet: {
fontSize: "24px",
fontFamily: "Alex Brush",
fontWeight: "600",
},
};
function Account() {
const {
authenticate,
isAuthenticated,
logout,
isInitialized,
enableWeb3,
account,
} = useMoralis();
const { walletAddress, chainId } = useMoralisDapp();
const [isModalVisible, setIsModalVisible] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isAuthOpen, setIsAuthOpen] = useState(false);
const [isOpened, setIsOpened] = useState(true);
const [authError, setAuthError] = useState(null);
const [isAuthenticating, setIsAuthenticating] = useState(false);
let moralisAuth;
function getWallet() {
if (typeof web3 !== "undefined") {
//authenticate({ signingMessage: "Please Sign In" });
setIsAuthOpen(true);
} else {
setIsModalOpen(true);
}
}
function activateInjectedProvider(providerName) {
const { ethereum } = window;
if (!ethereum?.providers) {
return undefined;
}
let provider;
switch (providerName) {
case "Coinbase":
provider = ethereum.providers.find(
({ isCoinbaseWallet }) => isCoinbaseWallet
);
break;
case "Metamask":
provider = ethereum.providers.find(({ isMetaMask }) => isMetaMask);
break;
default:
return;
}
if (provider) {
ethereum.setSelectedProvider(provider);
}
}
const handleAuth = async (
provider:
| "metamask"
| "coinbase"
| "walletconnect"
| "magicLink"
| "web3Auth" = "metamask"
) => {
activateInjectedProvider(provider);
try {
setAuthError(null);
setIsAuthenticating(true);
// Enable web3 to get user address and chain
await enableWeb3({ throwOnError: true, provider });
const { account, chainId } = Moralis;
if (!account) {
throw new Error(
"Connecting to chain failed, as no connected account was found"
);
}
if (!chainId) {
throw new Error(
"Connecting to chain failed, as no connected chain was found"
);
}
// Get message to sign from the auth api
const { message } = await Moralis.Cloud.run("requestMessage", {
address: account,
chain: parseInt(chainId, 16),
networkType: "evm",
});
// Authenticate and login via parse
await authenticate({
signingMessage: message,
throwOnError: true,
});
} catch (error) {
setAuthError(error);
alert(error)
} finally {
setIsAuthenticating(false);
setIsAuthOpen(false);
}
};
// async function magicLink(connectorId: Moralis.Web3ProviderType) {
// setIsAuthOpen(false);
// if (connectorId === "magicLink") {
// authenticate({ provider: connectorId });
// } else {
// activateInjectedProvider(connectorId);
// authenticate({ provider: connectorId });
// }
// }
// const handleCustomLogin = async () => {
// await authenticate({
// provider: "magicLink",
// email: email,
// apiKey: "ZxkDdAQEFiO5boRqGHPhyFXLW4or11UtPskIWsRWUvZtanXvclPTINwUJOtbB4VJ", // Enter API key from Magic Dashboard https://dashboard.magic.link/
// network: "rinkbey"
// });
// };
if (!isAuthenticated) {
return (
<>
<div onClick={() => getWallet()}>
<p className="text-white text-center"> Connect To Wallet</p>
</div>
<Modal
open={isModalOpen}
footer={null}
onCancel={() => setIsModalOpen(false)}
bodyStyle={{
padding: "15px",
fontSize: "17px",
fontWeight: "500",
}}
style={{ fontSize: "16px", fontWeight: "500" }}
width="400px"
>
<h3>You don't have any wallet to connect</h3>
</Modal>
<Modal
className="modal-w"
open={isAuthOpen}
footer={null}
onCancel={() => setIsAuthOpen(false)}
bodyStyle={{
padding: "15px",
fontSize: "17px",
fontWeight: "500",
}}
style={{ fontSize: "16px", fontWeight: "500" }}
width="400px"
>
{/* <div style={{padding: "90px"}}>
{Connectors.map(({ title, icon, connectorId }, key) => (
<button onClick={() => connectWallet(
connectorId,
)}>{title}</button>
<button onClick={() => handleAuth('metamask')}>{title}</button>
))}
</div> */}
<div style={{ padding: "10px" }}>
<div className="mb-2">
<h2 className="fw-bold text-center ">Connect your wallet</h2>
</div>
<div className="border-top">
{Connectors.map(({ title, icon, connectorId }, key) => (
<div
className="d-flex align-items-center mt-3"
disabled={isAuthenticating}
>
<img
src={icon}
style={{ height: "26px", width: "26px" }}
alt={connectorId}
/>
<a
className="mx-2 text-dark text-decoration-none"
href="/#"
onClick={() => handleAuth(connectorId)}
style={styles.wallet}
>
{title}
</a>
</div>
))}
</div>
</div>
</Modal>
</>
);
} else {
return (
<>
<div onClick={() => setIsModalVisible(true)}>
<p>{getEllipsisTxt(account, 6)}</p>
{/* <Blockie currentWallet scale={3} /> */}
</div>
<Modal
className=""
open={isModalVisible}
footer={null}
onCancel={() => setIsModalVisible(false)}
bodyStyle={{
padding: "15px",
fontSize: "17px",
fontWeight: "500",
}}
style={{ fontSize: "16px", fontWeight: "500", width: "75%" }}
width="400px"
>
<div className="border-bottom"><h2 className="fw-bold text-center ">Disconnect your wallet</h2></div>
<div className="row align-items-center mt-1">
<div className=" col-md-10 col-12 text-md-start text-center">
<h3 className="fw-bold pt-1">Account:</h3>
<h4 className="fw-bold pt-1">{account}</h4>
</div>
{/* <Card
style={{
marginTop: "10px",
borderRadius: "1rem",
}}
bodyStyle={{ padding: "15px" }}
>
<Address
avatar="left"
size={6}
copyable
style={{ fontSize: "20px" }}
/>
<div style={{ marginTop: "10px", padding: "0 10px" }}>
<a
href={`${getExplorer(chainId)}/address/${account}`}
target="_blank"
rel="noreferrer"
>
<SelectOutlined style={{ marginRight: "5px" }} />
View on Explorer
</a>
</div>
</Card> */}
<div className="d-flex col-md-2 col-12 justify-content-end mt-3">
<Button
className="d-flex align-items-center m-auto"
size="large"
type="primary"
style={{
borderRadius: "0.5rem",
fontSize: "25px",
fontFamily: "Alex Brush",
fontWeight: "500",
}}
onClick={() => {
logout();
setIsModalVisible(false);
}}
>
Disconnect
</Button>
</div>
</div>
</Modal>
</>
);
}
}
export default Account;