feat(tangle-dapp): Add liquid staking unstaking card

yurixander commented 3 months ago

Summary of changes

Provide a detailed description of proposed changes.

➕ Ability to redeem (schedule unstake) minted tokens on the Parachain.
➕ Added hook to calculate exchange rate for minting and redeeming for any given token/LST.
➕ Created hook for fetching ongoing time units, as well as basic logic for estimating unlock times. This will be completed in my future PRs.
➕ Mint/redeem fees are also calculated and displayed.
➕ Wallet balance for the selected token is now fetched from the parachain and shown. It also shows a skeleton loader when loading.
🖌️ Implemented designs of unstake card, unstaking requests table, unstake confirmation modal, cancel unstake modal, and more.
🔧 Added missing check required when redeeming: Check that all delegations aren't occupied, otherwise the redeem extrinsic will fail.
🔧 Refactored some utility functions, fixing bugs and making the code clearer (ex. formatBn no longer uses confusing regex).
🐛 Fixed bug with the formatBn function which was causing certain values like 0.0001 to be incorrectly formatted as 0.1.

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

Screen Recording

If possible provide a screen recording of proposed change.

liquid-staking-unstake.webm

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

Deploy Preview for tangle-dapp ready!

Name	Link
Latest commit	54e0dbb3850047e823e487a67985b342fca6f9a4
Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/669e3df12f3a320008dbd83a
Deploy Preview	https://deploy-preview-2415--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.

vutuanlinh2k2 commented 2 months ago

@yurixander I got overflow UI when using Arc browser on Liquid Staking page

[x] Fix UI overflow

CleanShot 2024-07-19 at 15 21 50@2x

yurixander commented 2 months ago

@vutuanlinh2k2 I'm not seeing the UI overflow problem on my end, also the UI on your screenshot seems to be from previous code... do you happen to be on the most up to date version of this branch?

yurixander commented 2 months ago

@AtelyPham Seems like a tiny bug regarding table headers was introduced in #2436:

AtelyPham commented 2 months ago

@AtelyPham Seems like a tiny bug regarding table headers was introduced in #2436:

Can you check again on the develop branch? I don't see the error on the live development site.

CleanShot 2024-07-21 at 19 16 37@2x

yurixander commented 2 months ago

@AtelyPham Check here: https://deploy-preview-2436--tangle-dapp.netlify.app/nomination, for some reason the dev branch preview doesn't show the problem, but that link (the deploy preview of #2436) does. The problem also occurred after merging those changes for me.

tangle-network / dapp