When I click on connect wallet button, my metamask wallet is opening and asking for permission to connect the wallet. However, even after I connect it, the application isn’t showing that there is no account connected.
This is my components/ManualHeader.js file:
import { useMoralis } from "react-moralis"
import { useEffect, useState } from "react"
export default function Header() {
const { enableWeb3, account, isWeb3Enabled } = useMoralis()
const [isConnected, setIsConnected] = useState(false)
useEffect(() => {
console.log("isWeb3Enabled:", isWeb3Enabled)
console.log("account:", account)
if (account && isWeb3Enabled) {
setIsConnected(true)
}
}, [account, isWeb3Enabled])
return (
<div>
{isConnected ? (
<div>
Connected to {account.slice(0, 6)}...{account.slice(account.length - 4)}
</div>
) : (
<button
onClick={async () => {
try {
await enableWeb3()
console.log("Web3 Enabled")
} catch (error) {
console.error("Failed to enable Web3:", error)
}
}}
>
Connect Wallet
</button>
)}
</div>
)
pages/ _app.js :
import Head from "next/head"
import { MoralisProvider } from "react-moralis"
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<title>Smart Contract Lottery</title>
<meta name="description" content="Our Smart Contract Lottery"></meta>
</Head>
<MoralisProvider initializeOnMount={false}>
<Component {...pageProps} />
</MoralisProvider>
</>
)
}
My package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"ethers": "^6.13.2",
"moralis-v1": "^1.13.0",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"react-moralis": "^1.4.2"
},
"devDependencies": {
"postcss": "^8",
"prettier": "^3.3.3",
"tailwindcss": "^3.4.1"
}
}
If anyone knows how to solve this, please help me with the issue. And also I’d appreciate if anyone suggest me a good alternate for react-moralis with connecting Web3 wallets in a React application.