fix: memoize the list stuff so the tokens are consistently clickable (#2724)

src/components/SearchModal/CurrencySearchModal.tsx

@@ -66,6 +66,13 @@ export default function CurrencySearchModal({
   const [importList, setImportList] = useState<TokenList | undefined>()
   const [listURL, setListUrl] = useState<string | undefined>()
 
+  const showImportView = useCallback(() => setModalView(CurrencyModalView.importToken), [setModalView])
+  const showManageView = useCallback(() => setModalView(CurrencyModalView.manage), [setModalView])
+  const handleBackImport = useCallback(
+    () => setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
+    [setModalView, prevView]
+  )
+
   // change min height if not searching
   const minHeight = modalView === CurrencyModalView.importToken || modalView === CurrencyModalView.importList ? 40 : 80
   let content = null
@@ -81,9 +88,9 @@ export default function CurrencySearchModal({
           showCommonBases={showCommonBases}
           showCurrencyAmount={showCurrencyAmount}
           disableNonToken={disableNonToken}
-          showImportView={() => setModalView(CurrencyModalView.importToken)}
+          showImportView={showImportView}
           setImportToken={setImportToken}
-          showManageView={() => setModalView(CurrencyModalView.manage)}
+          showManageView={showManageView}
         />
       )
       break
@@ -94,9 +101,7 @@ export default function CurrencySearchModal({
             tokens={[importToken]}
             onDismiss={onDismiss}
             list={importToken instanceof WrappedTokenInfo ? importToken.list : undefined}
-            onBack={() =>
-              setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search)
-            }
+            onBack={handleBackImport}
             handleCurrencySelect={handleCurrencySelect}
           />
         )

src/state/lists/hooks.ts

@@ -99,20 +99,24 @@ function useCombinedTokenMapFromUrls(urls: string[] | undefined): TokenAddressMa
 
 // filter out unsupported lists
 export function useActiveListUrls(): string[] | undefined {
-  return useAppSelector((state) => state.lists.activeListUrls)?.filter((url) => !UNSUPPORTED_LIST_URLS.includes(url))
+  const activeListUrls = useAppSelector((state) => state.lists.activeListUrls)
+  return useMemo(() => activeListUrls?.filter((url) => !UNSUPPORTED_LIST_URLS.includes(url)), [activeListUrls])
 }
 
 export function useInactiveListUrls(): string[] {
   const lists = useAllLists()
   const allActiveListUrls = useActiveListUrls()
-  return Object.keys(lists).filter((url) => !allActiveListUrls?.includes(url) && !UNSUPPORTED_LIST_URLS.includes(url))
+  return useMemo(
+    () => Object.keys(lists).filter((url) => !allActiveListUrls?.includes(url) && !UNSUPPORTED_LIST_URLS.includes(url)),
+    [lists, allActiveListUrls]
+  )
 }
 
 // get all the tokens from active lists, combine with local default tokens
 export function useCombinedActiveList(): TokenAddressMap {
   const activeListUrls = useActiveListUrls()
   const activeTokens = useCombinedTokenMapFromUrls(activeListUrls)
-  return combineMaps(activeTokens, TRANSFORMED_DEFAULT_TOKEN_LIST)
+  return useMemo(() => combineMaps(activeTokens, TRANSFORMED_DEFAULT_TOKEN_LIST), [activeTokens])
 }
 
 // list of tokens not supported on interface for various reasons, used to show warnings and prevent swaps and adds