feat(tangle-dapp): Implement updated design for LS pools

yurixander commented 2 weeks ago

Summary of changes

Provide a detailed description of proposed changes.

➕ Added a new table which lists LS pools that the user is involved in: either via management roles, or staked in. This provides a quick view on how the pools which you've staked on are performing (APY), and also management actions in case you have management roles.
➕ The action button's text will change depending on the action that the user will take. For example, if the user is about to stake on a pool in which they already have a stake in, it'll show Increase Stake, otherwise Stake.
➕ Added various table states for the LS pool tables: Loading, error, and empty.
➕ Implemented onboarding modal logic, and also onboarding modal for the liquid staking page (see #2577).
➕ Added OpenGraph page metadata to the Liquid Staking page.
🔧 Simplified liquid staking pages: Instead of having an overview page, both liquid staking & overview page will now live in a single page for a more streamlined UX.
🖌️ Adjusted design of the pools table and simplified interaction & pool selection process.
⚠️ Restaking Parachain LS protocol handling hasn't yet been adjusted since there are still changes that need to be made on the parachain, such as associating every pool with a single token (ie. DOT, PHA, etc.). CC @1xstj

Proposed area of change

Put an x in the boxes that apply.

[ ] apps/bridge-dapp
[ ] apps/hubble-stats
[ ] apps/stats-dapp
[x] apps/tangle-dapp
[ ] apps/testnet-leaderboard
[ ] apps/faucet
[ ] apps/zk-explorer
[ ] libs/webb-ui-components

Reference issue to close (if applicable)

Specify any issues that can be closed from these changes (e.g. Closes #233).

Closes #2568

Screen Recording

If possible provide a screen recording of proposed change.

https://github.com/user-attachments/assets/30a68c7d-11b4-45fe-9ed1-1dc935f4a9ab

Screenshot 2024-10-04 at 06 45 50 Screenshot 2024-10-04 at 05 50 54 Screenshot 2024-10-04 at 04 25 43

Code Checklist

Please be sure to add .stories documentation if any additions are made to libs/webb-ui-components.

[ ] I have added tests that prove my fix is effective or that my feature works
[ ] I have added necessary documentation (if appropriate)

netlify[bot] commented 2 weeks ago

Deploy Preview for tangle-dapp ready!

Name	Link
Latest commit	a0b7bfb4b373aa2fe47be5634bba80b8f6848d97
Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66ffd584cd5fe8000851d172
Deploy Preview	https://deploy-preview-2570--tangle-dapp.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

yurixander commented 1 week ago

⚠️ Restaking Parachain LS protocol handling hasn't yet been adjusted since there are still changes that need to be made on the parachain, such as associating every pool with a single token (ie. DOT, PHA, etc.). CC @1xstj

CC @1xstj

drewstone commented 1 week ago

Let's cut a release! @yurixander @AtelyPham

yurixander commented 1 week ago

Let's cut a release! @yurixander @AtelyPham

Yep. I'll also see if I can get the pool creation flow in today or tomorrow.

tangle-network / dapp