Show all available tokens in asset selector. (wormhole-foundation#2533)

* [Redesign]: Show all available tokens with a scroll * fix(redesign): reduce token address clickable area
wormholelabs-xyz · Sep 6, 2024 · 53af315 · 53af315
1 parent 443ba3c
commit 53af315
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 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
@@ -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
@@ -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
@@ -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;