Which provider to use with Hardhat?

[ijonas]

Hi,

I'm trying to connect my wagmi-based app to a local Hardhat node, e.g. on http://localhost:8545.

I'd like to use Metamask as part of the development experience.

Should I use the InjectedConnector (with Metamask pointing to http://localhost:8545) or us the JsonRPCProvider pointing to http://localhost:8545?

Many thanks,
Ijonas.

[tmm]

InjectedConnector configured with chain.hardhat should work fine:

import { chain } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

const connector = new InjectedConnector({
  chains: [chain.hardhat],
})

[ijonas]

Thank you so much for getting back to me so quickly.

[fmhall]

Hey @tmm, awesome work! Having some trouble with the above:

import { chain } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

const connector = new InjectedConnector({
  chains: [chain.hardhat],
})

<Provider
      connectors={[connector]}
    >
      <NextHead>
        <title>wagmi</title>
      </NextHead>

      <Component {...pageProps} />
</Provider>

It thinks it is connected to hardhat, but it is displaying data from ethereum mainnet. I have a feeling this is related to the getDefaultProvider call reverting back to eth mainnet.

How do we properly override the provider?

[tmm]

You should pass your own ethers.js Provider and use the JsonRpcProvider provider (pseudo-code below):

import { providers } from 'ethers.js'
import { chain } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

type ProviderConfig = {
  chainId?: number;
}

const provider = ({ chainId }: ProviderConfig) => {
  if (chainId === chain.hardhat.id)
    return new providers.JsonRpcProvider(chain.hardhat.rpcUrls[0])
  return providers.getDefaultProvider(chainId)
}

const connectors = [
  new InjectedConnector({
    chains: [chain.hardhat],
  }),
]

<Provider connectors={connectors} provider={provider>
  <Component {...pageProps} />
</Provider>