base implementation

data/txInternal.ts

+import type { TxInternalsType } from 'types/api/tx';
+
 export const data = [
   {
     id: 1,
-    type: 'call',
+    type: 'call' as TxInternalsType,
     status: 'success' as const,
     from: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
     to: '0xF7A558692dFB5F456e291791da7FAE8Dd046574e',
@@ -10,7 +12,7 @@ export const data = [
   },
   {
     id: 2,
-    type: 'delegate call',
+    type: 'delegate_call' as TxInternalsType,
     status: 'error' as const,
     from: '0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45',
     to: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
@@ -19,7 +21,7 @@ export const data = [
   },
   {
     id: 3,
-    type: 'static call',
+    type: 'static_call' as TxInternalsType,
     status: 'success' as const,
     from: '0x97Aa2EfcF35c0f4c9AaDDCa8c2330fa7A9533830',
     to: '0x35317007D203b8a86CA727ad44E473E40450E378',

types/api/tx.ts

+export type TxInternalsType = 'call' | 'delegate_call' | 'static_call' | 'create' | 'create2' | 'self_destruct' | 'reward'

ui/shared/FilterButton.tsx

+import { Button, Circle, Icon, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import filterIcon from 'icons/filter.svg';
+
+const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 }/>;
+
+interface Props {
+  isActive: boolean;
+  isCollapsed?: boolean;
+  appliedFiltersNum?: number;
+  onClick: () => void;
+}
+
+const FilterButton = ({ isActive, appliedFiltersNum, onClick, isCollapsed }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const badgeColor = useColorModeValue('white', 'black');
+  const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
+
+  return (
+    <Button
+      ref={ ref }
+      leftIcon={ isCollapsed ? undefined : FilterIcon }
+      rightIcon={ appliedFiltersNum ? <Circle bg={ badgeBgColor } size={ 5 } color={ badgeColor }>{ appliedFiltersNum }</Circle> : undefined }
+      size="sm"
+      variant="outline"
+      colorScheme="gray-dark"
+      onClick={ onClick }
+      isActive={ isActive }
+      px={ 1.5 }
+    >
+      { isCollapsed ? FilterIcon : 'Filter' }
+    </Button>
+  );
+};
+
+export default React.forwardRef(FilterButton);

ui/tx/TxInternals.tsx

-import { Box, Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { Box, Flex, Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TxInternalsType } from 'types/api/tx';
+
 import { data } from 'data/txInternal';
-import Filters from 'ui/shared/Filters';
+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 TxInternals = () => {
+  const [ filters, setFilters ] = React.useState<Array<TxInternalsType>>(DEFAULT_FILTERS);
+
+  const handleFilterChange = React.useCallback((nextValue: Array<TxInternalsType>) => {
+    setFilters(nextValue);
+  }, []);
+
   return (
     <Box>
-      <Filters/>
+      <Flex>
+        <TxInternalsFilter onFilterChange={ handleFilterChange } defaultFilters={ filters } appliedFiltersNum={ filters.length }/>
+      </Flex>
       <TableContainer width="100%" mt={ 6 }>
         <Table variant="simple" minWidth="950px" size="sm">
           <Thead>
@@ -21,12 +33,9 @@ const TxInternals = () => {
             </Tr>
           </Thead>
           <Tbody>
-            { data.map((item) => (
-              <TxInternalsTableItem
-                key={ item.id }
-                { ...item }
-              />
-            )) }
+            { data
+              .filter(({ type }) => filters.includes(type))
+              .map((item) => <TxInternalsTableItem key={ item.id } { ...item }/>) }
           </Tbody>
         </Table>
       </TableContainer>

ui/tx/internals/TxInternalsFilter.tsx

+import { Popover, PopoverTrigger, PopoverContent, PopoverBody, CheckboxGroup, Checkbox, Text, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+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' },
+];
+
+interface Props {
+  appliedFiltersNum?: number;
+  defaultFilters: Array<TxInternalsType>;
+  onFilterChange: (nextValue: Array<TxInternalsType>) => void;
+}
+
+const TxInternalsFilter = ({ onFilterChange, defaultFilters, appliedFiltersNum }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+  const isMobile = useIsMobile();
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <FilterButton
+          isActive={ isOpen || Number(appliedFiltersNum) > 0 }
+          isCollapsed={ isMobile }
+          onClick={ onToggle }
+          appliedFiltersNum={ appliedFiltersNum }
+        />
+      </PopoverTrigger>
+      <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>) }
+          </CheckboxGroup>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default TxInternalsFilter;