feat: add EVM option to quickstart & 101

app.vue

@@ -45,8 +45,7 @@ useSeoMeta({
     <NuxtPwaManifest />
     <NuxtLoadingIndicator />
 
-    <!-- FIXME: Hack, we want to pass computed property while `useHeaderNav` expects an array -->
-    <HeaderComponent :links="computed(() => headerLinks()) as any" />
+    <HeaderComponent :links="unref(computed(() => headerLinks()))" />
 
     <UMain>
       <NuxtLayout>

content/00.zksync-era/10.guides/10.quick-start/1.index.md

@@ -10,13 +10,13 @@ In the first step, you will build and deploy a simple contract and interact with
 The second section will have you creating your own ERC20 token and the final section will
 introduce a specialized feature of ZKsync Era, native account abstraction and paymasters.
 
-This section is designed for developers new to ZKsync Era and uses online IDE's - Remix and AtlasZK -
+This section is designed for developers new to ZKsync Era and uses Remix - an online IDE -
 to help you learn as quickly and efficiently as possible.
 
 ## Get started
 
 - If you haven't already added ZKsync Era to your wallet, follow the instructions in [Connect ZKsync Era to your wallet](/zksync-era/environment).
-- Continue to [Deploy your first contract](/zksync-era/guides/quick-start/deploy-your-first-contract) to learn how to use Remix or Atlas
-  to deploy a contract onto ZKsync Era.
+- Continue to [Deploy your first contract](/zksync-era/guides/quick-start/deploy-your-first-contract)
+  to learn how to use Remix to deploy a contract onto ZKsync Era.
 - If you are familiar with ZKsync Era and want to develop using `zksync-cli` locally
   on your machine, you can jump over to the [ZKsync 101](/zksync-era/guides/zksync-101) section.

content/00.zksync-era/10.guides/10.quick-start/3.deploy-your-first-contract.md

@@ -1,110 +1,60 @@
 ---
 title: Deploy your first contract
-description: Deploy a smart contract to ZKsync from your browser using Remix or Atlas in under 5 minutes
+description: Deploy a smart contract to ZKsync from your browser using Remix in under 5 minutes
 ---
 
 This tutorial shows you how to deploy and interact with a smart contract on ZKsync Era in less than 5 minutes.
 It will help you get familiar with the ZKsync smart contract development and deployment process using different tools.
 
-<!-- markdownlint-disable-next-line -->
-<iframe src="https://www.youtube.com/embed/gumsrrXtIsA?si=NAjA4fJJvqSpCBXZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="w-full aspect-[16/9]"></iframe>
-
 In this section you will learn how to:
 
 :check-icon Build a smart contract to exchange messages with Zeek.
 
 :check-icon Deploy the smart contract to the %%zk_testnet_name%%.
 
-:check-icon Interact with the contract from your browser using Remix or Atlas.
+:check-icon Interact with the contract from your browser using Remix.
 
 ## Prerequisites
 
 1. Before you start, make sure that
 [you’ve configured the %%zk_testnet_name%% in your wallet](/zksync-era/environment).
-2. Have at least 0.5 %%zk_testnet_name%% ETH. If you need more, use [one of the faucets](/zksync-era/ecosystem/network-faucets).
+2. Have at least 0.05 %%zk_testnet_name%% ETH. If you need more, use [one of the faucets](/zksync-era/ecosystem/network-faucets).
 
 ## Review the smart contract code
 
 The smart contract will store messages from users and emit events with replies from Zeek.
 The entire code is as follows:
 
 ```solidity
-// SPDX-License-Identifier: MIT
-pragma solidity ^0.8.0;
-
-contract ZeekMessages {
-    string[] private messages;
-
-    // Event to acknowledge a new message
-    event MessageReceived(string);
-
-    constructor() {
-        // Zeek initializes the contract with a welcome message
-        emit MessageReceived("Zeek welcomes you to ZKsync!");
-    }
-
-    function sendMessage(string memory _message) public {
-        messages.push(_message);
-
-        // Acknowledge the message receipt with Zeek's reply
-        emit MessageReceived("ZK is the endgame - Message received!");
-    }
-
-    // Function to count the total messages sent to Zeek
-    function getTotalMessages() public view returns (uint) {
-        return messages.length;
-    }
-
-    // Function to return the last message sent to Zeek
-    function getLastMessage() public view returns (string memory) {
-        require(messages.length > 0, "No messages sent to Zeek yet!");
-        return messages[messages.length - 1];
-    }
-}
-
+:code-import{filePath="hardhat-sol/contracts/ZeekMessages.sol"}
 ```
 
-The Solidity smart contract contains two functions:
+The Solidity smart contract contains three functions:
 
 - `sendMessage` stores the messages sent by users in the `messages` state variable.
 - `getTotalMessages` returns the number of messages stored in the smart contract.
 - `getLastMessage` returns the last message sent.
 
-::callout{icon="i-heroicons-light-bulb"}
-ZKsync Era is [EVM compatible](/zksync-protocol/glossary#evm-compatible).
-You can write smart contracts with Solidity or Vyper and use existing popular libraries like OpenZeppelin, just like on Ethereum.
-::
-
 ## Compile and deploy the contract
 
-To compile and deploy the contract you can use either Atlas or Remix:
+To compile and deploy the contract you can use either EVM or EraVM bytecode:
+
+:display_partial{path="/_partials/_eravm_vs_evm"}
+
+<br>
 
 ::content-switcher
 ---
 items: [{
-  label: 'Atlas',
-  partial: '_deploy_first/_atlas_deploy_contract'
+  label: 'EVM',
+  partial: '_deploy_first/_evm_remix_deploy_contract'
 }, {
-  label: 'Remix',
-  partial: '_deploy_first/_remix_deploy_contract'
+  label: 'EraVM',
+  partial: '_deploy_first/_eravm_remix_deploy_contract'
 }]
 ---
 ::
 
-## Check the contract in explorer
-
-Copy the smart contract address from Atlas/Remix and search it via the [%%zk_testnet_name%%
-explorer](%%zk_testnet_block_explorer_url%%). You’ll see the contract has a transaction from the message you just sent.
-
-![Contract in ZKsync explorer](/images/101-quickstart/101-contract-deployed.png)
-
-The status will be “Processed” on ZKsync Era and “Sending” on Ethereum. [Learn more about the transaction lifecycle on ZKsync](/zksync-protocol/rollup/transaction-lifecycle).
-
-In the “Contract” tab you’ll see the contract source code as Atlas and Remix automatically verified the contract for us.
-When a smart contract is verified in a block explorer, it means that the source code of the contract has been published
-and matched to the compiled version on the blockchain enhancing transparency, as users can review the contract’s source
-code to understand its functions and intentions.
-
 Finally in the “Events” tab, you’ll see the replies from Zeek as these are emitted as events in our smart contract.
 
 ![Contract events in ZKsync explorer](/images/101-quickstart/101-contract-events.png)
@@ -115,9 +65,10 @@ ZK is the endgame ✌️
 
 - **EVM-compatibility**: ZKsync Era is EVM-compatible and you can write smart contracts in Solidity or Vyper as in
   Ethereum.
-- **Custom compilers**: smart contracts deployed to ZKsync Era must be compiled with the customs compilers: `zksolc` for
-  Solidity and `zkvyper` for Vyper.
-- **Browser-based IDEs**: Existing tools like Atlas and Remix use ZKsync custom compilers under the hood.
+- **Custom compilers**: smart contracts deployed to ZKsync Era can either be compiled as EVM using default compilers and tools,
+  or EraVM with the custom compilers:
+  `zksolc` for Solidity and `zkvyper` for Vyper.
+- **Browser-based IDEs**: You can use existing tools like Remix to deploy EVM or EraVM contracts.
 
 ## Next steps
 

content/00.zksync-era/10.guides/10.quick-start/4.erc20-token.md

@@ -9,13 +9,13 @@ This is what you're going to do:
 
 :check-icon Build an ERC20 token smart contract with additional custom logic
 
-:check-icon Deploy the smart contract to the %%zk_testnet_name%% using Remix or Atlas.
+:check-icon Deploy the smart contract to the %%zk_testnet_name%% using Remix.
 
 ## Prerequisites
 
 1. Before you start, make sure that
 [you’ve configured the %%zk_testnet_name%% in your wallet](/zksync-era/environment).
-2. Have at least 0.5 %%zk_testnet_name%% ETH. If you need more, use [one of the faucets](/zksync-era/ecosystem/network-faucets).
+2. Have at least 0.05 %%zk_testnet_name%% ETH. If you need more, use [one of the faucets](/zksync-era/ecosystem/network-faucets).
 
 ## Custom ERC20 token code
 
@@ -26,28 +26,9 @@ The ERC20 token we’re going to deploy will allow users to mint and burn tokens
 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);
-    }
-}
+:code-import{filePath="hardhat-sol/contracts/TestToken.sol"}
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
-ZKsync Era is [EVM compatible](/zksync-protocol/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
@@ -61,16 +42,20 @@ The most important features are:
 
 ## Deploy and interact with the contract
 
-To complete this tutorial you'll use either Atlas or Remix. Select your preferred tool:
+To compile and deploy the contract you can use either EVM or EraVM:
+
+:display_partial{path="/_partials/_eravm_vs_evm"}
+
+<br>
 
 ::content-switcher
 ---
 items: [{
-  label: 'Atlas',
-  partial: '_erc20_tutorial/_atlas_erc20_tutorial'
+  label: 'EVM',
+  partial: '_erc20_tutorial/_evm'
 }, {
-  label: 'Remix',
-  partial: '_erc20_tutorial/_remix_erc20_tutorial'
+  label: 'EraVM',
+  partial: '_erc20_tutorial/_eravm'
 }]
 ---
 ::
@@ -92,7 +77,7 @@ The ERC20 token code is provided “as is” without any express or implied warr
 
 ## Next steps
 
-- Continue learning about [paymasters and paying transaction fees with this ERC20 token](/zksync-era/guides/quick-start/paymasters-introduction).
+- Continue building with ZKsync in the [ZKsync 101 section](/zksync-era/guides/zksync-101).
 - Join the [ZKsync developer community in Discord](https://join.zksync.dev/) where you can ask any questions about this
  tutorial in the `#dev-quickstart` channel.
 - Join our [GitHub Discussions Community](%%zk_git_repo_zksync-developers%%/discussions/) to