Reorganize the content (#4)

* Use tab navigation

* Fix links

* Fix home page

docs/tutorial/remix-demo.md → docs/build/tutorial/remix-demo.md

@@ -75,23 +75,23 @@ contract TestSender {
 
 ```
 
-![msgport-tutorial-remix-1](../images/msgport-tutorial-remix-1.png)
+![msgport-tutorial-remix-1](../../images/msgport-tutorial-remix-1.png)
 
 ### Deploy The TestSender
 
 After successfully compiling **`TestSender.sol`**, the next step is to deploy it on the Pangolin testnet. Switch your wallet to the Pangolin network, if you need information on how to do this, consult the [network details](https://docs.darwinia.network/evm/chains/overview/). The contract requires a parameter for the constructor **`address port`**, which is the address of the ORMP port, a constant across all networks. Enter **`0x0000000005d961F950adA391C1511c92bbc64D9F`** as the parameter and click the deploy button to deploy the contract on the Pangolin testnet. To monitor the transaction status, you may also visit the [Pangolin Subscan](https://pangolin.subscan.io/).
 
 
-![msgport-tutorial-remix-2](../images/msgport-tutorial-remix-2.png)
+![msgport-tutorial-remix-2](../../images/msgport-tutorial-remix-2.png)
 
 ### Send Message
 
-![msgport-tutorial-remix-3](../images/msgport-tutorial-remix-3.png)
+![msgport-tutorial-remix-3](../../images/msgport-tutorial-remix-3.png)
 
 The most thrilling part of the process is invoking the **`send(uint256 toChainId, address toDapp, bytes calldata message, bytes calldata params)`** method on the TestSender contract, which will initiate the cross-chain message transmission. The parameters for this call are somewhat complex, so let's break them down for clarity:
 
 1. value: `2000000000000000000`
-    - The cross-chain message fee. For the purpose of this demonstration, we'll employ a hardcoded cross-chain message fee that exceeds the normal rate to ensure reliability. In practical scenarios, the fee should be determined by the [msgport API](../api.md).
+    - The cross-chain message fee. For the purpose of this demonstration, we'll employ a hardcoded cross-chain message fee that exceeds the normal rate to ensure reliability. In practical scenarios, the fee should be determined by the [msgport API](../../learn/api.md).
 2. toChainId: **`11155111`**
     - The Sepolia chain ID.
 3. toDapp: **`0xb115B479ef7cBAEae5a69Aae93ADb0287ADaA32c`**, 
@@ -105,10 +105,10 @@ After setting up the required parameters, proceed to click the transact button t
 
 ## Check Message Status
 
-A [msgport scan](../scan.md) available to monitor the status of cross-chain messages, offering the ability to index messages by either the transaction hash or the msghash. Typically, querying with the transaction hash is the most convenient approach.
+A [msgport scan](../../learn/scan.md) available to monitor the status of cross-chain messages, offering the ability to index messages by either the transaction hash or the msghash. Typically, querying with the transaction hash is the most convenient approach.
 
 
-![msgport-tutorial-remix-4](../images/msgport-tutorial-remix-4.png)
+![msgport-tutorial-remix-4](../../images/msgport-tutorial-remix-4.png)
 
 ## Check In The TestReceiver
 

docs/use-cases/order-xclearing.md → docs/build/use-cases/order-xclearing.md

@@ -2,7 +2,7 @@
 
 Many use cases involve order clearing, such as order book DEXs, swap DEXs, equivalent swap, NFT markets, and more. These use cases can all be extended to cross-chain scenarios. Helix Bridge is one such example. It is a third-party token bridge that allows users to perform cross-chain swaps with liquidity relayers, serving as permissionless order takers and makers, essentially facilitating order based cross-chain equivalent swap. 
 
-For example, [Helix Bridge](https://helixbridge.app/) leverages [Msgport](../overview.md) to do settements after users taking orders of liquidity relayer. Msgport can deliver messages indicating that whether liquidity relayer fullfill user's order successfullly or not, where truth of messages are verified by the underlining message protocols Msgport are integrating.
+For example, [Helix Bridge](https://helixbridge.app/) leverages [Msgport](../../index.md) to do settements after users taking orders of liquidity relayer. Msgport can deliver messages indicating that whether liquidity relayer fullfill user's order successfullly or not, where truth of messages are verified by the underlining message protocols Msgport are integrating.
 
 !!! Quote
     The advantage of using `Msgport` is that it is very easy to switch between different low-level message layers without making big changes to the code. — Helix Bridge
@@ -15,7 +15,7 @@ The Helix Bridge protocol introduces a permissionless system for liquidity relay
 
 Should a liquidity relayer fail to fulfill the order promptly, a "slasher" can step in to complete the order. This action is recorded in the clearing contracts. Slashers can trigger a claim against the liquidity relayer's penalty reserve by sending penalty-related clearing messages. Settlement occurs when the liquidity relayer attempts to withdraw from the penalty reserve, also through a message-sending process.
 
-![msgport-token-bridge-1](../images/msgport-token-bridge-1.png)
+![msgport-token-bridge-1](../../images/msgport-token-bridge-1.png)
 
 ## Summary
 Msgport plays a pivotal role in Helix Bridge by enabling efficient batch clearing and communication for liquidity relayers, leading to significantly reduced cross-chain fees. It allows for the seamless execution of orders and the swift resolution of disputes through the intervention of "slashers" when orders are not fulfilled as expected. Beyond token swaps, the flexibility and efficiency of Msgport can be extended to a wide range of use cases in cross chain orders senarios.

docs/overview.md → docs/index.md

@@ -3,22 +3,23 @@
 In the evolving landscape of blockchain technology, the need for interoperability and seamless communication between diverse blockchains has never been more critical. Msgport, stands at the forefront of this challenge, offering a robust solution for cross-chain messaging. With a focus on facilitating effortless asset and information transfer across blockchains, Msgport is revolutionizing the way applications communicate in web 3.0.
 
 ## Core Components and Innovations
+
 The Msgport encompasses a collection of smart contracts that outline standardized interfaces for facilitating a cross-chain messaging protocol. 
 
-At the heart of this system is the core interface, [IMessagePort](./interfaces.md#imessageport), which is designed with flexibility to support various implementations. 
+At the heart of this system is the core interface, [IMessagePort](./learn/interfaces.md#imessageport), which is designed with flexibility to support various implementations. 
 
 ![msgport-overview-1](./images/msgport-overview-1.png)
 
 Highlighting Msgport's versatility are its flagship integrations:
 
-  - [ORMP](./messaging-protocols/ormp.md): Oracle Relayer Messaging Protocol leverages chain-independent components, such as oracles and DApp-preferred relayers, to verify cross-chain messages. This approach integrates diverse verification mechanisms, ensuring robust and flexible cross-chain communication.
-  - [LCMP](./messaging-protocols/lcmp.md): Light Client Cross-Chain Messaging Protocol employs blockchain consensus mechanisms and light clients as decentralized verifiers. This ensures the integrity and accuracy of message verification across different blockchains, fostering a secure and trustless environment for message passing.
-  - [XCMP](./messaging-protocols/xcmp.md): Developed by Polkadot, Cross-Consensus Message Passing facilitates seamless messaging between various parachains within the Polkadot network. Messages are exchanged directly by parachains, relayed and verified by the relay chain, exemplifying efficient inter-parachain communication and interoperability.
+  - [ORMP](./learn/messaging-protocols/ormp.md): Oracle Relayer Messaging Protocol leverages chain-independent components, such as oracles and DApp-preferred relayers, to verify cross-chain messages. This approach integrates diverse verification mechanisms, ensuring robust and flexible cross-chain communication.
+  - [LCMP](./learn/messaging-protocols/lcmp.md): Light Client Cross-Chain Messaging Protocol employs blockchain consensus mechanisms and light clients as decentralized verifiers. This ensures the integrity and accuracy of message verification across different blockchains, fostering a secure and trustless environment for message passing.
+  - [XCMP](./learn/messaging-protocols/xcmp.md): Developed by Polkadot, Cross-Consensus Message Passing facilitates seamless messaging between various parachains within the Polkadot network. Messages are exchanged directly by parachains, relayed and verified by the relay chain, exemplifying efficient inter-parachain communication and interoperability.
 
 These implementations underscore Msgport's commitment to fostering interoperability, ensuring that assets and information can navigate the complex landscape of blockchain technology smoothly.
 
 ## Integration and Understanding
-For developers and applications eager to leverage the power of Msgport, the journey begins with the [Msgport Workflow Documentation](./workflow.md) and a series of comprehensive [Tutorials](./tutorial/remix-demo.md). These resources are meticulously crafted to demystify the complexities of Msgport, offering a clear path to integration. From foundational knowledge to step-by-step guides, developers can expect a seamless onboarding experience, enabling them to harness the full potential of cross-chain messaging.
+For developers and applications eager to leverage the power of Msgport, the journey begins with the [Msgport Workflow Documentation](./learn/workflow.md) and a series of comprehensive [Tutorials](./build/tutorial/remix-demo.md). These resources are meticulously crafted to demystify the complexities of Msgport, offering a clear path to integration. From foundational knowledge to step-by-step guides, developers can expect a seamless onboarding experience, enabling them to harness the full potential of cross-chain messaging.
 
 ## Embracing the Future
 

docs/api.md → docs/learn/api.md

@@ -1,7 +1,7 @@
 # Msgport API
 
 !!! note
-    If you're looking to explore the workings of the Msgport API more thoroughly, there is [a runnable demo](./tutorial/script-demo.md) at your disposal. This practical example serves as an excellent resource to witness the Msgport API's functionality in real-time.
+    If you're looking to explore the workings of the Msgport API more thoroughly, there is [a runnable demo](../build/tutorial/script-demo.md) at your disposal. This practical example serves as an excellent resource to witness the Msgport API's functionality in real-time.
 
 The [Msgport API](https://github.com/msgport/msgport-api) serves as a specialized tool to assist Msgport Apps in acquiring additional information necessary for the message delivery process. **Its primary role is to provide an estimation of the cross-chain fee in the native token of the source chain.** This fee covers the various cross-chain expenses that Dapps are responsible for, encapsulating the costs associated with handling token value differences between chains and the delivery and execution fees incurred on both the source and destination chains. By offering the fee estimation in the source chain's native currency, the Msgport API simplifies these complexities, resulting in a seamless user experience. Users benefit from this approach as it eliminates the need for them to possess any tokens from the target chain to facilitate cross-chain transactions.
 

docs/messaging-protocols/lcmp.md → docs/learn/messaging-protocols/lcmp.md

@@ -6,15 +6,15 @@
 
 LCMP, short for Light Client Cross-Chain Messaging Protocol, is a protocol meticulously designed and developed by the Darwinia core team. It is currently being actively utilized within Darwinia's chains. This protocol enables seamless communication between different blockchains by establishing messaging channels between them.
 
-![msgport-lcmp-1](../images/msgport-lcmp-1.png)
+![msgport-lcmp-1](../../images/msgport-lcmp-1.png)
 
 The LCMP protocol consists of two layers, as shown in the diagram above. The first layer, known as the truth layer, incorporates the light client functionality. This layer is responsible for ensuring the integrity and validity of the cross-chain messages. The protocol derives its name from this layer, which plays a crucial role in maintaining the trustworthiness of the communication. The second layer of the LCMP protocol is the message layer. This layer is specifically designed to handle various aspects related to cross-chain messages. It takes care of issues such as message formatting, transaction fees, and other relevant considerations. By addressing these concerns, the message layer streamlines the process of sending and receiving cross-chain messages, enhancing the overall efficiency and effectiveness of the protocol.
 
 ## Message Flow
 
 To facilitate a comprehensive understanding of the message flow, it is important to establish the assumption that the truth layer is functioning as intended. Without a properly functioning truth layer, it becomes impractical to delve into the intricacies of the message layer. This is because the truth layer plays a critical role in providing essential validation services for the message layer. If the truth layer is compromised or broken, it renders the execution of cross-chain messages on the target chain impossible, even if the messages successfully reach their intended destination.
 
-![msgport-lcmp-2](../images/msgport-lcmp-2.png)
+![msgport-lcmp-2](../../images/msgport-lcmp-2.png)
 
 Let's break down and expand upon the steps depicted in the diagram:
 

docs/messaging-protocols/ormp.md → docs/learn/messaging-protocols/ormp.md

@@ -21,7 +21,7 @@ These two roles play a vital role in the entire process of sending, verifying, a
 
 ## Messaging Design
 
-![msgport-ormp-1](../images/msgport-ormp-1.png)
+![msgport-ormp-1](../../images/msgport-ormp-1.png)
 
 ### Raw Message Structure
 

docs/messaging-protocols/xcmp.md → docs/learn/messaging-protocols/xcmp.md

@@ -2,6 +2,6 @@
 
 XCMP, or [Cross-Consensus Message Passing](https://wiki.polkadot.network/docs/learn-xcm), is a crucial technology for the Polkadot network. It makes it possible for the different blockchains within Polkadot, known as parachains, to talk to each other securely and without trouble. This is a big win for working together across the network. But sometimes, these parachains want to reach out beyond Polkadot, especially to talk with Ethereum's blockchain. To do this, they can't use XCMP and need a different kind of messaging bridge.
 
-Enter Darwinia. This network is tailored to fill this gap. It understands XCMP for communication within Polkadot and also speaks the language of Ethereum's blockchain (thanks to its compatibility with the EVM - Ethereum Virtual Machine). On top of that, Darwinia uses something called [Msgport](../overview.md), which is like an extra feature that makes this cross-chain conversation even smoother. It's like having a translator who's fluent in both communities' languages, making Darwinia the go-to connector for Polkadot parachains that want to interact with Ethereum's world.
+Enter Darwinia. This network is tailored to fill this gap. It understands XCMP for communication within Polkadot and also speaks the language of Ethereum's blockchain (thanks to its compatibility with the EVM - Ethereum Virtual Machine). On top of that, Darwinia uses something called [Msgport](../../index.md), which is like an extra feature that makes this cross-chain conversation even smoother. It's like having a translator who's fluent in both communities' languages, making Darwinia the go-to connector for Polkadot parachains that want to interact with Ethereum's world.
 
 The support for XCMP within Msgport is a highly anticipated feature that our core development team is actively working on. It's on our to-do list and we plan to roll it out soon, so stay tuned for this promising update.

docs/learn/networks.md

@@ -0,0 +1,5 @@
+# Supported Network
+
+The [Msgport](../index.md) is a robust and reliable communication protocol that has been deployed on various blockchains, including Ethereum and Arbitrum. This protocol has undergone careful revisions to enhance its developer and user-friendliness.
+
+You can find the comprehensive list of supported networks [here](https://github.com/msgport/msgport/blob/main/SUPPORTED.md). Please note that the specific port contract address is the same across all supported networks.

docs/workflow.md → docs/learn/workflow.md

@@ -72,7 +72,7 @@ Prior to initiating a cross chain transaction, it's essential to determine the c
 
 Message fees play a critical role in the design of a cross-chain messaging protocol. They represent not just the cost of incorporating cross-chain functionality into your applications, but they also impact the user experience of your application. A thoughtfully constructed fee mechanism is crucial for success.
 
-The fee structure for Msgport is implemented through the [Msgport API](https://github.com/msgport/msgport-api). For detailed information on the fee design, please refer to the [Msgport API Document](./api.md). Additionally, you can explore the [Pangolin > Sepolia Message Demo](./tutorial/script-demo.md) to see how the fee mechanism is applied in practice.
+The fee structure for Msgport is implemented through the [Msgport API](https://github.com/msgport/msgport-api). For detailed information on the fee design, please refer to the [Msgport API Document](./api.md). Additionally, you can explore the [Pangolin > Sepolia Message Demo](../build/tutorial/script-demo.md) to see how the fee mechanism is applied in practice.
 
 ### Send message in source chain application
 

docs/ring.md → docs/ring-dao.md

@@ -1,6 +1,6 @@
 # RING
 
-[**RING**](https://coinmarketcap.com/currencies/darwinia-network/) is the governance token of Msgport Networdators.
+[**RING**](https://coinmarketcap.com/currencies/darwinia-network/) is the governance token of Msgport.
 
 ## Token Model