0

I'm trying to implement injected wallet like Metamask and Trust Wallet where my wallet plugin pops up when clicking on Injected which I implemented using Wagmi. I think the wallets are detected through window.ethereum after reading a few documentations but I still wasn't sure what should I do. Would love to have some examples or documents to implement it in the simplest way

1 Answer 1

1

here is a link to all the docs about connectors, hooks, and configuration: https://wagmi.sh/react/getting-started

So assuming you have npm or yarn installed wagmi to your react project, you have to then initialize it in your index.js or index.jsx file like so:

import { WagmiConfig, createClient, configureChains, chain } from "wagmi";

import { infuraProvider } from "wagmi/providers/infura";
import { InjectedConnector } from "wagmi/connectors/injected";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";

// this is how you configure providers and chains you would like to use

const { chains, provider, webSocketProvider } = configureChains(
  [mainnet],
  // if you don't have alchemy or infura you can use public provider
  [publicProvider()],
  [infuraProvider({ apiKey: "replace with infura api key" })]
);

// configure connectors

const client = createClient({
  connectors: [
    new InjectedConnector({
      options: {
        name: "CONNECTOR NAME",
        getProvider: () =>
          typeof window !== "undefined" ? window.ethereum : undefined,
      },
    }),
    new MetaMaskConnector({ chains }),
    new WalletConnectConnector({
      options: {
        chains,
        qrcode: true,
        rpc: {
          1: "replace with infura, alchemy, or public rpc url",
        },
      },
    }),
  ],
  autoConnect: true,
  chains,
  provider,
  webSocketProvider,
});

// then wrap your App component or routes in the WagmiConfig 
// to use provided hooks and state throughout your app

function App() {
  return (
    <WagmiConfig client={client}>
      <App />
    </WagmiConfig>
  )
}

after you have the client configured you can create a separate page or component for the login. Here is an example from the docs on how to set that up:

import { useAccount, useConnect } from "wagmi";

function ConnectPage() {
  const { connector: activeConnector, isConnected } = useAccount();
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect();

  return (
    <>
      {isConnected && <div>Connected to {activeConnector.name}</div>}

      // this will loop through all the connectors you 
      // peviously set up in config and create connect buttons for each.

      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {isLoading &&
            pendingConnector?.id === connector.id &&
            " (connecting)"}
        </button>
      ))}
      {error && <div>{error.message}</div>}
    </>
  );
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.