memoize selection and active chain

Author: kevinfaveri

packages/frontend/src/components/EVMFromTokenSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Loader2, ChevronDown, Check, Search } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -150,11 +150,11 @@ export function EVMFromTokenSelector({
     onChange(balance);
   };
 
-  // Get filtered and prioritized sections
-  const getFilteredSections = () => {
+  // Get filtered and prioritized sections (memoized to avoid recalculating on every render)
+  const filteredSections = useMemo(() => {
     const term = searchTerm.toLowerCase().trim();
 
-    // Filter sections based on search term and mark same-chain tokens as disabled
+    // Filter sections based on search term
     let filtered = CHAIN_SECTIONS.map(section => {
       // Filter tokens by symbol or name if search term exists
       const tokensToUse = term
@@ -172,30 +172,26 @@ export function EVMFromTokenSelector({
       return { ...section, tokens: tokensToUse };
     }).filter((section): section is ChainSection => section !== null);
 
-    // Prioritize active chain (move to top) - only when dropdown is closed
-    if (!isOpen) {
-      const activeChainName = chainId ? CHAIN_ID_TO_NAME[chainId] : null;
-      if (activeChainName) {
-        console.info(`🔗 [EVMFromTokenSelector] Active chain ID: ${chainId}, Chain name: ${activeChainName}`);
-        const activeIndex = filtered.findIndex(s => s.label === activeChainName);
-        if (activeIndex > 0) {
-          console.info(`🔝 [EVMFromTokenSelector] Moving ${activeChainName} to top (was at index ${activeIndex})`);
-          const [activeSection] = filtered.splice(activeIndex, 1);
-          filtered.unshift(activeSection);
-        } else if (activeIndex === 0) {
-          console.info(`✅ [EVMFromTokenSelector] ${activeChainName} already at top`);
-        } else {
-          console.info(`⚠️ [EVMFromTokenSelector] Active chain ${activeChainName} not found in sections`);
-        }
+    // Prioritize active chain (move to top)
+    const activeChainName = chainId ? CHAIN_ID_TO_NAME[chainId] : null;
+    if (activeChainName) {
+      console.info(`🔗 [EVMFromTokenSelector] Active chain ID: ${chainId}, Chain name: ${activeChainName}`);
+      const activeIndex = filtered.findIndex(s => s.label === activeChainName);
+      if (activeIndex > 0) {
+        console.info(`🔝 [EVMFromTokenSelector] Moving ${activeChainName} to top (was at index ${activeIndex})`);
+        const [activeSection] = filtered.splice(activeIndex, 1);
+        filtered.unshift(activeSection);
+      } else if (activeIndex === 0) {
+        console.info(`✅ [EVMFromTokenSelector] ${activeChainName} already at top`);
       } else {
-        console.info(`⚠️ [EVMFromTokenSelector] No active chain detected (chainId: ${chainId})`);
+        console.info(`⚠️ [EVMFromTokenSelector] Active chain ${activeChainName} not found in sections`);
       }
+    } else {
+      console.info(`⚠️ [EVMFromTokenSelector] No active chain detected (chainId: ${chainId})`);
     }
 
     return filtered;
-  };
-
-  const filteredSections = getFilteredSections();
+  }, [searchTerm, chainId]); // Only recalculate when search term or chain ID changes, not when dropdown opens/closes
 
   return (
     <div className="space-y-2">