feat: 101 content

components/content/NetworkAdder.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  network: { type: String; required: true };
+}>();
+
+const chainName = props.network === 'mainnet' ? 'zkSync Era Mainnet' : 'zkSync Sepolia Testnet';
+
+function addNetwork() {
+  const config = {
+    mainnet: {
+      chainId: '0x144',
+      rpcUrls: ['https://mainnet.era.zksync.io'],
+      blockExplorerUrls: ['https://explorer.zksync.io/'],
+    },
+    testnet: {
+      chainId: '0x12c',
+      rpcUrls: ['https://sepolia.era.zksync.dev'],
+      blockExplorerUrls: ['https://sepolia.explorer.zksync.dev/'],
+    },
+  }[props.network];
+
+  window.ethereum.request({
+    method: 'wallet_addEthereumChain',
+    params: [
+      {
+        chainId: config.chainId,
+        chainName: chainName,
+        nativeCurrency: { name: 'Ethereum', symbol: 'ETH', decimals: 18 },
+        iconUrls: ['https://docs.zksync.io/favicon-32x32.png'],
+        rpcUrls: config.rpcUrls,
+        blockExplorerUrls: config.blockExplorerUrls,
+      },
+    ],
+  });
+}
+</script>
+
+<template>
+  <UButton
+    type="button"
+    icon="metamask"
+    @click="addNetwork"
+  >
+    <img
+      width="32"
+      src="/images/metamask_logo.svg"
+      class="m-0 p-0"
+      :alt="Metamask"
+    />
+    Add {{ chainName }}
+  </UButton>
+</template>
+
+<style scoped>
+.add-network {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  gap: 4px;
+  cursor: pointer;
+  border: 1px solid #000;
+}
+
+img[src*='/images/metamask_logo.svg'] {
+  content: url('/images/metamask_logo.svg');
+}
+</style>

content/10.zksync-101/1.zksync-overview.md

@@ -0,0 +1,61 @@
+---
+title: zkSync overview
+description: A quick overview of what is zkSync
+---
+
+## What is zkSync?
+
+**zkSync Era** is a Layer 2 **[ZK rollup](https://docs.zksync.io/build/developer-reference/rollups.html#what-are-zk-rollups)**, a trustless protocol that uses cryptographic validity proofs to provide scalable and low-cost transactions on Ethereum. In zkSync Era, computation is performed off-chain and most data is stored off-chain as well. Transactions are bundled into batches before generating a validity proof. As all validity proofs are proven on the Ethereum mainchain, users enjoy the same security level as in Ethereum.
+
+DIAGRAM L1-L2
+
+zkSync Era is made to look and feel like Ethereum, but with a higher throughput and lower fees. Just like on Ethereum, smart contracts are written in Solidity/Vyper and can be called using the same clients as the other EVM-compatible chains.
+
+You don't need to register a separate private key before using it; zkSync supports existing Ethereum wallets out of the box. 
+
+## Main features
+
+
+:check-icon Mainnet-like security with zero reliance on 3rd parties.
+
+:check-icon Permissionless EVM-compatible smart contracts.
+
+:check-icon Preserving key EVM features, such as smart contract composability.
+
+:check-icon Standard Web3 API.
+
+:check-icon State updates via transaction outputs (also known as state diffs) which provides significant cost savings over transaction inputs.
+
+:check-icon Native account abstraction with improvements over EIP4337 (implemented in Ethereum and other rollups).
+
+You can find [more information about zkSync Era in l2beat](https://l2beat.com/scaling/projects/zksync-era#stage).
+
+## Developer experience
+
+zkSync Era was built to provide a similar developer experience as Ethereum.
+
+:check-icon Smart contracts can be written in Solidity or Vyper.
+
+:check-icon Most contracts work out of the box so migrating projects is seamless.
+
+:check-icon Smart contracts are compiled with custom compilers: **[zksolc and zkvyper](https://docs.zksync.io/zk-stack/components/compiler/toolchain/overview.html)**.
+
+:check-icon Use existing frameworks like **[Hardhat](https://docs.zksync.io/build/tooling/hardhat/getting-started.html),** libraries like Ethers, Viem, or web3.js, and tools like theGraph, Thirdweb, or Chainlink.
+
+:check-icon Web3 API compatibility enables support of most developer tools.
+
+:check-icon Different **[tools for testing and debugging locally](https://docs.zksync.io/build/test-and-debug/getting-started.html)**.
+
+## User experience
+
+Interacting with applications built on zkSync Era is seamless, cheap and fast.
+
+- Transactions have instant confirmations and fast finality on L1.
+- Transaction fees are extremely low (see [average transaction costs here](https://www.growthepie.xyz/fundamentals/transaction-costs)).
+- Transaction fees can be conveniently paid with ERC20 tokens (e.g. USDC) thanks to **[native account abstraction and paymasters](https://docs.zksync.io/build/developer-reference/account-abstraction.html)**.
+- Support for existing Ethereum-based wallets like Metamask, TrustWallet, Zerion or Rabby.
+
+## Get started
+
+- Follow [this guide to Add the zkSync network to your wallet](./2.connect-zksync.md).
+- Deploy your first smart contract to zkSync Era in the **[quickstart](3.quickstart.md)**.

content/10.zksync-101/2.connect-zksync.md

@@ -0,0 +1,45 @@
+---
+title: Connect to zkSync
+description: Step-by-step guide to connect your wallet to zkSync.
+---
+
+## Add zkSync Era to your wallet
+
+You can add zkSync Era to your wallet using the buttons below:
+
+<network-adder network="mainnet"></network-adder>
+<network-adder network="testnet"></network-adder>
+
+
+
+### Manual settings
+
+To manually add zkSync Era as a custom network in your wallet, follow these steps:
+
+1. Find the “Add Network” option in your wallet (in Metamask, you can find this in the networks dropdown).
+2. Click “Add Network"
+3. Fill in the following details for the zkSync Era network you want to add:
+
+**Mainnet network details**
+
+- Network Name: `zkSync Era Mainnet`
+- RPC URL: `https://mainnet.era.zksync.io`
+- Chain ID: `324`
+- Currency Symbol: `ETH`
+- Block Explorer URL: `https://explorer.zksync.io/`
+- WebSocket URL: `wss://mainnet.era.zksync.io/ws`
+
+**Sepolia testnet network details:**
+
+- Network Name: `zkSync Era Sepolia Testnet`
+- RPC URL: `https://sepolia.era.zksync.dev`
+- Chain ID: `300`
+- Currency Symbol: `ETH`
+- Block Explorer URL: `https://sepolia.explorer.zksync.io/`
+- WebSocket URL: `wss://sepolia.era.zksync.dev/ws`
+
+Click on "Save" to add the zkSync Era network to your wallet.
+
+## **How to get started?**
+
+Begin by deploying your first smart contract to zkSync Era in the **[quickstart](3.quickstart.md)**.

content/10.zksync-101/3.quickstart.md

@@ -0,0 +1,112 @@
+---
+title: Quickstart
+description: Deploy a smart contract to zkSync 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.
+
+This is what we're going to do:
+
+:check-icon Fund your wallet with zkSync Sepolia ETH.
+
+:check-icon Build a smart contract to exchange secret messages with Zeek.
+
+:check-icon Deploy the smart contract to the zkSync Era Sepolia testnet using Remix or Atlas.
+
+Before you start, make sure that [you’ve configured the zkSync Sepolia tesnet in your browser wallet by following the instructions here](./2.connect-zksync.md).
+
+## Step 1: Fund your wallet
+
+zkSync Testnet ETH is used to deploy and interact with smart contracts on the zkSync Sepolia testnet. You can get it  directly into zkSync Sepolia testnet using the **[following faucet provided by LearnWeb3](https://learnweb3.io/faucets/zksync_sepolia/)** (GitHub authentication required) or any of the [other available faucets](#).
+
+You can also bridge SepoliaETH to the zkSync Sepolia testnet using the **[zkSync bridge](https://portal.zksync.io/bridge/?network=sepolia)**.
+
+You can check the balance of your account in the **[zkSync Sepolia explorer](https://sepolia.explorer.zksync.io/)**.
+
+## Review the smart contract code
+
+The smart contract will store messages from users in a hashed format and emit events with replies from Zeek. The entire code is as follows:
+
+```solidity
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.0;
+
+contract ZeekSecretMessages {
+    bytes32[] 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 to send a "secret" message to Zeek
+    function sendMessage(string memory _message) public {
+        bytes32 hashedMessage = keccak256(abi.encodePacked(_message));
+        messages.push(hashedMessage);
+
+        // 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;
+    }
+}
+```
+
+The Solidity smart contract contains two functions:
+
+- `sendMessage` stores the messages sent by users in the `messages` state variable.
+- `getTotalMessages` returns the number of messages stored in the smart contract.
+
+::callout{icon="i-heroicons-light-bulb"}
+zkSync Era is EVM compatible. You can write smart contracts with Solidity or Vyper and use existing popular libraries like OpenZeppelin.
+::
+
+## Step 2: deploy the contract
+
+To deploy the contract we can use either Atlas or Remix:
+
+::content-switcher
+---
+items: [{
+  label: 'Atlas',
+  partial: '_quickstart/_atlas_deploy_contract'
+}, {
+  label: 'Remix',
+  partial: '_quickstart/_remix_deploy_contract'
+}]
+---
+::
+
+## Step 3: check the contract in explorer
+
+Copy the smart contract address from Atlas/Remix and search it the zkSync Sepolia testnet explorer. You’ll see the contract has a transaction from the message we just sent.
+
+![Screenshot 2024-04-04 at 13.52.00.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/703ee435-9e35-441a-b595-a8f42972ac1a/ee62dfbb-af1e-4127-9240-b2b0f618389f/Screenshot_2024-04-04_at_13.52.00.png)
+
+Click in the transaction hash to check all its details, like timestamp, the account that send it, transaction fee etc. The status will be “Processed” on zkSync and “Sending” on Ethereum. To learn more about the transaction lifecycle on zkSync, check out this section of the docs.
+
+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.
+
+![Screenshot 2024-04-05 at 12.30.50.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/703ee435-9e35-441a-b595-a8f42972ac1a/02ee6b93-1a2b-4618-afa3-012d250ea9cc/Screenshot_2024-04-05_at_12.30.50.png)
+
+ZK is the endgame!
+
+## Takeaways
+
+- **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.
+
+## Next steps
+
+- Join the zkSync developer community in Discord where you can ask any questions about this tutorial in the #dev-101 channel
+- Continue learning by deploying an ERC20 token to zkSync Era.
+- Join our GitHub Discussions community to help other devs building on zkSync or share your project.

content/10.zksync-101/4.erc20-token.md

@@ -0,0 +1,43 @@
+---
+title: ERC20 token tutorial
+description: In this tutorial we'll deploy and ERC20 token to zkSync
+---
+
+This tutorial shows you how to deploy and interact with an ERC20 token on zkSync Era. 
+
+This is what we’re going to do:
+
+:check-icon Build an ERC20 token smart contract with additional custom logic
+
+:check-icon Deploy the smart contract to the zkSync Era Sepolia testnet using Remix or Atlas.
+
+## Prerequisites
+
+Before you start, make sure that you’ve configured the zkSync Sepolia tesnet in your browser wallet by following the instructions here.
+
+In addition, fund your wallet with testnet ETH on zkSync Sepolia testnet.
+
+To complete this tutorial we’ll use either Atlas or Remix. Select your preferred tool:
+
+::content-switcher
+---
+items: [{
+  label: 'Atlas',
+  partial: '_erc20_tutorial/_atlas_erc20_tutorial'
+}, {
+  label: 'Remix',
+  partial: '_erc20_tutorial/_remix_erc20_tutorial'
+}]
+---
+::
+
+## Takeaways
+
+- **zkSync is EVM compatible** and supports existing smart contract libraries like OpenZeppelin
+- **Use popular libraries like** `ethers` , `viem`, or `web3.js` to interact with smart contracts deployed on zkSync.
+
+## Next steps
+
+- Join the zkSync developer community in Discord where you can ask any questions about this tutorial in the #dev-101 channel
+- Continue learning by deploying an ERC20 token to zkSync Era.
+- Join our GitHub Discussions community to help other devs building on zkSync or share your project.