[WIP] feat(ux): Home page concept #2579
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create new Home page with interactive wallet balance visualisation - Implement detailed balance breakdown showing: - Staking allocations (nominating vs pool) - Available balance with free/locked funds breakdown - Add send button functionality for token transfers - Implement conditional rendering for staking health/recommendation sections
… home page additions @TingALin - Chinese translations need to be reviewed please
- Copy & Paste address from Welcome message - Import Pool/Nominate information to display in Staking Status - Manage Stake button linking to Pool/Nominating
joeljkrb
changed the title
- Standardise card height approach with minHeight and overflow:auto - Remove redundant padding from nested components - Normalise padding and margins across Home page components - Replace inline styles with styled components - Improve visual hierarchy with consistent spacing
- Replace hardcoded background colours - Use theme shadow variables instead of custom shadows - Replace opacity with text colour variables for better theme support - Ensure consistent styling across light and dark modes - Fix text colors in StakingRecommendation component - Update balance label to use correct translation key - Ensure consistent text color in both light and dark modes - Apply theme variables to all text elements for better readability
- Improve layout for accounts not staking/wallet not connected
- Refine staking health assessment with three distinct tiers: Very Healthy (>0.5% above network avg) Healthy (between -0.75% and +0.5%) Room for Improvement (-2% to -0.75%) Unhealthy (below -2%) - Update recommendations to align with these thresholds and add critical alerts for severely underperforming positions - Add translations for all languages
- Add 30-day reward amount to Welcome card for active stakers - Fix pending payout display for direct nominators to properly show decimal values - Add translations for new reward message in all supported languages
Collaborator
|
@joeljkrb I tried to merge with main but there are some locale conflicts that I'm not sure need updating. |
rossbulat
changed the title
- Fix NetworkStats supply staked calculation using correct API fields - Add React.memo and useMemo to NetworkStats, WalletBalance, StakingProgress - Replace custom QuickActions with Overview-style ui-buttons implementation - Split QuickActions into focused components with proper memoization - Remove unused variables and improve TypeScript typing
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request implements a new Home page with interactive wallet balance visualisation, improved staking recommendations and additional menu enhancements. Key changes include new localization strings for various UI components, new React components for the Home page (e.g. WelcomeSection, WalletBalance, StakingRecommendation), and updated routing and sidebar logic to support easy/advanced mode display.
Reviewed Changes
Copilot reviewed 20 out of 34 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/locales/src/resources/en/pages.json | Added and updated localization strings for page-specific content |
| packages/app/src/pages/Home/** | Introduced new components for Wallet Balance, Welcome Section, Staking Recommendations and Price Widget |
| packages/app/src/library/SideMenu/** | Modified sidebar to include conditional rendering logic and new icons |
| packages/app/src/Router.tsx | Updated routing logic to enforce Easy mode behavior (redirecting unallowed pages to Home) |
Comments suppressed due to low confidence (1)
packages/app/src/library/SideMenu/index.tsx:151
- The 'Separator' component is used here without an accompanying import or definition. Please ensure that 'Separator' is properly imported or defined to prevent runtime errors.
<Separator />
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implement Home page with balance visualisation and menu enhancements