update empty search result

ui/marketplace/EmptySearchResult.tsx

+import React from 'react';
+
+import { MarketplaceCategory } from 'types/client/marketplace';
+
+import config from 'configs/app';
+import { apos } from 'lib/html-entities';
+import EmptySearchResultDefault from 'ui/shared/EmptySearchResult';
+import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/LinkExternal';
+
+const feature = config.features.marketplace;
+
+type Props = {
+  favoriteApps: Array<string>;
+  selectedCategoryId?: string;
+}
+
+const EmptySearchResult = ({ favoriteApps, selectedCategoryId }: Props) => (
+  <EmptySearchResultDefault
+    text={
+      (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
+        <>
+          You don{ apos }t have any favorite apps.
+          Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.
+        </>
+      ) : (
+        <>
+          No matching apps found.
+          { 'suggestIdeasFormUrl' in feature && (
+            <>
+              { ' ' }Have a groundbreaking idea or app suggestion?{ ' ' }
+              <LinkExternal href={ feature.suggestIdeasFormUrl }>Share it with us</LinkExternal>
+            </>
+          ) }
+        </>
+      )
+    }
+  />
+);
+
+export default React.memo(EmptySearchResult);

ui/marketplace/MarketplaceList.tsx

@@ -3,12 +3,8 @@ import React from 'react';
 import type { MouseEvent } from 'react';
 
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
-import { MarketplaceCategory } from 'types/client/marketplace';
-
-import { apos } from 'lib/html-entities';
-import EmptySearchResult from 'ui/shared/EmptySearchResult';
-import IconSvg from 'ui/shared/IconSvg';
 
+import EmptySearchResult from './EmptySearchResult';
 import MarketplaceAppCard from './MarketplaceAppCard';
 
 type Props = {
@@ -52,18 +48,7 @@ const MarketplaceList = ({ apps, showAppInfo, favoriteApps, onFavoriteClick, isL
       )) }
     </Grid>
   ) : (
-    <EmptySearchResult
-      text={
-        (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
-          <>
-            You don{ apos }t have any favorite apps.
-            Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.
-          </>
-        ) : (
-          `Couldn${ apos }t find an app that matches your filter query.`
-        )
-      }
-    />
+    <EmptySearchResult selectedCategoryId={ selectedCategoryId } favoriteApps={ favoriteApps }/>
   );
 };
 

ui/marketplace/MarketplaceListWithScores.tsx

@@ -3,13 +3,10 @@ import React from 'react';
 import type { MouseEvent } from 'react';
 
 import type { MarketplaceAppWithSecurityReport, ContractListTypes } from 'types/client/marketplace';
-import { MarketplaceCategory } from 'types/client/marketplace';
 
-import { apos } from 'lib/html-entities';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import EmptySearchResult from 'ui/shared/EmptySearchResult';
-import IconSvg from 'ui/shared/IconSvg';
 
+import EmptySearchResult from './EmptySearchResult';
 import ListItem from './MarketplaceListWithScores/ListItem';
 import Table from './MarketplaceListWithScores/Table';
 
@@ -82,18 +79,7 @@ const MarketplaceListWithScores = ({
       content={ content }
     />
   ) : (
-    <EmptySearchResult
-      text={
-        (selectedCategoryId === MarketplaceCategory.FAVORITES && !favoriteApps.length) ? (
-          <>
-            You don{ apos }t have any favorite apps.
-            Click on the <IconSvg name="star_outline" w={ 4 } h={ 4 } mb={ -0.5 }/> icon on the app{ apos }s card to add it to Favorites.
-          </>
-        ) : (
-          `Couldn${ apos }t find an app that matches your filter query.`
-        )
-      }
-    />
+    <EmptySearchResult selectedCategoryId={ selectedCategoryId } favoriteApps={ favoriteApps }/>
   );
 };