Connecting to Ethereum (Web3.js/Ethers.js)

DApps & Ethereum Connection

Web3.js & Ethers.js Libraries

Understanding Ethereum Providers

Setting Up with npm

Connecting via MetaMask (Web3.js)

async function connectWeb3() {
  if (window.ethereum) {
    const web3 = new Web3(window.ethereum);
    try {
      // Request account access if needed
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Web3.js connected!');
      return web3;
    } catch (error) {
      console.error('User denied account access or error:', error);
    }
  } else {
    console.log('MetaMask not detected! Install it or use a different provider.');
  }
  return null;
}

// To run this in a browser, you'd call connectWeb3()
// For this runnable example, we'll simulate the connection.
async function main() {
  console.log('Simulating Web3.js connection...');
  const web3Instance = await connectWeb3(); // This would be called in a browser
  if (!web3Instance) {
    console.log('Failed to connect Web3.js (simulated).');
  } else {
    console.log('Web3.js connection successful (simulated)!');
  }
}

main();

Connecting via MetaMask (Ethers.js)

const { ethers } = require('ethers'); // In browser, ethers is global

async function connectEthers() {
  if (window.ethereum) {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    try {
      // Request account access
      await provider.send('eth_requestAccounts', []);
      console.log('Ethers.js connected!');
      return provider;
    } catch (error) {
      console.error('User denied account access or error:', error);
    }
  } else {
    console.log('MetaMask not detected! Install it or use a different provider.');
  }
  return null;
}

// To run this in a browser, you'd call connectEthers()
// For this runnable example, we'll simulate the connection.
async function main() {
  console.log('Simulating Ethers.js connection...');
  const ethersProvider = await connectEthers(); // This would be called in a browser
  if (!ethersProvider) {
    console.log('Failed to connect Ethers.js (simulated).');
  } else {
    console.log('Ethers.js connection successful (simulated)!');
  }
}

main();

Reading Data: Get Block Number

Get Block Number (Web3.js Example)

// This simulates interaction with a Web3 provider.
// In a real DApp, 'web3' would be an instance connected
// to MetaMask or another Ethereum node.

const web3 = {
  eth: {
    getBlockNumber: async () => {
      // Simulate network call delay
      await new Promise(resolve => setTimeout(resolve, 500));
      return 12345678; // Example block number
    }
  }
};

async function main() {
  console.log("Attempting to get block number with Web3.js...");
  const blockNumber = await web3.eth.getBlockNumber();
  console.log("Current Block Number (Web3.js):", blockNumber);
}

main();

Get Block Number (Ethers.js Example)

// This simulates interaction with an Ethers.js provider.
// In a real DApp, 'provider' would be connected to
// MetaMask or another Ethereum node.

const provider = {
  getBlockNumber: async () => {
    // Simulate network call delay
    await new Promise(resolve => setTimeout(resolve, 500));
    return 12345679; // Example block number
  }
};

async function main() {
  console.log("Attempting to get block number with Ethers.js...");
  const blockNumber = await provider.getBlockNumber();
  console.log("Current Block Number (Ethers.js):", blockNumber);
}

main();

Quick Check: Provider Role

Recap: Connecting DApps