From 963420805558797d34eb001bec00ea06698d3714 Mon Sep 17 00:00:00 2001 From: santiagodevrel Date: Tue, 16 Jul 2024 16:37:44 +0300 Subject: [PATCH 01/10] added tx types and erc20 tx --- docs/docs/guides/wallet/tx-types.md | 280 ++++++++++++++++++++++++++++ 1 file changed, 280 insertions(+) create mode 100644 docs/docs/guides/wallet/tx-types.md diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md new file mode 100644 index 00000000000..710c3ed4b5f --- /dev/null +++ b/docs/docs/guides/wallet/tx-types.md @@ -0,0 +1,280 @@ +--- +sidebar_position: 3 +sidebar_label: 'Transaction types' +--- + +# Transactions + +In this tutorial, we will explore how to send different types of [transactions](https://ethereum.org/en/developers/docs/transactions/) using web3.js, focusing on Ethereum's evolving transaction formats. We'll start with [legacy transactions (Transaction Type 0)](#transaction-type-0-legacy). Next, we'll delve into Transaction [Type 1 (EIP-2930)](#transaction-type-1-eip-2930), which introduces access lists to optimize gas usage. Finally, we'll cover [Transaction Type 2 (EIP-1559)](#transaction-type-2-eip-1559), the current default, which allows users to specify maximum fees and priority tips for more efficient and cost-effective transactions. Each section will include practical code examples to demonstrate sending raw transactions and interacting with ERC20 tokens on the Sepolia test network + +:::note +Web3.js uses transactions type 2 by default +::: + +## Transaction Type 0 (Legacy) + +### Raw Transaction + +A Legacy Transaction refers to a transaction that was created using an older version of Ethereum's transaction format, also known as "transaction type 0". This transaction format was used before the EIP-1559 upgrade, which was implemented in August 2021. + +```ts +import { Web3 } from"web3"; + +const web3 = new Web3("https://rpc2.sepolia.org"); + +async function txLegacy() { + const wallet = web3.eth.wallet.add("YOUR_PRIVATE_KEY"); //make sure you have funds + + const sender = wallet[0].address; + const recipient = "0x807BFe4940016B5a7FdA19482042917B02e68359"; + const value = 1; //wei + const nonce = await web3.eth.getTransactionCount(sender); + const gas = 21000; + const gasPrice = await web3.eth.getGasPrice(); + + const tx = { + from: sender, + to: recipient, + value, + nonce, + gas, + gasPrice, + // highlight-next-line + type: 0, + }; + + const txReceipt = await web3.eth.sendTransaction(tx); + console.log("Tx hash", txReceipt.transactionHash); +} + +txLegacy(); +``` + +### ERC20 Interaction + +```ts +import { Web3 } from "web3"; + +const web3 = new Web3("https://rpc2.sepolia.org"); + +//WETH token in Sepolia https://sepolia.etherscan.io/address/0xfff9976782d46cc05630d1f6ebab18b2324d6b14#code +const ADDRESS_WETH_SEPOLIA = "0xfFf9976782d46CC05630D1f6eBAb18b2324d6B14"; +const ABI = [ + { + constant: false, + inputs: [ + { + name: "dst", + type: "address", + }, + { + name: "wad", + type: "uint256", + }, + ], + name: "transfer", + outputs: [ + { + name: "", + type: "bool", + }, + ], + payable: false, + stateMutability: "nonpayable", + type: "function", + }, +]; + +async function transfer() { + //initialize wallet + const wallet = web3.eth.accounts.wallet.add("YOUR_PRIVATE_KEY"); //make sure you have WETH tokens in the Sepolia network + //you can swap Sepolia tokens for WETH here https://app.uniswap.org/swap?chain=sepolia + + //initialize WETH contract in sepolia + const myERC20 = new web3.eth.Contract(ABI, ADDRESS_WETH_SEPOLIA); + + const TO = "0xEA9eEca67682Cd9c6Ce3DdD1681049D7A897289F"; //address to send the tokens to + const VALUE = 1; //wei value, dont forget to multiply by decimals + + //send transfer and specify the type + const txReceipt = await myERC20.methods.transfer(TO, VALUE).send({ + from: wallet[0].address, + // highlight-next-line + type: 0, + }); + + console.log(txReceipt.transactionHash); + //=> 0x5f2087c22166f3a1909c40ce537dd564dc3d4c70c5be02f35c6406a628123b16 +} + +transfer(); +``` + +## Transaction Type 1 (EIP-2930) + +This EIP was introduced in April 2021, it introduces a feature called 'Access List.' This improvement allows saving gas on cross-contract calls by declaring in advance which contract and storage slots will be accessed. + +### Raw Transaction + +```ts +import { Web3 } from"web3"; + +const web3 = new Web3("https://rpc2.sepolia.org"); + +async function txEIP2930() { + const wallet = web3.eth.wallet.add("YOUR_PRIVATE_KEY"); + + const sender = wallet[0].address; + const contractAddress1 = "0x..."; + const gas = 500000; //could be higher + const gasPrice = await web3.eth.getGasPrice(); + const data = "0x9a67c8b100000000000000000000000000000000000000000000000000000000000004d0" + + + // highlight-start + //create access list using web3.eth + const accessListData = await web3.eth.createAccessList({ + from: sender, + to: contractAddress1, + data, + }); + // highlight-end + + console.log(accessListData) + /* + => + { + // highlight-start + "accessList": [ + { + "address": "0x15859bdf5aff2080a9968f6a410361e9598df62f", + "storageKeys": [ + "0x0000000000000000000000000000000000000000000000000000000000000000" + ] + } + ], + // highlight-end + "gasUsed": "0x7671" + } + */ + + const tx = { + from: sender, + to: contractAddress1, //the contract we are calling + data, + gas, + gasPrice, + // highlight-next-line + type: 1, + // highlight-next-line + accessList: accessListData.accessList //access the object `accessList` + }; + + const txReceipt = await web3.eth.sendTransaction(tx); + + console.log("Tx hash", txReceipt.transactionHash); +} + +txEIP2930() +``` + +## Transaction Type 2 (EIP-1559) + +When a user creates an EIP-1559 transaction, they specify the maximum fee they are willing to pay `maxFeePerGas` as well as a tip `maxPriorityFeePerGas` to incentivize the miner. The actual fee paid by the user is then determined by the network based on the current demand for block space and the priority of the transaction. + +### Raw Transaction + +```ts +import { Web3 } from"web3"; + +const web3 = new Web3("https://rpc2.sepolia.org"); + +async function txEIP1559() { + const wallet = web3.eth.wallet.add("YOUR_PRIVATE_KEY"); //make sure you have funds + + const sender = wallet[0].address; + const recipient = "0x807BFe4940016B5a7FdA19482042917B02e68359"; + const value = 1; //wei + const nonce = await web3.eth.getTransactionCount(sender); + const gasLimit = 21000; + const maxFeePerGas = Number((await web3.eth.calculateFeeData()).maxFeePerGas); + const maxPriorityFeePerGas = Number((await web3.eth.calculateFeeData()).maxPriorityFeePerGas); + + const tx = { + from: sender, + to: recipient, + value, + nonce, + gasLimit, + maxFeePerGas, + maxPriorityFeePerGas, + // highlight-next-line + type: 2, + }; + + const txReceipt = await web3.eth.sendTransaction(tx); + console.log("Tx hash", txReceipt.transactionHash); +} + +txEIP1559(); +``` + +### ERC20 Interaction + +```ts +import { Web3 } from "web3"; + +const web3 = new Web3("https://rpc2.sepolia.org"); + +//WETH token in Sepolia https://sepolia.etherscan.io/address/0xfff9976782d46cc05630d1f6ebab18b2324d6b14#code +const ADDRESS_WETH_SEPOLIA = "0xfFf9976782d46CC05630D1f6eBAb18b2324d6B14"; +const ABI = [ + { + constant: false, + inputs: [ + { + name: "dst", + type: "address", + }, + { + name: "wad", + type: "uint256", + }, + ], + name: "transfer", + outputs: [ + { + name: "", + type: "bool", + }, + ], + payable: false, + stateMutability: "nonpayable", + type: "function", + }, +]; + +async function transfer() { + //initialize wallet + const wallet = web3.eth.accounts.wallet.add("YOUR_PRIVATE_KEY"); //make sure you have WETH tokens in the Sepolia network + //you can swap Sepolia tokens for WETH here https://app.uniswap.org/swap?chain=sepolia + + //initialize WETH contract in sepolia + const myERC20 = new web3.eth.Contract(ABI, ADDRESS_WETH_SEPOLIA); + + const TO = "0xEA9eEca67682Cd9c6Ce3DdD1681049D7A897289F"; //address to send the tokens to + const VALUE = 1; //wei value, dont forget to multiply by decimals + + //send transfer and specify the type + const txReceipt = await myERC20.methods.transfer(TO, VALUE).send({ + from: wallet[0].address, + // highlight-next-line + type: 2, + }); + + console.log(txReceipt.transactionHash); + //=> 0x174bc88023be4af431fad1693a59f7a41135238510cdcd00f15f6409b5471d77 +} + +transfer(); +``` \ No newline at end of file From 1ddf969f65bef0f029a06f34485ec6efa32b0b9e Mon Sep 17 00:00:00 2001 From: santiagodevrel Date: Tue, 16 Jul 2024 16:38:27 +0300 Subject: [PATCH 02/10] reordered files --- docs/docs/guides/wallet/metamask-react.md | 2 +- docs/docs/guides/wallet/metamask-vanilla.md | 2 +- docs/docs/guides/wallet/web3_modal_guide/_category_.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/guides/wallet/metamask-react.md b/docs/docs/guides/wallet/metamask-react.md index c8c9a3604ae..8cdd7c70ba8 100644 --- a/docs/docs/guides/wallet/metamask-react.md +++ b/docs/docs/guides/wallet/metamask-react.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 sidebar_label: 'Tutorial: Connecting to Metamask with React' --- diff --git a/docs/docs/guides/wallet/metamask-vanilla.md b/docs/docs/guides/wallet/metamask-vanilla.md index da930b07fad..ef55e9bcf8c 100644 --- a/docs/docs/guides/wallet/metamask-vanilla.md +++ b/docs/docs/guides/wallet/metamask-vanilla.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 sidebar_label: 'Tutorial: Connecting to Metamask with Vanilla JS' --- diff --git a/docs/docs/guides/wallet/web3_modal_guide/_category_.yml b/docs/docs/guides/wallet/web3_modal_guide/_category_.yml index c89deac9d4b..0ce376f6e80 100644 --- a/docs/docs/guides/wallet/web3_modal_guide/_category_.yml +++ b/docs/docs/guides/wallet/web3_modal_guide/_category_.yml @@ -2,4 +2,4 @@ label: '📱 WalletConnect Tutorial' collapsible: true collapsed: true link: null -position: 4 +position: 6 From e27c976e9a3f2506ea994449a0b7311ea2bef151 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:46:12 +0300 Subject: [PATCH 03/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Dan Forbes --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index 710c3ed4b5f..3b6575e264d 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -1,6 +1,6 @@ --- sidebar_position: 3 -sidebar_label: 'Transaction types' +sidebar_label: 'Transaction Types' --- # Transactions From c89f242bed50de0cafb2b9f0846f2a63467a1f3f Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:46:18 +0300 Subject: [PATCH 04/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Dan Forbes --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index 3b6575e264d..ada558660a1 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -8,7 +8,7 @@ sidebar_label: 'Transaction Types' In this tutorial, we will explore how to send different types of [transactions](https://ethereum.org/en/developers/docs/transactions/) using web3.js, focusing on Ethereum's evolving transaction formats. We'll start with [legacy transactions (Transaction Type 0)](#transaction-type-0-legacy). Next, we'll delve into Transaction [Type 1 (EIP-2930)](#transaction-type-1-eip-2930), which introduces access lists to optimize gas usage. Finally, we'll cover [Transaction Type 2 (EIP-1559)](#transaction-type-2-eip-1559), the current default, which allows users to specify maximum fees and priority tips for more efficient and cost-effective transactions. Each section will include practical code examples to demonstrate sending raw transactions and interacting with ERC20 tokens on the Sepolia test network :::note -Web3.js uses transactions type 2 by default +Web3.js uses transaction type 2 by default ::: ## Transaction Type 0 (Legacy) From 6775f7969abb5b8b9b033f4ff3ed1a59d7e4aa9d Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:46:25 +0300 Subject: [PATCH 05/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Dan Forbes --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index ada558660a1..41cd8cf02cc 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -18,7 +18,7 @@ Web3.js uses transaction type 2 by default A Legacy Transaction refers to a transaction that was created using an older version of Ethereum's transaction format, also known as "transaction type 0". This transaction format was used before the EIP-1559 upgrade, which was implemented in August 2021. ```ts -import { Web3 } from"web3"; +import { Web3 } from "web3"; const web3 = new Web3("https://rpc2.sepolia.org"); From 08e2b49c2e1b32b210b648abb51444766a443573 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:46:35 +0300 Subject: [PATCH 06/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Dan Forbes --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index 41cd8cf02cc..8cc87992e7e 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -23,7 +23,7 @@ import { Web3 } from "web3"; const web3 = new Web3("https://rpc2.sepolia.org"); async function txLegacy() { - const wallet = web3.eth.wallet.add("YOUR_PRIVATE_KEY"); //make sure you have funds + const wallet = web3.eth.wallet.add("YOUR_PRIVATE_KEY"); // make sure you have funds const sender = wallet[0].address; const recipient = "0x807BFe4940016B5a7FdA19482042917B02e68359"; From 69898f407d4da89ba5752b69ad91f1a585383949 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:46:43 +0300 Subject: [PATCH 07/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Dan Forbes --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index 8cc87992e7e..6593358fad6 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -185,7 +185,7 @@ When a user creates an EIP-1559 transaction, they specify the maximum fee they a ### Raw Transaction ```ts -import { Web3 } from"web3"; +import { Web3 } from "web3"; const web3 = new Web3("https://rpc2.sepolia.org"); From 5bbb9cbeaf1e91ded2cf5fa7b6df5118b2fe6408 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:46:58 +0300 Subject: [PATCH 08/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Dan Forbes --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index 6593358fad6..77d619442b0 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -117,7 +117,7 @@ This EIP was introduced in April 2021, it introduces a feature called 'Access Li ### Raw Transaction ```ts -import { Web3 } from"web3"; +import { Web3 } from "web3"; const web3 = new Web3("https://rpc2.sepolia.org"); From 00a629963aa0e9b977c6ea0e1282366f4ed69e61 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 18:48:43 +0300 Subject: [PATCH 09/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Alex --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index 77d619442b0..c4de7b423ad 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -27,7 +27,7 @@ async function txLegacy() { const sender = wallet[0].address; const recipient = "0x807BFe4940016B5a7FdA19482042917B02e68359"; - const value = 1; //wei + const value = 1; // wei const nonce = await web3.eth.getTransactionCount(sender); const gas = 21000; const gasPrice = await web3.eth.getGasPrice(); From b7a848e6e239459e84ede9dce82e285e2628c809 Mon Sep 17 00:00:00 2001 From: Santiago Trujillo Zuluaga Date: Tue, 16 Jul 2024 20:58:36 +0300 Subject: [PATCH 10/10] Update docs/docs/guides/wallet/tx-types.md Co-authored-by: Alex --- docs/docs/guides/wallet/tx-types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/wallet/tx-types.md b/docs/docs/guides/wallet/tx-types.md index c4de7b423ad..1e58a6b840a 100644 --- a/docs/docs/guides/wallet/tx-types.md +++ b/docs/docs/guides/wallet/tx-types.md @@ -20,7 +20,7 @@ A Legacy Transaction refers to a transaction that was created using an older ver ```ts import { Web3 } from "web3"; -const web3 = new Web3("https://rpc2.sepolia.org"); +const web3 = new Web3("https://rpc2.sepolia.org"); // RPC node url async function txLegacy() { const wallet = web3.eth.wallet.add("YOUR_PRIVATE_KEY"); // make sure you have funds