Skip to content

Commit

Permalink
Add Tangle DApp usage guides: bridging, liquid staking, and restaking (
Browse files Browse the repository at this point in the history
…#65)

* Fix typos, add screenshots

* Add more steps for joining & creating pools

* Adjust to new changes made by Drew

* Improve phrasing

* Fix dead links

* Finish pool creation & joining guide

* Add first drafts for restake and bridge pages

* Optimize images, improve text

* Progress on bridge docs

* Phrasing

Co-authored-by: drewstone <[email protected]>

* Cleanup bridge page

* Add restaking deposit DApp steps

* Reorganize `How to Restake` structure

* Improve `Resources`

* Add restaking delegate steps

* Create unstake page

* Improve withdraw PolkadotJS page

* Add restake withdraw steps

* Format using Prettier

* Fix links

* Remove redundant LST intro

* Minor improvements

* Remove bridge fees section

* DApp capitalization

---------

Co-authored-by: drewstone <[email protected]>
  • Loading branch information
yurixander and drewstone authored Oct 25, 2024
1 parent af29694 commit dffecf0
Show file tree
Hide file tree
Showing 117 changed files with 670 additions and 370 deletions.
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
18
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 2 additions & 3 deletions components/LandingPage.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -57,8 +56,8 @@ const resourcesCards = [
},
{
icon: <MdAppShortcut />,
title: "Tangle App",
description: "Nominate your TNT at Tangle App",
title: "Tangle DApp",
description: "Nominate your TNT at Tangle DApp",
link: "http://app.tangle.tools/",
},
{
Expand Down
22 changes: 11 additions & 11 deletions components/NetworkResources.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@ const NETWORK_DATA = {
mainnet: [
{ property: "Interfaces and Apps", value: "" },
{
property: "Tangle App",
property: "Tangle DApp",
value: {
type: "link",
url: "https://app.tangle.tools",
text: "Tangle App",
text: "app.tangle.tools",
},
},
{
property: "Polkadot Apps",
property: "PolkadotJS Apps",
value: {
type: "link",
url: "https://polkadot.js.org/apps/?rpc=wss://rpc.tangle.tools#/explorer",
text: "Tangle on Polkadot Apps",
text: "polkadot.js.org/apps/?rpc=wss://rpc.tangle.tools",
},
},
{ property: "Block Explorers", value: "" },
Expand All @@ -35,15 +35,15 @@ const NETWORK_DATA = {
value: {
type: "link",
url: "https://explorer.tangle.tools",
text: "Explorer.Tangle.Tools",
text: "explorer.tangle.tools",
},
},
{
property: "Substrate Block Explorer",
value: {
type: "link",
url: "https://tangle.statescan.io/",
text: "Tangle on Statescan",
text: "tangle.statescan.io",
},
},
{ property: "Asset Details", value: "" },
Expand Down Expand Up @@ -87,7 +87,7 @@ const NETWORK_DATA = {
value: {
type: "link",
url: "https://github.com/tangle-network/tangle",
text: "Tangle Repository",
text: "github.com/tangle-network/tangle",
},
},
],
Expand All @@ -98,7 +98,7 @@ const NETWORK_DATA = {
value: {
type: "link",
url: "https://app.tangle.tools",
text: "App.Tangle.Tools",
text: "app.tangle.tools",
},
},
{ property: "Block Explorers", value: "" },
Expand All @@ -107,15 +107,15 @@ const NETWORK_DATA = {
value: {
type: "link",
url: "https://testnet-explorer.tangle.tools",
text: "Testnet-Explorer.Tangle.Tools",
text: "testnet-explorer.tangle.tools",
},
},
{
property: "Substrate Explorer",
value: {
type: "link",
url: "https://tangle-testnet.statescan.io/",
text: "Tangle Testnet on Statescan",
text: "tangle-testnet.statescan.io",
},
},
{ property: "Asset Details", value: "" },
Expand Down Expand Up @@ -156,7 +156,7 @@ const NETWORK_DATA = {
value: {
type: "link",
url: "https://github.com/tangle-network/tangle",
text: "Tangle Repository",
text: "github.com/tangle-network/tangle",
},
},
],
Expand Down
8 changes: 4 additions & 4 deletions components/QuickStart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,23 @@ export const DappsArea = () => {
feature={{
Icon: CubeIcon,
description: `Private cross-chain bridge. Dedicated UI for moving digital assets privately cross-chain.`,
name: "Hubble Bridge dApp",
name: "Hubble Bridge DApp",
}}
href="https://app.webb.tools"
/>
{/* <DetailedFeatureLink
feature={{
Icon: BeakerIcon,
description: `Our easy-to-use testnet faucet allows you to claim test tokens with just a few clicks. Start experimenting with Hubble Bridge today.`,
name: "Faucet dApp",
name: "Faucet DApp",
}}
href="https://faucet.tangle.tools"
/> */}
<DetailedFeatureLink
feature={{
Icon: ChartSquareBarIcon,
description: `Monitor Hubble Bridge activities and the growth of Webb's cross-chain private transaction system.`,
name: "Hubble Stats dApp",
name: "Hubble Stats DApp",
}}
href="https://hubble-stats.webb.tools"
/>
Expand All @@ -100,7 +100,7 @@ export const DappsAreaBridge = () => {
<DetailedFeatureLink
feature={{
Icon: GitHubIcon,
description: "Monorepo for Webb dApps",
description: "Monorepo for Webb DApps",
name: "webb-dapp",
}}
href="https://github.com/tangle-network/webb-dapp"
Expand Down
2 changes: 1 addition & 1 deletion components/RepoArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const StatsdApp = () => {
<DetailedFeatureLink
feature={{
Icon: GitHubIcon,
description: "Monorepo for Webb dApps",
description: "Monorepo for Webb DApps",
name: "webb-dapp",
}}
href="https://github.com/tangle-network/webb-dapp"
Expand Down
2 changes: 1 addition & 1 deletion pages/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"type": "page"
},
"restake": {
"title": "Restake",
"title": "Restaking",
"type": "page"
},
"operators": {
Expand Down
2 changes: 1 addition & 1 deletion pages/developers/technicals/precompiles.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ The following are under consideration for inclusion, and are drawn from the open
| X-Tokens | Allows sending XC-20s to other chains using the X-Tokens Pallet. | TBD |
| XCM Transactor | Allows performing remote XCM execution from Moonbeam to other chains in the ecosystem. | TBD |
| XCM Utilities | Provides various XCM related utility functions to smart contact developers. | TBD |
| DappsStaking | Functions related to managing dApp staking. | TBD |
| DappsStaking | Functions related to managing DApp staking. | TBD |
| Sr25519 | Handles operations related to the Sr25519 signature scheme. | TBD |
| SubstrateEcdsa | Manages operations related to the Substrate Ecdsa. | TBD |
| XCM | Handles cross-chain message (XCM) operations. | TBD |
Expand Down
2 changes: 1 addition & 1 deletion pages/network/account-manage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ This guide will walk you through creating and managing your account on the Tangl

This guide will focus on Polkadot Apps browser extension, a widely trusted system created by the developers of the Polkadot and Substrate ecosystems, however, it's important to note that this browser extension does only one thing: it manages accounts and allows the signing of transactions with those accounts. **It does not inject providers for use by dapps at this early point, nor does it perform wallet functions, e.g send funds.** You will use a web interface to conduct those transactions.

There are several wallets for browser and mobile developed for Substrate chains. Below is a list of wallets currently supported by our dApps.
There are several wallets for browser and mobile developed for Substrate chains. Below is a list of wallets currently supported by our DApps.

![Wallets](/images/wallets.png)

Expand Down
6 changes: 3 additions & 3 deletions pages/operators/validator/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions pages/operators/validator/validator-rewards.mdx
Original file line number Diff line number Diff line change
@@ -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

Expand Down
6 changes: 4 additions & 2 deletions pages/restake/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@
"staking-intro": "Introduction to Staking",
"nominator": "Nominating your TNT",
"restake-concepts": "Restaking core concepts",
"bridge": "Bridge",
"-- restaking": {
"type": "separator",
"title": "Restaking"
},
"restake-introduction": "Introduction to Restaking",
"incentives": "Incentives",
"join_operator": "Operator Docs",
"how_to_restake": "How to Restake",
"assets": "Supported Assets",
"join_operator": "Operator Docs",
"how_to_restake_tangle": "How to Restake: Tangle DApp",
"how_to_restake_polkadotjs": "How to Restake: PolkadotJS",
"restake_developers": "Developer Docs",
"-- liquid staking": {
"type": "separator",
Expand Down
7 changes: 2 additions & 5 deletions pages/restake/assets.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
# Supported Assets on Tangle Restaking

## Supported Assets

Supported assets include all "liquid" assets on Tangle Network, including liquid staked TNT tokens. The network does not limit or restrict the assets that can be used for restaking. But assets are
preferred by adding them to a reward pool.
Supported assets include all "liquid" assets on Tangle network, including liquid staked TNT tokens. The network does not limit or restrict the assets that can be used for restaking, but assets are preferred by adding them to a reward pool.

## Integrate New Assets

New assets may be added through on-chain governance and TNT community approval.

To discuss new assets, you can [discuss at our forum.](https://commonwealth.im/tangle/discussions)
To propose new assets, [join the community discussion](https://commonwealth.im/tangle/discussions).
61 changes: 61 additions & 0 deletions pages/restake/bridge.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import Callout from "/components/Callout";

# Bridge

In order to participate in Tangle's restaking infrastructure, users need to first bridge in their assets from connected networks such as Ethereum. For this, we have a dedicated bridge DApp that allows users to easily bring their assets to Tangle and transfer them out.

[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.

## 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).

## 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.

### Step 2: Select the Source & Destination Networks

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)
4 changes: 2 additions & 2 deletions pages/restake/create_a_pool/_meta.json
Original file line number Diff line number Diff line change
@@ -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"
}
Binary file removed pages/restake/create_a_pool/images/commission.png
Binary file not shown.
Binary file removed pages/restake/create_a_pool/images/create.png
Binary file not shown.
Binary file removed pages/restake/create_a_pool/images/events.png
Binary file not shown.
Binary file removed pages/restake/create_a_pool/images/inblock.png
Binary file not shown.
Binary file removed pages/restake/create_a_pool/images/sign.png
Binary file not shown.
28 changes: 27 additions & 1 deletion pages/restake/create_a_pool/lst-pool-create-tangle.mdx
Original file line number Diff line number Diff line change
@@ -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-tangle/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-tangle/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)
Loading

0 comments on commit dffecf0

Please sign in to comment.