New Layout

zq2/docs/index.md

@@ -3,48 +3,87 @@ hide:
   - title
   - toc
 ---
+<div class="md-zil-banner" markdown>
 
-# Zilliqa 2.0 Developer Documentation
+<div markdown>
 
-Welcome to the developer documentation for Zilliqa 2.0, a fast-finality, scalable blockchain protocol. Zilliqa 2.0 features a native EVM execution layer, supporting standard EVM development tools and wallets while also retaining a custom execution layer based on the [Scilla](https://scilla.readthdocs.io/latest) smart contract language. 
+# The Zilliqa 2.0 Developer Portal
+<div class="flex" markdown>
+<div markdown>
+Welcome to the developer documentation for Zilliqa 2.0, a fast-finality, scalable blockchain protocol. Zilliqa 2.0 features a native EVM execution layer, supporting standard EVM development tools and wallets while also retaining a custom execution layer based on the [Scilla](https://scilla.readthdocs.io/latest) smart contract language.
+</div>
+<div markdown>
+[Check the Roadmap](http://roadmap.zilliqa.com/) 
+</div>
+</div>
+</div>
 
-__For an overview__ of the features and capabilities introduced in Zilliqa 2.0, please visit the [roadmap website](https://roadmap.zilliqa.com/), where you can also find a list of development milestones. 
 
-__To learn more__ about the design of the Zilliqa 2.0 protocol, [read the whitepaper](https://drive.google.com/file/d/1XqSySl0w_OtxyxBZ0ahS06cqIv-vd10M/view).
 
-__At the current stage__ of Zilliqa 2.0 development, the core protocol is available to test via the Jasper proto-testnet. 
+</div>
 
-__The proto-testnet__ exists as the first implementation of the Zilliqa 2.0 consensus mechanism, which comprises Proof-of-Stake validator selection paired with Pipelined Fast-HotStuff for fast and efficient transaction processing.
+<div class="md-zil-wrapper" markdown>
+# Everything you need to know
+<div class="md-zil-cards" markdown>
+<div markdown>
 
-Here you will find documentation related to the current implementation of Zilliqa 2.0, including:
+## The Roadmap
+For an overview of the features and capabilities introduced in Zilliqa 2.0, please visit the [roadmap website](https://roadmap.zilliqa.com/), where you can also find a list of development milestones. 
 
-<div class="grid cards" markdown>
+</div>
+<div markdown>
 
--   __What's new in Zilliqa 2.0__
+## The Whitepaper
+To learn more about the design of the Zilliqa 2.0 protocol, [read the whitepaper](https://drive.google.com/file/d/1XqSySl0w_OtxyxBZ0ahS06cqIv-vd10M/view).
 
-      [:octicons-arrow-right-24: Read More](/zilliqa2/changes/)
+</div>
+<div markdown>
 
+## Core protocol
+At the current stage of Zilliqa 2.0 development, the core protocol is available to test via the Jasper proto-testnet.
 
--   __URLs of RPC endpoint, faucet and block explorer__
+</div>
+<div markdown>
 
-      [:octicons-arrow-right-24: Read More](/zilliqa2/endpoints/)
+## Proto-testnet
+The proto-testnet exists as the first implementation of the Zilliqa 2.0 consensus mechanism, which comprises Proof-of-Stake validator selection paired with Pipelined Fast-HotStuff for fast and efficient transaction processing.
 
--   __How to run a node and become a validator__
+</div>
+</div>
 
-    [:octicons-arrow-right-24: Read More](/zilliqa2/nodes/)
+# Implementation of the Zilliqa 2.0
+<div class="grid cards md-zil-cards" markdown>
 
--   __Development tools, SDKs, and Git repositories__
+-  [__What's new <br>in Zilliqa 2.0__](/zilliqa2/changes/)
 
-    [:octicons-arrow-right-24: Read More](/zilliqa2/sdk/)
 
--   __Supported APIs__
 
-    [:octicons-arrow-right-24: Read More](/zilliqa2/support/)
+-   [__URLs of RPC endpoint, faucet and block explorer__](/zilliqa2/endpoints/)
+
+
+-   [__How to run a node and become a validator__](/zilliqa2/nodes/)
+
+
+-   [__Development tools, SDKs, and Git repositories__](/zilliqa2/sdk/)
+
+
+-   [__Supported <br>APIs__](/zilliqa2/support/)
+
 
 </div>
 
 More documentation for Zilliqa 2.0 will become available as new functionality is rolled out to the protocol and its capabilities are expanded.
 
 *__Note:__ This documentation refers to Zilliqa 2.0. Documentation for the current production version of Zilliqa is available at
- [https://dev.zilliqa.com/zilliqa1/](/zilliqa1/)*
-
+ [__https://dev.zilliqa.com/zilliqa1/__](/zilliqa1/)*
+<br>
+<br>
+<br>
+
+<span id="addZilliqaChainButton" class="metamask">
+Add Zilliqa 2 EVM proto-testnet
+</span>
+<br>
+<br>
+<br>
+</div>

zq2/docs/js/add-zilliqa-chain.js

@@ -0,0 +1,46 @@
+// add-zilliqa-chain.js
+
+document.addEventListener('DOMContentLoaded', function() {
+    const addZilliqaChainButton = document.getElementById('addZilliqaChainButton');
+
+    if (addZilliqaChainButton) {
+        addZilliqaChainButton.addEventListener('click', addZilliqaChain);
+    }
+});
+
+async function addZilliqaChain() {
+    if (typeof window.ethereum !== 'undefined') {
+        try {
+            await window.ethereum.request({
+                method: "wallet_addEthereumChain",
+                params: [
+                    {
+                        blockExplorerUrls: [
+                            "https://otterscan.zq2-prototestnet.zilliqa.com/"
+                        ],
+                        iconUrls: [
+                            "https://www.zilliqa.com/images/icon-zilliqa-testnet.svg",
+                            "https://www.zilliqa.com/images/icon-zilliqa-testnet.png"
+                        ],
+                        nativeCurrency: {
+                            name: "ZIL",
+                            symbol: "ZIL",
+                            decimals: 18
+                        },
+                        rpcUrls: [
+                            "https://api.zq2-prototestnet.zilliqa.com"
+                        ],
+                        chainId: "0x814f",
+                        chainName: "Zilliqa 2 EVM proto-testnet"
+                    }
+                ],
+            });
+            alert('Zilliqa 2 EVM proto-testnet has been added to your wallet!');
+        } catch (error) {
+            console.error(error);
+            alert('An error occurred while trying to add the network: ' + error.message);
+        }
+    } else {
+        alert('MetaMask is not installed. Please install it to use this feature.');
+    }
+}