Add Tangle DApp usage guides: bridging, liquid staking, and restaking

.nvmrc

@@ -0,0 +1 @@
+18

README.md

@@ -14,7 +14,7 @@
 
 ❗ **Note:** This is a fork of [Vercel Docs](https://github.com/vercel/turbo/tree/main/docs).
 
-This repository serves as the **documentation** for the **[Tangle Network](https://www.Tangle.tools/)** . The docs are written in [MDX](https://mdxjs.com/) format an extension of [markdown](https://www.markdownguide.org/), processed by [Nextra](https://github.com/shuding/nextra/tree/main), and published to Webb Docs. For support on using Nextra see [https://nextra.site/docs].(https://nextra.site/docs)
+This repository serves as the **documentation** for the **[Tangle Network](https://www.tangle.tools/)** . The docs are written in [MDX](https://mdxjs.com/) format an extension of [markdown](https://www.markdownguide.org/), processed by [Nextra](https://github.com/shuding/nextra/tree/main), and published to Webb Docs. For support on using Nextra see [https://nextra.site/docs].(https://nextra.site/docs)
 
 ### Directory structure
 

components/LandingPage.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import DocsLandingGraphic from "../public/images/DocsLandingGraphic.png";
 import { SiBlueprint } from "react-icons/si";
 import { GiToken } from "react-icons/gi";
 import { FaWallet } from "react-icons/fa";

pages/_meta.json

@@ -17,7 +17,7 @@
     "type": "page"
   },
   "restake": {
-    "title": "Restake",
+    "title": "Restaking",
     "type": "page"
   },
   "operators": {

pages/operators/validator/introduction.mdx

@@ -8,8 +8,8 @@ import Callout from "/components/Callout";
 
 # Start Validating
 
-<Callout type="info"> 
-**You should be familiar with [account management basics](/account-manage) before proceeding, and ensure you're connected to the correct network, Tangle Network.**
+<Callout type="info">
+**You should be familiar with [account management basics](/network/account-manage) before proceeding, and ensure you're connected to the correct network: Tangle Network.**
 </Callout>
 
 Becoming a validator on a decentralized network like Tangle is a big responsibility and a fairly technical process. **You are accountable for both your stake and the stake of your nominators. Any errors could lead to slashing of tokens, impacting your balance and reputation.** However, there are also rewards - you help secure a decentralized network and can grow your stake through nominations.
@@ -22,7 +22,7 @@ Generally, the process for becoming a validator involves three steps:
 
 1. **Bonding Tokens:** Before a node can become a validator, the node operator usually needs to bond (or stake) a certain amount of tokens. This is a way of putting up collateral that can be slashed (or forfeited) if the validator behaves maliciously or fails to properly validate transactions and blocks. Bonding is a way of ensuring that validators have a vested interest in properly maintaining the network.
 
-<Callout type="info"> 
+<Callout type="info">
 **How much TNT do I need to be an active Validator?**
 
 To be elected to the active validator set (to recieve block rewards), you need a minimum stake behind your validator. This can come from yourself or nominators. This means at a minimum, you'll need enough TNT for stash and staking accounts with the existential deposit, plus extra for fees. The rest can come from nominators. To understand validator election, check the [NPoS election algorithms page.](https://wiki.polkadot.network/docs/learn-phragmen#what-is-the-sequential-phragm%C3%A9n-method)

pages/operators/validator/validator-rewards.mdx

@@ -1,11 +1,11 @@
 ---
 title: Validator Rewards
-description: A brief overview of Tangle Network rewards and their payout scheme.
+description: A brief overview of Tangle network rewards and their payout scheme.
 ---
 
 # Validator Rewards
 
-Running a [validator](/introduction) node on the Tangle Network allows you to connect to the network, sync with a bootnode, obtain local access to RPC endpoints, and also author blocks. The network rewards successful validators (users running validator nodes and actively producing blocks) by paying a set amount of network tokens as rewards.
+Running a validator node on the Tangle Network allows you to connect to the network, sync with a bootnode, obtain local access to RPC endpoints, and also author blocks. The network rewards successful validators (users running validator nodes and actively producing blocks) by paying a set amount of network tokens as rewards.
 
 ## How Rewards are Calculated
 

pages/restake/_meta.json

@@ -7,6 +7,7 @@
   "staking-intro": "Introduction to Staking",
   "nominator": "Nominating your TNT",
   "restake-concepts": "Restaking core concepts",
+  "bridge": "Bridge",
   "-- restaking": {
     "type": "separator",
     "title": "Restaking"

pages/restake/bridge.mdx

@@ -0,0 +1,78 @@
+import Callout from "/components/Callout";
+
+# Bridge
+
+In order to participate in Tangle's restaking infrastructure, users need to first bridge in their assets from EVM-based networks such as Ethereum into Tangle. For this, we have a dedicated bridge & its corresponding DApp page.
+
+[Access Tangle DApp's Bridge page here](https://app.tangle.tools/bridge)
+
+## Supported Assets
+
+As of the time of writing of this page, the bridge only supports WETH for testnet transfers between Holesky and Tangle.
+
+Soon, users will be able to create and deploy a Hyperlane Warp Route blueprint instance to support additional assets. [Learn more about Blueprints here](/developers/blueprints).
+
+More information about adding support for additional assets will be provided in the near future. For now, make sure you've joined our Discord server & Telegram channel to stay updated.
+
+TODO: For custom bridging, how will the users choose what bridge to use if anyone can deploy their warp route instances? The list will need to be of addresses, but those addresses will need to be registered in a specific repo. We don't have that repo yet, so for now we depend on the Hyperlane registry repo in which users can submit their PRs to have their own instances included.
+
+## How the Bridge Works
+
+Bridging from EVM-based blockchains into Tangle EVM works by leveraging Hyperlane, a permissionless interoperability layer that allows smart contract developers to send arbitrary data between blockchains. [Learn more about Hyperlane here](https://docs.hyperlane.xyz/docs/protocol/protocol-overview).
+
+## Bridge Fees
+
+Apart from the network transaction fees (gas fees), ...
+
+Hyperlane warp route fees?
+Are there multiple transactions that need to be made by the user? 2? Do each charge a fee?
+
+## How to Use the Bridge
+
+### Step 1: Access Tangle DApp & Connect Wallet
+
+- Open [Tangle DApp's Bridge page](https://app.tangle.tools/bridge).
+- Connect your wallet to the DApp by clicking on the **Connect Wallet** button on the top right and selecting your preferred wallet provider.
+
+TODO: Should the user/wallet selected always be EVM-based?
+
+### Step 2: Select the Source & Destination Networks
+
+TODO: Explain that when bringing IN asssets, source chain should never be Tangle, and then when bringing OUT assets, destination chain should never be Tangle.
+
+In this example, we'll be bridging in WETH from Holesky to Tangle Testnet EVM. Select the source network as Holesky and the destination network as Tangle Testnet EVM.
+
+![Select Source & Destination Networks](/images/restake/bridge/select-networks.png)
+
+### Step 3: Fill in Details
+
+- Enter the amount of WETH you'd like to bridge in.
+- Enter the recipient address. This is the address on Tangle where the bridged assets will be deposited. If transferring into Tangle EVM (like in this example), this should be an EVM address.
+
+<Callout type="default">
+Ensure that the recipient address entered is correct to avoid losing your funds. We recommend sending a small amount first to get comfortable with the process.
+</Callout>
+
+- Click on the **Transfer** button.
+
+### Step 4: Perform the Transaction
+
+- After clicking on the **Transfer** button, a confirmation dialog will appear. Review the details & fees, and click on the **Confirm** button to initiate the transaction.
+- After a few seconds, the transaction dialog from your wallet provider (such as MetaMask) will appear. The bridging process consists of two transations: one to approve the bridge contract to spend your WETH, and the other to interact with the bridge contract. Review all details and confirm the first transaction to continue.
+
+![MetaMask Transaction 1 - Approve Spending](/images/restake/bridge/metamask-tx-1.png)
+
+- After the first transaction is confirmed, a second transaction confirmation dialog will automatically appear. This is the transaction used to interact with the bridge smart contract. Review all details and confirm the transaction to complete the bridging process.
+
+![MetaMask Transaction 2 - Interact with the Smart Contract](/images/restake/bridge/metamask-tx-2.png)
+
+### Step 5: Monitor Transaction Progress
+
+- Once the second transaction is confirmed, you can monitor the progress of the bridging process right from the DApp. A small toast notification will automatically appear on the top right of the screen with the transaction details.
+- Once you see the **Executed** status, the bridging process is complete. You can also use the [Tangle Testnet's EVM explorer](https://testnet-explorer.tangle.tools/) to find and track the transaction. Check the [Resources and Tools page](/resources) for other explorers.
+
+![Transaction Status Toast Notification](/images/restake/bridge/tx-status-toast.png)
+
+### Step 4: Review Your Balance
+
+On the account page.

pages/restake/create_a_pool/_meta.json

@@ -1,6 +1,6 @@
 {
   "pool-roles": "Pool Roles",
   "benefits-and-risks": "Benefits and Risks",
-  "lst-pool-create": "Create using PolkadotJs",
-  "lst-pool-create-tangle": "Create using Tangle DApp"
+  "lst-pool-create-tangle": "Create using Tangle DApp",
+  "lst-pool-create": "Create using PolkadotJS"
 }

pages/restake/create_a_pool/lst-pool-create-tangle.mdx

@@ -1,3 +1,29 @@
 ## How to Create a Liquid Staking Pool Using Tangle DApp
 
-TBD
+### Step 1: Access Tangle DApp & Connect Wallet
+
+- Open [Tangle DApp's Liquid Staking page](https://app.tangle.tools/liquid-staking).
+- Connect your wallet to the DApp by clicking on the **Connect Wallet** button on the top right and selecting your preferred wallet provider.
+- Connect to the desired Tangle network by selecting the appropriate network from the dropdown list. Note that liquid staking pools are only available on the networks in which they are created.
+
+![Selecting a Liquid Staking Network](../../../images/liquid-staking/select-ls-network.png)
+
+### Step 2: Configure & Create a Pool
+
+- Once on the liquid staking page, scroll down until you see the **CREATE POOL** button. Click on it to bring up a form where you can configure your new pool.
+
+![Create Pool Button](../../../images/liquid-staking/create-pool-btn.png)
+
+- Choose a brief, descriptive name for your pool so that other users can easily identify it, enter an initial bond amount, and set the pool's roles (Root, Nominator, Bouncer).
+- By default, all of the roles will be assigned to the active wallet's address. You can change these addresses to other accounts if needed.
+- Some details such as the pool's commission and nominations can be set **after** the pool is created: You'll be able to easily manage it under the **My Pools** tab.
+- Once you've entered and verified all the details, click on the **Create Pool** button to initiate the transaction.
+
+![Pool Configuration Form](../../../images/liquid-staking/create-pool-form.png)
+
+### Step 3: Manage Your Pool
+
+- After you've created your pool, you can view & manage it under the **My Pools** tab. Here, you can set the commission rate, manage nominations, and view the pool's performance. In case that you don't see the pool you've just created right away, try refreshing the page.
+- Note that the `MANAGE` button or some of its dropdown options will only be visible **if the active account has the corresponding role**. For example, only the account with the nominator role will be able to see the `Update Nominations` button on the dropdown. If you've set all roles to the same account, you will have all the management options available.
+
+![My Pools Tab](../../../images/liquid-staking/my-pools.png)

pages/restake/create_a_pool/lst-pool-create.mdx

@@ -1,55 +1,60 @@
 ## How to Create a Liquid Staking Pool Using PolkadotJS
 
-Creating a liquid staking pool on the Tangle Network using PolkadotJS is a straightforward process. Follow these steps:
-
 ### Step 1: Access the PolkadotJS Interface
 
 - Open [PolkadotJS Apps](https://polkadot.js.org/apps/).
-- Connect to the Tangle Network by selecting the appropriate network from the dropdown list.
+- Connect to the desired Tangle network by selecting the appropriate network from the left dropdown list. Note that liquid staking pools are only available on the networks in which they are created.
+- In case that the network that you're looking for is not listed on the dropdown list, input its RPC endpoint under the `DEVELOPMENT` → `custom endpoint` input.
+
+For convenience, here are the PolkadotJS direct links for Tangle Testnet and Mainnet:
+
+- Tangle Testnet: https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Ftestnet-rpc.tangle.tools#/explorer
+- Tangle Mainnet: https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc.tangle.tools#/explorer
 
-Alternatively, you can access it via the tangle explorer:
+### Step 2: Check Pool Creation Requirements
 
-- The Tangle Testnet is available at: https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Ftestnet-rpc.tangle.tools#/explorer
-- The Tangle Mainnet is available at: https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc.tangle.tools#/explorer
+- In order to prevent spam, pool creation may require a minimum bond amount to be deposited. Ensure that you have enough funds in your account to cover this requirement.
+- These funds will not be forfeited; they will be bonded to the pool and will be returned to you when the pool is dissolved.
 
-### Step 2: Create a Pool
+![PolkadotJS UI: Check Min. Bond](/images/liquid-staking/create-pool-polkadotjs/check-min-create-bond.png)
 
-- Navigate to the **Extrinsics** tab on PolkadotJS.
+### Step 3: Create a Pool
 
-![PolkadotJS Extrinsics](./images/extrinsic.png)
+- Navigate to the **Developer** → **Extrinsics** tab on PolkadotJS.
 
-- Under the **Lst** section, select **Create**.
+![PolkadotJS Extrinsics](/images/extrinsic.png)
+
+- Under the **lst** section, select **create(...)**.
 - Enter the required details such as:
-  - **Initial deposit amount**: The amount of tokens you are contributing to the pool. This is in lowest unit, so should use 18 decimal places.
-  - **Root account**: The account that will be responsible for managing the pool.
-  - **Nominator account**: The account that will nominate validators for the pool.
-  - **Bouncer account**: The account responsible for managing participant entries and exits.
-  - **Pool Name**: Choose a unique and descriptive name for your pool.
+  - **Initial deposit amount**: The amount of tokens you are contributing to the pool. This is in lowest unit, so should be in 18 decimal places.
+  - **Root account address**: The account that will be responsible for managing the pool.
+  - **Nominator account address**: The account that will nominate validators for the pool.
+  - **Bouncer account address**: The account responsible for managing participant entries and exits.
+  - **Pool Name**: Choose a brief and descriptive name for your pool. Does not need to be unique.
 
 You can use the same account for the root, nominator and bouncer or different accounts.
 
-![PolkadotJS Create Pool](./images/create.png)
+![PolkadotJS Create Pool](/images/liquid-staking/create-pool-polkadotjs/create.png)
 
 Sign and submit the transaction. Make sure the account you are using has enough balance to cover the transaction fee and pool deposit.
 
-![PolkadotJS Transaction](./images/sign.png)
+![PolkadotJS Transaction](/images/liquid-staking/create-pool-polkadotjs/sign.png)
 
 If successful, you should see the following screen:
 
-![PolkadotJS Pool Created](./images/inblock.png)
-
-Lets break down the events, navigate to the **Network** tab, you should see the following events:
+![PolkadotJS Pool Created](/images/liquid-staking/create-pool-polkadotjs/inblock.png)
 
-![PolkadotJS Events](./images/events.png)
+Let's break down the events. Navigate to the **Network** → **Explorer** tab, and you should see the following events:
 
-- lst.Bonded : tells you that the pool has been created and the initial deposit has been made.
-- lst.Created : tells you that the pool has been created and shows the pool id.
-- assets.Issued : tells you that the pool has created a new asset (LST) and issued the staked tokens to the creator.
+![PolkadotJS Events](/images/liquid-staking/create-pool-polkadotjs/events.png)
 
-### Step 3: Configure Commission and Roles (Optional)
+- **lst.Bonded**: Your initial deposit was bonded to the pool.
+- **lst.Created**: Pool creation confirmation, along with the pool's unique ID.
+- **assets.Issued**: A new asset (LST) was created and issued the staked tokens to the creator.
 
-- Set the commission rate you wish to charge as the pool manager.
+### Step 4: Configure Commission and Roles (Optional)
 
-You can do this by navigating to the **Extrinsics** tab, under the **Lst** section, select **SetCommission**.
+- Set the commission rate you wish to charge as the pool manager by navigating to the **Developer** → **Extrinsics** tab, and under the **lst** section, selecting **setCommission(...)**.
+- Note that this amount is in **perbill** (1/1,000,000) units, so a commission rate of 10% would be entered as `100 000`. Another example, a commission rate of 12.34% would be entered as `123 400`.
 
-![PolkadotJS Set Commission](./images/commission.png)
+![PolkadotJS Set Commission](/images/liquid-staking/create-pool-polkadotjs/commission.png)

pages/restake/how_to_restake/_meta.json

@@ -1,6 +1,7 @@
 {
-  "deposit": "Deposit using PolkadotJs",
-  "delegate": "Delegate using PolkadotJs",
-  "unstake": "Unstake using PolkadotJs",
-  "withdraw": "Withdraw using PolkadotJs"
+  "deposit-tangle": "Deposit using Tangle DApp",
+  "deposit": "Deposit using PolkadotJS",
+  "delegate": "Delegate using PolkadotJS",
+  "unstake": "Unstake using PolkadotJS",
+  "withdraw": "Withdraw using PolkadotJS"
 }