WebApp- Add portfolio for earning position

[Sokol142196]

Describe the task

• Add portfolio for earning position
• Update UI for filter

Design: https://www.figma.com/design/aEnkI859zkZaIpyzPidYwh/SubWallet-Apps?node-id=10420-232642&t=BLyojTk7ELWrdfrb-4

• Responsive: https://www.figma.com/design/aEnkI859zkZaIpyzPidYwh/SubWallet-Apps?node-id=12162-375119&t=4dOUwPtnDgP0FZNw-4

[ThaoNguyen998]

Version test:

• Show incorrect active stake in case account has unstake all

  

• Error font size

  

• Re-check style tag, re-check the distance between the boxes
  Refer to the dApp section

  

• Update content follow by design

[ThaoNguyen998]

Version test: https://78425316.subwallet-webapp.pages.dev/home/earning

• UI bug responsive

  

• UI bug

  

[ThaoNguyen998]

Version test: https://e1b00515.subwallet-webapp.pages.dev/home/earning

• Re-check data
  Actual: Total active stake > Total value stake

  

  Expect: Total value stake = Total active stake + Total unstake

• Update UI

  

• Update color tab when hover

  

• Re-add filter on search box (because the small screen do not show all tag)

[ThaoNguyen998]

Version test: https://8674169e.subwallet-webapp.pages.dev/home/tokens
Validation passed.

• All account/Current account: check with all account type
• Check with staking type: Nomination pool, Direct nomination, Lending, Liquid staking
• Check UI/ Responsive
• Check value: Total value staked, total active stake, total unstake, total unclaimed reward
  Total value staked = total active stake + total unstake
• Check portfolio after perform action:
  • Enable/ Disable network
  • Stake/ Unstake/Cancel unstake/ Withdraw/Claim reward

[Sokol142196]

• Do not show the search bar on responsive screen
  

[ThaoNguyen998]

Version test: https://fe11e2b0.subwallet-webapp.pages.dev/home/earning
Device test:

• Display search bar in mobile mode

  

• Fix UI in case value = 0