feat(tangle-dapp): Implement unstake requests table

yurixander commented 2 months ago

Summary of changes

Provide a detailed description of proposed changes.

➕ All unstaking requests are shown for the active account.
➕ Added estimated unlocking time calculation, which also takes into account the different types of time units available (khour, eras, rounds, etc.).
➕ Users can now cancel their unstake requests. The rebond tx has been implemented in the useLstRebondTx hook.
➕ A confirmation modal is shown when the cancel unstake requests transaction completes.
➕ Both withdraw_redeem and rebond transactions are batched when multiple are selected in the unstaking requests table.
🖌️ Adjusted unstaking requests table's design to match updated design in Figma.
🖌️ Implemented design for various unstaking requests table states, such as when there is no account connected, when there are no unstaking requests, and a loading state.
🐛 Fixed unclaimed payout amount not showing a loading state.
⚠️ The withdraw_redeem action/extrinsic was not implemented in this PR since I'm waiting for the Tangle Restaking Parachain types to be updated as well as running into some issues testing mint/redeem with the parachain's latest changes. I'll address those in my upcoming PR(s). (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 #2435

Screen Recording

If possible provide a screen recording of proposed change.

https://github.com/user-attachments/assets/8e10aaa7-8fe9-4716-a3d0-d3be889d007c

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 months ago

Deploy Preview for tangle-dapp ready!

Name	Link
Latest commit	ef67de8c285f2c5b375007fb8b8020bccf6fc751
Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66aa0e479f9b060007e54a8a
Deploy Preview	https://deploy-preview-2453--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 2 months ago

Can we take a look at the various states of the table mentioned (when there is no account connected, when there are no unstaking requests, and a loading state)

@monaiuu One thing to mention would be, I think we should update the copy of:

You will be able to claim your tokens after the unstake request has been processed. To unstake your tokens go to the unstake tab to schedule request.

Because if the user is able to see the unstake requests table, it means that they are already on the unstake tab.

monaiuu commented 2 months ago

[x] Update description copy:

You will be able to withdraw your tokens after the unstake request has been processed. Schedule an unstake request to get started.

Out of curiosity, is the staking rewards implemented? I presume user would also claim their payouts alongside of the withdrawal?

yurixander commented 2 months ago

Update description copy:

You will be able to withdraw your tokens after the unstake request has been processed. Schedule an unstake request to get started.

Out of curiosity, is the staking rewards implemented? I presume user would also claim their payouts alongside of the withdrawal?

@monaiuu Good question. I would assume the staking rewards are handled internally via the Rust logic, since I am not aware of a specific extrinsic to do so.

tangle-network / dapp