From ec02d3f739c05755c4c82a7d70fb7311a3b6d8a7 Mon Sep 17 00:00:00 2001 From: danijelTxFusion Date: Wed, 7 Feb 2024 04:05:41 +0100 Subject: [PATCH 1/2] feat(js): add examples for transfer and withdrawal tx which uses paymaster --- js/README.md | 34 +++++++------ js/package.json | 2 +- js/src/03_transfer_paymaster.ts | 44 ++++++++++++++++ js/src/{03_withdraw.ts => 04_withdraw.ts} | 0 js/src/05_withdraw_paymaster.ts | 45 +++++++++++++++++ ...ze_withdraw.ts => 06_finalize_withdraw.ts} | 0 ...5_deposit_token.ts => 07_deposit_token.ts} | 0 ...transfer_token.ts => 08_transfer_token.ts} | 0 js/src/09_transfer_token_paymaster.ts | 50 +++++++++++++++++++ ...withdraw_token.ts => 10_withdraw_token.ts} | 0 js/src/11_withdraw_token_paymaster.ts | 47 +++++++++++++++++ ...8_deploy_create.ts => 12_deploy_create.ts} | 0 ...s => 13_deploy_create_with_constructor.ts} | 0 ..._deps.ts => 14_deploy_create_with_deps.ts} | 0 ...deploy_create2.ts => 15_deploy_create2.ts} | 0 ... => 16_deploy_create2_with_constructor.ts} | 0 ...deps.ts => 17_deploy_create2_with_deps.ts} | 0 ...en_create.ts => 18_deploy_token_create.ts} | 0 ..._create2.ts => 19_deploy_token_create2.ts} | 0 ...account.ts => 20_deploy_create_account.ts} | 0 ...ccount.ts => 21_deploy_create2_account.ts} | 0 ...8_use_paymaster.ts => 22_use_paymaster.ts} | 0 js/tsconfig.json | 32 ++++++++---- js/yarn.lock | 8 +-- 24 files changed, 233 insertions(+), 29 deletions(-) create mode 100644 js/src/03_transfer_paymaster.ts rename js/src/{03_withdraw.ts => 04_withdraw.ts} (100%) create mode 100644 js/src/05_withdraw_paymaster.ts rename js/src/{04_finalize_withdraw.ts => 06_finalize_withdraw.ts} (100%) rename js/src/{05_deposit_token.ts => 07_deposit_token.ts} (100%) rename js/src/{06_transfer_token.ts => 08_transfer_token.ts} (100%) create mode 100644 js/src/09_transfer_token_paymaster.ts rename js/src/{07_withdraw_token.ts => 10_withdraw_token.ts} (100%) create mode 100644 js/src/11_withdraw_token_paymaster.ts rename js/src/{08_deploy_create.ts => 12_deploy_create.ts} (100%) rename js/src/{09_deploy_create_with_constructor.ts => 13_deploy_create_with_constructor.ts} (100%) rename js/src/{10_deploy_create_with_deps.ts => 14_deploy_create_with_deps.ts} (100%) rename js/src/{11_deploy_create2.ts => 15_deploy_create2.ts} (100%) rename js/src/{12_deploy_create2_with_constructor.ts => 16_deploy_create2_with_constructor.ts} (100%) rename js/src/{13_deploy_create2_with_deps.ts => 17_deploy_create2_with_deps.ts} (100%) rename js/src/{14_deploy_token_create.ts => 18_deploy_token_create.ts} (100%) rename js/src/{15_deploy_token_create2.ts => 19_deploy_token_create2.ts} (100%) rename js/src/{16_deploy_create_account.ts => 20_deploy_create_account.ts} (100%) rename js/src/{17_deploy_create2_account.ts => 21_deploy_create2_account.ts} (100%) rename js/src/{18_use_paymaster.ts => 22_use_paymaster.ts} (100%) diff --git a/js/README.md b/js/README.md index 4de95e2..bc68c40 100644 --- a/js/README.md +++ b/js/README.md @@ -5,20 +5,26 @@ SDK can be used for development. The examples demonstrate how to: 1. Deposit ETH from Ethereum to zkSync Era. 2. Transfer ETH on zkSync Era. -3. Withdraw ETH from zkSync Era to Ethereum. -4. Deploy a smart contract using create opcode. -5. Deploy a smart contract with constructor using create opcode. -6. Deploy a smart contract with dependency using create opcode. -7. Deploy a smart contract using create2 opcode. -8. Deploy a smart contract with constructor using create2 opcode. -9. Deploy a smart contract with dependency using create2 opcode. -10. Deposit token from Ethereum into zkSync Era. -11. Transfer token on zkSync Era. -12. Withdraw token from zkSync Era to Ethereum. -13. Deploy custom token on zkSync Era. -14. Deploy smart account using create opcode. -15. Deploy smart account using create2 opcode. -16. Use paymaster to pay fee with token. +3. Transfer ETH on zkSync Era using paymaster to pay fee with another token. +4. Withdraw ETH from zkSync Era to Ethereum. +5. Withdraw ETH from zkSync Era to Ethereum using paymaster to pay fee with another token. +6. Finalize withdrawal transaction on Ethereum. +7. Deposit token from Ethereum into zkSync Era. +8. Transfer token on zkSync Era. +9. Transfer token on zkSync Era using paymaster to pay fee with another token. +10. Withdraw token from zkSync Era to Ethereum. +11. Withdraw token from zkSync Era to Ethereum to pay fee with another token. +12. Deploy a smart contract using create method. +13. Deploy a smart contract with constructor using create method. +14. Deploy a smart contract with dependency using create method. +15. Deploy a smart contract using create2 method. +16. Deploy a smart contract with constructor using create2 method. +17. Deploy a smart contract with dependency using create2 method. +18. Deploy custom token on zkSync Era using create method. +19. Deploy custom token on zkSync Era using create2 method. +20. Deploy smart account using create method. +21. Deploy smart account using create2 method. +22. Use paymaster to pay fee with token. Smart contract deployment use already generated bytecodes and ABIs and go bindings. There is a [user guide](../solidity/README.md) on how those artifacts diff --git a/js/package.json b/js/package.json index 69e2dca..c2b7bc9 100644 --- a/js/package.json +++ b/js/package.json @@ -13,7 +13,7 @@ "prettier": "3.0.3", "ts-node": "^10.9.1", "typescript": "^5.1.6", - "zksync-ethers": "6.1.0" + "zksync-ethers": "6.2.0" }, "peerDependencies": { "ethers": "^6.7.1" diff --git a/js/src/03_transfer_paymaster.ts b/js/src/03_transfer_paymaster.ts new file mode 100644 index 0000000..2a89ed6 --- /dev/null +++ b/js/src/03_transfer_paymaster.ts @@ -0,0 +1,44 @@ +import { Provider, types, Wallet, utils } from "zksync-ethers"; +import { ethers } from "ethers"; + +const provider = Provider.getDefaultProvider(types.Network.Sepolia); +const ethProvider = ethers.getDefaultProvider("sepolia"); +const PRIVATE_KEY = process.env.PRIVATE_KEY; +const wallet = new Wallet(PRIVATE_KEY, provider, ethProvider); + +const tokenAddress = "0x927488F48ffbc32112F1fF721759649A89721F8F"; // Crown token which can be minted for free +const paymasterAddress = "0x13D0D8550769f59aa241a41897D4859c87f7Dd46"; // Paymaster for Crown token + +/* +This example demonstrates how to use a paymaster to facilitate fee payment with an ERC20 token. +The user initiates a transfer transaction that is configured to be paid with an ERC20 token through the paymaster. +During transaction execution, the paymaster receives the ERC20 token from the user and covers the transaction fee using ETH. + */ +async function main() { + const receiver = "0x81E9D85b65E9CC8618D85A1110e4b1DF63fA30d9"; + + console.log(`Account1 balance before transfer: ${await wallet.getBalance()}`); + console.log(`Account2 balance before transfer: ${await provider.getBalance(receiver)}`); + + const tx = await wallet.transfer({ + to: receiver, + amount: ethers.parseEther("0.01"), + paymasterParamas: utils.getPaymasterParams(paymasterAddress, { + type: "ApprovalBased", + token: tokenAddress, + minimalAllowance: 1, + innerInput: new Uint8Array(), + }), + }); + const receipt = await tx.wait(); + console.log(`Tx: ${receipt.hash}`); + + console.log(`Account1 balance after transfer: ${await wallet.getBalance()}`); + console.log(`Account2 balance after transfer: ${await provider.getBalance(receiver)}`); +} + +main() + .then() + .catch((error) => { + console.log(`Error: ${error}`); + }); diff --git a/js/src/03_withdraw.ts b/js/src/04_withdraw.ts similarity index 100% rename from js/src/03_withdraw.ts rename to js/src/04_withdraw.ts diff --git a/js/src/05_withdraw_paymaster.ts b/js/src/05_withdraw_paymaster.ts new file mode 100644 index 0000000..970d949 --- /dev/null +++ b/js/src/05_withdraw_paymaster.ts @@ -0,0 +1,45 @@ +import { Provider, types, utils, Wallet } from "zksync-ethers"; +import { ethers } from "ethers"; + +const provider = Provider.getDefaultProvider(types.Network.Sepolia); +const ethProvider = ethers.getDefaultProvider("sepolia"); +const PRIVATE_KEY = process.env.PRIVATE_KEY; +const wallet = new Wallet(PRIVATE_KEY, provider, ethProvider); + +const tokenAddress = "0x927488F48ffbc32112F1fF721759649A89721F8F"; // Crown token which can be minted for free +const paymasterAddress = "0x13D0D8550769f59aa241a41897D4859c87f7Dd46"; // Paymaster for Crown token + +/* +This example demonstrates how to use a paymaster to facilitate fee payment with an ERC20 token. +The user initiates a withdrawal transaction that is configured to be paid with an ERC20 token through the paymaster. +During transaction execution, the paymaster receives the ERC20 token from the user and covers the transaction fee using ETH. + */ +async function main() { + console.log(`L2 balance before withdraw: ${await wallet.getBalance()}`); + console.log(`L1 balance before withdraw: ${await wallet.getBalanceL1()}`); + + const tx = await wallet.withdraw({ + token: utils.ETH_ADDRESS, + to: await wallet.getAddress(), + amount: ethers.parseEther("0.00020"), + paymasterParamas: utils.getPaymasterParams(paymasterAddress, { + type: "ApprovalBased", + token: tokenAddress, + minimalAllowance: 1, + innerInput: new Uint8Array(), + }), + }); + const receipt = await tx.wait(); + console.log(`Tx: ${receipt.hash}`); + + // The duration for submitting a withdrawal transaction to L1 can last up to 24 hours. For additional information, + // please refer to the documentation: https://era.zksync.io/docs/reference/troubleshooting/withdrawal-delay.html. + // Once the withdrawal transaction is submitted on L1, it needs to be finalized. + // To learn more about how to achieve this, please take a look at the 04_finalize_withdraw.ts script. +} + +main() + .then() + .catch((error) => { + console.log(`Error: ${error}`); + }); diff --git a/js/src/04_finalize_withdraw.ts b/js/src/06_finalize_withdraw.ts similarity index 100% rename from js/src/04_finalize_withdraw.ts rename to js/src/06_finalize_withdraw.ts diff --git a/js/src/05_deposit_token.ts b/js/src/07_deposit_token.ts similarity index 100% rename from js/src/05_deposit_token.ts rename to js/src/07_deposit_token.ts diff --git a/js/src/06_transfer_token.ts b/js/src/08_transfer_token.ts similarity index 100% rename from js/src/06_transfer_token.ts rename to js/src/08_transfer_token.ts diff --git a/js/src/09_transfer_token_paymaster.ts b/js/src/09_transfer_token_paymaster.ts new file mode 100644 index 0000000..dfdafa4 --- /dev/null +++ b/js/src/09_transfer_token_paymaster.ts @@ -0,0 +1,50 @@ +import { Provider, types, Wallet, utils } from "zksync-ethers"; +import { ethers } from "ethers"; + +const provider = Provider.getDefaultProvider(types.Network.Sepolia); +const ethProvider = ethers.getDefaultProvider("sepolia"); +const PRIVATE_KEY = process.env.PRIVATE_KEY; +const wallet = new Wallet(PRIVATE_KEY, provider, ethProvider); + +const tokenAddress = "0x927488F48ffbc32112F1fF721759649A89721F8F"; // Crown token which can be minted for free +const paymasterAddress = "0x13D0D8550769f59aa241a41897D4859c87f7Dd46"; // Paymaster for Crown token + +/* +This example demonstrates how to use a paymaster to facilitate fee payment with an ERC20 token. +The user initiates a token transfer transaction that is configured to be paid with an ERC20 token through the paymaster. +During transaction execution, the paymaster receives the ERC20 token from the user and covers the transaction fee using ETH. + */ +async function main() { + const token = "0x6a4Fb925583F7D4dF82de62d98107468aE846FD1"; + const receiver = "0x81E9D85b65E9CC8618D85A1110e4b1DF63fA30d9"; + + console.log(`Account1 balance before transfer: ${await wallet.getBalance(token)}`); + console.log( + `Account2 balance before transfer: ${await provider.getBalance(receiver, "latest", token)}`, + ); + + const tx = await wallet.transfer({ + token: token, + to: receiver, + amount: 5, + paymasterParamas: utils.getPaymasterParams(paymasterAddress, { + type: "ApprovalBased", + token: tokenAddress, + minimalAllowance: 1, + innerInput: new Uint8Array(), + }), + }); + const receipt = await tx.wait(); + console.log(`Tx: ${receipt.hash}`); + + console.log(`Account1 balance after transfer: ${await wallet.getBalance(token)}`); + console.log( + `Account2 balance after transfer: ${await provider.getBalance(receiver, "latest", token)}`, + ); +} + +main() + .then() + .catch((error) => { + console.log(`Error: ${error}`); + }); diff --git a/js/src/07_withdraw_token.ts b/js/src/10_withdraw_token.ts similarity index 100% rename from js/src/07_withdraw_token.ts rename to js/src/10_withdraw_token.ts diff --git a/js/src/11_withdraw_token_paymaster.ts b/js/src/11_withdraw_token_paymaster.ts new file mode 100644 index 0000000..440d384 --- /dev/null +++ b/js/src/11_withdraw_token_paymaster.ts @@ -0,0 +1,47 @@ +import { Provider, types, Wallet, utils } from "zksync-ethers"; +import { ethers } from "ethers"; + +const provider = Provider.getDefaultProvider(types.Network.Sepolia); +const ethProvider = ethers.getDefaultProvider("sepolia"); +const PRIVATE_KEY = process.env.PRIVATE_KEY; +const wallet = new Wallet(PRIVATE_KEY, provider, ethProvider); + +const tokenAddress = "0x927488F48ffbc32112F1fF721759649A89721F8F"; // Crown token which can be minted for free +const paymasterAddress = "0x13D0D8550769f59aa241a41897D4859c87f7Dd46"; // Paymaster for Crown token + +/* +This example demonstrates how to use a paymaster to facilitate fee payment with an ERC20 token. +The user initiates a token withdrawal transaction that is configured to be paid with an ERC20 token through the paymaster. +During transaction execution, the paymaster receives the ERC20 token from the user and covers the transaction fee using ETH. + */ +async function main() { + const token = "0x6a4Fb925583F7D4dF82de62d98107468aE846FD1"; + + console.log(`L2 balance before withdrawal: ${await wallet.getBalance()}`); + console.log(`L1 balance before withdrawal: ${await wallet.getBalanceL1()}`); + + const tx = await wallet.withdraw({ + token: token, + to: await wallet.getAddress(), + amount: 5, + paymasterParamas: utils.getPaymasterParams(paymasterAddress, { + type: "ApprovalBased", + token: tokenAddress, + minimalAllowance: 1, + innerInput: new Uint8Array(), + }), + }); + const receipt = await tx.wait(); + console.log(`Tx: ${receipt.hash}`); + + // The duration for submitting a withdrawal transaction to L1 can last up to 24 hours. For additional information, + // please refer to the documentation: https://era.zksync.io/docs/reference/troubleshooting/withdrawal-delay.html. + // Once the withdrawal transaction is submitted on L1, it needs to be finalized. + // To learn more about how to achieve this, please take a look at the 04_finalize_withdraw.ts script. +} + +main() + .then() + .catch((error) => { + console.log(`Error: ${error}`); + }); diff --git a/js/src/08_deploy_create.ts b/js/src/12_deploy_create.ts similarity index 100% rename from js/src/08_deploy_create.ts rename to js/src/12_deploy_create.ts diff --git a/js/src/09_deploy_create_with_constructor.ts b/js/src/13_deploy_create_with_constructor.ts similarity index 100% rename from js/src/09_deploy_create_with_constructor.ts rename to js/src/13_deploy_create_with_constructor.ts diff --git a/js/src/10_deploy_create_with_deps.ts b/js/src/14_deploy_create_with_deps.ts similarity index 100% rename from js/src/10_deploy_create_with_deps.ts rename to js/src/14_deploy_create_with_deps.ts diff --git a/js/src/11_deploy_create2.ts b/js/src/15_deploy_create2.ts similarity index 100% rename from js/src/11_deploy_create2.ts rename to js/src/15_deploy_create2.ts diff --git a/js/src/12_deploy_create2_with_constructor.ts b/js/src/16_deploy_create2_with_constructor.ts similarity index 100% rename from js/src/12_deploy_create2_with_constructor.ts rename to js/src/16_deploy_create2_with_constructor.ts diff --git a/js/src/13_deploy_create2_with_deps.ts b/js/src/17_deploy_create2_with_deps.ts similarity index 100% rename from js/src/13_deploy_create2_with_deps.ts rename to js/src/17_deploy_create2_with_deps.ts diff --git a/js/src/14_deploy_token_create.ts b/js/src/18_deploy_token_create.ts similarity index 100% rename from js/src/14_deploy_token_create.ts rename to js/src/18_deploy_token_create.ts diff --git a/js/src/15_deploy_token_create2.ts b/js/src/19_deploy_token_create2.ts similarity index 100% rename from js/src/15_deploy_token_create2.ts rename to js/src/19_deploy_token_create2.ts diff --git a/js/src/16_deploy_create_account.ts b/js/src/20_deploy_create_account.ts similarity index 100% rename from js/src/16_deploy_create_account.ts rename to js/src/20_deploy_create_account.ts diff --git a/js/src/17_deploy_create2_account.ts b/js/src/21_deploy_create2_account.ts similarity index 100% rename from js/src/17_deploy_create2_account.ts rename to js/src/21_deploy_create2_account.ts diff --git a/js/src/18_use_paymaster.ts b/js/src/22_use_paymaster.ts similarity index 100% rename from js/src/18_use_paymaster.ts rename to js/src/22_use_paymaster.ts diff --git a/js/tsconfig.json b/js/tsconfig.json index 1f450a6..26cd600 100644 --- a/js/tsconfig.json +++ b/js/tsconfig.json @@ -2,7 +2,6 @@ "compilerOptions": { "module": "CommonJS", "target": "ES2020", - "moduleResolution": "Node16", "outDir": "./build", "esModuleInterop": true, @@ -14,14 +13,27 @@ "noImplicitOverride": true }, "files": [ - "./src/01_deposit.ts", - "./src/02_transfer.ts", - "./src/03_withdraw.ts", - "./src/04_finalize_withdraw.ts", - "./src/05_deposit_token.ts", - "./src/06_transfer_token.ts", - "./src/07_withdraw_token.ts", - "./src/08_get_confirmed_tokens.ts", - "./src/09_use_paymaster.ts" + "src/01_deposit.ts", + "src/02_transfer.ts", + "src/03_transfer_paymaster.ts", + "src/04_withdraw.ts", + "src/05_withdraw_paymaster.ts", + "src/06_finalize_withdraw.ts", + "src/07_deposit_token.ts", + "src/08_transfer_token.ts", + "src/09_transfer_token_paymaster.ts", + "src/10_withdraw_token.ts", + "src/11_withdraw_token_paymaster.ts", + "src/12_deploy_create.ts", + "src/13_deploy_create_with_constructor.ts", + "src/14_deploy_create_with_deps.ts", + "src/15_deploy_create2.ts", + "src/16_deploy_create2_with_constructor.ts", + "src/17_deploy_create2_with_deps.ts", + "src/18_deploy_token_create.ts", + "src/19_deploy_token_create2.ts", + "src/20_deploy_create_account.ts", + "src/21_deploy_create2_account.ts", + "src/22_use_paymaster.ts" ] } diff --git a/js/yarn.lock b/js/yarn.lock index 05a414c..267127f 100644 --- a/js/yarn.lock +++ b/js/yarn.lock @@ -972,7 +972,7 @@ yocto-queue@^0.1.0: resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== -zksync-ethers@6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/zksync-ethers/-/zksync-ethers-6.1.0.tgz#8fcb973cea39463571839b3c77ec75fe3399d2bf" - integrity sha512-o7pVcPna6yfGljq88mrnoJXALK+nFjZ6rZkuaZ5XahQ26i5dstwgZ7zusuu9neFGXlKqVF6HBirvn+pZ3IKXJA== +zksync-ethers@6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/zksync-ethers/-/zksync-ethers-6.2.0.tgz#4e75292674133a9066dc6622658deea52c3e777b" + integrity sha512-sM65Wo3E4SzyoMPc2gQWv9kVqlaWBfKxBlREk8Ag4gbY10BS9ON1QEosHtcAT542s4NQjypA9qE8QyQ3oKfp3Q== From 60d02949ef4bca1be8a88aec39a159eef8f43964 Mon Sep 17 00:00:00 2001 From: danijelTxFusion Date: Wed, 7 Feb 2024 04:11:43 +0100 Subject: [PATCH 2/2] chore(js): lint the code --- js/README.md | 2 +- js/tsconfig.json | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/js/README.md b/js/README.md index bc68c40..88bc608 100644 --- a/js/README.md +++ b/js/README.md @@ -13,7 +13,7 @@ SDK can be used for development. The examples demonstrate how to: 8. Transfer token on zkSync Era. 9. Transfer token on zkSync Era using paymaster to pay fee with another token. 10. Withdraw token from zkSync Era to Ethereum. -11. Withdraw token from zkSync Era to Ethereum to pay fee with another token. +11. Withdraw token from zkSync Era to Ethereum to pay fee with another token. 12. Deploy a smart contract using create method. 13. Deploy a smart contract with constructor using create method. 14. Deploy a smart contract with dependency using create method. diff --git a/js/tsconfig.json b/js/tsconfig.json index 26cd600..6042d22 100644 --- a/js/tsconfig.json +++ b/js/tsconfig.json @@ -17,23 +17,23 @@ "src/02_transfer.ts", "src/03_transfer_paymaster.ts", "src/04_withdraw.ts", - "src/05_withdraw_paymaster.ts", + "src/05_withdraw_paymaster.ts", "src/06_finalize_withdraw.ts", - "src/07_deposit_token.ts", + "src/07_deposit_token.ts", "src/08_transfer_token.ts", - "src/09_transfer_token_paymaster.ts", + "src/09_transfer_token_paymaster.ts", "src/10_withdraw_token.ts", "src/11_withdraw_token_paymaster.ts", - "src/12_deploy_create.ts", - "src/13_deploy_create_with_constructor.ts", - "src/14_deploy_create_with_deps.ts", - "src/15_deploy_create2.ts", + "src/12_deploy_create.ts", + "src/13_deploy_create_with_constructor.ts", + "src/14_deploy_create_with_deps.ts", + "src/15_deploy_create2.ts", "src/16_deploy_create2_with_constructor.ts", - "src/17_deploy_create2_with_deps.ts", - "src/18_deploy_token_create.ts", - "src/19_deploy_token_create2.ts", + "src/17_deploy_create2_with_deps.ts", + "src/18_deploy_token_create.ts", + "src/19_deploy_token_create2.ts", "src/20_deploy_create_account.ts", - "src/21_deploy_create2_account.ts", + "src/21_deploy_create2_account.ts", "src/22_use_paymaster.ts" ] }