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

[yurixander]

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
• 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 [FEAT] Unstake Flow to redeem tgTokens (ie. from tgDOT back to DOT) #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]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	54e0dbb
🔍 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]

Just 1 comment, otherwise LGTM!

[monaiuu]

• Update copy for modal to remove mention of NFTs: "After the schedule period completes, you can withdraw unstaked tokens."
• Update button to view explorer instead.

• Unsure if it is due to the background image, but the transaction input components seem inconsistent to latest Figma designs, default, hover, and error states can be referenced here in design system
  • Wallet balance
  • Select validators button
  • Select network dropdown button
  • Have a blue/purple (Tangle's primary color) border to denote tg versions of the tokens' icons
  • Chevron icons & on-hover styling of them

(the above components should be reused in restaking as well, unsure if @AtelyPham has worked on these)

• Remove background fill to fees component

[vutuanlinh2k2]

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

• Fix UI overflow

[AtelyPham]

Left some comments.

[AtelyPham]

LGTM 👍! The CI is still failing @yurixander.

[yurixander]

@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]

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

[AtelyPham]

@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.

[yurixander]

@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.