Connect Metamask with web3js

How does a standard web app interact with the blockchain? Learn to connect a front-end to a smart contract using MetaMask and the Web3.js library.

#1about 2 minutes

Comparing the core principles of Web2 and Web3

Web2 is characterized by centralized monetization and a lack of user privacy, whereas Web3 offers user control and privacy by default.

#2about 2 minutes

Understanding blockchain as the foundation of Web3

Web3 uses blockchain's distributed ledger technology to create a more secure, open, and trusted internet, solving many of Web2's inherent problems.

#3about 3 minutes

Defining blockchain's key concepts like immutability

Blockchain is an immutable, distributed digital ledger where data is stored in encrypted blocks across a network, making it secure and decentralized.

#4about 3 minutes

Introducing MetaMask and the Web3.js library

MetaMask is a browser extension that functions as a wallet and enables browsers to interact with Ethereum, while Web3.js is the JavaScript library used to communicate with the blockchain.

#5about 4 minutes

Prerequisites for connecting dApps with MetaMask

To connect a front-end application to the blockchain, you need the Web3.js library, a MetaMask wallet, and the specific smart contract's ABI and address.

#6about 8 minutes

Reading and writing to a smart contract via Etherscan

You can directly interact with a deployed smart contract on a block explorer like Etherscan to read data or write new data, which requires signing the transaction with MetaMask.

#7about 7 minutes

Setting up a React front-end with Web3.js

The front-end is built with React and uses an interaction utility file to import Web3.js, the contract ABI, and the contract address to create a contract instance.

#8about 12 minutes

Writing data to the blockchain from a React app

To write data, a transaction object is created with the recipient address and encoded function data, then sent using `window.ethereum.request` which prompts the user to sign in MetaMask.

#9about 8 minutes

Live demo and recap of the dApp architecture

A live demonstration shows the full workflow of updating a smart contract's state from a React front-end, followed by a recap of the project's architecture and a link to the source code.