Skip to content

Issue with localhost provider #91

Closed
@naushad2403

Description

@naushad2403

Describe the bug
Using hardhat local node and metamask, Configuring Wagmi client with jsonRpcProvider,
Error I am getting is networkConfigurationId undefined does not match a configured networkConfiguration
To Reproduce
Steps to reproduce the behavior:

  1. Replace the content of _app.js of frontend folder with the following code.
  2. Run npx hardhat node in backend folder
  3. Run npx run dev in frontend folder
  4. Select localhost network in metamask
  5. Try to connect with connect
import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";

import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createClient, useAccount, WagmiConfig } from "wagmi";
import {
  localhost,
} from "wagmi/chains";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import MainLayout from "../layout/mainLayout";
import { useRouter } from "next/router";
import { jsonRpcProvider } from "@wagmi/core/providers/jsonRpc";

const { chains, provider } = configureChains(
  [
    localhost
  ],
  [
    jsonRpcProvider({
      rpc: (chain) => ({
        http: `http://127.0.0.1:8545/`,
      }),
    }),
  ]
);

console.log(chains, provider);

const { connectors } = getDefaultWallets({
  appName: "My Alchemy DApp",
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

export { WagmiConfig, RainbowKitProvider };

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const account = useAccount({
    onConnect({ address, connector, isReconnected }) {
      console.log(address);
      if (!isReconnected) router.reload();
    },
  });
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider
        modalSize="compact"
        initialChain={process.env.NEXT_PUBLIC_DEFAULT_CHAIN}
        chains={chains}
      >
        <MainLayout>
          <Component {...pageProps} />
        </MainLayout>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}


Expected behavior
App should connect with wallet and show address.

Screenshots
Screenshot 2023-05-14 at 2 14 44 PM

Desktop (please complete the following information):

  • OS: MacOS ventura 13.4
  • Browser Charome

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions