Initialize Web3 on Client Side

Search…

web3.js allows developers to interact with the blockchain without running the Node

​Web3 is a JavaScript Library to interact with Ethereum Blockchain.
The following code shows a new way to start up a dapp that can be used today in both legacy and modern dapp browsers:
Install web3
1
npm install web3
Copied!
Quote.js
1
import React, { useState, useEffect } from "react";
2
import Web3 from 'web3'
3
​
4
let web3;
5
​
6
function App() {
7
  
8
  useEffect(() => {
9
    (async () => {
10
      if (window.ethereum) {
11
        // Modern DApp browsers
12
        web3 = new Web3(window.ethereum);
13
        try {
14
          await window.ethereum.enable();
15
        } catch (error) {
16
          // User denied account access
17
          console.log(error);
18
        }
19
      } else if (window.web3) {
20
        // Legacy dapp browsers
21
        web3 = new Web3(window.web3.currentProvider);
22
      } else {
23
        // Non-dapp browsers
24
        console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
25
      }
26
    })(); 
27
  }, []);
28
​
29
​
30
  return (
31
    <div className="App">
32
      {/* HTML code here*/}
33
    </div >
34
  );
35
}
36
​
37
export default App;
38
​
Copied!
Here's an article from Metamask for further understanding of initialising web3

Write Your First Smart Contract

Executing First Blockchain Transaction

Last modified 2yr ago

Copy link

Contents

Install web3