feat(tangle-dapp): Stake Operation Table UI & Logic

[devpavan04]

Summary of changes

• Adds staking item selection table for 3 chains - Polkadot, Astar and Phala to perform staking operation.
• Updates the tangle-dapp background image.

Pallets and APIs

• Polkadot
  • staking pallet - api.query.staking - fetches all validators, validator TVL and validator commission %.
• Astar
  • dappStaking pallet - api.query.dappStaking - fetches all dapps and dapp TVL.
  • Astar API - https://api.astar.network/api/v1/astar/dapps-staking/dapps - fetches dapp's name and contract type (EVM, WASM or EVM+WASM).
• Phala
  • phalaBasePool pallet - api.query.phalaBasePool - fetches all vaults and stake pools, TVL, commission % and type (vault or stake pool).

Proposed area of change

• [x] apps/tangle-dapp
• [x] libs/webb-ui-components

Reference issue to close (if applicable)

• Closes #2334
• Closes #2443
• Closes #2449

Screen Recording

Polkadot

https://github.com/user-attachments/assets/8dab77d4-c141-45b6-b728-b55ff91841b6

Astar

https://github.com/user-attachments/assets/dc31be8d-3af1-4dfa-b326-35d90884d325

Phala

https://github.com/user-attachments/assets/e68b16ea-f1de-486a-8eea-e16b7282a642

[netlify[bot]]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	18bbf01cf3bb0880f6898834841f25ae81f34ce0
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66a2072825a748000851f52b
😎 Deploy Preview	https://deploy-preview-2406--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.

[devpavan04]

Update: Jul 4

https://github.com/webb-tools/webb-dapp/assets/53374218/35901722-c918-4971-9e27-c335242d516f

• [x] The table displays data fetched from the Polkadot Mainnet (Validators) and Phala Network (Collators).
• [x] The table displays the Validator's Identity, Total Staked Value, and Commission, both of which can be sorted.
• [x] The table currently displays only the Collator's address.

Remaining items before ready for review

• [x] Since not all chains will provide all the data points we need (e.g., commission, TVS, etc.), we need to make the table generic.
• [x] Test that the selection table works seamlessly for Polkadot Mainnet and Phala Network in this PR before moving on to other chains (next PR).
• [ ] Cache the retrieved data and display the cached data when switching between chains.

[drewstone]

@devpavan04 you should likely adapt the table's generic pattern to support "adapters" that provide you

1. The list of things that can be staked on
2. The options of how they can be selected (single selections or multi selections).

You can see this pattern in the backend implementation of LST agents. The following is the set of choices as I see it:

• Polkadot/Tangle/Kusama NPos chains allow you to select many nominators to stake on.
• Astar allows you to select 1 dApp to stake on
• Parachain-staking has its own way of working
• etc. etc.

We can start to talk about this as a "stake operation" rather than staking on a validator more specifically, since Astar and other protocols may not have the same notion of validators to stake on. Instead they have other objects to stake on like smart contracts or dApps.

[devpavan04]

@yurixander Table now shows Collators on Manta and Moonbeam as well.