diff --git a/apps/cowswap-frontend/src/modules/tokensList/containers/TokenSearchResults/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/containers/TokenSearchResults/index.tsx
index c148393351..c976379c1d 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/containers/TokenSearchResults/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/containers/TokenSearchResults/index.tsx
@@ -1,6 +1,7 @@
import { useSetAtom } from 'jotai/index'
import { useCallback, useEffect, useMemo } from 'react'
+import { TokenWithLogo } from '@cowprotocol/common-const'
import { useNetworkName } from '@cowprotocol/common-hooks'
import { doesTokenMatchSymbolOrAddress } from '@cowprotocol/common-utils'
import { useSearchToken } from '@cowprotocol/tokens'
@@ -16,7 +17,7 @@ import { TokenSourceTitle } from '../../pure/TokenSourceTitle'
import { updateSelectTokenWidgetAtom } from '../../state/selectTokenWidgetAtom'
import { SelectTokenContext } from '../../types'
-const searchResultsLimit = 10
+const SEARCH_RESULTS_LIMIT = 10
export interface TokenSearchResultsProps extends SelectTokenContext {
searchInput: string
@@ -53,16 +54,29 @@ export function TokenSearchResults({
return searchCount === 0
}, [isLoading, searchCount])
+ const [matchedToken, activeList] = useMemo(() => {
+ let matched: TokenWithLogo | undefined = undefined
+ const remaining: TokenWithLogo[] = []
+
+ for (const t of activeListsResult) {
+ if (doesTokenMatchSymbolOrAddress(t, searchInput)) {
+ matched = t
+ } else {
+ remaining.push(t)
+ }
+ }
+
+ return [matched, remaining]
+ }, [activeListsResult, searchInput])
+
// On press Enter, select first token if only one token is found or it's fully matches to the search input
const onInputPressEnter = useCallback(() => {
if (!searchInput || !activeListsResult) return
- const matchedToken = activeListsResult.find((token) => doesTokenMatchSymbolOrAddress(token, searchInput))
-
if (activeListsResult.length === 1 || matchedToken) {
onSelectToken(matchedToken || activeListsResult[0])
}
- }, [searchInput, activeListsResult, onSelectToken])
+ }, [searchInput, activeListsResult, matchedToken, onSelectToken])
useEffect(() => {
updateSelectTokenWidget({
@@ -84,9 +98,20 @@ export function TokenSearchResults({
return (
<>
+ {/*Exact match*/}
+ {matchedToken && (
+