zksync 101 content

.prettierignore

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

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>`,
+      },
+    },
+  },
+};

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>

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](faucet)
+- Deploy your first smart contract to zkSync Era in the **[quickstart](quickstart)**.

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="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?
+
+Begin by [getting testnet funds from one of the available faucets](faucet).

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

@@ -0,0 +1,45 @@
+---
+title: Network Faucets
+description: Get testnet funds to build and deploy to %%zk_testnet_name%%.
+---
+## %%zk_testnet_name%% faucets
+
+Use any of the following faucets to get funds directly on %%zk_testnet_name%%:
+
+### 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 %%zk_testnet_name%% ETH.
+
+### LearnWeb3
+
+You can use [LearnWeb3's zkSync Sepolia Faucet](https://learnweb3.io/faucets/zksync_sepolia/) to claim zkSync Sepolia
+Testnet ETH.
+
+## Sepolia faucets
+
+::callout{icon="i-heroicons-light-bulb"}
+Use any of the following faucets to claim SepoliaETH, which you can bridge to %%zk_testnet_name%% 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
+
+[Circle's Testnet Faucet](https://faucet.circle.com/) provides USDC on zkSync Sepolia or Ethereum
+Sepolia Testnet.
+
+### Aave ERC20 token faucet
+
+[Aave's Sepolia faucet](https://staging.aave.com/faucet/) provides popular ERC20 tokens like
+WBTC, USDT, LINK, AAVE or DAI.
+
+## Next steps
+
+Deploy your first smart contract to zkSync following the [quickstart tutorial](quickstart).