From ccbc68ee4fde8b23f23f00c2b92e949e5b5c344f Mon Sep 17 00:00:00 2001
From: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Date: Tue, 21 Mar 2023 11:54:35 +0400
Subject: [PATCH] fix: filter currencies by name (#7493)

---
 .../components/autocomplete/autocomplete.jsx  | 20 +++++++++++++++++--
 .../currency-selector/currency-selector.jsx   |  7 +++++++
 packages/p2p/src/stores/buy-sell-store.js     |  1 +
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/autocomplete/autocomplete.jsx b/packages/components/src/components/autocomplete/autocomplete.jsx
index 6c3579f49b4f..a7bc0d3e3d45 100644
--- a/packages/components/src/components/autocomplete/autocomplete.jsx
+++ b/packages/components/src/components/autocomplete/autocomplete.jsx
@@ -71,7 +71,17 @@ const Autocomplete = React.memo(props => {
 
     React.useEffect(() => {
         if (has_updating_list) {
-            const new_filtered_items = is_list_visible ? getFilteredItems(value.toLowerCase(), list_items) : list_items;
+            let new_filtered_items = [];
+
+            if (is_list_visible) {
+                if (typeof props.onSearch === 'function') {
+                    new_filtered_items = props.onSearch(value.toLowerCase(), list_items);
+                } else {
+                    new_filtered_items = getFilteredItems(value.toLowerCase(), list_items);
+                }
+            } else {
+                new_filtered_items = list_items;
+            }
 
             setFilteredItems(new_filtered_items);
             if (historyValue) {
@@ -263,7 +273,13 @@ const Autocomplete = React.memo(props => {
 
     const filterList = e => {
         const val = e.target.value.toLowerCase();
-        const new_filtered_items = getFilteredItems(val, props.list_items, should_filter_by_char);
+        let new_filtered_items = [];
+
+        if (typeof props.onSearch === 'function') {
+            new_filtered_items = props.onSearch(val, props.list_items);
+        } else {
+            new_filtered_items = getFilteredItems(val, props.list_items, should_filter_by_char);
+        }
 
         if (!new_filtered_items.length) {
             setInputValue('');
diff --git a/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx b/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx
index 49dc7fb1bf63..99a7a4d59d35 100644
--- a/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx
+++ b/packages/p2p/src/components/buy-sell/currency-selector/currency-selector.jsx
@@ -48,6 +48,13 @@ const CurrencySelector = ({ className, default_value, list, onSelect }) => {
                             onItemSelection={({ value }) => {
                                 if (value) onSelect?.(value);
                             }}
+                            onSearch={(value, list_items) => {
+                                return list_items.filter(
+                                    item =>
+                                        item.display_name.toLowerCase().includes(value) ||
+                                        item.text.toLowerCase().includes(value)
+                                );
+                            }}
                             placeholder={localize('Search')}
                             trailing_icon={
                                 field.value ? (
diff --git a/packages/p2p/src/stores/buy-sell-store.js b/packages/p2p/src/stores/buy-sell-store.js
index 0c34727d1872..0af3a85b02a6 100644
--- a/packages/p2p/src/stores/buy-sell-store.js
+++ b/packages/p2p/src/stores/buy-sell-store.js
@@ -531,6 +531,7 @@ export default class BuySellStore extends BaseStore {
                         </Text>
                     </div>
                 ),
+                display_name,
                 has_adverts,
                 is_default,
                 text: symbol,