zksync 101 content

.prettierignore

@@ -3,3 +3,4 @@ node_modules
 .idea
 public
 **/*.md
+*.md

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/00.build/00.zksync-101/1.zksync-overview.md

@@ -0,0 +1,75 @@
+---
+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).
+- Get [testnet funds from one of the faucets](./3.faucet.md)
+- Deploy your first smart contract to zkSync Era in the **[quickstart](4.quickstart.md)**.

content/00.build/00.zksync-101/2.connect-zksync.md

@@ -0,0 +1,43 @@
+---
+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](4.quickstart.md)**.

content/00.build/00.zksync-101/3.faucet.md

@@ -0,0 +1,38 @@
+---
+title: Network Faucets
+description: Get testnet funds to build and deploy to zkSync testnet.
+---
+
+To access the testnet funds (Sepolia) you can use one of the following third party faucets:
+
+## zkSync testnet faucet by Chainstack
+
+[Chainstack Faucet](https://faucet.chainstack.com/zksync-testnet-faucet) is an easy to use Multi-Chain Faucet. You can
+use Chainstack Faucet to claim zkSync Sepolia Testnet **0.05 ETH every 24 hours**. Chainstack API key is required.
+
+## LearnWeb3
+
+You can use [LearnWeb3's zkSync Sepolia Faucet](https://learnweb3.io/faucets/zksync_sepolia/) to claim zkSync Sepolia
+Testnet **0.01 ETH per day**. GitHub authentication is required.
+
+## Sepolia faucets
+
+Use any of the following faucets to claim SepoliaETH, which you can bridge to zkSync testnet using the [zkSync
+bridge](https://portal.zksync.io/bridge/?network=sepolia).
+
+- [LearnWeb3 Sepolia faucet](https://learnweb3.io/faucets/sepolia)
+- [QuickNode Sepolia faucet](https://faucet.quicknode.com/ethereum/sepolia)
+- [Alchemy Sepolia faucet](https://sepoliafaucet.com/)
+- [Proof of Work Sepolia faucet](https://sepolia-faucet.pk910.de/)
+- [Infura Sepolia faucet](https://www.infura.io/faucet/sepolia/)
+- [Ethereum Ecosystem Sepolia faucet](https://www.ethereum-ecosystem.com/faucets/ethereum-sepolia)
+
+## Circle USDC faucet
+
+You can use [Circle's Testnet Faucet](https://faucet.circle.com/) to claim testnet USDC on zkSync Sepolia or Ethereum
+Sepolia Testnet.
+
+## Aave ERC20 token faucet
+
+Aave provides a [Sepolia faucet](https://staging.aave.com/faucet/) that you can use to claim popular ERC20 tokens like
+WBTC, USDT, LINK, AAVE or DAI.

content/00.build/00.zksync-101/4.quickstart.md

@@ -0,0 +1,130 @@
+---
+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.
+
+![Contract in zkSync explorer](/images/101-quickstart/101-contract-deployed.png)
+
+Click on the transaction hash link 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.
+
+![Contract events in zkSync explorer](/images/101-quickstart/101-contract-events.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.