0

I'm recently investigated how to use import { InjectedConnector } from "@web3-react/injected-connector" to connect my Frontend to my MetaMask Account, but now I got stuck allowing my Frontend to interact with my Ganache (local Ethereum network). I want to use the provided const { active, account, library, connector, activate, deactivate } = useWeb3React() but I don't understand how to access the web3.js library for Smart Contract interactions. Might somebody help me out how to properly use web3-react to interact with my Smart Contracts?

Update: I want to clarify my question using a code example (WalletConnector.jsx).

WalletConnector.jsx

import React, { useEffect } from "react";
import { useWeb3React } from "@web3-react/core";
import { injected } from "./Connectors";

export const WalletConnector = ({ className }) => {
  /*
      active: (BOOL) is a wallet actively connected right now
      account: (address) the blockchain address that is connected
      library: () this is either web3 or ethers, depending what you passed in
      connector: the current connector. So, when we connect it will be the injected connector in this example
      activate: (wallet) the method to connect to a wallet
      deactivate: () the method to disconnect from a wallet
  */
  // eslint-disable-next-line no-unused-vars
  const { active, account, library, connector, activate, deactivate } =
    useWeb3React();

  const connect = async () => {
    try {
      await activate(injected);
    } catch (exception) {
      console.log(exception);
    }
  };

  const disconnect = async () => {
    try {
      deactivate();
    } catch (exception) {
      console.log(exception);
    }
  };

  return (
    <div className={`${className} `}>
      <div className='flex flex-row items-center justify-center w-full m-4'>
        <button
          onClick={connect}
          className='py-2 text-sm font-bold text-white rounded-lg w-40 bg-primary hover:bg-primarydarkdark'
        >
          Connect to MetaMask
        </button>
        <div className='p-2'>
          {active ? (
            <span>
              Connected with <b>{account}</b>
            </span>
          ) : (
            <span>Not connected</span>
          )}
        </div>
        <button
          onClick={disconnect}
          className='py-2 text-sm font-bold text-white rounded-lg w-40 bg-primary hover:bg-primarydarkdark'
        >
          Disconnect
        </button>
      </div>
    </div>
  );
};

I would like to know how I have to define library so that it allows me to be used in my project. Looking forward an example.

App.js

Error Message: TypeError: Cannot read properties of undefined (reading 'getSigner')

import React, { useEffect, useState } from "react";
import { useWeb3React, Web3ReactProvider } from "@web3-react/core";
import Web3 from "web3";
import Escrow from "./abis/Escrow.json"; // Makes the Smart Contracts ABI available
import TransactionDashboard from "./components/TransactionDashboard";
import Navbar from "./components/Navbar";
import CreateContract from "./components/CreateContract";
import Footer from "./components/Footer";
import { WalletConnector } from "./components/wallet/WalletConnector";
import { ethers } from "ethers";

import "./styles/output.css";
import "./App.css";

const App = () => {
  const escrowAbi = Escrow.abi;
  const { library } = useWeb3React();

  console.log(library);
  const signer = library.getSigner();
  console.log(signer);

  useEffect(() => {}, []);

  const getLibrary = (provider) => {
    return new ethers.providers.Web3Provider(provider);
  };

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className='App'>
        <Navbar />
        <WalletConnector />
        <div className='flex flex-row w-full'>
          <CreateContract className='flex w-1/2' />
          <TransactionDashboard className='flex w-1/2' />
        </div>

        <Footer />
      </div>
    </Web3ReactProvider>
  );
};

export default App;

8
  • There's no succinct answer to this question - I recommend looking at production-ready frontend projects which integrate the web3-react library, such as the Uniswap interface. Nov 25 '21 at 12:20
  • As a side note, you may want to take a look at create-eth-app. The default template gives you some code snippets that rely on ethers.js to interact with a smart contract. Nov 25 '21 at 12:22
  • As I want to use web3.js the reference to ethers.js doesn't help. Furthermore thanks to you recommendation, but I think the Uniswap example is to complex atm.
    – Ndrslmpk
    Nov 25 '21 at 13:59
  • I just read that managing contracts isn't in the scope of web3-react . web3-react is for managing Ethereum provider state in React. But this actually does not answer my question how I might manage contracts, although using web3-react. @PaulRazvanBerg Does this clarifies my question?
    – Ndrslmpk
    Nov 25 '21 at 14:02
  • Yes that's part of my point, you don't need web3-react to interact with contracts. For that you need a library like ethers.js or web3.js. Speaking of which, I highly recommend you switch to ethers.js. Nov 25 '21 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.