# Optic Frontend Audit Report **Date:** 2026-02-08 **Scope:** /Users/elibutters/Documents/Optic/frontend/ **Files reviewed:** 75+ components, hooks, contexts, utilities, and types --- ## Summary | Severity | Count | |----------|-------| | CRITICAL | 3 | | HIGH | 8 | | MEDIUM | 14 | | LOW | 12 | | **Total** | **37** | --- ## CRITICAL Issues ### [CRITICAL] WebSocket orderbook map key collides — only one orderbook per exchange displayed **File:** contexts/MarketDataContext.tsx:89 **Category:** state-management **Description:** When an orderbook message arrives, the map key is `data.exchange` (line 89: `const mapKey = data.exchange`). This means if you subscribe to multiple symbols on the same exchange, each new symbol overwrites the previous. However, for the current orderbook view (one symbol at a time), this works by coincidence. The real bug: when switching symbols, stale data from the previous symbol persists momentarily under the same exchange key, showing wrong prices. **Impact:** Users see stale orderbook data for a different symbol during tab/symbol switches. If multi-symbol support is ever added, it will completely break. **Root Cause:** Map key should include symbol: `${data.exchange}-${data.symbol}` **Fix:** ```tsx // contexts/MarketDataContext.tsx:89 - const mapKey = data.exchange; + const mapKey = `${data.exchange}-${data.symbol}`; ``` Then update `OrderbookGrid` to use the combined key when looking up snapshots: ```tsx // OrderbookCard lookup in OrderbookGrid.tsx - snapshot={orderbooks.get(exchange.toLowerCase()) || null} + snapshot={orderbooks.get(`${exchange.toLowerCase()}-${selectedSymbol}`) || null} ``` **Effort:** medium ### [CRITICAL] useSpreadStats recalculates every 50ms with setInterval causing excessive re-renders **File:** hooks/useSpreadStats.ts:21 **Category:** performance **Description:** `setInterval(calculate, 50)` runs 20 times per second, creating new Maps and triggering React state updates each time. Each update causes re-renders of SpreadChart and all its children with spring animations. **Impact:** Significant CPU usage, battery drain, potential UI jank on lower-end devices. The orderbook data itself only updates when WS messages arrive, so recalculating between messages is pure waste. **Root Cause:** Polling approach instead of reacting to data changes. **Fix:** ```tsx // hooks/useSpreadStats.ts - remove the interval, just recalculate when orderbooks change useEffect(() => { const calculate = () => { // ... existing calculation logic }; calculate(); // Remove: const interval = setInterval(calculate, 50); // Remove: return () => clearInterval(interval); }, [selectedSymbol, orderbooks]); // Add orderbooks to deps ``` **Effort:** small ### [CRITICAL] FundingGrid recalculates arbData on every render without memoization **File:** components/dashboard/funding/FundingGrid.tsx:75-97 **Category:** performance **Description:** `getArbDataForSymbol` is a regular function called inside `useMemo` for sorting, but also called again per row in the render body (`const arbData = getArbDataForSymbol(symbol)`). Since `uniqueSymbols` depends on `fundingRates` (a Map that creates new references on every WS message), the entire grid re-sorts and re-renders on every funding rate update. **Impact:** With 80+ symbols × 6 exchanges, this means thousands of calculations per second during active trading. Visible lag on the funding page. **Root Cause:** No memoization of per-symbol arb data; `getArbDataForSymbol` recalculated in both sort and render. **Fix:** ```tsx // Cache arb data in a useMemo const arbDataMap = useMemo(() => { const map = new Map(); filteredSymbols.forEach(symbol => { map.set(symbol, getArbDataForSymbol(symbol)); }); return map; }, [filteredSymbols, fundingRates, uniqueExchanges, fundingView]); const uniqueSymbols = useMemo(() => { return [...filteredSymbols].sort((a, b) => { const arbA = arbDataMap.get(a) ?? null; const arbB = arbDataMap.get(b) ?? null; // ... existing sort logic }); }, [filteredSymbols, arbDataMap, sortDirection]); // In render: // const arbData = arbDataMap.get(symbol) ?? null; ``` **Effort:** small --- ## HIGH Issues ### [HIGH] WebSocket never clears stale orderbook/funding data on unsubscribe **File:** contexts/MarketDataContext.tsx:109-134 **Category:** state-management **Description:** When switching tabs (e.g., orderbook → funding), `unsubscribeMultiple` sends unsubscribe messages but never removes entries from the `orderbooks` or `fundingRates` Maps. Stale data persists indefinitely. **Impact:** When switching back to orderbook tab, old prices flash before new data arrives. Memory grows unbounded if many symbols are subscribed/unsubscribed over time. **Root Cause:** Unsubscribe only removes from `subscriptionsRef`, not from state Maps. **Fix:** ```tsx const unsubscribe = useCallback((topic, exchange, symbol) => { const key = getSubscriptionKey(topic, exchange, symbol); if (wsRef.current?.readyState === WebSocket.OPEN) { wsRef.current.send(JSON.stringify({ type: 'unsubscribe', topic, exchange, symbol })); } subscriptionsRef.current.delete(key); pendingSubscriptionsRef.current.delete(key); // Clear stale data if (topic === 'orderbook') { setOrderbooks(prev => { const next = new Map(prev); next.delete(exchange); return next; }); } else if (topic === 'funding') { setFundingRates(prev => { const next = new Map(prev); next.delete(`${exchange}-${symbol}`); return next; }); } }, []); ``` **Effort:** small ### [HIGH] Dashboard useEffect for subscriptions has unstable dependencies causing subscription thrashing **File:** app/dashboard/page.tsx:89-109 **Category:** state-management **Description:** The subscription `useEffect` depends on `fundingExchanges` which is recalculated via `useMemo` on every render when `fundingMarkets` reference changes. Since `fundingMarkets` is derived from config context, any config update causes a full unsub/resub cycle. Additionally, `orderbookMarkets` in deps causes the same issue. **Impact:** Unnecessary WebSocket message bursts, potential brief data gaps during re-subscription. **Root Cause:** Array references change on every render even if content is identical. **Fix:** Use a stable serialized key for the effect: ```tsx const orderbookMarketsKey = JSON.stringify(orderbookMarkets); const fundingMarketsKey = JSON.stringify(fundingMarkets); useEffect(() => { // ... subscription logic }, [activeTab, selectedSymbol, isConnected, isLoading, orderbookMarketsKey, fundingMarketsKey]); ``` **Effort:** small ### [HIGH] LanguageFormatDropdown settings are lost on refresh (no persistence) **File:** components/dashboard/general/LanguageFormatDropdown.tsx:28-30 **Category:** state-management **Description:** Language, number format, and time format selections are stored in local component state only. They reset to defaults ('en', 'standard', '24h') on every page reload. **Impact:** Users must re-select preferences every session. The component appears functional but doesn't actually persist anything. **Root Cause:** No localStorage/cookie persistence. **Fix:** ```tsx const [language, setLanguage] = useState(() => { if (typeof window === 'undefined') return 'en'; return (localStorage.getItem('optic-language') as Language) || 'en'; }); // Similarly for numberFormat and timeFormat // Add useEffect to persist on change: useEffect(() => { localStorage.setItem('optic-language', language); }, [language]); ``` **Effort:** small ### [HIGH] SettingsDropdown settings (sound, compact mode) are lost on refresh **File:** components/dashboard/general/SettingsDropdown.tsx:12-13 **Category:** state-management **Description:** Same as LanguageFormatDropdown — `soundEnabled` and `compactMode` are ephemeral state. Additionally, neither setting actually does anything — no sound system exists and no compact mode CSS is applied. **Impact:** Settings are non-functional placeholders that mislead users into thinking they work. **Root Cause:** Feature incomplete — UI exists without backing logic. **Fix:** Either persist and implement the settings, or clearly mark them as "Coming Soon" with disabled state: ```tsx {}} /> ``` **Effort:** medium ### [HIGH] Admin page doesn't protect against unauthenticated API calls on mount **File:** app/admin/page.tsx:18-21 **Category:** error-handling **Description:** The `useEffect` redirects unauthenticated users, but `ConfigPanel` can begin fetching before the redirect completes. `fetchExchangeConfigs()` calls `getAuthToken()` which may return null, sending an unauthenticated request to `/admin/exchanges`. **Impact:** Console errors, failed API requests, potential flash of error state before redirect. **Root Cause:** Race condition between auth check and component mounting. **Fix:** ```tsx if (!isAuthenticated) { return null; // Already handled — but ConfigPanel renders below } // The current code already returns null for !isAuthenticated, // but the useEffect should also prevent rendering ConfigPanel: if (!isAuthenticated || !isAdmin) { // ... access denied or redirect } // ConfigPanel only renders when both isAuthenticated AND isAdmin are true ✓ // Actually this is already correct. The real fix is in ConfigPanel: // Add early return if no auth token available ``` **Effort:** small ### [HIGH] ExchangeSelector useEffect resets selectedExchanges on exchanges.length change **File:** components/dashboard/funding/FundingGrid.tsx:41-43 **Category:** state-management **Description:** `useEffect(() => { setSelectedExchanges(allExchanges); }, [exchanges.length])` uses `.length` as the dependency. If exchanges are swapped (same count, different exchanges), the selection won't update. Conversely, if a single exchange is added, all manual deselections are lost. **Impact:** User's carefully curated exchange filter gets reset whenever the exchange list changes. **Root Cause:** Using `.length` instead of the actual array content. **Fix:** ```tsx const allExchangesKey = allExchanges.join(','); useEffect(() => { setSelectedExchanges(allExchanges); }, [allExchangesKey]); ``` **Effort:** small ### [HIGH] OrderbookGrid useEffect resets selectedExchanges but deps are wrong **File:** components/dashboard/orderbook/OrderbookGrid.tsx:36-38 **Category:** state-management **Description:** `useEffect(() => { setSelectedExchanges(allExchangesForSymbol); }, [selectedSymbol])` only depends on `selectedSymbol`, but `allExchangesForSymbol` is computed from `exchanges` prop. If exchanges change without a symbol change, the selection is stale. **Impact:** If the config updates and adds a new exchange for the current symbol, the exchange selector won't show it until user changes symbol and back. **Root Cause:** Missing dependency on `allExchangesForSymbol`. **Fix:** ```tsx const allExchangesKey = allExchangesForSymbol.join(','); useEffect(() => { setSelectedExchanges(allExchangesForSymbol); }, [allExchangesKey]); ``` **Effort:** small --- ## MEDIUM Issues ### [MEDIUM] APY calculation doesn't compound — misleading display **File:** components/dashboard/funding/conversionUtils.ts:17-19 **Category:** visual **Description:** APY is calculated as `rate * periodsPerYear` which is simple multiplication (APR), not compounded APY. The label says "APY" but the math is APR. **Impact:** Users see lower rates than actual compounded APY, or the label is misleading. **Root Cause:** Missing compounding formula. **Fix:** ```tsx case 'APY': { const periodsPerYear = (365 * 24) / intervalHours; // Compound: APY = (1 + rate)^periods - 1 const apy = (Math.pow(1 + rate, periodsPerYear) - 1) * 100; return apy; } ``` **Effort:** small ### [MEDIUM] Landing page uses `` instead of Next.js `` for logos **File:** app/page.tsx:30,115,129 **Category:** performance **Description:** Multiple `

` tags bypass Next.js Image optimization. Also in dashboard header (app/dashboard/page.tsx:141) and admin topbar. **Impact:** No lazy loading, no responsive sizing, no optimization for these images. **Root Cause:** Likely quick implementation; SVGs don't benefit much from Next.js optimization, but consistency matters. **Fix:** For SVGs, this is minor. For the hero PNG (`` is already used with `unoptimized`), remove `unoptimized` to enable optimization: ```tsx Optic orderbook dashboard

``` **Effort:** small ### [MEDIUM] Hash-based routing in Dashboard has race condition with availableSymbols **File:** app/dashboard/page.tsx:56-72 **Category:** state-management **Description:** The `useEffect` that reads `window.location.hash` depends on `availableSymbols`, which starts empty and populates after config loads. On first load, the effect runs with empty array, sets default hash to 'funding', then re-runs when symbols load. If user navigated to `#orderbook/SOL`, the first run may incorrectly redirect. **Impact:** Deep links to specific orderbook symbols may briefly flash the wrong tab/symbol. **Root Cause:** Effect runs before data is ready. **Fix:** Add early return: ```tsx useEffect(() => { if (isLoading) return; // Don't process hash until config is loaded // ... rest of hash parsing }, [availableSymbols, isLoading]); ``` **Effort:** small ### [MEDIUM] FundingGrid getFundingRate uses mismatched key casing **File:** components/dashboard/funding/FundingGrid.tsx:64-67 **Category:** state-management **Description:** `getFundingRate` builds key as `${exchange.toLowerCase()}-${symbol}`, but `exchange` comes from `displayFundingMarkets` which has display names (e.g., "Hyperliquid"). The `fundingRates` Map uses keys like `hyperliquid-ETH`. So `"Hyperliquid".toLowerCase()` = `"hyperliquid"` — this works. BUT: `getDisplayName` maps `dydx` → `DyDx`, so the key becomes `dydx-ETH` which matches. Actually this works because `.toLowerCase()` is applied. **However**, the tooltip and other components reference `snapshot.exchange` which is the raw backend value (e.g., `hyperliquid`), not the display name. This mismatch means clicking a funding cell opens the wrong referral URL if the display name doesn't match the exchange_metadata key. **Impact:** Minor: referral URLs work because `getExchangeReferralUrl` also lowercases. But confusion in code maintenance. **Root Cause:** Display names mixed with internal IDs. **Fix:** Keep display names only for rendering; always use internal IDs for lookups. **Effort:** small ### [MEDIUM] Keyboard shortcut Cmd+K conflicts between MarketSearch and MarketSelector **File:** components/dashboard/general/MarketSearch.tsx:15 and MarketSelector.tsx:68 **Category:** accessibility **Description:** Both `MarketSearch` and `MarketSelector` listen for `Cmd+K`. On the orderbook tab, both are rendered — `MarketSearch` focuses its input while `MarketSelector` toggles its dropdown. The one that captures the event first wins, depending on DOM order and `useCapture`. **Impact:** Unpredictable behavior when pressing Cmd+K on the orderbook tab. Only one of the two components responds. **Root Cause:** Duplicate keyboard shortcut binding. **Fix:** MarketSearch on funding tab uses Cmd+K for search. MarketSelector on orderbook tab also uses Cmd+K. Since they're on different tabs, this is less severe but both components mount simultaneously. Remove Cmd+K from MarketSearch when not on funding tab, or use different shortcuts. **Effort:** small ### [MEDIUM] FundingTradeModal and MarketNotFoundModal lack focus trapping **File:** components/dashboard/funding/FundingTradeModal.tsx, components/dashboard/orderbook/MarketNotFoundModal.tsx **Category:** accessibility **Description:** Modal overlays don't trap keyboard focus. Users can Tab to elements behind the modal. No `role="dialog"` or `aria-modal="true"` attributes. **Impact:** Screen reader and keyboard-only users can interact with background content while modal is open. **Root Cause:** Manual modal implementation without accessibility considerations. **Fix:** ```tsx ``` **Effort:** medium ### [MEDIUM] ApiEnvProvider returns null during SSR/mount, causing layout shift **File:** contexts/ApiEnvContext.tsx:49-51 **Category:** visual **Description:** `if (!mounted) { return null; }` means the entire app renders nothing for the first frame. This causes a flash of empty content before hydration completes. **Impact:** Brief white flash on initial load. CLS (Cumulative Layout Shift) score impacted. **Root Cause:** Preventing SSR hydration mismatch by delaying render. **Fix:** Render children with default values instead of null: ```tsx if (!mounted) { // Render with prod defaults to avoid flash return ( {}, isLocalhost: false }}> {children} ); } ``` **Effort:** small ### [MEDIUM] WebSocket reconnect stops after 10 attempts with no user notification **File:** contexts/MarketDataContext.tsx:101-104 **Category:** error-handling **Description:** After 10 failed reconnects, the WebSocket gives up silently. The user sees "Disconnected" in the bottom bar but no prompt to retry. **Impact:** Users on flaky connections get permanently stuck in disconnected state with no way to recover except refreshing. **Root Cause:** Hard cap on reconnect attempts without manual retry option. **Fix:** Add a manual reconnect button to `BottomBar` when disconnected: ```tsx // BottomBar.tsx {!isConnected && ( )} ``` **Effort:** small ### [MEDIUM] FeaturesSection loads heavy 3D dependencies (Three.js, R3F, postprocessing) eagerly **File:** components/landing/FeaturesSection.tsx:1-6 **Category:** performance **Description:** The features section imports `@react-three/fiber`, `@react-three/drei`, `@react-three/postprocessing`, and `three` at the top level. These are large libraries (~300KB+ gzipped) loaded even if the user never scrolls to that section. **Impact:** Significantly slower initial page load, especially on mobile. **Root Cause:** No code splitting for heavy 3D content. **Fix:** ```tsx // Use dynamic import import dynamic from 'next/dynamic'; const FeaturesSection = dynamic( () => import('@/components/landing/FeaturesSection'), { ssr: false, loading: () =>

} ); ``` **Effort:** small ### [MEDIUM] Global clock in useSyncedClock leaks if all components unmount then remount **File:** hooks/useSyncedClock.ts:12-18 **Category:** state-management **Description:** `startGlobalClock` uses a `setTimeout` then `setInterval`. If all listeners unmount during the initial `setTimeout` delay, `stopGlobalClock` clears `intervalId` (which is still null), but the pending `setTimeout` still fires and starts a new interval with no listeners. **Impact:** Memory leak — orphaned interval ticking forever. **Root Cause:** `setTimeout` reference not tracked for cleanup. **Fix:** ```tsx let timeoutId: NodeJS.Timeout | null = null; function startGlobalClock() { if (intervalId || timeoutId) return; const msUntilNextSecond = 1000 - (Date.now() % 1000); timeoutId = setTimeout(() => { timeoutId = null; if (listeners.size === 0) return; // Guard tick(); intervalId = setInterval(tick, 1000); }, msUntilNextSecond); } function stopGlobalClock() { if (listeners.size > 0) return; if (timeoutId) { clearTimeout(timeoutId); timeoutId = null; } if (intervalId) { clearInterval(intervalId); intervalId = null; } } ``` **Effort:** small ### [MEDIUM] ExchangeRegistry is a singleton — not safe for SSR **File:** lib/exchange-sdk/core.ts:58-63 **Category:** state-management **Description:** `getExchangeRegistry()` uses a module-level singleton. In SSR/edge environments, this could share state across requests. Currently mitigated by `ExchangeProvider` being client-only, but the pattern is risky. **Impact:** Low currently (client-only usage), but if any server component ever imports this, it could cause cross-request data leaks. **Root Cause:** Module-level singleton pattern. **Fix:** Already mitigated by `'use client'` on ExchangeContext. Document the constraint. **Effort:** small ### [MEDIUM] ConfigPanel has no error handling for toggle/create/delete operations **File:** components/admin/ConfigPanel.tsx:64-68, 75-85, 88-93 **Category:** error-handling **Description:** `handleToggleEnabled`, `handleCreateExchange`, and `handleDeleteExchange` don't surface errors to the user. `handleCreateExchange` catches but only logs to console. `handleToggleEnabled` and `handleDeleteExchange` have no try/catch at all — errors propagate to the call site but ExchangeCard only has try/finally without catch. **Impact:** Admin operations can silently fail. User thinks exchange was deleted/toggled but state was never updated on the server. **Root Cause:** Missing error handling and user feedback. **Fix:** Add error state and toast notifications: ```tsx const handleToggleEnabled = useCallback(async (exchange: string, enabled: boolean) => { try { const updated = await updateExchangeConfig(exchange, { enabled }); setConfigs(prev => prev.map(c => c.exchange === exchange ? updated : c)); } catch (err) { // Show error toast/notification setError(`Failed to ${enabled ? 'enable' : 'disable'} ${exchange}`); } }, []); ``` **Effort:** medium ### [MEDIUM] Funding 1h/8h/1D values display percentage sign inconsistently **File:** components/dashboard/funding/conversionUtils.ts:25-31 **Category:** visual **Description:** APY view shows `%` suffix but 1h/8h/1D views don't. Since these are all percentage values (multiplied by 100), the lack of `%` sign on non-APY views is confusing. **Impact:** Users may not realize 1h/8h/1D values are percentages. **Root Cause:** Inconsistent formatting. **Fix:** ```tsx case '1h': return `${sign}${value.toFixed(3)}%`; case '8h': case '1D': return `${sign}${value.toFixed(2)}%`; ``` **Effort:** small --- ## LOW Issues ### [LOW] Hero image has `unoptimized` flag — very large download **File:** app/page.tsx:77 **Category:** performance **Description:** `` serves the raw 3024×1892 PNG at full quality. On mobile, this is wasteful. **Impact:** Slow landing page load on mobile networks. **Fix:** Remove `unoptimized` and set `quality={85}`. **Effort:** small ### [LOW] Missing aria-labels on interactive SVG icons **File:** Multiple (SettingsDropdown, WalletButton, BottomBar, etc.) **Category:** accessibility **Description:** Many icon buttons lack `aria-label`. Some have it (HamburgerMenu: `aria-label="Menu"`, SettingsDropdown: `aria-label="Settings"`) but most SVG-only buttons (close buttons, sort toggles) don't. **Impact:** Screen reader users can't identify button purposes. **Fix:** Add `aria-label` to all icon-only buttons. **Effort:** small ### [LOW] OrderbookCard uses `table-fixed` but column widths set with className not matching **File:** components/dashboard/orderbook/OrderbookCard.tsx:24-27 **Category:** visual **Description:** Column width classes (`w-[48%]`, `w-[20%]`, `w-[20%]`, `w-[12%]`) are applied to `` but the header row uses `

` with `flex` layout. The `` body uses `table-fixed` but column percentages don't add to 100%. **Impact:** Slight column misalignment between header and body. **Fix:** Ensure header and body use the same layout mechanism, or adjust percentages to total 100%. **Effort:** small ### [LOW] `getDisplayName` in ConfigContext is not memoized **File:** contexts/ConfigContext.tsx:83-85 **Category:** performance **Description:** `getDisplayName` creates a new function reference on every render since it's defined inline without `useCallback` or `useMemo`. **Impact:** Components using `getDisplayName` in dependency arrays will re-render unnecessarily. **Fix:** Wrap in `useCallback`: ```tsx const getDisplayName = useCallback((exchange: string): string => { return EXCHANGE_DISPLAY_NAMES[exchange] || exchange; }, []); ``` **Effort:** small ### [LOW] useSyncedClock initial setTimeout alignment may cause double-tick **File:** hooks/useSyncedClock.ts:14-18 **Category:** state-management **Description:** The initial tick fires after `msUntilNextSecond`, then `setInterval` fires every 1000ms. If `setTimeout` fires slightly late (common), the first `setInterval` tick comes less than 1 second after. **Impact:** Timer may briefly show a skip or double-count in the first second. **Fix:** Minor — use `requestAnimationFrame` or accept the drift. **Effort:** small ### [LOW] LogoPreloader creates DOM elements in useEffect without cleanup **File:** components/ui/LogoPreloader.tsx:13-25 **Category:** performance **Description:** `` elements are appended to `` but never removed on unmount. **Impact:** DOM pollution with orphaned link elements. Functionally harmless but messy. **Fix:** Store refs and remove on cleanup: ```tsx useEffect(() => { const links: HTMLLinkElement[] = []; const preloadImage = (src: string) => { const link = document.createElement('link'); // ... links.push(link); }; // ... return () => links.forEach(l => l.remove()); }, []); ``` **Effort:** small ### [LOW] Dashboard keyboard shortcuts override browser defaults **File:** app/dashboard/page.tsx:114-135 **Category:** accessibility **Description:** `Cmd+U` (View Source), `Cmd+I` (DevTools/italics), `Cmd+L` (address bar), `Cmd+P` (print), `Cmd+O` (open file) are all prevented. While intentional for power users, this breaks expected browser behavior. **Impact:** Developers and power users can't use standard browser shortcuts. **Fix:** Consider using different shortcuts or only activating when a specific element is focused. **Effort:** medium ### [LOW] WalletButton handleCopyAddress has no user feedback **File:** components/wallet/WalletButton.tsx:39-42 **Category:** visual **Description:** `navigator.clipboard.writeText` is called but no toast/tooltip confirms the copy. **Impact:** User clicks "Copy Address" with no visual confirmation it worked. **Fix:** Add a brief "Copied!" state: ```tsx const [copied, setCopied] = useState(false); const handleCopyAddress = async () => { if (primaryWallet?.address) { await navigator.clipboard.writeText(primaryWallet.address); setCopied(true); setTimeout(() => setCopied(false), 1500); } }; // In render: {copied ? 'Copied!' : 'Copy Address'} ``` **Effort:** small ### [LOW] SpreadChart uses `useMarketData()` directly instead of passed orderbooks prop **File:** components/dashboard/orderbook/SpreadChart.tsx:15 **Category:** state-management **Description:** `SpreadChart` imports `useMarketData()` to get orderbooks, but `OrderbookGrid` already has `orderbooks` as a prop. This creates a tight coupling and means SpreadChart can't be reused with different data sources. **Impact:** Minor architectural issue; functionally correct. **Fix:** Pass `orderbooks` as a prop instead. **Effort:** small ### [LOW] AnimatedBackground component is imported but commented out **File:** app/page.tsx:46 **Category:** performance **Description:** `AnimatedBackground` is imported at the top of the file but the JSX is commented out (`{/* */}`). The import still causes the module to be bundled. **Impact:** Dead code in the bundle. **Fix:** Remove the import if not used. **Effort:** small ### [LOW] Multiple dropdown components duplicate click-outside and Escape key logic **File:** FundingViewDropdown, ExchangeSelector, MarketSelector, HamburgerMenu, SettingsDropdown, WalletButton, LanguageFormatDropdown **Category:** performance **Description:** Every dropdown reimplements the same click-outside detection and Escape key handling pattern. **Impact:** Code duplication, inconsistent behavior if one is updated but others aren't. **Fix:** Extract a `useClickOutside` and `useEscapeKey` hook, or use a shared Dropdown/Popover primitive. **Effort:** medium ### [LOW] `DynamicProvider` environment ID uses non-null assertion without fallback **File:** components/providers/DynamicProvider.tsx:143 **Category:** error-handling **Description:** `environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID!` — if the env var is missing, this will be `undefined`, potentially causing a runtime error in the Dynamic SDK. **Impact:** App crashes if env var is not set. **Fix:** ```tsx environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID || '', // Or throw a clear error: if (!process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID) { throw new Error('NEXT_PUBLIC_DYNAMIC_ENV_ID is required'); } ``` **Effort:** small --- ## Architecture Notes (Non-Issues) 1. **Provider nesting order is correct** — ApiEnv → Config → Dynamic → Auth → Exchange → MarketData. Dependencies flow correctly. 2. **WebSocket binary (msgpack) support** is well-implemented with proper Blob→ArrayBuffer→decode pipeline. 3. **Exchange SDK adapter pattern** is clean and extensible. 4. **Tailwind usage** is consistent throughout the codebase. 5. **The middleware** for app subdomain redirect is simple and correct.