From 53af315fba4226fb8afe6548de9fe643d9eaf3f6 Mon Sep 17 00:00:00 2001
From: Armen Nikoyan <armen@nikoyan.com>
Date: Fri, 6 Sep 2024 19:16:04 +0400
Subject: [PATCH] Show all available tokens in asset selector. (#2533)

* [Redesign]: Show all available tokens with a scroll

* fix(redesign): reduce token address clickable area
---
 .../v2/Bridge/AssetPicker/SearchableList/index.tsx   |  7 +------
 .../src/views/v2/Bridge/AssetPicker/TokenItem.tsx    |  2 ++
 .../src/views/v2/Bridge/AssetPicker/TokenList.tsx    | 12 ++++--------
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/SearchableList/index.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/SearchableList/index.tsx
index 939250b83..ccc2c9bbb 100644
--- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/SearchableList/index.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/SearchableList/index.tsx
@@ -23,7 +23,6 @@ type SearchableListProps<T> = {
   listTitle?: ReactNode;
   searchPlaceholder?: string;
   className?: string;
-  initialItems?: T[]; // Items to render when search is not performed
   items: T[];
   loading?: ReactNode;
   renderFn: (item: T, index: number) => ReactNode;
@@ -35,11 +34,7 @@ function SearchableList<T>(props: SearchableListProps<T>): ReactNode {
   const [query, setQuery] = useState('');
 
   const filteredList = useMemo(() => {
-    if (!query && props.initialItems) {
-      return props.initialItems;
-    } else {
-      return props.items.filter((item) => props.filterFn(item, query));
-    }
+    return props.items.filter((item) => props.filterFn(item, query));
   }, [props.items, props.filterFn, query]);
 
   return (
diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx
index 3e99cf6df..5cdfe23c2 100644
--- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx
@@ -32,6 +32,8 @@ const useStyles = makeStyles()(() => ({
     display: 'inline-flex',
     alignItems: 'center',
     marginLeft: 4,
+    height: '10px',
+    overflow: 'hidden',
   },
 }));
 
diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
index f7866f020..f3badace0 100644
--- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
@@ -58,7 +58,7 @@ const TokenList = (props: Props) => {
     props.tokenList || [],
   );
 
-  const topTokens = useMemo(() => {
+  const sortedTokens = useMemo(() => {
     const { selectedToken, selectedChainConfig } = props;
 
     const selectedTokenConfig = selectedToken
@@ -142,11 +142,8 @@ const TokenList = (props: Props) => {
         return;
       }
 
-      const tokenNotAdded = !tokens.find(
-        (addedToken) => addedToken.key === t.key,
-      );
-
-      if (tokens.length < SHORT_LIST_SIZE && tokenNotAdded) {
+      // Adding remaining tokens
+      if (!tokenSet.has(t.key)) {
         addToken(t);
       }
     });
@@ -170,8 +167,7 @@ const TokenList = (props: Props) => {
           </ListItemButton>
         )
       }
-      initialItems={topTokens}
-      items={props.tokenList ?? []}
+      items={sortedTokens}
       filterFn={(token, query) => {
         if (query.length === 0) return true;