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 (
{blockNumber}
{txSent}
@@ -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() {
{blockNumber}
{txSent}