zkEVM builder docs (#447)

* Polygon reuse

* more ground work

* added basic LxLy text

* quickstart updates

* minor

* build/zkEVM/integrations folder structure; polish FAQs

* Polygon reuse

more ground work

added basic LxLy text

quickstart updates

* build/zkEVM/integrations folder structure; polish FAQs

* added link to top menu and reworked hardhat chapter

* add canonical bridge tutorial

* Update astar-bridge-zKatana-Shibuya2.jpg

* updated rpc links

* faucet updates

* removed zkNode for production chapter

* dead link fix

* support

* remove verify

* updated verify contract chapter

* Create index.md

* add introduction image

* Cleaning up obsolete i18n files and re-adding support for japanese locale (withouth content docs - no translations in the PR)

* consolidate introduction section and misc fixes

* update intro docs

* polish zkevm intro docs

* Update index.md

* adding japanse locale

* added gas station

* temp disable japan locale

* Small fixes (#470)

* small fixs

* Update bridge-to-zkevm.md

fix typo

---------

Co-authored-by: Megan Skye <58894568+meganskye@users.noreply.github.com>

* adding startale RPC and header

* integration chapter cleanup, warning for local node, note that Astar bridging is not functional

* added fee calc, removed layer zero

* added typescript for hardhat config

* changed hero images

---------

Co-authored-by: Megan Skye Phoenix <58894568+meganskye@users.noreply.github.com>
Co-authored-by: Andabak <ivan@astar.network>
Co-authored-by: PierreOssun <35110271+PierreOssun@users.noreply.github.com>

README.md

@@ -58,7 +58,7 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
       <Figure caption="Tokenomics Model" src={require('/docs/about/token-economics/img/tokenomics_1.png').default } width="100%" /> 
       ```
 
-    - Please use absolute path to image (e.g. `/docs/about/token-economics/img/tokenomics_1.png` instead `img/tokenomics_1.png`
+    - Please use absolute path to image (e.g. `/docs/about/token-economics/img/tokenomics_1.png` instead of `img/tokenomics_1.png`
 
 ### Deploy to production
 

docs/build/environment/index.md

@@ -1,9 +1,13 @@
+import Figure from "/src/components/figure"
+
 # Set up the Development Environment
-![Development Environment](/docs/build/img/environment.png)
+<Figure src={require('/docs/build/img/environment.png').default} width="100%" /> 
+
+Knowledge about how to set up various environments is not required before you get started, however, it may be helpful to review the following sections to learn more about the purpose of each Environment, and their specific requirements.
 
-Before you start development, you don't need to know how to set up the required environments. However, you may find it helpful to review the following sections to learn about their purposes and specific requirements.
+For example, to build and test Wasm smart contracts, an ink! Environment with a Swanky node is appropriate. On the zkEVM, a [different kind of environment](/docs/build/zkEVM/quickstart.md) is required. 
 
-For instance, to build ink! smart contracts, you will mostly use an ink! Environment with Swanky node. And when you're ready to deploy your application to production, you can learn about setting up your own RPC endpoint.
+When you are ready to deploy a smart contract to production, you can use the information contained within this section to configure an RPC endpoint.
 
 ```mdx-code-block
 import DocCardList from '@theme/DocCardList';

docs/build/index.md

@@ -1,5 +1,5 @@
 # Build on Astar
-![Documentation of all the resources builders need in order to start testing, deploying and interacting with smart contracts on the Astar network](./img/build.png)
+![Documentation of all the resources builders need in order to start testing, deploying and interacting with smart contracts on the Astar network](/docs/build/img/build.png)
 
 
 ## Why build on Astar?

docs/build/zkEVM/bridge-to-zkevm.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 3
+title: Bridge to Astar zkEVM
+sidebar_label: Bridge to zkEVM
+---
+
+import bridge1 from '/docs/build/zkEVM/img/astar-bridge-zKatana-Shibuya1.jpg'
+import bridge2 from '/docs/build/zkEVM/img/astar-bridge-zKatana-Shibuya2.jpg'
+import bridge3 from '/docs/build/zkEVM/img/astar-bridge-zKatana-Shibuya3.jpg'
+import bridge4 from '/docs/build/zkEVM/img/astar-bridge-zKatana-Shibuya4.jpg'
+import network from '/docs/build/zkEVM/img/zKatana-network1.jpg'
+import network1 from '/docs/build/zkEVM/img/add_zkEVM_network1.jpg'
+import network2 from '/docs/build/zkEVM/img/add_zkEVM_network2.jpg'
+import walletselect from '/docs/build/zkEVM/img/wallet-select.jpg'
+
+## Overview
+
+Here you will find information about how to bridge assets to the Astar zkEVM. Presently, there are two options for bridging assets to the zkEVM: 
+
+1. Ethereum L1 to Astar zkEVM -> Bridged ETH is the native token required for testing and deployment of dApps on the Astar zkEVM, so before using the network, developers need to bridge some ETH from Layer 1 to Layer 2. Accessible through the Astar Portal, which can take approximately 10-30 minutes, depending on network usage.
+2. _Astar Parachain to Astar zkEVM (currently under development) -> A 3rd-party asset bridge or message network facilitating locking and minting of synthetic (wrapped) assets between Astar Substrate EVM and Astar zkEVM. See the [integrations section](/docs/build/zkEVM/integrations/bridges-relays/) for more information about how to use 3rd-party bridge services and compatible assets._
+
+### Transfer ETH using the Astar Portal
+
+Visit the [Astar Portal](https://portal.astar.network) and connect MetaMask. 
+
+
+<div style={{textAlign: 'center'}}>
+  <img src={walletselect} style={{width: 400}} />
+  </div>
+
+
+Use the network selector and switch to zKatana network, or allow MetaMask to switch to zKatana network for you.
+
+
+<div style={{textAlign: 'center'}}>
+  <img src={network} style={{width: 400}} />
+  </div>
+
+
+Click on the Bridge tab on the left-hand side. Ensure Sepolia is selected as Bridge source, and zKatana is selected as destination. After you have entered the amount of ETH to transfer, press the Confirm button. 
+
+
+<div style={{textAlign: 'center'}}>
+  <img src={bridge2} style={{width: 1000}} />
+  </div>
+
+
+Sign the MetaMask transaction. 
+
+:::note
+Once the transaction shows as confirmed on the MetaMask Activity tab, it will take approximately 5-10 minutes for the Astar Portal and MetaMask to update your balance on the zKatana network side.
+:::
+
+
+<div style={{textAlign: 'center'}}>
+  <img src={bridge3} caption="Confirming" style={{width: 1000}} />
+  </div>
+<div style={{textAlign: 'center'}}>
+  <img src={bridge4} caption="Confirmed" style={{width: 1000}} />
+  </div>
+
+
+  You should now see the bridged ETH within MetaMask for use on Astar zkEVM.

docs/build/zkEVM/faq/zkevm-eth-faq.md

@@ -16,7 +16,7 @@ The ultimate goal is not **compatibility**. The ultimate goal is **equivalence**
 
 1. **Development teams don't have to make changes to their code**, which could introduce security vulnerabilities.
 2. **No code changes are needed**. You don't need additional audits, which saves time and money. 
-3. **zkEVM ultimately benefits from the security and decentralization of Ethereum**, since transactions are still finalized on Ethereum.
+3. **zkEVM ultimately benefits from the security and decentralization of Ethereum**, since transactions are finalized on Ethereum.
 4. Astar zkEVM **benefits from the already vibrant and active Ethereum community**.
 5. Allows for **fast user onboarding**, since dApps built on Ethereum are already compatible.
 

docs/build/zkEVM/faq/zkevm-general-faq.md

@@ -3,8 +3,13 @@ sidebar_position: 1
 title: General FAQs related to zkEVM
 sidebar_label: General FAQs
 ---
+
+# General FAQ
+
+## Overview
+
 This document compiles some of the frequently asked questions related to the Astar zkEVM. For more details, check out [Polygon zkEVM documentation](https://wiki.polygon.technology/docs/category/zkevm-protocol/).
----
+
 
 ### What is Astar zkEVM?
 
@@ -35,7 +40,7 @@ However, given the proving system breakthroughs pioneered by Polygon Labs, full
 
 ### How do I connect Astar zkEVM to a Metamask Wallet?
 
-In order to add the Astar zkEVM network to your wallet, please check [this guide] (INSERT_LINK) which contains the latest RPC details and videos demonstrating useful functionalities.
+In order to add the Astar zkEVM network to your wallet, please check [this guide](../quickstart.md) which contains the latest RPC details and videos demonstrating useful functionalities.
 
 ### How does Astar zkEVM compare to other zkEVMs in terms of technology and performance? What are the technical advantages there?
 
@@ -83,11 +88,6 @@ Yes, any language that gets compiled to EVM opcode should work with Astar zkEVM.
 
 Additionally, for a software application to interact with the Ethereum blockchain (by reading blockchain data and/or sending transactions to the network), it must connect to an Ethereum node. It works the same way as other nodes such as geth.
 
-Learn how to set up your production zkNode [here] (INSERT_LINK)
-
 ### Do you support the JSON-RPC EVM query spec? What are the unsupported queries?
 
 All official queries are supported (`eth_*` endpoints). We are working on support from some "extra official endpoints" such as `debug_*`.
-
-(INSERT_LINK)(../zk-node/setup-production-node.md).
-(INSERT_LINK)(../quickstart.md)

docs/build/zkEVM/fee.md

@@ -0,0 +1,12 @@
+---
+sidebar_position: 7
+title: Astar zkEVM Fee Calculation
+sidebar_label: Fee Calculation
+---
+
+## How do network fees on Astar zkEVM work?
+Every transaction consists of two costs: an L2 (execution) fee and an L1 (security) fee. The L2 fee is the cost to execute your transaction on the L2, and the L1 fee is the estimated cost to publish the transaction on the L1. Typically the L1 security fee is higher than the L2 execution fee.
+
+The L1 fee will vary depending on the amount of transactions on the L1. If the timing of your transaction is flexible, you can save costs by submitting transactions during periods of lower gas on the L1 (for example, over the weekend)
+
+Similarly, the L2 fee can increase and decrease depending on how many transactions are being submitted to the L2. This adjustment mechanism has the same implementation as the L1. You can read more about EIP-1559 [here](https://eips.ethereum.org/EIPS/eip-1559).

docs/build/zkEVM/index.md

@@ -1,12 +1,33 @@
-# Astar zkEVM
+import introduction from "/docs/build/img/buildZkEvm.png" 
 
-## Overview
+# Build on Astar zkEVM
+
+<div style={{textAlign: 'center'}}>
+    <img src={introduction} style={{width: 1200}} />
+</div>
+
+To make use of this documentation effectively, you should possess a general understanding of programming basics. The programming languages used throughout are mainly Solidity and JavaScript, for which previous knowledge is not necessary, but would be highly beneficial. 
+
+## What is Astar zkEVM?
+
+Astar zkEVM is an Ethereum Layer-2 scaling solution leveraging Polygon's Chain Development Kit and cutting edge zero-knowledge cryptography to enable off-chain transaction execution, with finality and security guarantees provided by Ethereum. In coordination with our key partners, Astar zkEVM is well-positioned to take advantage of the extensive developer base and well-established toolset existing in the Ethereum ecosystem, and boasts the following key features:
+
+- **Higher TPS than Ethereum or Astar Substrate EVM** - Leveraging zk rollup architecture, transactions are parallelized on Layer 2 and submitted on-chain to Layer 1 in batches, supercharging web3 games and DeFi applications requiring high performance.
+- **Lower Transaction Fees compared to Ethereum** - Due to the transaction batching, as explained above.
+- **Full EVM-equivalence** - Not only EVM compatibility; Equivalence. Smart contracts that work on Ethereum also work on Astar zkEVM. See the [smart contract section](/docs/build/zkEVM/smart-contracts/) for more information.
+- **Native Account Abstraction** - The Astar zkEVM provides native features designed to revolutionize the end-user experience, and make it seamless. See the [Account Abstraction section](/docs/build/zkEVM/integrations/account-abstraction/) to learn more about how to refine the end-user experience.
+- **Recognized Partners** - Established names and brands that developers trust power the Astar zkEVM. See the [integrations section](/docs/build/zkEVM/integrations/) for more information about 3rd party service providers.
+- **Interoperability and Exposure** - With Astar zkEVM, we are supporting interoperability between the Ethereum and Polkadot ecosystems, uniting communities, and empowering web3 accessibility through a common Multichain vision.
+- **Established Tools and Libraries** - Compatible with the tools web3 developers already know how to use, such as Remix, Hardhat, and Open Zeppelin. 
+
+## Section Overview
+
+The following sections walk through the process of setting up a development environment and introduce common tools and partner services useful for powering highly scalable dApps and seamless user onboarding experiences on the Astar zkEVM.
 
-This is where you will find information about building on Astar zkEVM, a Layer 2 scaling solution for Ethereum powered by Polygon CDK.
 
 ```mdx-code-block
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items}/>
-```
+```

docs/build/zkEVM/integrations/account-abstraction/index.md

@@ -1,10 +1,6 @@
 # Account Abstraction
-
+:::info
+Coming soon...
+:::
+## Overview
 Here you will find all the information you need to refine the end-user experience and allow for seamless web2-like interactions with dApps and accounts on the Astar zkEVM.
-
-```mdx-code-block
-import DocCardList from '@theme/DocCardList';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
-
-<DocCardList items={useCurrentSidebarCategory().items}/>
-```

docs/build/zkEVM/integrations/bridges-relays/index.md

@@ -0,0 +1,8 @@
+# Asset Bridges
+:::info
+Coming soon...
+:::
+## Overview
+Here you will find all the information required to bridge assets to the Astar zkEVM, and set up simple cross-chain contracts using our supported partner solutions.
+
+Coming soon...

docs/build/zkEVM/integrations/indexers/index.md

@@ -0,0 +1,7 @@
+# Indexers
+:::info
+Coming soon...
+:::
+
+## Overview
+Here you will find all the information required to use indexers on Astar zkEVM.

docs/build/zkEVM/integrations/oracles/index.md

@@ -0,0 +1,8 @@
+# Oracles
+:::info
+Coming soon...
+:::
+
+## Overview
+
+Here you will find all the information required to bridge assets to the Astar zkEVM, and set up simple cross-chain contracts using our supported partner solutions.

docs/build/zkEVM/integrations/wallets/index.md

@@ -0,0 +1,8 @@
+# Wallets
+:::info
+Coming soon...
+:::
+
+## Overview
+
+Majority of EVM wallets will be compatible with the Astar zkEVM. 

docs/build/zkEVM/quickstart.md

@@ -0,0 +1,85 @@
+---
+sidebar_position: 1
+title: Astar zkEVM Quickstart Guide
+sidebar_label: Quickstart
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import metamask from '/docs/build/zkEVM/img/metamask-network.png'
+import zkHeader from '/docs/build/img/zkHeader.png'
+
+<div style={{textAlign: 'center'}}>
+    <img src={zkHeader} style={{width: 1200}} />
+</div>
+
+Astar zkEVM is a zero-knowledge scaling solution for Ethereum that offers an **EVM-equivalent environment** on which existing EVM smart contracts, developer tools, and wallets can work seamlessly. Astar zkEVM harnesses the power of zero-knowledge proofs to reduce transaction costs and increase throughput, while inheriting the security of Ethereum.
+
+Solidity developers are right at home on Astar zkEVM. Simply switch to the zkEVM RPC, and start building!
+
+:::info Reminder
+No special tools or wallets are required to build or interact with Astar zkEVM.
+:::
+
+Developers can deploy existing contracts from other EVM chains to the zkEVM, and users are able to deposit assets from Ethereum to transact on the zkEVM in batches, which are ultimately finalized through novel use of zero-knowledge proofs. Native account abstraction means developers can craft user interfaces that are more intuitive and web2-like, that eliminate complexity and drastically simplify the onboarding process. 
+
+## Connecting to zkEVM
+
+To add the **Astar zkEVM** network to your wallet manually, enter the following details :
+<Tabs>
+<TabItem value="testnet" label="zKatana Testnet" default>
+
+| RPC URL | ChainID | Block Explorer URL | Currency |
+| ------------------------------- | ---------------- | ---------------- | ----- |
+| `https://rpc.zkatana.gelato.digital` | `1261120` | [https://zkatana.blockscout.com](https://zkatana.blockscout.com) | **ETH** |
+| `https://rpc.startale.com/zkatana` | `1261120` | [https://zkatana.blockscout.com](https://zkatana.blockscout.com) | **ETH** |
+</TabItem>
+
+<TabItem value="mainnet" label="Astar zkEVM Mainnet" disabled>
+
+| RPC URL | ChainID | Block Explorer URL | Currency |
+| ------------------------------- | ---------------- | ---------------- | ----- |
+| `coming soon...` | `-` | `-` | **ETH** |
+</TabItem>
+</Tabs>
+
+The next step is to [bridge assets](/docs/build/zkEVM/bridge-to-zkevm.md) from Ethereum &rarr; Astar zkEVM. 
+
+:::important
+Astar's canonical [zkEVM Bridge](https://portal.astar.network) does not inherit any counterparty risk compared to 3rd party bridge services, and is trustless at the protocol level.
+:::
+
+## Deploying Smart Contracts
+
+The development experience on zkEVM is seamless and identical to the Ethereum Virtual Machine. Developers building on zkEVM can use their existing code and tools to deploy on zkEVM, and dApp users will benefit from higher transaction throughput and lower fees. Read more about deploying smart contracts on the zkEVM [here.](/docs/build/zkEVM/smart-contracts/)
+
+## Metamask setup for zKatana Testnet
+To add zKatana testnet to MetaMask, use the link at the bottom of the [block explorer](https://zkatana.blockscout.com/), or fill in the following details manually:
+
+<div style={{textAlign: 'center'}}>
+  <img src={metamask} style={{width: 400}} />
+</div>
+
+## Astar zkEVM Support for Developers
+
+Developers requiring support can open an issue on [Ethereum StackExchange](https://ethereum.stackexchange.com/) and tag it with `Astar` (preferred) or join the [Astar Discord server](https://discord.gg/astarnetwork). 
+
+<details>
+<summary>Ethereum StackExchange</summary>
+
+1. Join the **Ethereum StackExchange** [here](https://ethereum.stackexchange.com/).
+
+2. Create a new issue.
+3. Make a detailed explanation of your issue.
+4. At the end add a tag `Astar` to trigger Astar team.
+
+</details>
+<details>
+<summary>Astar Discord server</summary>
+
+1. Join the **Astar Discord** server [here](https://discord.gg/astarnetwork).
+
+2. Accept the invite.
+3. Take the **Developer** role under **#roles**.
+4. Navigate to the **Builder/#zkevm-learning** channel.
+
+</details>

docs/build/zkEVM/smart-contracts/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Smart Contracts",
+    "position": 5
+}

i18n/pt/docusaurus-plugin-content-docs/current/user-guides/index.md → docs/build/zkEVM/smart-contracts/index.md

@@ -1,8 +1,8 @@
-# Guia do Usuário
+# Smart Contracts
 
 ```mdx-code-block
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items}/>
-```
+```