How to set a moralis provider for building front end?

Question

I am currently building a frontend for my smart contract using ethers and moralis. Part of my dapp functionality requires the creation of a new contract instance using:

const contract = new ethers.Contract(address, abi, provider)

I am using the web3uikit connectbutton which allows users to connect to the dapp, however I'm not able to figure out what to set as the provider. The web3uikit connect button basically takes care of switching chains, using metamask and hardhat, etc, all with just a couple of lines of code.

I have wrapped my component around MoralisProvider like so:

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider initializeOnMount= {false}>
      <NotificationProvider>
        <Component {...pageProps} />
      </NotificationProvider>
    </MoralisProvider>
  )
}

export default MyApp

I assume I'm supposed to use a the moralis provider but can't find how to use it in their docs. Any help would be appreciated.

Thanks in advance!

Answer 1

If you want to get the current web3 provider (when user connects their wallet), one way is to use web3 from the useMoralis hook which will be valid after connecting the wallet through <ConnectButton>:

import { useMoralis } from 'react-moralis';

... 

const { web3, isWeb3Enabled } = useMoralis();

...
// can use isWeb3Enabled if you need to check if web3 provider is available 
const contract = new ethers.Contract(address, abi, web3);

const signer = web3.getSigner(); // if this is for making transactions

const contract = new ethers.Contract(address, abi, signer);

If you have more issues with this, you can post on the Moralis forum or join the Moralis Discord server.