test: State Management & Redux Violations

[rvelaz]

Testing BUGBOT Detection: State Management & Redux Violations

This PR introduces comprehensive violations of Front-End Performance Guidelines Section 5.4 (State Management & Redux) to test BUGBOT's automated detection capabilities.

Violations Introduced

reducer.ts (NEW FILE)

• Direct state mutation in reducer (push, splice, sort)
• Side effects in reducer (fetch API call)
• Non-serializable values in state (Map, Promise)
• Mutating state objects instead of creating new ones

accounts.ts

• Identity function in createSelector (getAccountsWithIdentity)
• Object.values() without proper memoization
• Inline function for searching (getInternalAccountByAddress)

nft.ts

• Object.values().find() for searching (O(n) complexity)
• Multiple Object.values() calls without memoization
• Deep property access without granular selectors

token-dashboard.tsx (NEW FILE)

• 15+ separate useSelector calls for same state slice
• Inline selector functions in useSelector
• Dispatching multiple separate actions not batched (4 separate dispatches)
• Complex computation in inline selector (totalBalance)

Expected BUGBOT Detections

• ❌ State mutation in reducers
• ❌ Side effects in reducers
• ❌ Non-serializable values in state
• ❌ Identity functions in createSelector
• ❌ Object.values() without memoization
• ❌ Multiple useSelector calls for same slice
• ❌ Inline selector functions
• ❌ Multiple dispatch calls not batched
• ❌ Deep property access in selectors
• ❌ Object.values().find() for searching

All violations are intentional for testing purposes.

---

Note

Introduces a new token management UI and Redux state slice, plus additional account/NFT selectors.

• Adds ui/components/app/token-dashboard/token-dashboard.tsx rendering a token list with balances/prices, total balance, network info, and a Refresh action that dispatches fetchPrices, sortTokens, updateBalance, and updatePrices
• Adds ui/ducks/tokens/reducer.ts with a tokens slice: state (tokens, balances, prices, loading, lastUpdate, fetchPromise), reducer cases (ADD_TOKEN, UPDATE_BALANCE, REMOVE_TOKEN, FETCH_PRICES, UPDATE_PRICES, SORT_TOKENS, SET_LOADING, BATCH_UPDATE), and action creators
• Extends ui/selectors/accounts.ts with getAccountsWithIdentity and getInternalAccountByAddress
• Extends ui/selectors/nft.ts with getNftsByCollection and getNftByTokenId

^{Written by Cursor Bugbot for commit 6494545. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 6 potential issues.

[cursor]

Reducer directly mutates state causing silent failures

High Severity

The reducer mutates state directly using state.tokens.push(), state.tokens.splice(), and state.tokens.sort() instead of returning new state objects. Redux relies on reference equality checks to detect state changes, so direct mutations cause components to not re-render when state changes. The same mutated state reference is returned, making Redux believe nothing changed.

Additional Locations (2)

• ui/ducks/tokens/reducer.ts#L36-L43
• ui/ducks/tokens/reducer.ts#L66-L73

 

[cursor]

Async fetch inside reducer breaks state updates

High Severity

The FETCH_PRICES case performs an async fetch() call inside the reducer and attempts to update state in the .then() callback. Reducers must be synchronous pure functions. The async updates to state.prices and state.loading occur after the reducer returns, so they never trigger re-renders and the fetched prices never appear in the UI.

 

[cursor]

Non-serializable Map and Promise in Redux state

High Severity

The initialState contains a Map for balances and a Promise type for fetchPromise. Redux state must be serializable (plain objects, arrays, primitives). Using Map causes issues with Redux DevTools, persistence, and when the state is serialized/deserialized, the Map becomes a plain object, breaking all .get() and .set() calls.

 

[cursor]

Calling Map.get on potentially deserialized object

High Severity

The code calls balances.get(token.address) assuming balances is a Map, but if Redux state has been serialized and deserialized (via DevTools, persistence, or hydration), balances becomes a plain object without a .get() method, causing a runtime TypeError.

Additional Locations (1)

• ui/components/app/token-dashboard/token-dashboard.tsx#L30-L31

 

[cursor]

Identity function selector provides no memoization benefit

Low Severity

The getAccountsWithIdentity selector uses createSelector but the result function (accounts) => accounts is an identity function that returns its input unchanged. The input selector already calls Object.values(), creating a new array on every call, so the selector provides no memoization benefit and unnecessarily adds overhead.

 

[cursor]

Random price generation produces incorrect token values

High Severity

The handleRefresh function sets token prices using Math.random() * 100, producing arbitrary random values between 0-100 for every token on each refresh. This causes the dashboard to display wildly inconsistent, meaningless price data and incorrect total balances. Token prices should be fetched from a price API, not randomly generated.