feat(layout): redesign and refactor landing dashboard#396
Open
feat(layout): redesign and refactor landing dashboard#396
Conversation
- Implement LeftRail component with Connect Wallet card and SwapForm - specific Connect Wallet card for logged out users - Update SocialLayout to use LeftRail in Shell
- Update SwapForm to support embedded mode without fixed width and container styles - Update LeftRail to use embedded SwapForm
- Update Shell layout to use sticky positioning for left and right rails - Set max-height and overflow-y-auto to ensure sidebars are always accessible - Adjust top offset to account for sticky header
- Add LayoutVariantContext for managing layout variants with localStorage persistence - Create LayoutVariantSwitcher component for easy variant switching - Implement 4 layout variants: default, minimal, clean, ultra-minimal - Add layout-variants.scss with variant-specific styles - Update Shell and SocialLayout to support variants - Modify base.scss to conditionally apply background gradients - Minimal variant: subtle rail borders for better distinguishability - Clean variant: distinct rail backgrounds with gradient accents - Ultra-minimal variant: very subtle separators - All new variants use darker background (#0a0a0f) without gradients - Single gradient highlights for buttons instead of multi-color gradients
- Remove card styling from navigation bar for cleaner look - Increase logo size (h-5 to h-8) with hover effects - Remove duplicate Superhero BETA text from navigation - Move Buy AE widget from left rail to right rail - Remove LayoutVariantSwitcher component - Simplify LayoutVariantContext to always use flush variant - Remove layout variant switching functionality
- Add TabSwitcher component matching LayoutSwitcher style - Swap LeftRail and RightRail components to match visual positions - Update LayoutSwitcher to display tabs horizontally - Add GlassSurface component with liquid glass effect - Update navigation items with SVG icons (Social, Trends, DeFi) - Remove dropdown menus from navigation - Apply consistent glass morphism styling across dashboard cards - Update feed items to use GlassSurface component
- Fix on-chain badge positioning at top-right of post cards - Prevent swap widget from updating URL params when embedded in dashboard - Increase gap between logo and navigation menu tabs - Reduce gap between display name and address in post items
- Rename DeFi to Mini-Apps in navigation - Create Mini-Apps landing page with grouped app cards - Hide navigation tabs on mini-apps landing page - Combine explorer apps into single Explorer app - Add left rail to all DeFi/mini-apps pages - Rename Social to Feed in navigation - Hide layout switcher (Default/Focus/Zen) from UI - Update navigation icon to grid icon for mini-apps
✅ Deploy Preview for fancy-gelato-7cdad5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Move Connect Wallet card from right rail to left rail - Position Connect Wallet card after navigation tabs - Remove unused imports from RightRail component
- Remove HeroBannerCarousel component from dashboard feed - Clean up banner rendering logic
- Changed GlassSurface border radius from 24px to 12px - Affects all cards in left/right rails and post items - Provides tighter, more compact appearance
- Moved FooterSection from right rail to left rail - Added FooterSection to LeftRail component with compact prop - Removed FooterSection from Shell right rail - BackToTop remains in right rail
- Modified FeedList to accept compact prop - Pass compact prop through to ReplyToFeedItem components - Use FeedList in FeedWidget with compact=true - Hide CreatePost in FeedWidget via CSS - Preserves all FeedList logic including collapsible token-created items
- Reduced header size and spacing - Scaled down table padding, fonts, and elements - Changed rank badges to use numbers with dark text for top 3 - Removed trending score column - Right-aligned market cap and price columns - Reduced gap between rank and token name columns - Removed hover shift-up effect from table rows
- Moved feed filter dropdown to header, aligned with tokenized trends filter - Replaced Feed card header with title style matching Tokenized Trends - Reduced spacing between headers and content cards (mb-4 to mb-2) - Changed Feed icon from MessageSquare to MessageCircleMore - Renamed 'Trending' filter to 'Now trending' - Fixed filter functionality to update URL params correctly - Ensured both filters are positioned at same height
- Changed title from 'Tokenized Trends' to 'Trends' - Updated subtitle to 'Explore and trade current trends' - Made rank numbers bolder (font-black) - Added flame icons for top 3 trending tokens with pulsating animation for #1 - Added crown icon for highest market cap token - Icons show regardless of current sort order - Both icons can appear together (crown first) - Changed 'Popular this week' to 'Hot this week' in feed filters - Renamed 'Chart' column to 'Graph' - Fixed market cap detection to use market_cap_data.ae
- Merged Market Cap and Price sorting into single 'Market Cap/Price' option - Removed Name sorting option from dropdown - Renamed 'Now trending' to 'Trending now' - Made top 3 rank numbers slightly larger (text-[13px]) while keeping box size consistent - Updated graph colors to match trends box gradient (orange to pink) - Added gradient stroke from pink to orange for chart lines - Fixed gradient stroke rendering for flat lines by adding tiny variation - Fixed token name gradient on token page (removed hashtag color override)
- Changed table header from thead to div element for better control - Added sticky positioning and backdrop-filter blur effect - Fixed z-index stacking to ensure header overlays table content - Fixed JSX syntax errors in table structure
- Changed header from div back to thead/th elements - Ensures proper column alignment between headers and cells - Maintains sticky positioning and backdrop-filter blur effect
… spacing - Removed gradient effects from Trends title on all screens - Added explicit letter spacing rules to prevent reduction on small screens - Ensured consistent title styling across all breakpoints
- Remove max-width constraints from Shell and SocialLayout for full-width scaling - Add holders column to TokenListTable and DashboardTrendingTokens - Add 24h, 7d, and 30d price change columns to both tables - Create PercentageChange component for displaying price changes - Show price change columns only on larger screens (2xl breakpoint) - Fix holders gradient styling in DashboardTrendingTokens
- Fetch highest market cap token separately regardless of current sort - Crown icon now appears on token with highest market cap across all sorting options - Use separate query with market_cap DESC to get top token
- Change mini apps route to use SocialLayout instead of DexLayout - Remove max-width constraint from MiniAppsLanding component - Mini apps page now displays feed widget on right rail - Page scales to full width like dashboard
- Add responsive scaling for right rail width - lg: 300-360px, xl: 360-420px, 2xl: 420-480px - Right rail now uses more space on bigger screens while maintaining readability
- Change all mini app routes to use SocialLayout instead of DexLayout - Wrap mini app content in card containers matching dashboard table style - Make grid layouts flexible to wrap into multiple rows when space is limited - Remove RecentActivity from individual pages (feed now on right rail) - Update Swap, Wrap, Bridge, Pool, and AddTokens pages - Mini apps now clearly contained in cards with feed visible on right rail
- Update all route paths from /defi to /apps - Update navigation items and component links - Update canonical paths for SEO - Add backward compatibility redirects
- Add specific redirects for all /defi sub-routes - Create NavigateDefiToken and NavigateDefiPool components for dynamic routes - Preserve query parameters in redirects - Ensure backward compatibility for all legacy /defi URLs
- Remove card container wrapper from MiniAppsLanding component - Mini-apps now display directly without outer card container - Individual mini-app cards remain unchanged
- Create liquid glass navigation bar with purple-blue glow effect - Add Home, Trends, Mini-Apps, and Wallet navigation items - Change first nav item label from Feed to Home - Add wallet button that shows address when connected - Navigate to user profile when wallet button clicked (if connected) - Open connect wallet modal when wallet button clicked (if not connected) - Make navigation visible on all screen sizes (not just mobile) - Use high z-index to float over all content
- Show account avatar instead of wallet icon when connected - Display AE balance in second row under address - Make connected account button more compact to match other nav items - Reduce avatar size and adjust text sizes for better fit - Navigate to user profile when wallet button clicked (if connected)
- Remove layout switcher button and dropdown menu - Remove all layout options except Balanced Two-Column - Simplify component by removing layout state management - Keep only the default responsive layout
- Add left rail visibility on 2xl+ screens (>1500px) for mini-app routes - Hide logo header on mini-app pages when left rail is visible (2xl+) - Update grid layout to accommodate left rail | mini-app | right rail on wide screens - Apply consistent spacing and structure across all mini-app views
- Remove bottom margin from TabSwitcher component (mb-6 to mb-0) - Reduces spacing between navigation tabs and wallet overview card
- Update PostButton and PostForm to support compact mode - Match avatar sizes, padding, gaps, and font sizes with ReplyToFeedItem - Add compact prop support for right rail feed widget
…tyle - Update emoji and gif buttons to match comment/tip button styling - Update post button to match feed item button sizing and desktop style - Add compact mode support for all buttons - Match button gaps with feed item button spacing
…s page - Add useEffect to initialize mini-apps when component mounts - Update state after initialization to trigger re-render - Fixes issue where apps were not shown until page reload
- Add border (border-white/14) and background (bg-white/[0.07]) - Add consistent padding for both compact and normal modes - Add focus states with blue border and shadow
- remove hover bg override so button stays solid blue
- render primary address text in neon green when no chain name is available
- Changed --neon-green CSS variable to match --neon-teal (#00ff9d) - Updated AddressAvatarWithChainName to use neon-teal gradient for addresses - Updated MobileBottomNav to use neon-teal and show chain names - Applied neon-teal gradient with !important to override conflicting styles
…gging - Reduced debounce delay from 5s to 200ms for faster chain name display - Added immediate fetch option to skip debounce for active account and visible addresses - Updated AddressAvatarWithChainName to fetch immediately when showing balance/address - Updated MobileBottomNav to fetch immediately for active account - Added console logging for debugging chain name fetching and API configuration
- Restored blue-to-green gradient for market cap on mobile - Removed multiple top paddings from Trends wrapper on small screens - Added CSS to remove padding from main element and parent containers on mobile
paolomolo
force-pushed
the
feature/improved-landing-dashboard
branch
from
03e9a80 to
bfa2c19
Compare
- Remove recursive API calls in PostDetail (was making up to 200 requests) - Reduce polling intervals across the app (account data: 10s→30s, portfolio: 1min→2min, transactions: 5s→30s) - Add refetchOnWindowFocus to all comment queries for real-time updates - Pause account data refresh when tab is inactive to save resources - Add window focus refresh to account data, currencies, token trades, and owned tokens - Optimize FeedList memoization by removing queryClient from dependencies - Set post queries to check for hidden status every 10min instead of never refreshing - Add 2min refresh interval for popular posts rankings (rankings change over time)
- Disable refetchOnWindowFocus globally in QueryClient - Disable refetchOnWindowFocus for TokenPriceChart - Reduce IntersectionObserver rootMargin from 800px to 200px - Convert parent post fetching in ReplyToFeedItem and FeedItem to use React Query for caching
- Disable refetchOnWindowFocus for tip summaries - Disable refetchOnWindowFocus for popular posts query - Disable refetchOnWindowFocus for comment queries (PostCommentsList, CommentItem)
- Disable refetchOnWindowFocus for useCurrencies hook - Disable refetchOnWindowFocus for usePortfolioValue hook - Disable refetchOnWindowFocus for useOwnedTokens hook - Disable refetchOnWindowFocus for TokenTrades component - refetchInterval already handles periodic updates
- Remove descendantCount query that made 150+ requests per post - Use backend-provided total_comments instead - Eliminates hundreds of unnecessary API requests per post
- Make tip summaries lazy-loaded: only fetch when button is visible (IntersectionObserver) or hovered - Reduce IntersectionObserver rootMargin from 200px to 50px to prevent aggressive pagination on initial load - Eliminates ~470 tip summary requests on initial page load
- Add hasScrolledRef to track if user has scrolled - Only enable IntersectionObserver auto-pagination after user has scrolled at least 10px - Prevents aggressive pagination (pages 1-27) on initial page load - Add scroll listeners for both standalone and non-standalone modes
- Allow IntersectionObserver to trigger when transitioning from popular to latest posts - This restores the automatic loading behavior that was broken by the hasScrolledRef check - Still prevents aggressive pagination on initial load for normal pagination
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+10
to
+14
| const requestId = `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; | ||
| const stackTrace = new Error().stack || ''; | ||
| const callerMatch = stackTrace.match(/at\s+(\w+\.\w+)/g); | ||
| const caller = callerMatch && callerMatch.length > 1 ? callerMatch[1] : 'unknown'; | ||
| fetch('http://127.0.0.1:7242/ingest/f2f932c5-966e-499b-aaa2-090a82a9b89d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'backend.ts:fetchJson',message:'API request initiated',data:{requestId,url,path,caller,method:init?.method||'GET'},timestamp:Date.now(),sessionId:'debug-session',runId:'run2',hypothesisId:'B'})}).catch(()=>{}); |
There was a problem hiding this comment.
This adds a fire-and-forget fetch to http://127.0.0.1:7242/... on every API call without any dev-only guard. In production this will attempt to POST request metadata (URL, path, method, caller) to whatever service is listening on the user’s machine, which is a security/privacy leak and can also trigger CSP/network errors on each request. If this is only for local debugging, it should be gated behind a development flag or removed entirely.
Useful? React with 👍 / 👎.
Comment on lines
+301
to
+305
| const requestId = `gen_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; | ||
| const stackTrace = new Error().stack || ''; | ||
| const callerMatch = stackTrace.match(/at\s+(\w+Service\.\w+)/g); | ||
| const caller = callerMatch && callerMatch.length > 1 ? callerMatch[1] : 'unknown'; | ||
| fetch('http://127.0.0.1:7242/ingest/f2f932c5-966e-499b-aaa2-090a82a9b89d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'request.ts:request',message:'Generated API request initiated',data:{requestId,url,path:options.url,method:options.method,caller},timestamp:Date.now(),sessionId:'debug-session',runId:'run2',hypothesisId:'B'})}).catch(()=>{}); |
There was a problem hiding this comment.
The generated request layer now posts every API request’s metadata to http://127.0.0.1:7242/... with no environment guard. That means all users will try to contact a local service and leak request details if one exists, and CSP/network failures will be logged on every API call. This should be removed from production builds or gated behind a dev-only check.
Useful? React with 👍 / 👎.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| const callerMatch = stackTrace.match(/at\s+(\w+\.\w+)/g); | ||
| const caller = callerMatch && callerMatch.length > 1 ? callerMatch[1] : 'unknown'; | ||
| fetch('http://127.0.0.1:7242/ingest/f2f932c5-966e-499b-aaa2-090a82a9b89d',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'backend.ts:fetchJson',message:'API request initiated',data:{requestId,url,path,caller,method:init?.method||'GET'},timestamp:Date.now(),sessionId:'debug-session',runId:'run2',hypothesisId:'B'})}).catch(()=>{}); | ||
| // #endregion |
There was a problem hiding this comment.
Debug logging code accidentally committed to production
Debug instrumentation code has been accidentally included that makes HTTP fetch requests to a local development server (http://127.0.0.1:7242/ingest/...) on every API call. The code block is marked with // #region agent log comments and sends request metadata including sessionId, runId, and hypothesisId — clearly developer debugging/testing infrastructure. This will cause failed network requests in production (silently caught) and adds unnecessary overhead to every API call. The same issue exists in both backend.ts and the generated request.ts file.
Additional Locations (1)
| } else { | ||
| document.documentElement.style.backgroundColor = '#fafafa'; | ||
| document.documentElement.style.color = '#1e293b'; | ||
| document.body.style.backgroundColor = '#fafafa'; |
There was a problem hiding this comment.
Body style set before body exists in DOM
The inline script in <head> attempts to set document.body.style.backgroundColor (lines 23 and 27), but document.body doesn't exist yet because the body tag hasn't been parsed. This silently fails (caught by try-catch). Additionally, the <body> tag at line 35 hardcodes background-color: #0a0a0f (dark theme color), which means light theme users may briefly see a dark background before the load handler clears it at line 76. The body background styling logic is ineffective.
Additional Locations (1)
- Add hasTransitionedToLatestRef to track if initial transition from popular to latest has occurred - Only allow ONE automatic fetch when transitioning (not unlimited pagination) - After first transition fetch, require user scrolling for subsequent pagination - Reset transition tracking when switching sort modes - Prevents aggressive pagination (pages 38, 43, 69) while still allowing initial transition
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Note
Major layout overhaul and navigation updates with performance tweaks.
LayoutVariantProvider,LayoutSwitcher,LeftRailrefactor,FeedWidget, andMobileBottomNav; adds dashboard widgets and wallet overview/defi/*to/apps/*across componentsTokenPriceChartand improves polling behavior (reduced refresh rates, pause on tab hidden; disables refetch-on-focus where appropriate)AddressAvatarWithChainNamedocs/MINI_APPS.md) and sitemap (public/sitemap.xml)bootstrap.tsto preload Buffer polyfills and switches entry inindex.html; includesvite-plugin-node-polyfillsand stdlib shims/apps, initial theme flash prevention refinementsWritten by Cursor Bugbot for commit b44d537. This will update automatically on new commits. Configure here.