ENG-4383 feat(portal,1ui): claim & identity cards/rows

[Vitalsine85]

Affected Packages

Apps

• data populator
• portal
• template

Packages

• 1ui
• api
• graphql
• protocol
• sdk

Tools

• tools

Overview

• Adds StakeButton, StakeTVL to 1ui.
• Updates IdentityRow and ClaimRow 1ui components and removes the versions that were in Portal.
• Updates ActivityItem component to use the new IdentityRow and ClaimRow.
• Implements inline staking, uses data from API (claim/identity) on initial load and then runs a fetcher to get updated data from RPC.
• Had to update various other components in 1ui to account for the changes to some of the components related to this update.

Note: During this, I noticed that a bunch of terminology/nomenclature used in 1ui is confusing or could be better. Once this is in I will rebase my 1ui re-org branch and probably make a few changes to improve this. i.e. 'numPositions' was labeled 'numFollowers'. There were a lot of cases where we could improve some of this. I think it was just a lack of understanding when some of these components were built out in 1ui. Could also leverage types better as well in some places. I'm assuming the types were added after some of these were built.

Screen Captures

https://www.loom.com/share/8a9cb65d178848aaa12048d26d816d1b?sid=e689d1e4-1ab3-4e97-8a6b-26580b1c3fa4
https://www.loom.com/share/59978a9b08bf4a41b62ec577260efec9?sid=f2aaf1ae-3bc2-4256-9c27-1d84f94238bf

Declaration

• I hereby declare that I have abided by the rules and regulations as outlined in the CONTRIBUTING.md

[linear]

ENG-4383 [🍉] Claim Cards

This ticket focuses on interactive Claim Cards, which will lay the groundwork for future cards, such as Identity Cards, Activity Cards, and Trust Circle Cards. With Claim Cards, users can stake directly from the card itself and access key information through hover actions, reducing the need to navigate to the Claim Detail Page for basic interactions.

Claim Card, Claim card for List & Identity Card

Screenshot 2024-10-07 at 5.39.56 PM.png

Activity Cards

Screenshot 2024-10-07 at 5.40.19 PM.png

Types

• Claim Card
• Claim Card for Lists
• Identity Card
• Activity Card

Claim Card + Claim Card for Lists

• Position for Claim Card - Figma
• Position States for Claim Card for Lists - Figma
• Hover States - Figma

Identity Card

• Position and Hover [Figma](https://Identity Card - Position and Hover)

Activity Card

• For Claim and Identity Figma

Mobile

• Claim Card - Figma

↳ Claim Card - Features (Figma)

---

What's missing:

• 3 dots on the right side of the card needs to open a Context Menu. We need to decide what comes for V1 of the context menu. jojikun

TVL Molecule - 2

Context Menu - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx - 3

Stake Buttons (Portal w/ state) - 5

[jonathanprozzi]

Looking good -- 2 minor callouts:

• Make sure that the icons load for the up/down arrows
• When there's no positions on a claim let's make the circle default to grey, not orange (against)

[jonathanprozzi]

Looks good -- once the 2 callouts are fixed we are good to go!