feat: Add initial draft of dev onbaording material

* Hello zkSync
* Contract factories
* Testing
* Upgrades
* Paymaster - wip

app.config.ts

@@ -102,24 +102,18 @@ export default defineAppConfig({
       edit: 'https://github.com/matter-labs/zksync-docs/edit/staging/content',
       feedback: 'https://github.com/matter-labs/zksync-docs/issues/new?labels=documentation',
       links: [
-        // {
-        //   icon: 'i-heroicons-star',
-        //   label: 'Star on GitHub',
-        //   to: 'https://github.com/nuxt/ui',
-        //   target: '_blank',
-        // },
-        // {
-        //   icon: 'i-heroicons-book-open',
-        //   label: 'Nuxt UI Pro docs',
-        //   to: 'https://ui.nuxt.com/pro/guide',
-        //   target: '_blank',
-        // },
-        // {
-        //   icon: 'i-simple-icons-nuxtdotjs',
-        //   label: 'Purchase a license',
-        //   to: 'https://ui.nuxt.com/pro/purchase',
-        //   target: '_blank',
-        // },
+        {
+          icon: 'i-heroicons-chat-bubble-oval-left-ellipsis-16-solid',
+          label: 'Chat on Discord',
+          to: 'https://join.zksync.dev/',
+          target: '_blank',
+        },
+        {
+          icon: 'i-heroicons-user-group-20-solid',
+          label: 'Developer Forum',
+          to: 'https://github.com/zkSync-Community-Hub/zkync-developers/discussions',
+          target: '_blank',
+        },
       ],
     },
   },

components/content/ContentSwitcher.vue

@@ -2,13 +2,15 @@
 defineProps<{
   items: ContentSwitcherItem[];
 }>();
-
 const selectedIndex = ref(0);
 
 function onTabChange(index: number) {
   selectedIndex.value = index;
 }
 const route = useRoute();
+// This splits the path into segments and takes the first one
+// TODO: This is a temporary solution, we need to find a better way to get the base path
+const basePath = route.path.split('/')[1];
 </script>
 
 <template>
@@ -25,7 +27,7 @@ const route = useRoute();
     >
       <ContentQuery
         v-slot="{ data }"
-        :path="$route.path"
+        :path="basePath"
         find="one"
         :where="{ _partial: true, _path: { $icontains: item.partial } }"
       >

content/10.quick-start/1.index.md

@@ -0,0 +1,52 @@
+---
+title: Hello zkSync!
+description: Learn to deploy smart contracts efficiently in the zkSync environment.
+---
+
+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 creates a crowdfunding campaign for Zeek.
+
+:check-icon Initializing a new project with a scaffolding tool.
+
+:check-icon Crafting a smart contract to fund Zeek's latest adventure.
+
+:check-icon Deploying the contract on the zkSync Era using your choice of Hardhat or Foundry.
+
+Let's dive in and start your developer journey on zkSync!
+
+## Framework selection
+
+Select the framework you want to get started using zkSync Era with.
+
+::content-switcher
+---
+items: [{
+  label: 'Hardhat',
+  partial: '_index/_hardhat_deploy_contract'
+}, {
+  label: 'Foundry',
+  partial: '_index/_foundry_deploy_contract'
+}]
+---
+::
+
+## Takeaways
+
+- **EVM Compatibility:** zkSync is EVM compatible and you can write smart contracts in Solidity or Vyper.
+- **Development Tools:** zkSync supports your favorite development toolkit Hardhat and Foundry.
+- **Custom Compilation:** Contracts deployed to zkSync are compiled using `zksolc` or `zkvyper` as
+they generate a special bytecode for zkSync's ZKEVM.
+
+## Next steps
+
+Having successfully deployed your first contract on zkSync, you're well on your way to becoming
+a proficient zkSync developer. To expand your expertise:
+
+- **Explore Contract Factories:** Enhance your project by building a contract factory
+for the `CrowdfundingCampaign` contract in the next guide. This will allow you to efficiently
+manage multiple crowdfunding campaigns, each with its own unique parameters.
+- **Dive Deeper into zkSync Features:** Investigate advanced zkSync features such as account abstraction,
+and paymasters.
+- **Join the Community:** Engage with the zkSync developer community through forums,
+Discord channels, Dev Discussions, or GitHub repositories. Share your experiences, ask questions,
+and collaborate on projects.

content/10.quick-start/2.deploy_factory.md

@@ -0,0 +1,68 @@
+---
+title: Contract Factories
+description: Learn to deploy contract factories in the zkSync environment.
+---
+
+Welcome back to the Quickstart Series on becoming proficient with zkSync development!
+This second installment advances from your introductory exploration of smart contract
+deployment to dive into the utility of contract factories. Through this guide,
+you'll learn how to streamline the deployment of multiple crowdfunding campaigns
+using a single contract factory, leveraging the foundational `CrowdfundingCampaign`
+contract in the first guide.
+
+:check-icon Advancing your zkSync development journey with contract factories.
+
+:check-icon Constructing a contract factory to create multiple crowdfunding campaigns for Zeek.
+
+:check-icon Seamlessly deploying your contract factory on zkSync Era, using either Hardhat or Foundry.
+
+Let's explore the efficiency and scalability that contract factories bring.
+
+### What is a contract factory?
+
+A contract factory is a design pattern that allows for the creation of multiple
+contract instances from a single "factory" contract. It's essentially a contract
+that creates other contracts, streamlining and organizing the deployment of
+numerous similar contracts efficiently.
+
+## Framework selection
+
+Select the framework you want to get started using zkSync Era with.
+
+::content-switcher
+---
+items: [{
+  label: 'Hardhat',
+  partial: '_deploy_factory/_hardhat_deploy_contract_factory'
+}, {
+  label: 'Foundry',
+  partial: '_deploy_factory/_foundry_deploy_contract_factory'
+}]
+---
+::
+
+## Takeaways
+
+- **Contract Factories:** Utilizing contract factories significantly streamlines
+the deployment process, allowing for the creation of multiple instances of a
+contract, like the `CrowdfundingCampaign`, with varied parameters.
+- **Scalability and Management:** Contract factories offer a scalable solution to manage
+numerous contract instances, enhancing project organization and efficiency.
+- **Event-Driven Insights:** The `CampaignCreated` event in the factory contract provides
+a transparent mechanism to track each crowdfunding campaign's deployment, useful for
+off-chain monitoring and interaction.
+
+## Next steps
+
+With the contract factory in your zkSync development arsenal, you're set to elevate
+your smart contract projects. Here's how you can further your journey:
+
+- **Contract Testing:** Progress to the next guide focused on testing your contracts.
+Ensuring the reliability and security of your `CrowdfundingCampaign` through
+comprehensive tests is critical.
+- **Advanced zkSync Integrations:** Explore deeper into zkSync's ecosystem by
+implementing features like account abstraction and paymasters to enhance user
+experience and contract flexibility.
+- **Community Engagement and Contribution:** Join the vibrant zkSync community.
+Participate in forums, Discord, or GitHub discussions. Sharing insights, asking queries,
+and contributing can enrich the ecosystem and your understanding of zkSync.

content/10.quick-start/3.testing.md

@@ -0,0 +1,60 @@
+---
+title: Testing
+description: Learn to test smart contracts efficiently in the zkSync environment.
+---
+
+Welcome back to our Quickstart Series, your fast-track to zkSync development! In this
+third guide, we transition from deploying and managing contracts to the critical phase
+of testing. This guide will walk you through the steps to ensure your `CrowdfundingCampaign`
+contracts, introduced in our first guide and efficiently deployed through contract factories
+in the second, work flawlessly.
+
+:check-icon Elevating your zkSync toolkit with robust contract testing techniques.
+
+:check-icon Crafting comprehensive tests for your `CrowdfundingCampaign` to ensure reliability and security.
+
+:check-icon Using Hardhat or Foundry to write and run tests, ensuring your campaigns are ready.
+
+Dive into the world of smart contract testing and solidify the foundation of your zkSync projects.
+
+## Framework selection
+
+Select the framework you want to get started using zkSync Era with.
+
+::content-switcher
+---
+items: [{
+  label: 'Hardhat',
+  partial: '_testing/_hardhat_contract_testing'
+}, {
+  label: 'Foundry',
+  partial: '_testing/_foundry_contract_testing'
+}]
+---
+::
+
+## Takeaways
+
+- **Testing**: Understanding contract testing is important for ensuring the reliability and security of your smart contracts
+on zkSync. Proper testing safeguards against unforeseen errors and vulnerabilities.
+- **Comprehensive Coverage**: Achieving comprehensive test coverage, including both positive and negative testing
+scenarios, is essential for a robust smart contract. This guide emphasized the `contribute` method,
+but testing should encompass all aspects of your contract.
+- **Tooling Efficiency**: Leveraging Hardhat or Foundry for testing provides a streamlined and efficient workflow.
+These tools offer powerful features and plugins, like `@nomicfoundation/hardhat-chai-matchers`,
+that enhance the testing process.
+
+## Next Steps
+
+With a solid foundation in contract testing, you're well-equipped to advance your zkSync
+development journey. Consider the following steps to further your expertise:
+
+- **Upgradeability**: Delve into the next guide focusing on contract upgradability.
+Learning to make your contracts upgradeable will enable you to update and improve your smart contracts
+over time without losing state or funds.
+- **Advanced zkSync Integrations:** Explore deeper into zkSync's ecosystem by
+implementing features like account abstraction and paymasters to enhance user
+experience and contract flexibility.
+- **Community Engagement and Contribution:** Join the vibrant zkSync community.
+Participate in forums, Discord, or GitHub discussions. Sharing insights, asking queries,
+and contributing can enrich the ecosystem and your understanding of zkSync.

content/10.quick-start/4.upgrading.md

@@ -0,0 +1,61 @@
+---
+title: Upgradability
+description: Learn to make smart contracts upgradeable within the zkSync ecosystem.
+---
+
+Welcome back to our Quickstart Series, the express lane to zkSync development!
+In this fourth installment, we embark on a journey through contract upgradability,
+an important aspect for maintaining and enhancing smart contracts over time. This guide will
+lead you through the strategies and practices for making the `CrowdfundingCampaign` contract,
+introduced in the first guide and brought to life in subsequent guides, **upgradeable**.
+
+:check-icon Harnessing advanced techniques for contract upgradability in zkSync.
+
+:check-icon Implementing upgradeable patterns for the `CrowdfundingCampaign` to ensure long-term adaptability and improvement.
+
+:check-icon Leveraging tools and best practices in zkSync to facilitate seamless contract upgrades.
+
+Begin to understand smart contract evolution and empower your zkSync applications with the
+flexibility of upgradability.
+
+### Select preferred upgrade mechanism
+
+::content-switcher
+---
+items: [{
+  label: 'Transparent',
+  partial: '_upgrading/_transparent_proxy_contract_upgradability'
+}, {
+  label: 'Beacon',
+  partial: '_upgrading/_beacon_proxy_contract_upgradability'
+},
+ {
+  label: 'UUPS',
+  partial: '_upgrading/_uups_contract_upgradability'
+},]
+---
+::
+
+## Takeaways and Next Steps
+
+### Takeaways
+
+- **Upgradability:** The guide highlights the critical aspect of smart contract upgradability, introducing techniques
+for using transparent, beacon, and UUPS proxies.
+This ensures your contracts remain adaptable, allowing for seamless updates to business logic or enhancements in efficiency.
+
+- **Flexibility:** Emphasizing flexibility, the guide demonstrates how upgradable
+contracts maintain continuity of state and fund security, even as underlying
+functionalities evolve. This approach provides a resilient framework for your dApps to grow and adapt over time.
+
+### Next Steps
+
+- **Exploring Paymasters:** Dive into the next guide focused on using paymasters
+with your smart contracts. Paymasters abstract gas payments in transactions,
+offering new models for transaction fee management and enhancing user experience in dApps.
+- **Advanced zkSync Integrations:** Explore deeper into zkSync's ecosystem by
+implementing features like account abstraction and paymasters to enhance user
+experience and contract flexibility.
+- **Community Engagement and Contribution:** Join the vibrant zkSync community.
+Participate in forums, Discord, or GitHub discussions. Sharing insights, asking queries,
+and contributing can enrich the ecosystem and your understanding of zkSync.

content/10.quick-start/5.paymaster.md

@@ -0,0 +1,85 @@
+---
+title: Paymaster
+description: Learn how to write and customize your documentation.
+---
+
+WWelcome back to our Quickstart Series on mastering zkSync development! In this guide, we move beyond the basics
+of smart contract deployment and the creation of contract factories to explore the innovative concept of paymasters
+in the zkSync ecosystem. This guide will illuminate the power of paymasters to revolutionize transaction
+fee management and enhance user experiences within your dApps.
+
+:check-icon Delving deeper into zkSync development with the introduction of paymasters.
+
+:check-icon Learning how paymasters can cover transaction fees for your dApp users, enhancing accessibility and user experience.
+
+:check-icon Discovering the flexibility of fee payment with paymasters, including the ability to pay
+fees in ERC20 tokens on zkSync Era, using Hardhat or Foundry.
+
+Embark on this journey to understand how paymasters can add a new layer of functionality and user-friendliness
+to your decentralized applications.
+
+### What are Paymasters?
+
+Paymasters in the zkSync ecosystem represent a groundbreaking approach to handling transaction fees.
+They are special accounts designed to subsidize transaction costs for other accounts, potentially making
+certain transactions free for end-users. This feature is particularly useful for dApp developers looking
+to improve their platform's accessibility and user experience by covering transaction fees on behalf of their users.
+
+### Built-in Paymaster Flows
+
+Paymasters can operate under various flows, some of which may require user interaction, such as setting allowances
+for token swaps. These flows enable paymasters to support a wide range of use cases, from simple fee subsidies
+to more complex scenarios involving ERC20 token exchanges for transaction fees.
+
+- **General Paymaster Flow:** This default flow requires no preliminary actions from users, allowing paymasters
+to interpret transaction data as needed to cover fees.
+
+- **Approval-Based Paymaster Flow:** For operations requiring user permissions, such as token allowances,
+this flow provides a structured approach. It ensures that user tokens can be seamlessly exchanged for transaction
+fees, subject to user-approved limits.
+
+As we delve into paymasters, remember that while they offer enhanced flexibility for fee management, their
+implementation should always prioritize security and user trust. This guide aims to equip you with the knowledge
+to effectively incorporate paymasters into your zkSync projects, paving the way for more user-friendly and accessible dApps.
+
+## Framework selection
+
+Select the framework you want to get started using zkSync Era with.
+
+::content-switcher
+---
+items: [{
+  label: 'Hardhat',
+  partial: '_deploy_factory/_hardhat_deploy_contract_factory'
+}, {
+  label: 'Foundry',
+  partial: '_deploy_factory/_foundry_deploy_contract_factory'
+}]
+---
+::
+
+## Takeaways
+
+- **Contract Factories:** Utilizing contract factories significantly streamlines
+the deployment process, allowing for the creation of multiple instances of a
+contract, like the `CrowdfundingCampaign`, with varied parameters.
+- **Scalability and Management:** Contract factories offer a scalable solution to manage
+numerous contract instances, enhancing project organization and efficiency.
+- **Event-Driven Insights:** The `CampaignCreated` event in the factory contract provides
+a transparent mechanism to track each crowdfunding campaign's deployment, useful for
+off-chain monitoring and interaction.
+
+## Next steps
+
+With the contract factory in your zkSync development arsenal, you're set to elevate
+your smart contract projects. Here's how you can further your journey:
+
+- **Contract Testing:** Progress to the next guide focused on testing your contracts.
+Ensuring the reliability and security of your `CrowdfundingCampaign` through
+comprehensive tests is critical.
+- **Advanced zkSync Integrations:** Explore deeper into zkSync's ecosystem by
+implementing features like account abstraction and paymasters to enhance user
+experience and contract flexibility.
+- **Community Engagement and Contribution:** Join the vibrant zkSync community.
+Participate in forums, Discord, or GitHub discussions. Sharing insights, asking queries,
+and contributing can enrich the ecosystem and your understanding of zkSync.