diff --git a/content/00.build/05.start-coding/05.quick-start/4.erc20-token.md b/content/00.build/05.start-coding/05.quick-start/4.erc20-token.md index 580af675..5764c85e 100644 --- a/content/00.build/05.start-coding/05.quick-start/4.erc20-token.md +++ b/content/00.build/05.start-coding/05.quick-start/4.erc20-token.md @@ -17,6 +17,50 @@ This is what you're going to do: [you’ve configured the %%zk_testnet_name%% in your wallet](/build/connect-to-zksync). 2. Have at least 0.5 %%zk_testnet_name%% ETH. If you need more, use [one of the faucets](/ecosystem/network-faucets). +## Custom ERC20 token code + +ERC20 tokens are a standard for fungible tokens, which can be traded and represent a fixed value. You’ve used ERC20 +tokens if you’ve transacted with USDC, DAI, USDT, LINK or UNI. + +The ERC20 token we’re going to deploy will allow users to mint and burn tokens. The entire smart contract code is as +follows: + +```solidity +// SPDX-License-Identifier: Unlicensed +pragma solidity ^0.8.19; + +import "@openzeppelin/contracts/token/ERC20/ERC20.sol"; +import "@openzeppelin/contracts/access/Ownable.sol"; +import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol"; + +contract TestToken is ERC20, Ownable, ERC20Burnable { + constructor(string memory name, string memory symbol) ERC20(name, symbol) { + _mint(msg.sender, 100 * 10 ** decimals()); + } + + function mint(address to, uint256 amount) public onlyOwner { + _mint(to, amount); + } +} +``` + +::callout{icon="i-heroicons-light-bulb"} +ZKsync Era is [EVM compatible](/build/resources/glossary#evm-compatible), so you can use existing popular libraries like OpenZeppelin. +:: + +The most important features are: + +- `Ownable` : this extension sets the deployer account as owner of the smart contract. It also introduces the + `onlyOwner` modifier that restricts the execution of certain functions to the owner of the contract. +- `ERC20Burnable`: this extension adds the `burn` and `burnFrom` functions to the smart contract. These functions + destroy tokens from a given account. +- `constructor`: called on deployment, the constructor will assign the given name and symbol to the token and mint 100 + units of it to the account that deployed the contract. +- `mint` : this function creates new token units to a given account. It uses the `onlyOwner` modifier so it can only be + called from the owner account. + +## Deploy and interact with the contract + To complete this tutorial you'll use either Atlas or Remix. Select your preferred tool: ::content-switcher diff --git a/content/00.build/05.start-coding/05.quick-start/_deploy_first/_remix_deploy_contract.md b/content/00.build/05.start-coding/05.quick-start/_deploy_first/_remix_deploy_contract.md index 04a290b2..e1c74799 100644 --- a/content/00.build/05.start-coding/05.quick-start/_deploy_first/_remix_deploy_contract.md +++ b/content/00.build/05.start-coding/05.quick-start/_deploy_first/_remix_deploy_contract.md @@ -13,18 +13,21 @@ compatible protocols. Click the button below to open the project in Remix and see the contract in the Remix code editor. :u-button{ icon="i-heroicons-code-bracket" size="lg" color="primary" variant="solid" :trailing="false" -to="https://remix.ethereum.org/#url=https://github.com/ZKsync-Community-Hub/zksync-quickstart-remix/blob/master/contracts/ZeekMessages.sol" -target="_blank" label="Open smart contract in Remix"} +to="https://remix.ethereum.org/?#activate=zkSync&call=zkSync//loadFromGithub//ZKsync-Community-Hub//zksync-quickstart-remix//" +target="_blank" label="Open project in Remix"} ### Connect your wallet Make sure your wallet is currently connected to the %%zk_testnet_name%% as we will use our wallet’s configured -network to deploy our smart contract. In Remix, under the Environment Section, select “Wallet” and click on -“Connect Wallet”. +network to deploy our smart contract. In the ZKsync Remix plugin, under the Environment Section, select “Wallet” and click on +“Connect Wallet” as shown below: + +![Connect wallet in Remix](/images/remix-connect-wallet.gif) ### Compile the contract -To compile the contract, click on "Compile ZeeksSecretMessages.sol". If you get a popup message requesting permissions to +To compile the contract, open the `ZeeksSecretMessages.sol` file in the editor, go the ZKsync plugin, and click on "Compile ZeeksSecretMessages.sol". +If you get a popup message requesting permissions to access **`ACCESS TO "WRITEFILE" OF "FILE MANAGER"`,** click on "Accept". ::callout{icon="i-heroicons-light-bulb"} diff --git a/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_atlas_erc20_tutorial.md b/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_atlas_erc20_tutorial.md index 8017b98b..8e7c9d4b 100644 --- a/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_atlas_erc20_tutorial.md +++ b/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_atlas_erc20_tutorial.md @@ -1,47 +1,6 @@ --- title: ERC20 token with Atlas --- -## Custom ERC20 token code - -ERC20 tokens are a standard for fungible tokens, which can be traded and represent a fixed value. You’ve used ERC20 -tokens if you’ve transacted with USDC, DAI, USDT, LINK or UNI. - -The ERC20 token we’re going to deploy will allow users to mint and burn tokens. The entire smart contract code is as -follows: - -```solidity -// SPDX-License-Identifier: Unlicensed -pragma solidity ^0.8.19; - -import "@openzeppelin/contracts/token/ERC20/ERC20.sol"; -import "@openzeppelin/contracts/access/Ownable.sol"; -import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol"; - -contract TestToken is ERC20, Ownable, ERC20Burnable { - constructor(string memory name, string memory symbol) ERC20(name, symbol) { - _mint(msg.sender, 100 * 10 ** decimals()); - } - - function mint(address to, uint256 amount) public onlyOwner { - _mint(to, amount); - } -} -``` - -::callout{icon="i-heroicons-light-bulb"} -ZKsync Era is [EVM compatible](/build/resources/glossary#evm-compatible), so you can use existing popular libraries like OpenZeppelin. -:: - -The most important features are: - -- `Ownable` : this extension sets the deployer account as owner of the smart contract. It also introduces the - `onlyOwner` modifier that restricts the execution of certain functions to the owner of the contract. -- `ERC20Burnable`: this extension adds the `burn` and `burnFrom` functions to the smart contract. These functions - destroy tokens from a given account. -- `constructor`: called on deployment, the constructor will assign the given name and symbol to the token and mint 100 - units of it to the account that deployed the contract. -- `mint` : this function creates new token units to a given account. It uses the `onlyOwner` modifier so it can only be - called from the owner account. ## Deploy the smart contract diff --git a/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_remix_erc20_tutorial.md b/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_remix_erc20_tutorial.md index a15111fe..9808ecaa 100644 --- a/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_remix_erc20_tutorial.md +++ b/content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_remix_erc20_tutorial.md @@ -1,50 +1,6 @@ --- title: ERC20 with Remix --- -## Custom ERC20 token code - -ERC20 tokens are a standard for fungible tokens, which can be traded and represent a fixed value. You’ve used ERC20 -tokens if you’ve transacted with USDC, DAI, USDT, LINK or UNI. - -The ERC20 token we’re going to deploy will allow users to mint and burn tokens. The entire smart contract code is as -follows: - -```solidity -// SPDX-License-Identifier: Unlicensed -pragma solidity ^0.8.19; - -import "@openzeppelin/contracts/token/ERC20/ERC20.sol"; -import "@openzeppelin/contracts/access/Ownable.sol"; -import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol"; - -contract TestToken is ERC20, Ownable, ERC20Burnable { - constructor(string memory name, string memory symbol) - ERC20(name, symbol) Ownable(msg.sender) { - _mint(msg.sender, 100 * 10 ** decimals()); - } - - function mint(address to, uint256 amount) public onlyOwner { - _mint(to, amount); - } -} -``` - -::callout{icon="i-heroicons-light-bulb"} -ZKsync Era is [EVM compatible](/build/resources/glossary#evm-compatible), so you can use existing popular libraries like OpenZeppelin. -:: - -The most important features are: - -- `Ownable` : this extension sets the deployer account as owner of the smart contract. It also introduces the - `onlyOwner` modifier that restricts the execution of certain functions to the owner of the contract. -- `ERC20Burnable`: this extension adds the `burn` and `burnFrom` functions to the smart contract. These functions - destroy tokens from a given account. -- `constructor`: called on deployment, the constructor will assign the given name and symbol to the token and mint 100 - units of it to the account that deployed the contract. -- `mint` : this function creates new token units to a given account. It uses the `onlyOwner` modifier so it can only be - called from the owner account. - -## Deploy the smart contract The Remix IDE is an open-source web and desktop application that supports Ethereum smart contract development and deployment, offering tools for writing, testing, debugging, and deploying smart contracts written in Solidity to EVM @@ -54,10 +10,11 @@ compatible protocols. :display-partial{path="/_partials/_enable-remix-zksync-plugin"} -To open this project in Remix, use the “Clone” option from the file explorer to import it from the following GitHub -repository:`https://github.com/ZKsync-Community-Hub/zksync-quickstart-remix` +Click the button below to open the project in Remix and see the contract in the Remix code editor. -![Clone repo in Remix](/images/remix-plugin-clone-repo.gif) +:u-button{ icon="i-heroicons-code-bracket" size="lg" color="primary" variant="solid" :trailing="false" +to="https://remix.ethereum.org/?#activate=zkSync&call=zkSync//loadFromGithub//ZKsync-Community-Hub//zksync-quickstart-remix//" +target="_blank" label="Open project in Remix"} Once the project is imported, open the `contracts/TestToken.sol` file. To compile the contract, click on the ZKsync plugin on the left menu and then "Compile TestToken.sol". If you get a popup message requesting permissions to access @@ -69,11 +26,19 @@ bytecode. [Learn more about ZKsync custom compilers](/zk-stack/components/compiler/toolchain). :: -We will use our wallet’s configured network to connect and deploy our smart contract so make sure your wallet is -currently connected to the %%zk_testnet_name%%. In Remix, under the Environment Section, select “Wallet” and click on -“Connect Wallet”. +We will use our wallet’s configured +network to deploy our smart contract. In the ZKsync Remix plugin, under the Environment Section, select “Wallet” and click on +“Connect Wallet” as shown below: + +![Connect wallet in Remix](/images/remix-connect-wallet.gif) -To deploy the contract, click on “Deploy” and sign the transaction on your wallet. Congratulations, your ERC20 token +## Deploy the contract + +To deploy the contract, select the `TestToken.sol` contract on the on the “Deploy” section, check the "Verify contract" checkbox, and +click on “Deploy & Verify”. +Sign the transaction on your wallet and wait a few seconds until the transaction is confirmed. + +Congratulations, your ERC20 token contract is now deployed on %%zk_testnet_name%%! ## Interact with the ERC20 contract @@ -95,7 +60,7 @@ const TOKEN_AMOUNT = "123.55"; // Note that the script needs the ABI which is generated from the compilation artifact. // Make sure contract is compiled for ZKsync and artifacts are generated - const artifactsPath = `browser/contracts/artifacts/TestToken.json` // Change this for different path + const artifactsPath = `browser/artifacts/contracts/TestToken.sol/TestToken.json` const metadata = JSON.parse(await remix.call('fileManager', 'getFile', artifactsPath)) @@ -128,7 +93,7 @@ const TOKEN_AMOUNT = "123.55"; This scripts uses `ethers` to interact with the contract we’ve just deployed. ::callout{icon="i-heroicons-light-bulb"} -Existing libraries like `ethers` , `viem` and `web3.js` can be used to interact with smart contracts deployed on ZKsync. +Existing libraries like `ethers` , `viem` and `web3.js` can be used to interact with smart contracts deployed on ZKsync Era. :: Fill the following variables: @@ -137,8 +102,13 @@ Fill the following variables: - `RECEIVER_WALLET`: address of a different account that will receive new tokens. - `TOKEN_AMOUNT`: the amount of tokens we’ll send to the account. -With the `mint-token.ts` file open in the editor, click on the “▶️” button to run the script and see the output in the -terminal. +::callout{icon="i-heroicons-exclamation-triangle" color="amber"} +Open the "Deploy & run transactions" menu in Remix and select "Injected Provider - Metamask" +from the environment dropdown to target the network selected in your wallet when running scripts. +:: + +With the `mint-token.ts` file open in the editor, click on the “▶️” button to run the script. +Sign the transaction in your wallet and see the output in the terminal. ![ERC20 interact script in Remix](/images/101-erc20/remix-erc20-interact.png) diff --git a/content/00.build/05.start-coding/05.quick-start/_paymaster_intro/_remix_paymaster_intro.md b/content/00.build/05.start-coding/05.quick-start/_paymaster_intro/_remix_paymaster_intro.md index 69ed5eb0..dbbc8161 100644 --- a/content/00.build/05.start-coding/05.quick-start/_paymaster_intro/_remix_paymaster_intro.md +++ b/content/00.build/05.start-coding/05.quick-start/_paymaster_intro/_remix_paymaster_intro.md @@ -3,13 +3,15 @@ title: Paymaster with Remix --- ::callout{icon="i-heroicons-exclamation-triangle" color="amber"} -Remix does not support `zksync-ethers` yet so you can not use it to run this script. Use Atlas instead. +**The Remix provider does not support EIP712 transactions yet, which are required to interact with paymaster contracts. +Please use Atlas for this part.** :: -To open the project in Remix, use the “Clone” option from the file explorer to import it from the following GitHub -repository:`https://github.com/ZKsync-Community-Hub/zksync-quickstart-remix` +Click the button below to open the project in Remix and see the contract in the Remix code editor. -![Clone repo in Remix](/images/remix-plugin-clone-repo.gif) +:u-button{ icon="i-heroicons-code-bracket" size="lg" color="primary" variant="solid" :trailing="false" +to="https://remix.ethereum.org/?#activate=zkSync&call=zkSync//loadFromGithub//ZKsync-Community-Hub//zksync-quickstart-remix//" +target="_blank" label="Open project in Remix"} Once the project is imported, open the `scripts/paymaster-transaction.ts` file, which contains the code to send a transaction via the paymaster. Let’s go through the most important parts: @@ -129,6 +131,11 @@ const TOKEN_CONTRACT_ADDRESS = "" const NEW_MESSAGE = "This tx cost me no ETH!"; ``` +::callout{icon="i-heroicons-exclamation-triangle" color="amber"} +Open the "Deploy & run transactions" menu in Remix and select "Injected Provider - Metamask" +from the environment dropdown to target the network selected in your wallet when running scripts. +:: + Next, make sure the script file is selected in the Remix editor and click on the “▶️” button. You’ll see the progress in the console. ![Contract events in ZKsync explorer](/images/101-paymasters/remix-paymaster-tx.png) diff --git a/public/images/remix-connect-wallet.gif b/public/images/remix-connect-wallet.gif new file mode 100644 index 00000000..d025347c Binary files /dev/null and b/public/images/remix-connect-wallet.gif differ