Simplify import

lib/highlightText.ts

+import xss from 'xss';
+
 import escapeRegExp from 'lib/escapeRegExp';
 
 export default function highlightText(text: string, query: string) {
   const regex = new RegExp('(' + escapeRegExp(query) + ')', 'gi');
-  return text.replace(regex, '<mark>$1</mark>');
+  return xss(text.replace(regex, '<mark>$1</mark>'));
 }

ui/searchResults/SearchResultListItem.tsx

@@ -65,7 +65,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
             >
               <Skeleton
                 isLoaded={ !isLoading }
-                dangerouslySetInnerHTML={{ __html: xss(highlightText(name, searchTerm)) }}
+                dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}
                 whiteSpace="nowrap"
                 overflow="hidden"
                 textOverflow="ellipsis"
@@ -101,14 +101,14 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
               isLoading={ isLoading }
               onClick={ handleLinkClick }
             >
-              <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.name, searchTerm)) }}/>
+              <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
             </LinkInternal>
           </Flex>
         );
       }
 
       case 'app': {
-        const title = <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.app.title, searchTerm)) }}/>;
+        const title = <span dangerouslySetInnerHTML={{ __html: highlightText(data.app.title, searchTerm) }}/>;
         return (
           <Flex alignItems="center">
             <Image
@@ -252,8 +252,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       case 'contract':
       case 'address': {
         const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
-        // eslint-disable-next-line max-len
-        return data.name ? <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(data.name) : xss(highlightText(data.name, searchTerm)) }}/> : null;
+        return data.name ? <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(data.name) : highlightText(data.name, searchTerm) }}/> : null;
       }
 
       default:

ui/searchResults/SearchResultTableItem.tsx

@@ -68,7 +68,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                     overflow="hidden"
                     textOverflow="ellipsis"
                     whiteSpace="nowrap"
-                    dangerouslySetInnerHTML={{ __html: xss(highlightText(name, searchTerm)) }}
+                    dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}
                   />
                 </LinkInternal>
                 { data.is_verified_via_admin_panel && <Icon as={ verifiedToken } boxSize={ 4 } ml={ 1 } color="green.500"/> }
@@ -119,7 +119,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 </Flex>
               </Td>
               <Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
-                <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(data.name) : xss(highlightText(data.name, searchTerm)) }}/>
+                <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(data.name) : highlightText(data.name, searchTerm) }}/>
               </Td>
             </>
           );
@@ -151,7 +151,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                   isLoading={ isLoading }
                   onClick={ handleLinkClick }
                 >
-                  <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.name, searchTerm)) }}/>
+                  <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
                 </LinkInternal>
               </Flex>
             </Td>
@@ -169,7 +169,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
       }
 
       case 'app': {
-        const title = <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.app.title, searchTerm)) }}/>;
+        const title = <span dangerouslySetInnerHTML={{ __html: highlightText(data.app.title, searchTerm) }}/>;
         return (
           <>
             <Td fontSize="sm">

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

 import { Box, Text, Grid, Flex, Icon } from '@chakra-ui/react';
 import React from 'react';
-import xss from 'xss';
 
 import type { SearchResultAddressOrContract } from 'types/api/search';
 
@@ -25,7 +24,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
       whiteSpace="nowrap"
       textOverflow="ellipsis"
     >
-      <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.name, searchTerm)) }}/>
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
     </Text>
   );
   const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

 import { Icon, Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
-import xss from 'xss';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
@@ -41,7 +40,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
               textOverflow="ellipsis"
               ml={ 2 }
             >
-              <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.title, searchTerm)) }}/>
+              <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
             { data.external && <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle"/> }
           </Flex>
@@ -71,7 +70,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
           w="200px"
           flexShrink={ 0 }
         >
-          <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.title, searchTerm)) }}/>
+          <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
         </Text>
         <Text
           variant="secondary"

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx

 import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
 import React from 'react';
-import xss from 'xss';
 
 import type { SearchResultLabel } from 'types/api/search';
 
@@ -25,7 +24,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
       whiteSpace="nowrap"
       textOverflow="ellipsis"
     >
-      <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.name, searchTerm)) }}/>
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
     </Text>
   );
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

 import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
 import React from 'react';
-import xss from 'xss';
 
 import type { SearchResultToken } from 'types/api/search';
 
@@ -26,7 +25,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
       whiteSpace="nowrap"
       textOverflow="ellipsis"
     >
-      <span dangerouslySetInnerHTML={{ __html: xss(highlightText(data.name + (data.symbol ? ` (${ data.symbol })` : ''), searchTerm)) }}/>
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.name + (data.symbol ? ` (${ data.symbol })` : ''), searchTerm) }}/>
     </Text>
   );