1

There are no examples or documentations about setting up my own provider in web3-react library. Can someone provide a simple example about that?

Here is my attempt:

src/connectors/metaMask.js

import { initializeConnector } from "@web3-react/core";
import { MetaMask } from "@web3-react/metamask";

export const [metaMask, hooks] = initializeConnector(
  (actions) =>
    new MetaMask({ actions, options: { rpc: "http://127.0.0.1:7545" } })  // Is this correct?
);

src/components/Buttons/ConnectButton.jsx

import { useEffect, useCallback } from "react";

import { hooks, metaMask } from "../../connectors/metaMask";

const { useChainId, useAccounts, useIsActive, useProvider, useENSNames } =
  hooks;

export default function ConnectButton() {
  const activeChainId = useChainId();
  const accounts = useAccounts();
  const isActive = useIsActive();

  // auto connect
  useEffect(() => {
    metaMask.connectEagerly().catch(() => {
      console.debug("Failed to connect eagerly to metamask");
    });
  }, []);

  const connect = useCallback(
    async (chainId) => {
      await metaMask.activate(chainId);
    },
    [activeChainId]
  );

  return (
    <>
      {isActive ? (
        <button disabled>{accounts}</button>
      ) : (
        <button onClick={() => connect(5777)}>Connect</button>  // problem here
      )}
    </>
  );
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.