Conversation
✅ Deploy Preview for fancy-gelato-7cdad5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| title: "💬 Social", | ||
| description: "Connect with the community! Post updates, share insights, and tip creators directly on-chain. All your social interactions are permanently stored on the æternity blockchain.", | ||
| position: "right", | ||
| }, |
There was a problem hiding this comment.
Onboarding tour step targets non-existent navigation element
High Severity
The onboarding step with id: "social" references targetId: "nav-social", but the navItems array in LeftSidebar.tsx only contains home, hashtags, and defi navigation items - there is no social nav item. When the onboarding tour reaches this step, it will attempt to highlight a DOM element that doesn't exist, causing the tour to fail or display the tooltip in an incorrect position.
Additional Locations (1)
| const isPulsing = pulsingTokens.has(index); | ||
| const isHovered = hoveredToken === index; | ||
| const changePercent = ((Math.random() * 25) - 3).toFixed(1); | ||
| const isPositive = parseFloat(changePercent) >= 0; |
There was a problem hiding this comment.
Random percentage changes on every render causing flickering
Medium Severity
The changePercent variable is calculated using Math.random() inside the renderCard function, which executes on every render. This causes the displayed percentage value to randomly change whenever the component re-renders (e.g., on hover state changes, pulsing animation updates, or parent re-renders), resulting in a flickering UI where percentage values jump erratically. The random value should be memoized or generated once per token to remain stable.
| {item.value} | ||
| {item.fiat && ( | ||
| <div className="text-xs font-normal opacity-70 mt-1"> | ||
| <div className="text-xs font-normal text-gray-500 mt-1"> |
There was a problem hiding this comment.
Hardcoded light theme colors cause poor contrast in dark mode
Medium Severity
The GlobalStatsAnalytics component uses hardcoded light theme colors (text-gray-900 and text-gray-500) that were changed from theme-agnostic opacity classes. This component is rendered inside TrendminerBanner which adapts to dark mode, but GlobalStatsAnalytics now always displays dark text. In dark mode, this creates poor contrast with dark text on a dark background, making the stats unreadable.
| `} | ||
| style={{ | ||
| focusRingColor: colors.primary, | ||
| }} |
There was a problem hiding this comment.
Invalid CSS property name prevents focus ring theming
Low Severity
The inline style uses focusRingColor which is not a valid CSS property. This property will be silently ignored by the browser, so the intended dynamic focus ring color from colors.primary will not be applied to the search input. The element has focus:ring-2 in its className but the ring color won't be themed as intended.
| setLastAnimatedValue(numericValue); | ||
| animateValue(startValue, numericValue, duration); | ||
| } | ||
| }, [isVisible, numericValue, duration, lastAnimatedValue]); |
There was a problem hiding this comment.
Missing cleanup for requestAnimationFrame causes memory leak
Medium Severity
The useEffect that triggers animations via animateValue has no cleanup function. The animation loop uses requestAnimationFrame and stores the ID in animationRef.current, but if the component unmounts mid-animation, the loop continues and attempts to call setDisplayValue on an unmounted component. This causes React warnings and memory leaks. The effect needs a cleanup that calls cancelAnimationFrame(animationRef.current).
| return () => clearInterval(interval); | ||
| }, delay); | ||
|
|
||
| return () => clearTimeout(timer); |
There was a problem hiding this comment.
Interval cleanup placed incorrectly inside setTimeout callback
Medium Severity
In OdometerDigit, the return () => clearInterval(interval) on line 191 is inside the setTimeout callback. Return values from setTimeout callbacks are ignored, so this cleanup never executes. The setInterval created inside the callback continues running after unmount, attempting state updates via setCurrentDigit and setIsAnimating on an unmounted component. The interval reference needs to be stored outside the callback to be properly cleaned up.
| next.delete(randomIndex); | ||
| return next; | ||
| }); | ||
| }, 1000); |
There was a problem hiding this comment.
Nested setTimeout not cleaned up on unmount
Low Severity
The useEffect cleans up the outer setInterval but the nested setTimeout that calls setPulsingTokens is not tracked or cancelled. If the component unmounts while a timeout is pending, it will still fire and attempt to update state on an unmounted component, causing React warnings and potential memory leaks.
1 participant
Note
Major UI/architecture refresh with section-based theming and a new landing experience.
AppLayoutwith left sidebar, top bar, breadcrumbs, right rail, social feed panel, and floating create-hashtag FAB; removes legacy container/header usage inApp.tsxThemeContext(light/dark) and section color system (useSectionTheme); updates buttons, selectors, and chips to consume theme colorsOnboardingContext,OnboardingTour) with guided sidebar expansion and step tooltipsHeroSection,FeaturedTopicswithHotHashtagsPodium,EnhancedTokenList,LiveActivityTicker, andAiAssistantBarUserProfileChip, themedConnectWalletButton, theme switcherSwapForm,TokenSelector,RecentActivity,PoolHeader,TrendminerBanner,TokenLineChartcustomizable colors)public/sitemap.xml; tweaks analytics/labels (GlobalStatsAnalytics) and various copy/colorsWritten by Cursor Bugbot for commit 4a39021. This will update automatically on new commits. Configure here.