empty state

ui/apps/AppList.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { AppItemOverview } from 'types/client/apps';
 
+import { apos } from 'lib/html-entities';
 import AppCard from 'ui/apps/AppCard';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 
@@ -42,7 +43,7 @@ const AppList = ({ apps }: Props) => {
           )) }
         </Grid>
       ) : (
-        <EmptySearchResult/>
+        <EmptySearchResult text={ `Couldn${ apos }t find an app that matches your filter query.` }/>
       ) }
     </>
   );

ui/apps/EmptySearchResult.tsx

@@ -2,9 +2,12 @@ import { Box, Heading, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import emptyIcon from 'icons/empty_search_result.svg';
-import { apos } from 'lib/html-entities';
 
-const EmptySearchResult = () => {
+interface Props {
+  text: string;
+}
+
+const EmptySearchResult = ({ text }: Props) => {
   return (
     <Box
       display="flex"
@@ -31,7 +34,7 @@ const EmptySearchResult = () => {
         variant="secondary"
         align="center"
       >
-        Couldn{ apos }t find an app that matches your filter query.
+        { text }
       </Text>
     </Box>
   );

ui/shared/Filters.tsx

+// DEPRECATED
+// migrate to separate components
+//    ui/shared/FilterButton.tsx + custom filter
+//    ui/shared/FilterInput.tsx
 import { SearchIcon } from '@chakra-ui/icons';
 import { Flex, Icon, Button, Circle, InputGroup, InputLeftElement, Input, useColorModeValue } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';

ui/tx/TxInternals.tsx

@@ -5,6 +5,8 @@ import type { TxInternalsType } from 'types/api/tx';
 import type ArrayElement from 'types/utils/ArrayElement';
 
 import { data } from 'data/txInternal';
+import { apos } from 'lib/html-entities';
+import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import FilterInput from 'ui/shared/FilterInput';
 import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
@@ -26,13 +28,17 @@ const TxInternals = () => {
     setFilters(nextValue);
   }, []);
 
-  return (
-    <Box>
-      <Flex>
-        <TxInternalsFilter onFilterChange={ handleFilterChange } defaultFilters={ filters } appliedFiltersNum={ filters.length }/>
-        <FilterInput onChange={ setSearchTerm } maxW="360px" ml={ 3 } size="xs" placeholder="Search by addresses, hash, method..."/>
-      </Flex>
-      <TableContainer width="100%" mt={ 6 }>
+  const content = (() => {
+    const filteredData = data
+      .filter(({ type }) => filters.includes(type))
+      .filter(searchFn(searchTerm));
+
+    if (filteredData.length === 0) {
+      return <EmptySearchResult text={ `Couldn${ apos }t find any transaction that matches your query.` }/>;
+    }
+
+    return (
+      <TableContainer width="100%">
         <Table variant="simple" minWidth="950px" size="sm">
           <Thead>
             <Tr>
@@ -51,6 +57,16 @@ const TxInternals = () => {
           </Tbody>
         </Table>
       </TableContainer>
+    );
+  })();
+
+  return (
+    <Box>
+      <Flex mb={ 6 }>
+        <TxInternalsFilter onFilterChange={ handleFilterChange } defaultFilters={ filters } appliedFiltersNum={ filters.length }/>
+        <FilterInput onChange={ setSearchTerm } maxW="360px" ml={ 3 } size="xs" placeholder="Search by addresses, hash, method..."/>
+      </Flex>
+      { content }
     </Box>
   );
 };

ui/tx/internals/TxInternalsFilter.tsx

@@ -38,4 +38,4 @@ const TxInternalsFilter = ({ onFilterChange, defaultFilters, appliedFiltersNum }
   );
 };
 
-export default TxInternalsFilter;
+export default React.memo(TxInternalsFilter);