Entangle Hub: From a Designer's Perspective

TL;DR: Entangle's revamped staking flow introduces a streamlined and user-friendly experience by consolidating actions and information into a comprehensive, centralized dashboard. Key enhancements include improved metrics display, better usability, and a future-proof design that will support omnichain asset management. 

Staking is one of the fundamental features of the Entangle ecosystem. As our technology evolves, it is crucial to ensure that user experiences, especially when it comes to staking, are optimized. 

Entangle is currently going through a major revamp of its staking flow, addressing various issues and introducing a more seamless and user-friendly experience.

The revamped dashboard simplifies the staking process by consolidating actions in one place. Users can now manage their staked assets more efficiently, with immediate access to relevant metrics and options, reducing the complexity and confusion that characterized the old flow.

Key Limitations of the Current Staking Flow

The current staking flow, though functional, had several pain points that needed addressing:

Refining the User Journey

The previous staking process had a somewhat fragmented experience. Users were often unsure where to start the staking journey, which could lead to confusion about what steps to take next. While access to key actions like delegating and unstaking was available, they sometimes got lost within the process, particularly during the staking flow where users might not easily find them.

For example, transitioning from bridging assets to staking them on the Entangle platform was not as smooth as we aimed for. Users had to manually navigate to the staking section post-bridging, which could disrupt their experience, especially if they were less familiar with DeFi workflows.

Enhancing Staking Metrics Visibility

We recognized that the earlier interface, though informative, lacked the depth needed for users to make fully informed decisions. Metrics like validators’ commission rates and voting power were visible, but crucial details such as net APR and validator uptime were not as prominent as they could be. Improving the visibility of these metrics will empower users with better insights.

Filling Gaps In The Staking Experience

There were some missing functionalities in the staking process, such as tracking unbonding, the ability to cancel, and the concept of compounding, which required multiple steps to claim and stake. We also noted the need for better tracking of processing transactions.

The New Staking Dashboard: A Unified Experience

The newly launched staking dashboard addresses these issues by centralizing all staking-related actions. 

The dashboard now offers:

• NGL Availability: Displays the total amount of NGL and WNGL available for staking.
• Total Staked NGL: Shows the cumulative NGL that is already staked.
• Net APR:detailed presentation of the net annual percentage rate (APR).
• Validator and Agent Information: Comprehensive data on validators and agents, including crucial metrics like uptime and net APR, aiding in more informed staking decisions.
• Unbonding Period Countdown: Provides a countdown timer for each unbonding period, giving users a clear view of when their staked assets will be available.

All staking-related actions, such as delegating, unstaking, claiming rewards, and monitoring unbonding periods, are accessible from the dashboard. Users can perform these actions without leaving the page, thanks to the use of sliding modals that keep relevant information visible.

Let’s go through these processes.

Bridging

The new flow allows users to stake NGL tokens directly after bridging from a centralized exchange, without leaving the interface. In this case, we are bridging NGL tokens purchased in an exchange from the Ethereum network to the Entangle Network.

During the bridging process, a progress indicator on the right will guide you through each internal step, providing an estimated completion time.

Post-bridging, you can directly click on the “Stake NGL” button to stake your recently bridged NGL tokens from the same Bridge window. 

Plus, you can also check the number of omnipoints you will earn for taking this action!

Validator Staking

The dashboard provides a comprehensive list of all available validators, allowing you to review key metrics such as:

• Name
• The ratio of their delegated stake to total stake.
• Their share of voting power
• Uptime. This helps users choose reliable validators who have a proven track record of staying online and securing the network.
• Commission Rate

To delegate your NGL, simply select your preferred validator from the list. Upon selection, a popup will appear with the details needed to complete your delegation.

The popup shows you:

• The amount of NGL you can stake
• Network Gas amount that will be deducted: 0.5 NGL
• The Unbonding period: 21 days

Simply enter the amount you want to stake. You will receive the total amount minus the gas fees of 0.5 NGL.

Changing Validators

After delegating, you can switch to a different validator if you find one with better uptime or a higher APY, depending on your preferences. To do this, click on your current validator, and a modal will appear, allowing you to make the change easily.

From the dropdown menu, you can check the other validators, along with their APYs. 

Click on the validator you want to shift to and then press the “Change” button.

Your stake will get redelegated to the new Validator.

Agent Staking

The staking flow of Agents is exactly the same for Validators. The only difference is that Agents require WNGL (wrapped NGL). In the previous flow, wrapping NGL and Agent delegation were two separate processes altogether.

In the new flow, these two processes have been clubbed together to improve user experience. Here is how it goes.

The dashboard provides a list of available Agents.

In the dashboard, you can see metrics such as:

• The amount of stake they own compared to the total state.
• The number of messages they have signed compared to the total messages.
• Commission%.

Once you click on an Agent, the modal will open up, prompting you to wrap and stake NGL.

Input the amount, and note the Network gas fees and unbonding period.

Initiate the wrapping process to convert your NGL to WNGL.

Once wrapped, you can stake your WNGL. If you already have WNGL, you can directly stake it without having to go through the wrapping stage.

In future updates, Entangle will automatically handle the wrapping of NGL for Agent staking, eliminating the need for manual intervention.

Rewards Claiming and Compounding

The dashboard enables you to claim or compound your rewards directly. Both options are conveniently located within the APR section.

Click on the “Claim” button to claim your rewards. You will be prompted to confirm whether you want to claim your rewards, or not.

Once you do, the rewards will be credited to your wallet.

You can also choose to compound your rewards. Click on the “Compound” button and confirm your action.

Once done, the staking rewards will be added to the delegator.

Unstaking Process

Click on the Unstake CTA for your Validator and Agent. You can choose to:

• Unstake a customized amount.
• Unstake a set percentage of your NGL, with options for 25%, 50%, or 100% (Max).

After clicking "Unstake," you'll receive a notification about the 21-day unbonding period, during which your assets will continue to earn yield.

The dashboard will now initiate a countdown. Following this unbonding period, you will be able to withdraw your coins. 

Once the unbonding countdown is over, you will be able to withdraw your coin. You will be asked to confirm your withdrawal action.

You can also click on “Cancel” in the box and withdraw your coins before the unbonding period ends.

Once you click on “Cancel,” you will get this pop-up box. Confirm your action and cut down the unbonding period.

Future Enhancements

While the new staking flow is a major improvement, the Entangle team is already looking ahead to further enhancements. The vision for the future includes evolving the staking dashboard into a comprehensive asset management tool that supports:

• Multi-Chain Asset Tracking: Allow users to track and manage assets across multiple networks from a single dashboard.
• Integration with Smart Account Features: Future updates may introduce smart account functionalities, providing users with more granular control over their assets, including advanced security settings and automated actions.

The Entangle team is dedicated to continuously enhancing both the user experience and the overall functionality of our protocol. We understand that innovation is an ongoing process, and we are committed to refining every aspect of our platform to ensure it meets the evolving needs of our users. Our goal is to create a seamless, intuitive experience that empowers our community to effortlessly interact with our platform.