diff --git a/.vscode/settings.json b/.vscode/settings.json index b95ecf4f..e61fdac9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,5 +9,8 @@ "files.eol": "\n", "[markdown]": { "editor.wordWrap": "on" + }, + "editor.codeActionsOnSave": { + "source.fixAll.markdownlint": true } } diff --git a/bun.lockb b/bun.lockb index 3dd88caf..36a4beac 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/content/DeployContract.vue b/components/content/DeployContract.vue new file mode 100644 index 00000000..136b5d6d --- /dev/null +++ b/components/content/DeployContract.vue @@ -0,0 +1,43 @@ + + + diff --git a/components/content/EnvSetup.vue b/components/content/EnvSetup.vue new file mode 100644 index 00000000..9bd6db3f --- /dev/null +++ b/components/content/EnvSetup.vue @@ -0,0 +1,51 @@ + + + diff --git a/components/content/IconList.vue b/components/content/IconList.vue new file mode 100644 index 00000000..ad555d74 --- /dev/null +++ b/components/content/IconList.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/components/content/PageLinks.vue b/components/content/PageLinks.vue new file mode 100644 index 00000000..6a6fa3a5 --- /dev/null +++ b/components/content/PageLinks.vue @@ -0,0 +1,19 @@ + + + diff --git a/components/content/WalletSetup.vue b/components/content/WalletSetup.vue new file mode 100644 index 00000000..7ff271f7 --- /dev/null +++ b/components/content/WalletSetup.vue @@ -0,0 +1,43 @@ + + + diff --git a/content/10.getting-started/1.index.md b/content/10.getting-started/1.index.md index f7ab24ef..d6ffd040 100644 --- a/content/10.getting-started/1.index.md +++ b/content/10.getting-started/1.index.md @@ -1,79 +1,44 @@ --- -title: Introduction -description: Welcome to Nuxt UI Pro documentation template. +title: Deploy Smart Contracts on zkSync! +description: Learn to deploy smart contracts efficiently in the zkSync environment. layout: test --- -This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of -premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in -minutes. +Welcome to the Quickstart Guide for deploying smart contracts on zkSync! In this guide, we'll walk you through the process of creating and deploying a simple smart contract that holds an adventure for Zeek. -::content-switcher +::icon-list --- -items: [{ - label: 'HardHat', - partial: '_getting-started/_aPartial' -}, { - label: 'Forge', - partial: '_getting-started/_anotherpartial' -}] --- :: -There are already many websites based on this template: +Let's dive in and start your developer journey on zkSync! + +## Quickstart framework selection -- [Nuxt](https://nuxt.com) - The Nuxt website -- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro` -- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image` -- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content` -- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools` -- [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content +Select the framework you want to get started using zkSync Era with. -::display-partial +::content-switcher --- -partial: 'Setting up your wallet' +items: [{ + label: 'HardHat', + partial: '_getting-started/_hardhat_deploy_contract' +}, { + label: 'Foundry', + partial: '_getting-started/_foundry_deploy_contract' +}] --- :: -## Features -- Powered by [Nuxt 3](https://nuxt.com) -- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro) -- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to - [Nuxt Content](https://content.nuxt.com) -- Compatible with [Nuxt Studio](https://nuxt.studio) -- Auto-generated sidebar navigation -- Full-Text Search out of the box -- Beautiful Typography styles -- Dark mode support -- And more... +## Takeaways -## Play online +- zkSync is EVM compatible and you can write smart contracts in Solidity or Vyper. +- zkSync supports your favorite development toolkit Hardhat and Foundry. +- zkSync CLI provides a quick way to scaffold different types of projects thanks to its multiple templates. +- Contracts deployed to zkSync are compiled using `zksolc` or `zkvyper` as they generate a special bytecode for zkSync's ZKEVM. -You can start playing with this template in your browser using our online sandboxes: +## Next steps -::card ---- -title: Play on StackBlitz -icon: i-simple-icons-stackblitz -to: https://stackblitz.com/github/nuxt-ui-pro/docs/ -target: _blank ---- -Explore Nuxt built-in components for pages, layouts, head, and more. -:: - ---- - -::card ---- -title: Play on CodeSandbox -icon: i-simple-icons-codesandbox -to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/ -target: _blank ---- -Explore Nuxt built-in components for pages, layouts, head, and more. -:: - ---- +This was your first step towards becoming a zkSync developer. Here is what you can do next: -Or open [Nuxt UI playground](https://ui.nuxt.com/playground). +- Let’s take our `ZeekAdventure.sol` contract and create a contract factory! diff --git a/content/10.getting-started/_getting-started/_aPartial.md b/content/10.getting-started/_getting-started/_aPartial.md deleted file mode 100644 index 0fea5446..00000000 --- a/content/10.getting-started/_getting-started/_aPartial.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: A Partial ---- - -This is a partial that's coming from somewhere else! diff --git a/content/10.getting-started/_getting-started/_anotherPartial.md b/content/10.getting-started/_getting-started/_anotherPartial.md deleted file mode 100644 index f1ac3572..00000000 --- a/content/10.getting-started/_getting-started/_anotherPartial.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Another Partial ---- - -This is the second partial diff --git a/content/10.getting-started/_getting-started/_foundry_deploy_contract.md b/content/10.getting-started/_getting-started/_foundry_deploy_contract.md new file mode 100644 index 00000000..159b16d7 --- /dev/null +++ b/content/10.getting-started/_getting-started/_foundry_deploy_contract.md @@ -0,0 +1,26 @@ +--- +title: Foundry | Deploy Contract +--- + +`foundry-zksync` is a specialized fork of Foundry, tailored for zkSync. It extends Foundry's capabilities for Ethereum app development to support zkSync, allowing for the compilation, deployment, testing, and interaction with smart contracts on zkSync. + +## Step 1: Setting up environment (todo - update) +::env-setup +--- + +--- +:: + +## Step 2: Set up wallet +::wallet-setup +--- + +--- +:: + +## Step 3: Deploying your first contract +::display-partial +--- +partial: 'Deploy contract using Foundry' +--- +:: diff --git a/content/10.getting-started/_getting-started/_hardhat_deploy_contract.md b/content/10.getting-started/_getting-started/_hardhat_deploy_contract.md new file mode 100644 index 00000000..7f0644dd --- /dev/null +++ b/content/10.getting-started/_getting-started/_hardhat_deploy_contract.md @@ -0,0 +1,26 @@ +--- +title: Hardhat | Deploy Contract +--- + +Hardhat is an Ethereum development environment, designed for easy smart contract development in Solidity. zkSync provides its own plugins which makes working with contracts on zkSync simple and efficient. + +## Step 1: Setting up environment +::env-setup +--- + +--- +:: + +## Step 2: Set up wallet +::wallet-setup +--- + +--- +:: + +## Step 3: Deploying your first contract +::display-partial +--- +partial: 'Deploy contract using Hardhat' +--- +:: diff --git a/content/_partials/deploy_contract_foundry.md b/content/_partials/deploy_contract_foundry.md new file mode 100644 index 00000000..c84a71a9 --- /dev/null +++ b/content/_partials/deploy_contract_foundry.md @@ -0,0 +1,87 @@ +--- +title: Deploy contract using Foundry +--- + +Now that we have setup our environment and our wallet, we are ready to deploy our first contract! For this tutorial we'll focus on the `/src/ZeekAdventures.sol` contract: + +```solidity +// SPDX-License-Identifier: MIT +pragma solidity ^0.8.0; + +/** + * @title ZeekAdventures + * @dev Embark on adventures with Zeek, the playful cat mascot. This contract allows + * setting and retrieving Zeek's current adventure. + */ +contract ZeekAdventures { + // Zeek's current adventure + string private adventure; + + // Event to announce when Zeek's adventure is set + event AdventureSet(string newAdventure); + + /** + * @dev Constructor to set the initial adventure upon deployment. + * @param _initialAdventure The initial adventure Zeek will embark on. + */ + constructor(string memory _initialAdventure) { + adventure = _initialAdventure; + emit AdventureSet(_initialAdventure); + } + + /** + * @dev Sets a new adventure for Zeek. + * @param _newAdventure The new adventure Zeek will embark on. + */ + function setAdventure(string memory _newAdventure) public { + adventure = _newAdventure; + emit AdventureSet(_newAdventure); + } + + /** + * @dev Returns the current adventure Zeek is on. + * @return The current adventure of Zeek. + */ + function currentAdventure() public view returns (string memory) { + return adventure; + } +} +``` + +### Compile contract + +To compile the contracts in the project, run the following command: + +```bash +forge build --zksync +``` + +**You'll get the following output:** + +```bash +TODO +``` + +The compiled artifacts will be located in the `/zkout` folder. + +### Deploy + +In this section, we’ll get to deploy the ZeekAdventure contract onto {network}. The script to deploy contracts is found at `/scripts/deploy.s.sol`. + +// TODO: +@Dustin +Write foundry script for deployment. Add and explain here. + +To deploy the contract, run the following command: + +```bash +forge script command --zksync +``` + +**You'll get the following output:** + +```bash +TODO +``` + +🥳 Congratulations! You just deployed a smart contract to {network}! \ No newline at end of file diff --git a/content/_partials/deploy_contract_hardhat.md b/content/_partials/deploy_contract_hardhat.md new file mode 100644 index 00000000..a63d06c2 --- /dev/null +++ b/content/_partials/deploy_contract_hardhat.md @@ -0,0 +1,126 @@ +--- +title: Deploy contract using Hardhat +--- + +Now that we have setup our environment and our wallet, we are ready to deploy our first contract! For this tutorial we'll focus on the `/contracts/ZeekAdventures.sol` contract: + +```solidity +// SPDX-License-Identifier: MIT +pragma solidity ^0.8.0; + +/** + * @title ZeekAdventures + * @dev Embark on adventures with Zeek, the playful cat mascot. This contract allows + * setting and retrieving Zeek's current adventure. + */ +contract ZeekAdventures { + // Zeek's current adventure + string private adventure; + + // Event to announce when Zeek's adventure is set + event AdventureSet(string newAdventure); + + /** + * @dev Constructor to set the initial adventure upon deployment. + * @param _initialAdventure The initial adventure Zeek will embark on. + */ + constructor(string memory _initialAdventure) { + adventure = _initialAdventure; + emit AdventureSet(_initialAdventure); + } + + /** + * @dev Sets a new adventure for Zeek. + * @param _newAdventure The new adventure Zeek will embark on. + */ + function setAdventure(string memory _newAdventure) public { + adventure = _newAdventure; + emit AdventureSet(_newAdventure); + } + + /** + * @dev Returns the current adventure Zeek is on. + * @return The current adventure of Zeek. + */ + function currentAdventure() public view returns (string memory) { + return adventure; + } +} +``` + +### Compile contract + +Smart contracts deployed to zkSync must be compiled using our custom compilers. For this particular guide we are making use of `zksolc`. + +To compile the contracts in the project, run the following command: + +::code-group + +```bash [yarn] +yarn compile:contracts +``` + +```bash [pnpm] +pnpm run compile:contracts +``` + +```bash [npm] +npm run compile:contracts +``` + +```bash [bun] +bun run compile:contracts +``` +:: + +**You'll get the following output:** + +```bash +Compiling contracts for zkSync Era with zksolc v1.4.1 and solc v0.8.23 +Compiling 1 Solidity files +Successfully compiled 1 Solidity files +✨ Done in 1.55s. +``` + +The compiled artifacts will be located in the `/artifacts-zk` folder. + +### Deploy + +In this section, we’ll get to deploy the ZeekAdventure contract onto {network}. The script to deploy contracts is found at `/deploy/deploy.ts`. + +The `contractArtifactName` defines the contract we want to deploy.Here we have it set to our contract, ZeekAdventure. Similarly, `constructorArguments` are the arguments we need to provide to the constructor to initialize the contract. + +To deploy the contract, run the following command: + +::code-group + +```bash [yarn] +yarn deploy +``` + +```bash [pnpm] +pnpm run deploy +``` + +```bash [npm] +npm run deploy +``` + +```bash [bun] +bun run deploy +``` +:: + +**You'll get the following output:** + +```bash +Starting deployment process of "ZeekAdventures"... +Estimated deployment cost: 0.0000648863 ETH + +"ZeekAdventures" was successfully deployed: + - Contract address: 0x0BaF96A7f137B05d0D35b76d59B16c86C1791D8D + - Contract source: contracts/ZeekAdventures.sol:ZeekAdventures + - Encoded constructor arguments: 0x000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000094869207468657265210000000000000000000000000000000000000000000000 +``` + +🥳 Congratulations! You just deployed a smart contract to {network}! \ No newline at end of file diff --git a/content/_partials/setting-up-your-wallet.md b/content/_partials/setting-up-your-wallet.md index 31817176..c1070e6d 100644 --- a/content/_partials/setting-up-your-wallet.md +++ b/content/_partials/setting-up-your-wallet.md @@ -2,8 +2,53 @@ title: Setting up your wallet --- -Here's how to setup your wallet, follow the instructions below: - -1. Download wallet -2. ??? -3. Profit +
+

+ Deploying contracts on the zkSync Sepolia testnet requires having testnet ETH. If you're working within the local + development environment, you can utilize pre-configured rich wallets and skip this step. For testnet deployments, + follow these steps to secure your funds: +

+
    +
  1. + Obtaining Testnet ETH: + +
    2. +
  2. + Verify your balance: + +
    3. +
+
\ No newline at end of file diff --git a/cspell-config/cspell-dev.txt b/cspell-config/cspell-dev.txt index 079032b5..c29eb22f 100644 --- a/cspell-config/cspell-dev.txt +++ b/cspell-config/cspell-dev.txt @@ -6,3 +6,7 @@ otlp nvme nuxtdotjs fontaine +zksolc +zkvyper +ZKEVM +zkout diff --git a/cspell-config/cspell-zksync.txt b/cspell-config/cspell-zksync.txt index a4b6547b..ebc46595 100644 --- a/cspell-config/cspell-zksync.txt +++ b/cspell-config/cspell-zksync.txt @@ -2,3 +2,4 @@ matterlabs zksync boojum +Zeek diff --git a/nuxt.config.ts b/nuxt.config.ts index 1393e068..1700f8e6 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -16,7 +16,7 @@ export default defineNuxtConfig({ icons: { collections: { ...zksyncIcons, - ...getIconCollections(['heroicons', 'simple-icons']), + ...getIconCollections(['heroicons', 'simple-icons', 'zondicons']), }, }, }, diff --git a/package.json b/package.json index 02d16b01..015ae393 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "dependencies": { "@iconify-json/heroicons": "^1.1.20", "@iconify-json/simple-icons": "^1.1.95", + "@iconify-json/zondicons": "^1.1.8", "@nuxt/content": "^2.12.1", "@nuxt/fonts": "^0.3.0", "@nuxt/ui-pro": "^1.0.2",