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

.nvmrc

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

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,27 @@
 ## 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)
+
+- 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-after-creation.png)

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

@@ -1,30 +1,36 @@
 ## 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/polkadotjs-check-min-create-bond.png)
+
+### Step 3: Create a Pool
 
 - Navigate to the **Extrinsics** tab on PolkadotJS.
 
 ![PolkadotJS Extrinsics](./images/extrinsic.png)
 
-- Under the **Lst** section, select **Create**.
+- 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.
 
@@ -38,18 +44,17 @@ 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:
+Let's break down the events. Navigate to the **Network** → **Explorer** tab, and you should see the following events:
 
 ![PolkadotJS Events](./images/events.png)
 
-- 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.
-
-### 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 **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)

pages/restake/join_a_pool/_meta.json

@@ -1,4 +1,4 @@
 {
-  "polkadotjs": "Join using PolkadotJs",
-  "tangle": "Join using Tangle DApp"
+  "tangle": "Join using Tangle DApp",
+  "polkadotjs": "Join using PolkadotJs"
 }

pages/restake/join_a_pool/polkadotjs.mdx

@@ -1,7 +1,5 @@
 ## How to Join a Liquid Staking Pool Using PolkadotJS
 
-Joining a liquid staking pool on the Tangle Network using PolkadotJS is a simple process. Follow these steps:
-
 ### Step 1: Access the PolkadotJS Interface
 
 - Open [PolkadotJS Apps](https://polkadot.js.org/apps/).

pages/restake/join_a_pool/tangle.mdx

@@ -1,3 +1,25 @@
 ## How to Join 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--If you don't see a specific pool that you're looking for, make sure you're connected to the correct network.
+
+![Selecting a Liquid Staking Network](../../../images/liquid-staking/select-ls-network.png)
+
+### Step 2: Enter a Deposit Amount & Select a Pool
+
+- Enter the amount of tokens you wish to deposit into the pool. You can view your available balance next to the wallet icon.
+
+![Entering Deposit Amount](../../../images/liquid-staking/input-amount-select-tab.png)
+
+- Select a pool by clicking on the **All Pools** tab, clicking on a protocol to expand its list of pools.
+- The table also lists key details such as APY and Total Value Locked (TVL) for each pool. These metrics can help you evaluate the pool's performance and popularity.
+
+### Step 3: Join Pool & Stake
+
+- The lower input field displays the total amount of the selected pool's tokens that you'll receive from your deposit. This amount is calculated using the exchange rate and also includes the liquid staking fee, if applicable.
+- Once you've double-checked all the transaction details, click on the **Join Pool & Stake** button to deposit your tokens into the selected pool, and proceed to confirm the transaction with your wallet.
+
+![Select a Pool and Click Stake](../../../images/liquid-staking/select-pool-and-click-stake.png)

pages/restake/lst-introduction.mdx

@@ -0,0 +1,19 @@
+# Tangle Liquid Staking
+
+Tangle's liquid staking system is a multi-chain operation specific liquid staking protocol. We currently have liquid staking protocols for Ethereum and Polkadot, through our Ethereum smart contracts protocol and [Polkadot parachain](https://github.com/webb-tools/tangle-restaking-parachain).
+
+## Operation Specific Liquid Staking
+
+Operation specific liquid staking is a generalization of most liquid staking protocols that usually has a dedicated staking pool users deposit into to mint a single liquid staking token. In our case, we generalize the liquid staking system to support minting an LST for each specific staking operation. Users can effectively define their own pools, as is allowed by the underlying protocol, and mint a specific LST for that operation. They are not limited by the protocol itself as to what LST will be minted.
+
+This allows us to create many more LSTs in a single protocol implementation. For validator/operator staking protocols, such as Polkadot or Chainlink, each unique staking operation yields a unique liquid staking token. Minting an LST for validator A is different than minting an LST for validator B; if we replace validators with pools or dApps or any staking operation, we get unique LSTs for these operations.
+
+## Benefits of Operation Specific LSTs
+
+The benefits of this design are that it allows the user full customizability over what choice of staking operations they want to liquid stake with instead of being forced into a default pool. This additionally allows the operators, validators, and governance systems themselves to participate with finer grained controls and create liquid assets over their own operations. A validator can liquid stake on themselves to receive a liquid asset that can be used in other DeFi or restaking protocols. This affords the validator a way to specifically open up their own operation to new yield opportunities, resting assured that they won't be slashed at the base layer protocol.
+
+## Downsides of Operation Specific LSTs
+
+The downsides of this design are the plethora of new tokens created and the lack of liquidity between these tokens in a DeFi ecosystem. Since there could be exponentially many LSTs minted for each given protocol, trading between any pair would suffer from lacking the liquidity a unified LST protocol could provide.
+
+In Tangle, we will leverage these LSTs for restaking collateral where users re-lock these assets in new service offerings. This allows us to avoid dealing with this problem, as the collateral is as good as any other and still provides the basis for outsourced security and slashing. We do however, hope to see integrations built on top of Tangle to support trading between LSTs minted from the same underlying protocol.