feat(tangle-dapp): Unstaking/Undelegating for Restaking

AtelyPham commented 2 months ago

Summary of changes

Provide a detailed description of proposed changes.

[x] Implemented the UI and logic for scheduling an unstake request to unstake assets from an operator.
[x] Implemented querying and displaying of scheduled unstake requests in the unstake request table.
[x] Implemented the UI and logic for canceling an unstake request from the unstake request table.
[x] Implemented the UI and logic for executing an unstake request from the unstake request table.

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
[x] 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 https://github.com/webb-tools/webb-dapp/issues/2407

Screen Recording

If possible provide a screen recording of proposed change.

https://github.com/user-attachments/assets/ecaceabb-95fa-4ac7-82e2-72df14053f6f

netlify[bot] commented 2 months ago

Deploy Preview for tangle-dapp ready!

Name	Link
Latest commit	60b95571b053fba62474f740a77671563231e902
Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66a7f23086cc3e0008bbd73d
Deploy Preview	https://deploy-preview-2460--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

@monaiuu I can see that the UI here is very similar to the one on liquid staking, however since we have differing logic, I think it may be difficult or at least messy to simply have a single component work for both. So I guess what I can do is make it look the same.

Thoughts on this? @AtelyPham

AtelyPham commented 2 months ago

@monaiuu I can see that the UI here is very similar to the one on liquid staking, however since we have differing logic, I think it may be difficult or at least messy to simply have a single component work for both. So I guess what I can do is make it look the same.

Thoughts on this? @AtelyPham

If the UI is similar, we can create a UI component that contains only the UI code, such as styles, JSX, etc., without any logic code. This component can then accept props to customize its behavior and rendering.

drewstone commented 2 months ago

@AtelyPham the column labels should not have a checkbox, we also need a label on top of the unstake requests table detailing what it is we're looking at. @monaiuu are there no labels in the design?

AtelyPham commented 2 months ago

@AtelyPham the column labels should not have a checkbox, we also need a label on top of the unstake requests table detailing what it is we're looking at. @monaiuu are there no labels in the design?

The identity column in the design has not been implemented yet because the previous version of the multi-asset-pallet lacked that data.

This is the table in design.

yurixander commented 2 months ago

Some conflicts here @AtelyPham

tangle-network / dapp