filters

icons/filter.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.5 14.167c0 .46.373.833.833.833H11a.833.833 0 1 0 0-1.667H9.333a.833.833 0 0 0-.833.834ZM3.5 5a.833.833 0 0 0 0 1.667h13.333a.833.833 0 0 0 0-1.667H3.5Zm1.667 5c0 .46.373.833.833.833h8.333a.833.833 0 0 0 0-1.666H6a.833.833 0 0 0-.833.833Z" fill="currentColor"/>
+</svg>

theme/components/Input.ts

@@ -13,6 +13,14 @@ import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
 const size = {
+  xs: defineStyle({
+    fontSize: 'md',
+    lineHeight: '24px',
+    px: '4px',
+    py: '12px',
+    h: '32px',
+    borderRadius: 'base',
+  }),
   sm: defineStyle({
     fontSize: 'md',
     lineHeight: '24px',
@@ -55,6 +63,10 @@ const variantOutline = definePartsStyle((props) => {
 });
 
 const sizes = {
+  xs: definePartsStyle({
+    field: size.xs,
+    addon: size.xs,
+  }),
   sm: definePartsStyle({
     field: size.sm,
     addon: size.sm,

ui/shared/Filters.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';
+import React from 'react';
+
+import filterIcon from 'icons/filter.svg';
+
+const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 }/>;
+
+const Filters = () => {
+  const [ isActive, setIsActive ] = React.useState(false);
+  const [ value, setValue ] = React.useState('');
+
+  const handleClick = React.useCallback(() => {
+    setIsActive(flag => !flag);
+  }, []);
+
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  }, []);
+
+  const badgeColor = useColorModeValue('white', 'black');
+  const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
+  const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+  const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+
+  return (
+    <Flex>
+      <Button
+        leftIcon={ FilterIcon }
+        rightIcon={ isActive ? <Circle bg={ badgeBgColor } size={ 5 } color={ badgeColor }>2</Circle> : undefined }
+        size="sm"
+        variant="outline"
+        colorScheme="gray-dark"
+        borderWidth="1px"
+        onClick={ handleClick }
+        isActive={ isActive }
+        px={ 1.5 }
+      >
+        Filter
+      </Button>
+      <InputGroup size="xs" ml={ 3 } maxW="360px">
+        <InputLeftElement ml={ 1 }>
+          <SearchIcon w={ 5 } h={ 5 } color={ searchIconColor }/>
+        </InputLeftElement>
+        <Input
+          paddingInlineStart="38px"
+          placeholder="Search by addresses, hash, method..."
+          ml="1px"
+          onChange={ handleChange }
+          borderColor={ inputBorderColor }
+          value={ value }
+          size="xs"
+        />
+      </InputGroup>
+    </Flex>
+  );
+};
+
+export default Filters;

ui/tx/TxInternals.tsx

@@ -2,12 +2,14 @@ import { Box, Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/rea
 import React from 'react';
 
 import { data } from 'data/txInternal';
+import Filters from 'ui/shared/Filters';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
 
 const TxInternals = () => {
   return (
     <Box>
-      <TableContainer width="100%">
+      <Filters/>
+      <TableContainer width="100%" mt={ 6 }>
         <Table variant="simple" minWidth="950px">
           <Thead>
             <Tr>