Does useContractEvent work on localhost?

[garmeeh]

👋 Hey just wondering am I doing something wrong or maybe I am missing something for localhost. Contract is running on anvil locally. Other hooks such as useContractWrite work.

Here is pseudocode example of the issue I am having.

function MyComponent() {
  const HOOK_CONTRACT_CONFIG = {
    addressOrName: MY_CONTRACT_ADDRESS,
    contractInterface: CONTRACT_INTERFACE,
  };

  // This does not fire
  useContractEvent(HOOK_CONTRACT_CONFIG, "MyEvent", (a, b) =>
    console.log("MyEventHook", a, b)
  );

  // This fires
  useEffect(() => {
    contract.on("MyEvent", (a, b, c) =>
      console.log("MyEventUseEffect", a, b, c)
    );

    return () => {
      contract.removeAllListeners();
    };
  }, []);
}

I am using Next.js if that makes any difference.

[tmm]

What are you using for the client's provider (and/or webSocketProvider)?

[garmeeh]

So this is my full _app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { Provider, createClient } from "wagmi";

const client = createClient({
  autoConnect: true,
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider client={client}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

[tmm]

Got it. You probably want to add a provider (e.g. JsonRpcProvider) option to createClient that is set up to point to localhost.

I'll hopefully find time to write a guide about this soon. In the meantime, trying searching around the discussion forum.

[garmeeh]

Amazing. Thank you.

Here is what solved it:

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ethers } from "ethers";
import { Provider, createClient } from "wagmi";

const ethProvider = new ethers.providers.JsonRpcProvider(
  "http://127.0.0.1:8545", // rpc url
  31337 // chainId (local)
);

const client = createClient({
  autoConnect: true,
  provider: ethProvider,
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider client={client}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;