diff --git a/services/tutorials/ethereum/send-a-transaction/use-ethers.js-infuraprovider-or-web3provider.md b/services/tutorials/ethereum/send-a-transaction/use-ethers.js-infuraprovider-or-web3provider.md index cb9315a8506..2c8805d9bff 100644 --- a/services/tutorials/ethereum/send-a-transaction/use-ethers.js-infuraprovider-or-web3provider.md +++ b/services/tutorials/ethereum/send-a-transaction/use-ethers.js-infuraprovider-or-web3provider.md @@ -1,14 +1,14 @@ --- -description: Use the Ethers InfuraProvider and Web3Provider methods. +description: Use the Ethers InfuraProvider and BrowserProvider methods. --- -# Use Ethers.js `InfuraProvider` or `Web3Provider` +# Use Ethers.js `InfuraProvider` or `BrowserProvider` In this tutorial, you'll create a simple React app to show the differences between using the -Ethers.js library's `InfuraProvider` and `Web3Provider` methods to send a transaction. +Ethers.js library's `InfuraProvider` and `BrowserProvider` methods to send a transaction. -The key difference is that with `Web3Provider`, you can load the private key from a web3 wallet -(for example, MetaMask), while `InfuraProvider` needs a wallet created locally with a stored private key. +The key difference is that with `BrowserProvider`, MetaMask signs the transaction in the wallet, +while `InfuraProvider` needs a wallet created locally with a stored private key. This tutorial uses the Sepolia testnet. @@ -26,7 +26,7 @@ node -v && npm -v :::info -This tutorial was tested using ethers v5.7.2 and Node.js v16.17.0. +This tutorial uses ethers v6 syntax. ::: @@ -89,15 +89,15 @@ Import the required dependencies and create the providers for communicating with In the `src` directory open the `App.js` file. Remove the existing code and add the following code: ```javascript title="App.js" -import React, { useState } from "react" -import "./App.css" +import React, { useState } from 'react' +import './App.css' function App() { - const ethers = require("ethers") + const ethers = require('ethers') const API_KEY = process.env.REACT_APP_API_KEY const PRIVATE_KEY = process.env.REACT_APP_PRIVATE_KEY - const provider_Metamask = new ethers.providers.Web3Provider(window.ethereum) - const infuraProvider = new ethers.providers.InfuraProvider("sepolia", API_KEY) + const provider_Metamask = new ethers.BrowserProvider(window.ethereum) + const infuraProvider = new ethers.InfuraProvider('sepolia', API_KEY) } export default App ``` @@ -125,15 +125,15 @@ return (

Press one of the buttons to find out the latest block number:

- +

{blockNumber}

-

Fill out the form to send a transaction via Web3Provider:

+

Fill out the form to send a transaction via BrowserProvider:

- +

{txSent}

@@ -158,12 +158,12 @@ Create the code to retrieve the latest block number. Add the following code abov ```javascript // Get the latest block using the InfuraProvider or wallet const handleButton1 = async () => { - const latest_block = await infuraProvider.getBlockNumber("latest") + const latest_block = await infuraProvider.getBlockNumber() setBlockNumber(latest_block) } const handleButton2 = async () => { - const latest_block = await provider_Metamask.getBlockNumber("latest") + const latest_block = await provider_Metamask.getBlockNumber() setBlockNumber(latest_block) } ``` @@ -174,19 +174,19 @@ To send the transaction, you need the target address and the amount to send. Add ```javascript // Handle the form submissions to send the transactions -const handleSubmitWeb3 = async (e) => { +const handleSubmitWeb3 = async e => { e.preventDefault() const data = new FormData(e.target) - const address = data.get("address") - const amount = data.get("amount") + const address = data.get('address') + const amount = data.get('amount') sendTransaction(address, amount) } -const handleSubmitInfura = async (e) => { +const handleSubmitInfura = async e => { e.preventDefault() const data = new FormData(e.target) - const address = data.get("address") - const amount = data.get("amount") + const address = data.get('address') + const amount = data.get('amount') const signer = new ethers.Wallet(PRIVATE_KEY, infuraProvider) sendTransaction(address, amount, signer) } @@ -195,33 +195,31 @@ const handleSubmitInfura = async (e) => { Next, create the `sendTransaction()` function that sends the transaction. Place the following code below the two `handleSubmit` methods. ```javascript - // Send the transaction using either the Web3Provider or InfuraProvider - const sendTransaction = async (address, amount, signer=null) => { - if (signer==null){ // Web3 Provider - if (!window.ethereum) - console.error("No wallet found!"); - else { - await window.ethereum.send("eth_requestAccounts"); - const provider = new ethers.providers.Web3Provider(window.ethereum); - const signer = provider.getSigner(); - const tx = await signer.sendTransaction({ - to: address, - value: ethers.utils.parseEther(amount) - }); - console.log("tx", tx); - setTxSent("Transaction initiated! Tx hash: " + tx.hash); - } - } - else // InfuraProvider - { +// Send the transaction using either the BrowserProvider or InfuraProvider +const sendTransaction = async (address, amount, signer = null) => { + if (signer == null) { + // BrowserProvider + if (!window.ethereum) console.error('No wallet found!') + else { + await provider_Metamask.send('eth_requestAccounts', []) + const signer = await provider_Metamask.getSigner() const tx = await signer.sendTransaction({ to: address, - value: ethers.utils.parseEther(amount) - }); - console.log("tx", tx); - setTxSentInfura("Transaction initiated! Tx hash: " + tx.hash); + value: ethers.parseEther(amount), + }) + console.log('tx', tx) + setTxSent('Transaction initiated! Tx hash: ' + tx.hash) } + } else { + // InfuraProvider + const tx = await signer.sendTransaction({ + to: address, + value: ethers.parseEther(amount), + }) + console.log('tx', tx) + setTxSentInfura('Transaction initiated! Tx hash: ' + tx.hash) } +} ``` ### 5. Run the app @@ -249,7 +247,7 @@ This is because Node.js polyfills are not included in the latest version of Crea ::: -In the app, notice that when you try and send a transaction using Web3Provider, the app opens a MetaMask instance to transfer your funds. +In the app, notice that when you try and send a transaction using BrowserProvider, the app opens a MetaMask instance to transfer your funds.

@@ -266,15 +264,15 @@ If you transfer funds using the InfuraProvider, then the funds are transferred d The complete code sample looks like this: ```javascript -import React, { useState } from "react" -import "./App.css" +import React, { useState } from 'react' +import './App.css' function App() { - const ethers = require("ethers") + const ethers = require('ethers') const API_KEY = process.env.REACT_APP_API_KEY const PRIVATE_KEY = process.env.REACT_APP_PRIVATE_KEY - const provider_Metamask = new ethers.providers.Web3Provider(window.ethereum) - const infuraProvider = new ethers.providers.InfuraProvider("mainnet", API_KEY) + const provider_Metamask = new ethers.BrowserProvider(window.ethereum) + const infuraProvider = new ethers.InfuraProvider('sepolia', API_KEY) // Use the useState hook function to add state variables to a functional component. const [blockNumber, setBlockNumber] = useState(null) @@ -283,57 +281,56 @@ function App() { // Get the latest block using the InfuraProvider or wallet const handleButton1 = async () => { - const latest_block = await infuraProvider.getBlockNumber("latest") + const latest_block = await infuraProvider.getBlockNumber() setBlockNumber(latest_block) } const handleButton2 = async () => { - const latest_block = await provider_Metamask.getBlockNumber("latest") + const latest_block = await provider_Metamask.getBlockNumber() setBlockNumber(latest_block) } // Handle the form submissions to send the transactions - const handleSubmitWeb3 = async (e) => { + const handleSubmitWeb3 = async e => { e.preventDefault() const data = new FormData(e.target) - const address = data.get("address") - const amount = data.get("amount") + const address = data.get('address') + const amount = data.get('amount') sendTransaction(address, amount) } - const handleSubmitInfura = async (e) => { + const handleSubmitInfura = async e => { e.preventDefault() const data = new FormData(e.target) - const address = data.get("address") - const amount = data.get("amount") + const address = data.get('address') + const amount = data.get('amount') const signer = new ethers.Wallet(PRIVATE_KEY, infuraProvider) sendTransaction(address, amount, signer) } - // Send the transaction using either the Web3Provider or InfuraProvider + // Send the transaction using either the BrowserProvider or InfuraProvider const sendTransaction = async (address, amount, signer = null) => { if (signer == null) { - // Web3 Provider - if (!window.ethereum) console.error("No wallet found!") + // BrowserProvider + if (!window.ethereum) console.error('No wallet found!') else { - await window.ethereum.send("eth_requestAccounts") - const provider = new ethers.providers.Web3Provider(window.ethereum) - const signer = provider.getSigner() + await provider_Metamask.send('eth_requestAccounts', []) + const signer = await provider_Metamask.getSigner() const tx = await signer.sendTransaction({ to: address, - value: ethers.utils.parseEther(amount), + value: ethers.parseEther(amount), }) - console.log("tx", tx) - setTxSent("Transaction initiated! Tx hash: " + tx.hash) + console.log('tx', tx) + setTxSent('Transaction initiated! Tx hash: ' + tx.hash) } - } // InfuraProvider - else { + } else { + // InfuraProvider const tx = await signer.sendTransaction({ to: address, - value: ethers.utils.parseEther(amount), + value: ethers.parseEther(amount), }) - console.log("tx", tx) - setTxSentInfura("Transaction initiated! Tx hash: " + tx.hash) + console.log('tx', tx) + setTxSentInfura('Transaction initiated! Tx hash: ' + tx.hash) } } @@ -344,15 +341,15 @@ function App() {

Press one of the buttons to find out the latest block number:

- +

{blockNumber}

-

Fill out the form to send a transaction via Web3Provider:

+

Fill out the form to send a transaction via BrowserProvider:

- +

{txSent}