Showcase orchestrator voting activity in the UI #457
Conversation
- Introduced a new component to present a list of orchestrators with their voting statistics, including proposals voted on, votes casted, recent votes, and voting turnout.
- Added Cube.js client for data fetching with new utility functions for querying voting history. - Introduced VotingHistoryView component to display voting statistics, including proposals voted on and voting turnout. - Updated package.json and pnpm-lock.yaml to include Cube.js client dependencies.
- Exported VoterSummary type for better type management in voting components. - Integrated VotingHistoryView into the account layout for displaying voting statistics. - Added new VotingHistory page to handle routing and data fetching for user voting history. - Updated account layout to include a new tab for voting history, improving user navigation. - Implemented utility functions for processing and summarizing voting data from Cube.js.
- Added OrchestratorVotingList component to display voting data for orchestrators. - Implemented tabbed interface for Yield Overview and Voting History sections. - Integrated voter summary processing functions to aggregate voting data. - Updated getStaticProps to fetch and pass initial voter data to the page.
- Adds treasury proposals voting overview
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Jipperism
force-pushed
the
310-showcase-orchestrator-voting-activity-in-the-ui
branch
from
894848d to
3e5ac11
Compare
- Changed the method of accessing raw data from Cube.js API to use a function call. - Simplified response validation in getStaticProps by removing unnecessary checks and directly using the response for voter summaries.
- Fetches voting metrics (voted/eligible) from Cube.js using LivepeerVoteProposals - Adds an interactive Stat card to OrchestratingView with a visual progress bar - Displays participation rate percentage and integrated link to account history - Adds utility to the Cube query generator
…nology - Moved to a friendlier "Sky & Tomato" color scheme to keep voting separate from our main green brand accent. - Standardized labels to "For / Against / Abstain" everywhere, including the global transaction feed. - Rebuilt the vote table using our core data table component for a consistent look. - Made it easier to explore voter history with new dedicated buttons, better tooltips, and subtle animations. - Cleaned up the layout by stripping out redundant titles and shrinking fonts where they were getting too loud. - Polished the details: added specific styling for "No reason provided" and refined how voter profiles are we showing voter names and txn links.
- Eliminated the agent log useEffect that was posting debug information. - Streamlined imports by removing unnecessary useEffect import.
…List - Changed badge colors to use a "Sky & Tomato" color scheme for better visual distinction. - Updated badge labels from "Yes/No" to "For/Against" to standardize terminology across the application.
… component in HistoryView
…rast - Add mobile card layout matching MobileVoteView, use TransactionBadge component - Hide timeline on mobile, improve contrast with $loContrast modal background - Maintain desktop timeline layout
- Display formatted timestamp (MM/DD/YYYY h:mm a) below proposal ID - Show on both mobile and desktop layouts
- Move transaction timestamp to bottom row grouped with transaction badge - Narrow VoteModal desktop width from 50% to 40% with 600px max-width - Improve reason text readability with shorter line lengths - Better visual hierarchy by grouping transaction metadata together
- Redesign VoteDetail and MobileVoteView cards with improved visual hierarchy - Make vote badge the hero element (top-left, larger size with icon) - Remove redundant visual signals (left border, truncated proposal ID) - Implement collapsible reason display (collapsed by default) for cleaner layout - Simplify footer to single-line transaction badge and timestamp - Add transaction timestamp to VoteItem for better context - Refactor spacing and layout for consistency across mobile and desktop views - Align card styling with Livepeer design system patterns
refactored ui in 1765609
removed in 399542e cc: @adamsoffer
@rickstaa Gonna push back here. I'm all for visual consistency but there's also contextual relevance that allows for adaptation. The icon here is space-efficient, uses a tooltip to provide clarity and is distinct from the "navigate away from this page" the orchestrator history design implies
styled in b61e706
padded in ff411eb
matching outfits in b9f5a98
timestamped in d588ab2 |
rickstaa
left a comment
rickstaa
left a comment
There was a problem hiding this comment.
@thebeyondr thanks for the updates. This looks a lot better. I however had some small improvements which make it more consistent with the explorer. Please check it out in #514 and apply to your liking.
@rickstaa Gonna push back here. I'm all for visual consistency but there's also contextual relevance that allows for adaptation. The icon here is space-efficient, uses a tooltip to provide clarity and is distinct from the "navigate away from this page" the orchestrator history design implies
That makes sense, thanks for the explanation. In that case, one follow-up improvement we should tackle is adding the ability to filter the history page to only show votes, and then forward users to that filtered view (see #511
). This would help preserve clarity while keeping the current interaction model.
@Jipperism as explained in #457 (review) one thing I noticed is that on some proposals we get N/A instead of a transaction id. This should not happen since the orchestrator did perform a vote on-chain. Could you take a look and handle this edge case. Thanks!
* refactor: improve mobile vote item hover behaviour Ensure the hover behaviour is in the voting item is consistent with the hover behavoir used in the rest of the explorer. * refactor: reuse DataTable pagination for mobile vote tabke Reuse the existing arrow-only pagination from DataTable in the mobile voting table to ensure consistent behavior and styling.
Addressed in 14eb3c9 |
|
@rickstaa this is ready again for your review! |
Amazing, UI is approved also from my end now I will do one code review tomorrow morning and then we can merge. |
- Add gap between badge and title on mobile - Align badge left edge with title text
| myAccount: AccountQuery; | ||
| }; | ||
|
|
||
| export const formatPercent = (percent: number, mantissa = 4) => |
There was a problem hiding this comment.
@ECWireless this helper could also be reused in other parts of the codebase. We might consider moving it to a shared utils module and standardizing percentage formatting across the app in a follow-up PR.
Description
Surface orchestrator governance activity so stakeholders can see how they vote over time and per proposal.
Type of Change
Related Issue
Closes #310
Closes #464
xxx## Changes Made
Governance visibility (core of #310)
Voting Widget Formatting (fixes #464)
SectionLabel) and layout.Refactors
Fixes
Testing
Screenshots (if applicable)
Checklist