feat(tangle-dapp): UI Updates & Add Rewards Claiming Functionality

[AtelyPham]

Summary of changes

Provide a detailed description of proposed changes.

• Display locked balance horizontally to free up space for additional information.
• Added a reward claiming button to the account summary card.
• Relocated Tangle asset ID types to the types directory.
• Implemented claim rewards logic for Substrate and EVM.
• Added a hook to connect action event handlers with UI states.

Proposed area of change

Put an x in the boxes that apply.

• apps/tangle-dapp
• apps/tangle-cloud
• libs/tangle-shared-ui
• libs/webb-ui-components

Associated issue(s)

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

• Closes [FEAT] Add Rewards Claiming Functionality #2726
• Related [FEAT] Display Points & Rewards on Dashboard #2727

Screen Recording

If possible provide screenshots and/or a screen recording of proposed change.

Substrate

CleanShot.2025-01-23.at.12.22.36.mp4

EVM

CleanShot.2025-01-23.at.13.03.10.mp4

[netlify]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	63e2e7b
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/6795598031fa58000870952b
😎 Deploy Preview	https://deploy-preview-2754--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.

[netlify]

✅ Deploy Preview for tangle-cloud ready!

Name	Link
🔨 Latest commit	63e2e7b
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-cloud/deploys/67955980040dad0008195139
😎 Deploy Preview	https://deploy-preview-2754--tangle-cloud.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.

[AtelyPham]

The reward-claiming test in the video failed because there are no active services to increase the rewards, resulting in no rewards to claim.

In the demo, I enabled the claiming function in the code to demonstrate interaction with the chains (Substrate & EVM). In reality, we have a check to render the claiming button.

[monaiuu]

@AtelyPham I thought we don't need active services to claim the reward, users should be eligible for TNT rewards with just making a deposit in restaking.

also can we update the UI as the following so it is clear to the user the amount of unclaimed rewards?

[AtelyPham]

We still need space for these actionsbuttons. How would we place the content?

[monaiuu]

we can move the send action button next to the TNT amount (shown in image above), as for viewing the rewards currently that is for nomination. so I think user can just go to nomination page to claim rewards. we don't have to collide it with claiming restaking rewards.

[monaiuu]

as for vest we are currently conditionally rendering it, and having it below transferable balance already:

[monaiuu]

@1xstj can you set up the rewards for testnet restake vaults so we can get this PR through? we want to be able to claim rewards with deposit APY on testnet vaults.

[drewstone]

Seems our reward processing is not where we need it to be right now. We can't leave todos like this for later. These features need to ship 100% complete. No more breaking features like this down it's bad practice for this type of thing and is slowing us down.

[drewstone]

Status update? There are now EVM assets and you and yuri should have ability to create them to test out rewards, points, and more.

[AtelyPham]

After my meeting with Mona yesterday, there were some UI updates, and new APIs were added to retrieve the details of ERC20 assets. It will be ready for review by the end of today.

[AtelyPham]

Changes since the last review:

• Moved actions next to the account balance to create space for reward and point displays.
• Added error handling for unsupported pallets or API calls.
• Removed the View button from the operator table.
• Changed the Restake button to Delegate on the operator table.
• Added a blueprint tab on the restaking page.
• Removed the join operator banner from the restaking page.
• Moved the join operator button to the operator tab on the restaking page.
• Update copies of tooltips.
• Switched to the delegate tab and auto-selected the operator when the user clicks the delegate button on the operator table.
• Updated the Substrate asset ID to bigint from number.
• Added support for batching multiple asset rewards simultaneously, if needed.