search input

ui/pages/Apps.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react';
 
 import { TEMPORARY_DEMO_APPS } from 'data/apps';
 import AppList from 'ui/apps/AppList';
-import FilterInput from 'ui/apps/FilterInput';
+import FilterInput from 'ui/shared/FilterInput';
 
 const defaultDisplayedApps = [ ...TEMPORARY_DEMO_APPS ]
   .sort((a, b) => a.title.localeCompare(b.title));
@@ -23,7 +23,7 @@ const Apps = () => {
 
   return (
     <>
-      <FilterInput onChange={ debounceFilterApps }/>
+      <FilterInput onChange={ debounceFilterApps } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/>
       <AppList apps={ displayedApps }/>
     </>
   );

ui/apps/FilterInput.tsx → ui/shared/FilterInput.tsx

 import { SearchIcon } from '@chakra-ui/icons';
-import { Input, InputGroup, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
+import { Input, InputGroup, InputLeftElement, useColorModeValue, chakra } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 
 type Props = {
-  onChange: (q: string) => void;
+  onChange: (searchTerm: string) => void;
+  className?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  placeholder: string;
 }
 
-const FilterInput = ({ onChange }: Props) => {
+const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) => {
   const [ filterQuery, setFilterQuery ] = useState('');
 
   const handleFilterQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -19,7 +22,8 @@ const FilterInput = ({ onChange }: Props) => {
 
   return (
     <InputGroup
-      size="sm"
+      size={ size }
+      className={ className }
     >
       <InputLeftElement
         pointerEvents="none"
@@ -28,13 +32,13 @@ const FilterInput = ({ onChange }: Props) => {
       </InputLeftElement>
 
       <Input
-        size="sm"
+        size={ size }
         value={ filterQuery }
         onChange={ handleFilterQueryChange }
-        marginBottom={{ base: '4', lg: '6' }}
+        placeholder={ placeholder }
       />
     </InputGroup>
   );
 };
 
-export default FilterInput;
+export default chakra(FilterInput);

ui/tx/TxInternals.tsx

@@ -2,15 +2,25 @@ import { Box, Flex, Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-
 import React from 'react';
 
 import type { TxInternalsType } from 'types/api/tx';
+import type ArrayElement from 'types/utils/ArrayElement';
 
 import { data } from 'data/txInternal';
+import FilterInput from 'ui/shared/FilterInput';
 import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
 
 const DEFAULT_FILTERS: Array<TxInternalsType> = [ 'call', 'delegate_call', 'static_call', 'create', 'create2', 'self_destruct', 'reward' ];
 
+const searchFn = (searchTerm: string) => (item: ArrayElement<typeof data>): boolean => {
+  const formattedSearchTerm = searchTerm.toLowerCase();
+  return item.type.toLowerCase().includes(formattedSearchTerm) ||
+    item.from.toLowerCase().includes(formattedSearchTerm) ||
+    item.to.toLowerCase().includes(formattedSearchTerm);
+};
+
 const TxInternals = () => {
   const [ filters, setFilters ] = React.useState<Array<TxInternalsType>>(DEFAULT_FILTERS);
+  const [ searchTerm, setSearchTerm ] = React.useState<string>('');
 
   const handleFilterChange = React.useCallback((nextValue: Array<TxInternalsType>) => {
     setFilters(nextValue);
@@ -20,6 +30,7 @@ const TxInternals = () => {
     <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 }>
         <Table variant="simple" minWidth="950px" size="sm">
@@ -35,6 +46,7 @@ const TxInternals = () => {
           <Tbody>
             { data
               .filter(({ type }) => filters.includes(type))
+              .filter(searchFn(searchTerm))
               .map((item) => <TxInternalsTableItem key={ item.id } { ...item }/>) }
           </Tbody>
         </Table>

ui/tx/internals/TxInternalsFilter.tsx

@@ -5,21 +5,7 @@ import type { TxInternalsType } from 'types/api/tx';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import FilterButton from 'ui/shared/FilterButton';
-
-interface Filter {
-  title: string;
-  id: TxInternalsType;
-}
-
-const FILTERS: Array<Filter> = [
-  { title: 'Call', id: 'call' },
-  { title: 'Delegate call', id: 'delegate_call' },
-  { title: 'Static call', id: 'static_call' },
-  { title: 'Create', id: 'create' },
-  { title: 'Create2', id: 'create2' },
-  { title: 'Self-destruct', id: 'self_destruct' },
-  { title: 'Reward', id: 'reward' },
-];
+import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 interface Props {
   appliedFiltersNum?: number;
@@ -44,7 +30,7 @@ const TxInternalsFilter = ({ onFilterChange, defaultFilters, appliedFiltersNum }
       <PopoverContent w="438px">
         <PopoverBody px={ 4 } py={ 6 } display="grid" gridTemplateColumns="1fr 1fr" rowGap={ 5 }>
           <CheckboxGroup size="lg" onChange={ onFilterChange } defaultValue={ defaultFilters }>
-            { FILTERS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
+            { TX_INTERNALS_ITEMS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
           </CheckboxGroup>
         </PopoverBody>
       </PopoverContent>

ui/tx/internals/TxInternalsTableItem.tsx

 import { Tr, Td, Tag, Icon } from '@chakra-ui/react';
-import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 import TxStatus from 'ui/tx/TxStatus';
 
 interface Props {
@@ -18,10 +18,12 @@ interface Props {
 }
 
 const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props) => {
+  const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
+
   return (
     <Tr alignItems="top">
       <Td>
-        <Tag colorScheme="cyan" mr={ 2 }>{ capitalize(type) }</Tag>
+        { typeTitle && <Tag colorScheme="cyan" mr={ 2 }>{ typeTitle }</Tag> }
         <TxStatus status={ status }/>
       </Td>
       <Td pr="0">

ui/tx/internals/utils.ts

+import type { TxInternalsType } from 'types/api/tx';
+
+interface TxInternalsTypeItem {
+  title: string;
+  id: TxInternalsType;
+}
+
+export const TX_INTERNALS_ITEMS: Array<TxInternalsTypeItem> = [
+  { title: 'Call', id: 'call' },
+  { title: 'Delegate call', id: 'delegate_call' },
+  { title: 'Static call', id: 'static_call' },
+  { title: 'Create', id: 'create' },
+  { title: 'Create2', id: 'create2' },
+  { title: 'Self-destruct', id: 'self_destruct' },
+  { title: 'Reward', id: 'reward' },
+];