Optimize canvas animation and transaction processing performance

[Copilot]

Addressed performance bottlenecks in grid animation rendering and transaction data processing that caused excessive memory allocation and redundant computations.

Changes

GridHero - Eliminated O(rows × cols) setTimeout calls per frame

Replaced individual timeout scheduling in nested loops with Map-based flash state tracking:

// Before: Creates hundreds of timeouts per animation cycle
for(let y = 0; y < rows; y++) {
  for(let x = 0; x < cols; x++) {
    if(Math.random() < FLASH_PROBABILITY) {
      drawCell(x, y, color);
      setTimeout(() => drawCell(x, y, BLACK), FLASH_DURATION);
    }
  }
}

// After: Single timeout, Map tracks expiration
const activeFlashes = new Map<string, number>();
function animate() {
  const now = Date.now();
  activeFlashes.forEach((expireTime, key) => {
    if (now >= expireTime) {
      drawCell(x, y, BLACK);
      activeFlashes.delete(key);
    }
  });
  // Add new flashes without creating timeouts
}

UsernameProfileSectionHeatmap - Reduced O(4n) to O(n) transaction categorization

Consolidated four separate array filters into single pass:

// Before: Multiple passes over allTransactions
setTokenSwapCount(allTransactions.filter(tx => isSwap(tx)).length);
setEnsCount(allTransactions.filter(tx => isEns(tx)).length);
setBridgeCount(allTransactions.filter(tx => isBridge(tx)).length);
setLendCount(allTransactions.filter(tx => isLend(tx)).length);

// After: Single iteration
for (const tx of allTransactions) {
  if (isSwap(tx)) tokenSwapCount++;
  if (isEns(tx)) ensCount++;
  if (isBridge(tx)) bridgeCount++;
  if (isLend(tx)) lendCount++;
}

UsernameProfileSectionHeatmap - Replaced setInterval DOM polling with MutationObserver

Changed from 200ms polling (50 attempts) to event-driven DOM updates.

UsernameProfileSectionHeatmap - Eliminated intermediate array allocations

• Removed filter().map() chains in favor of direct for loops
• Changed new Set(arr.map()) to direct Set construction
• Replaced spread operations with push for deployment hash collection

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/base/base/apps/web/node_modules/next/dist/bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.