2

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>


    &lt;Footer /&gt;
  &lt;/div&gt;
&lt;/Web3ReactProvider&gt;



);
};


export default App;
Ndrslmpk
  • 112
  • 2
  • 10
  • 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. – Paul Razvan Berg 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. – Paul Razvan Berg 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. – Paul Razvan Berg Nov 25 '21 at 20:10
  • 1
    (1) But do you mind to explain me when I should be using the useWeb3React() -Hook? (2) Is it just meant to show whether my injectedProvider(MetaMask) is connected or not? (3) Due that it is a hook, can i use it in any other component by importing import { Web3ReactProvider } from "@web3-react/core" or is it then referencing each time another Web3ReactProvider instance? Sorry for the detailed questions but I really want to understand how it works and I'm missing good instructions on that.. Anyways thanks for helping already! – Ndrslmpk Nov 25 '21 at 20:41
  • So now I just added etherjs but the same problem occurs again. See my recently updated code snippet App.js and connected error message in – Ndrslmpk Nov 26 '21 at 03:28
  • Again, I suggest taking a look at the Uniswap interface. It's hard to explain this on StackExchange. You want to useuseWeb3React to get hold of data such as chain ids, wallet addresses etc. – Paul Razvan Berg Nov 26 '21 at 12:30

1 Answers1

2

You can get library object from useWeb3Reack hook. It has property provider. As soon as you connect to wallet it would be defined and you can pass it to Web3 constructor.

const { library, chainId, account } = useWeb3React();
const web3 = new Web3(library.provider);

Than you can call contracts as usually:

contract.methods.method_name.send({ from: account });

Hope it will work for you as well.

Paul Zibarov
  • 21
  • 3