Conversation
✅ Deploy Preview for fancy-gelato-7cdad5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| return () => clearInterval(interval); | ||
| }, delay); | ||
|
|
||
| return () => clearTimeout(timer); |
There was a problem hiding this comment.
Interval cleanup inside setTimeout causes memory leak
Medium Severity
The OdometerDigit component has a cleanup logic issue. The return () => clearInterval(interval) on line 191 is placed inside the setTimeout callback, so it becomes the return value of that arrow function rather than the useEffect cleanup function. If the component unmounts while the interval is running, the interval will continue executing, causing a memory leak and React "setState on unmounted component" errors. The cleanup should be restructured to properly track and clear the interval in the useEffect cleanup.
| const x = (index / (data.length - 1)) * width; | ||
| const y = height - ((value - min) / range) * height; | ||
| return `${x},${y}`; | ||
| }).join(' '); |
There was a problem hiding this comment.
Sparkline division by zero with single data point
Low Severity
The Sparkline component computes x coordinates using (index / (data.length - 1)) * width. When data has exactly one element, data.length - 1 equals zero, causing division by zero and producing NaN values for SVG coordinates. The check if (!data.length) return null only handles empty arrays, not single-element arrays.
| {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.
GlobalStatsAnalytics ignores theme, unreadable in dark mode
Medium Severity
The GlobalStatsAnalytics component uses hardcoded light-mode Tailwind classes (text-gray-900, text-gray-500) without checking the theme context via useTheme(). When rendered in dark mode (inside TrendminerBanner which uses a dark gradient background), the dark gray text will have very poor contrast and be difficult to read. Other new components in this PR properly use isDark from the theme context to conditionally apply colors.
| 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 references non-existent navigation element
Medium Severity
The onboarding tour defines a step with targetId: "nav-social" but no corresponding navigation item exists in LeftSidebar. The navItems array only contains "home", "hashtags", and "defi" - there's no "social" entry that would create an element with id="nav-social". When users reach this step, the tour will fail to highlight any element and the tooltip will remain at its previous position, creating a confusing and broken onboarding experience.
Additional Locations (1)
df2952b to
64dc305
Compare
| color: textPrimary, | ||
| letterSpacing: '-0.02em', | ||
| }} | ||
| /> |
There was a problem hiding this comment.
AnimatedCounter ignores style prop passed from parent
High Severity
The AnimatedCounter component is called with a style prop containing critical styling like color: textPrimary, fontFamily, and fontWeight, but the AnimatedCounterProps interface only accepts value, prefix, suffix, duration, decimals, and className. The component ignores the style prop entirely (using its own hardcoded style), so theme-aware text colors won't be applied, causing the counter text to not match the rest of the UI in both light and dark modes.
Additional Locations (1)
| background: isDark | ||
| ? `linear-gradient(90deg, ${colors.primary}15, ${colors.primaryDark}15)` | ||
| : `linear-gradient(90deg, ${colors.primary}15, ${colors.primaryDark}15)` | ||
| }} |
There was a problem hiding this comment.
Ternary has identical branches making condition useless
Low Severity
The ternary expression isDark ? ... : ... has identical gradient values for both the true and false branches, making the conditional check pointless. Both branches produce the same background gradient. This appears to be an incomplete implementation where different colors should have been specified for light vs dark mode.
| if (item.id === "home") return location.pathname === "/"; | ||
| if (item.id === "hashtags") return location.pathname.startsWith("/trends") || location.pathname === "/"; | ||
| return location.pathname.startsWith(item.path); | ||
| }; |
There was a problem hiding this comment.
Both home and hashtags marked active on home page
Medium Severity
The isParentActive function returns true for "hashtags" when location.pathname === "/" (home page). Since line 118 also returns true for "home" on the same path, both navigation items will be visually highlighted as active simultaneously when the user is on the home page. This creates a confusing UI where two sidebar items appear selected at once.
64dc305 to
b4c3325
Compare
| duration?: number; | ||
| decimals?: number; | ||
| className?: string; | ||
| } |
There was a problem hiding this comment.
AnimatedCounter ignores style prop passed from HeroSection
Medium Severity
The AnimatedCounterProps interface doesn't include a style prop, but HeroSection passes style objects to AnimatedCounter at multiple locations (for Active, Volume, Total Value, and Traders stats). The component destructures only the defined props and applies a hardcoded style={{ fontVariantNumeric: 'tabular-nums' }} to the rendered element. This means the intended styling for fontFamily, fontWeight, color, and letterSpacing in the Swiss minimal design will not be applied to the stat counters.
Additional Locations (1)
b4c3325 to
4255d4a
Compare
| onClick={handleTokenSwap} | ||
| disabled={swapLoading || !tokenIn || !tokenOut} | ||
| className="w-12 h-12 rounded-full border border-white/10 bg-white/[0.08] backdrop-blur-[10px] text-white cursor-pointer flex items-center justify-center text-xl font-semibold transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] shadow-[0_4px_12px_rgba(0,0,0,0.25)] z-[2] relative hover:bg-white/[0.12] hover:-translate-y-0.5 hover:rotate-180 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:rotate-0" | ||
| className="w-12 h-12 rounded-full border border-gray-200 bg-white text-gray-700 cursor-pointer flex items-center justify-center text-xl font-semibold transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] shadow-md z-[2] relative hover:bg-gray-50 hover:-translate-y-0.5 hover:rotate-180 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:rotate-0" |
There was a problem hiding this comment.
DeFi SwapForm uses hardcoded light-only colors
Medium Severity
The SwapForm component changed from dark-mode-compatible colors (like bg-white/[0.02], border-white/10) to hardcoded light mode colors (bg-white, border-gray-200, text-gray-700). The DeFi section has dark mode defined in AppLayout, but these components will have white backgrounds and gray text that become nearly invisible or look broken in dark mode. The same issue affects RecentActivity with hardcoded bg-white, text-gray-900, and bg-gray-50 classes.
Note
Modernizes the app with a new design system and layout, plus onboarding and social UX enhancements.
ThemeContextand section-aware theming viaAppLayout(withLeftSidebar,TopBar,Breadcrumbs) and Swiss Minimal styles; addsThemeSwitcherandAeButton --swissvariantApp.tsxwith new layout; addsCreateHashtagFab; removesAppHeaderandFeedbackButtonOnboardingProvider,OnboardingTour) and floatingSocialFeedPanelConnectWalletButtonto minimalist button; updates DEX UI (SwapForm,TokenSelector,RecentActivity,PoolHeader) to light/gray styles and section gradientsHeroSection,FeaturedTopics/HotHashtagsPodium,EnhancedTokenList,AiAssistantBar,AnimatedCounter,LiveActivityTickerTrendminerBanner,GlobalStatsAnalytics,TokenLineChartcolor props) and socialSortControls; refinesRightRailstylingpublic/sitemap.xmlfor basic SEO coverageWritten by Cursor Bugbot for commit 4255d4a. This will update automatically on new commits. Configure here.