[SOLVED] Can't fetch chainId from useMoralis()

[Eik_01]

So guys I am using “moralis-v1” and “react-moralis” libraries for my NextJs project.
Got my self hosted server running and got my serverUrl.

export default function App({ Component, pageProps }) {
    return (
        <WagmiConfig config={wagmiConfig}>
            <RainbowKitProvider
                theme={darkTheme({
                    borderRadius: "medium",
                    overlayBlur: "small",
                })}
                chains={chains}
            >
                <MoralisProvider
                    initializeOnMount={true}
                    serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}
                    appId={process.env.NEXT_PUBLIC_MORALIS_ID}
                >
                    <Component {...pageProps} />
                </MoralisProvider>
            </RainbowKitProvider>
        </WagmiConfig>
    )
}

After writing this code I am getting the null value for chainId.
Need help with solving this

[Eik_01]

Here’s the component code

import { useWeb3Contract, useMoralis } from "react-moralis"
import { abi, contractAddress } from "../constants/index.js"
import { useEffect, useState } from "react"

export default function LotteryEnterance() {
    const { isWeb3Enabled, chainId: chainIdHex } = useMoralis()
    const chainId = parseInt(chainIdHex)
    console.log(chainIdHex)
    const [fee, setFee] = useState(0)

    const raffleAddress = chainId in contractAddress ? contractAddress[chainId][0] : null

    //runContractFunction can both send transactions and read states
    const { runContractFunction: enterRaffle } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "enterRaffle",
        params: {},
        msgValue: fee,
    })

    const { runContractFunction: getEnteranceFee } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getEnteranceFee",
        params: {},
    })

    useEffect(() => {
        if (isWeb3Enabled) {
            async function updateUI() {
                const fee = await getEnteranceFee()
            }
            updateUI()
        }
    }, [isWeb3Enabled])

    return <div>Hi from Eik</div>
}

And here’s the _app.js:

import "@rainbow-me/rainbowkit/styles.css"
import { MoralisProvider } from "react-moralis"

import { getDefaultWallets, RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit"
import { configureChains, createConfig, WagmiConfig } from "wagmi"
import { mainnet, sepolia, polygon, optimism, arbitrum } from "wagmi/chains"
import { alchemyProvider } from "wagmi/providers/alchemy"
import { publicProvider } from "wagmi/providers/public"
import "dotenv/config"

const { chains, publicClient } = configureChains(
    [mainnet, sepolia, polygon, optimism, arbitrum],
    [alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_ID }), publicProvider()]
)

const { connectors } = getDefaultWallets({
    appName: "Eik's Raffle",
    projectId: "my project id :)",
    chains,
})

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors,
    publicClient,
})

export default function App({ Component, pageProps }) {
    return (
        <WagmiConfig config={wagmiConfig}>
            <RainbowKitProvider
                theme={darkTheme({
                    borderRadius: "medium",
                    overlayBlur: "small",
                })}
                chains={chains}
            >
                <MoralisProvider
                    initializeOnMount={true}
                    serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}
                    appId={process.env.NEXT_PUBLIC_MORALIS_ID}
                >
                    <Component {...pageProps} />
                </MoralisProvider>
            </RainbowKitProvider>
        </WagmiConfig>
    )
}

[johnversus]

Hi @Eik_01

The values from useMoralis hook are returned as state variables. So can you try using useEffect with chainId as dependency to log the chainId value?

[Eik_01]

ok will try this and let you know

[Eik_01]

Hey it worked thank you so much sir