Merge branch 'staging' into fix-QA-bugs

matter-labs · Apr 30, 2024 · e3d8174 · e3d8174
2 parents 50bff7e + 70a91e2
commit e3d8174
Show file tree

Hide file tree

Showing 47 changed files with 1,264 additions and 29 deletions.
diff --git a/app.vue b/app.vue
@@ -72,6 +72,10 @@ const links = computed(() => {
       to: '/ecosystem',
       active: route.path.startsWith('/ecosystem'),
     },
+    {
+      label: 'Cookbook',
+      to: 'https://community-cookbook-staging.web.app/',
+    },
   ];
 });
 </script>

diff --git a/assets/custom-icons.ts b/assets/custom-icons.ts
@@ -0,0 +1,68 @@
+export const customIcons = {
+  custom: {
+    icons: {
+      'metamask-logo': {
+        body: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 204.8 192.4" style="enable-background:new 0 0 204.8 192.4;" xml:space="preserve">
+     <style type="text/css">
+       .st0{display:none;}
+       .st1{fill:#F5841F;}
+       .st2{fill:#E27625;}
+       .st3{fill:#D7C1B3;}
+       .st4{fill:#2F343B;}
+       .st5{fill:#CC6228;}
+       .st6{fill:#C0AD9E;}
+       .st7{fill:#763E1A;}
+     </style>
+     <g id="bg_x28_do_not_export_x29_" class="st0">
+     </g>
+     <g id="MM_Head_background__x28_Do_not_edit_x29_">
+       <g>
+         <path class="st1" d="M167.4,96.1l6.9-8.1l-3-2.2l4.8-4.4l-3.7-2.8l4.8-3.6l-3.1-2.4l5-24.4l-7.6-22.6 M171.5,25.6l-48.8,18.1l0,0
+           l0,0H82l0,0L33.2,25.6l0.3,0.2l-0.3-0.2l-7.6,22.6l5.1,24.4L27.5,75l4.9,3.6l-3.7,2.8l4.8,4.4l-3,2.2l6.9,8.1l-10.5,32.4h0l0,0
+           l9.7,33.1l34.1-9.4l0-0.1l0,0.1l0,0l0,0l0,0v0l0,0l0,0l0,0l6.6,5.4l13.5,9.2h23.1l13.5-9.2l6.6-5.4l0,0v0l0,0l0,0l34.2,9.4
+           l9.8-33.1l0,0h0l-10.6-32.4 M70.7,152.1L70.7,152.1L70.7,152.1"/>
+       </g>
+     </g>
+     <g id="Logos">
+       <g>
+         <polygon class="st2" points="171.5,25.6 111.6,69.7 122.7,43.7 		"/>
+         <polygon class="st2" points="33.2,25.6 92.6,70.1 82,43.7 		"/>
+         <polygon class="st2" points="150,127.9 134,152.1 168.2,161.5 178,128.4 		"/>
+         <polygon class="st2" points="26.9,128.4 36.6,161.5 70.7,152.1 54.8,127.9 		"/>
+         <polygon class="st2" points="68.9,86.9 59.4,101.2 93.2,102.7 92.1,66.5 		"/>
+         <polygon class="st2" points="135.9,86.9 112.3,66.1 111.6,102.7 145.4,101.2 		"/>
+         <polygon class="st2" points="70.7,152.1 91.2,142.3 73.5,128.7 		"/>
+         <polygon class="st2" points="113.6,142.3 134,152.1 131.2,128.7 		"/>
+         <polygon class="st3" points="134,152.1 113.6,142.3 115.3,155.5 115.1,161.1 		"/>
+         <polygon class="st3" points="70.7,152.1 89.7,161.1 89.6,155.5 91.2,142.3 		"/>
+         <polygon class="st4" points="90,119.9 73.1,115 85.1,109.5 		"/>
+         <polygon class="st4" points="114.7,119.9 119.7,109.5 131.7,115 		"/>
+         <polygon class="st5" points="70.7,152.1 73.7,127.9 54.8,128.4 		"/>
+         <polygon class="st5" points="131.1,127.9 134,152.1 150,128.4 		"/>
+         <polygon class="st5" points="145.4,101.2 111.6,102.7 114.7,119.9 119.7,109.5 131.7,115 		"/>
+         <polygon class="st5" points="73.1,115 85.1,109.5 90,119.9 93.2,102.7 59.4,101.2 		"/>
+         <polygon class="st2" points="59.4,101.2 73.5,128.7 73.1,115 		"/>
+         <polygon class="st2" points="131.7,115 131.2,128.7 145.4,101.2 		"/>
+         <polygon class="st2" points="93.2,102.7 90,119.9 94,140.3 94.9,113.5 		"/>
+         <polygon class="st2" points="111.6,102.7 109.9,113.4 110.7,140.3 114.7,119.9 		"/>
+         <polygon class="st1" points="114.7,119.9 110.7,140.3 113.6,142.3 131.2,128.7 131.7,115 		"/>
+         <polygon class="st1" points="73.1,115 73.5,128.7 91.2,142.3 94,140.3 90,119.9 		"/>
+         <polygon class="st6" points="115.1,161.1 115.3,155.5 113.7,154.2 91,154.2 89.6,155.5 89.7,161.1 70.7,152.1 77.3,157.5 
+           90.8,166.8 113.9,166.8 127.4,157.5 134,152.1 		"/>
+         <polygon class="st4" points="113.6,142.3 110.7,140.3 94,140.3 91.2,142.3 89.6,155.5 91,154.2 113.7,154.2 115.3,155.5 		"/>
+         <polygon class="st7" points="174.1,72.6 179.1,48.2 171.5,25.6 113.6,68.2 135.9,86.9 167.4,96.1 174.3,88 171.3,85.8 176.1,81.5 
+           172.4,78.6 177.2,75 		"/>
+         <polygon class="st7" points="25.6,48.2 30.7,72.6 27.5,75 32.3,78.7 28.6,81.5 33.4,85.8 30.4,88 37.4,96.1 68.9,86.9 91.2,68.2 
+           33.2,25.6 		"/>
+         <polygon class="st1" points="167.4,96.1 135.9,86.9 145.4,101.2 131.2,128.7 150,128.4 178,128.4 		"/>
+         <polygon class="st1" points="68.9,86.9 37.4,96.1 26.9,128.4 54.8,128.4 73.5,128.7 59.4,101.2 		"/>
+         <polygon class="st1" points="111.6,102.7 113.6,68.2 122.7,43.7 82,43.7 91.2,68.2 93.2,102.7 94,113.5 94,140.3 110.7,140.3 
+           110.8,113.5 		"/>
+       </g>
+     </g>
+     </svg>`,
+      },
+    },
+  },
+};
diff --git a/components/content/NetworkAdder.vue b/components/content/NetworkAdder.vue
@@ -0,0 +1,48 @@
+<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="i-custom-metamask-logo"
+    size="xl"
+    :variant="chainName === 'zkSync Era Mainnet' ? 'solid' : 'soft'"
+    @click="addNetwork"
+  >
+    Add {{ chainName }}
+  </UButton>
+</template>
diff --git a/content/00.build/00.zksync-101/1.zksync-overview.md b/content/00.build/00.zksync-101/1.zksync-overview.md
@@ -0,0 +1,73 @@
+---
+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.
+
+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](connect-zksync).
+- Get [testnet funds from one of the faucets](/ecosystem/network-faucets)
+- Deploy your first smart contract to zkSync Era in the **[quickstart](quickstart)**.
diff --git a/content/00.build/00.zksync-101/2.connect-zksync.md b/content/00.build/00.zksync-101/2.connect-zksync.md
@@ -0,0 +1,44 @@
+---
+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="testnet" }
+
+### 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?
+
+1. Begin by [getting testnet funds from one of the available faucets](/ecosystem/network-faucets).
+2. Deploy your first smart contract [following the quickstart](/build/zksync-101/quickstart)
diff --git a/content/00.build/00.zksync-101/3.quickstart.md b/content/00.build/00.zksync-101/3.quickstart.md
@@ -0,0 +1,121 @@
+---
+title: Deploy your first contract
+description: Deploy a smart contract to zkSync from your browser 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 Build a smart contract to exchange secret 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.
+
+## Prerequisites
+
+1. Before you start, make sure that
+[you’ve configured the zkSync Sepolia tesnet in your browser wallet by following the instructions here](connect-zksync).
+1. In addition, fund your wallet with %%zk_testnet_name%% ETH using [one of the available faucets](/ecosystem/network-faucets).
+
+## 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](/build/resources/glossary#evm-compatible).
+You can write smart contracts with Solidity or Vyper and use existing popular libraries like OpenZeppelin.
+::
+
+## 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'
+}]
+---
+::
+
+## Check the contract in explorer
+
+Copy the smart contract address from Atlas/Remix and search it via the [%%zk_testnet_name%%%%zk_testnet_block_explorer_url%%
+explorer](%%zk_testnet_block_explorer_url%%). 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. [Learn more about the transaction lifecycle on
+zkSync](/zk-stack/concepts/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)
+
+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](https://join.zksync.dev/) where you can ask any questions about this tutorial in the #dev-101
+  channel
+- Continue learning by [deploying an ERC20 token to zkSync](erc20-token).
+- Join our :external-link{text="GitHub Discussions Community" href="%%zk_git_repo_zksync-developers%%/discussions/"} to
+  help other devs building on zkSync or share your project.