txs-filters

types/api/txsFilters.ts

+export type TTxsFilters = {
+  filter: 'pending' | 'validated';
+  type?: Array<TypeFilter>;
+  method?: Array<MethodFilter>;
+}
+
+export type TypeFilter = 'token_transfer' | 'contract_creation' | 'contract_call' | 'coin_transfer' | 'token_creation';
+
+export type MethodFilter = 'approve' | 'transfer' | 'multicall' | 'mint' | 'commit';

types/client/queries.ts

 export enum QueryKeys {
   csrf = 'csrf',
   profile = 'profile',
-  transactionsPending = 'transactions_pending',
-  transactionsValidated = 'transactions_validated',
+  transactions = 'transactions',
   tx = 'tx',
   txInternals = 'tx-internals',
   txLog = 'tx-log',

ui/txs/TxsContent.tsx

 import { Alert, Box, HStack, Show, Button } from '@chakra-ui/react';
 import React, { useState, useCallback } from 'react';
 
+import type { TTxsFilters } from 'types/api/txsFilters';
 import type { Sort } from 'types/client/txs-sort';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import FilterButton from 'ui/shared/FilterButton';
 import FilterInput from 'ui/shared/FilterInput';
 import Pagination from 'ui/shared/Pagination';
 import SortButton from 'ui/shared/SortButton';
 
+import TxsFilters from './TxsFilters';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
 import TxsWithSort from './TxsWithSort';
 import useQueryWithPages from './useQueryWithPages';
 
 type Props = {
-  queryName: string;
   showDescription?: boolean;
-  stateFilter: 'validated' | 'pending';
+  stateFilter: TTxsFilters['filter'];
 }
 
 const TxsContent = ({
   showDescription,
-  queryName,
   stateFilter,
 }: Props) => {
   const [ sorting, setSorting ] = useState<Sort>();
+  const [ filters, setFilters ] = useState<Partial<TTxsFilters>>({ type: [], method: [] });
 
   const sort = useCallback((field: 'val' | 'fee') => () => {
     if (field === 'val') {
@@ -62,7 +62,7 @@ const TxsContent = ({
     onNextPageClick,
     hasPagination,
     resetPage,
-  } = useQueryWithPages(queryName, stateFilter);
+  } = useQueryWithPages({ ...filters, filter: stateFilter });
 
   const isMobile = useIsMobile(false);
 
@@ -92,10 +92,9 @@ const TxsContent = ({
       { showDescription && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> }
       <HStack mb={ 6 }>
         { /* TODO */ }
-        <FilterButton
-          isActive={ false }
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={ () => {} }
+        <TxsFilters
+          filters={ filters }
+          onFiltersChange={ setFilters }
           appliedFiltersNum={ 0 }
         />
         { isMobile && (

ui/txs/TxsFilters.tsx

+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Grid,
+  Link,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  Text,
+  useColorModeValue,
+  useDisclosure,
+  Flex,
+} from '@chakra-ui/react';
+import React, { useCallback, useState } from 'react';
+
+import type { TTxsFilters, TypeFilter, MethodFilter } from 'types/api/txsFilters';
+
+import FilterButton from 'ui/shared/FilterButton';
+
+interface Props {
+  appliedFiltersNum?: number;
+  filters: Partial<TTxsFilters>;
+  onFiltersChange: (val: Partial<TTxsFilters>) => void;
+}
+
+const TYPE_OPTIONS = [
+  { title: 'Token transfer', id: 'token_transfer' },
+  { title: 'Contract Creation', id: 'contract_creation' },
+  { title: 'Contract Call', id: 'contract_call' },
+  { title: 'Coin Transfer', id: 'coin_transfer' },
+  { title: 'Token Creation', id: 'token_creation' },
+];
+
+const METHOD_OPTIONS = [
+  { title: 'Approve', id: 'approve' },
+  { title: 'Transfer', id: 'transfer' },
+  { title: 'Multicall', id: 'multicall' },
+  { title: 'Mint', id: 'mint' },
+  { title: 'Commit', id: 'commit' },
+];
+
+const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  const [ typeFilter, setTypeFilter ] = useState<Array<TypeFilter>>(filters.type || []);
+  const [ methodFilter, setMethodFilter ] = useState<Array<MethodFilter>>(filters.method || []);
+
+  const onTypeFilterChange = useCallback((val: Array<TypeFilter>) => {
+    setTypeFilter(val);
+  }, []);
+
+  const onMethodFilterChange = useCallback((val: Array<MethodFilter>) => {
+    setMethodFilter(val);
+  }, []);
+
+  const onFilterReset = useCallback(() => {
+    setTypeFilter([]);
+    setMethodFilter([]);
+    onFiltersChange({ type: [], method: [] });
+    onClose();
+  }, [ onClose, onFiltersChange ]);
+
+  const onFilterApply = useCallback(() => {
+    onFiltersChange({ type: typeFilter, method: methodFilter } as Partial<TTxsFilters>);
+    onClose();
+  }, [ onClose, onFiltersChange, typeFilter, methodFilter ]);
+
+  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <FilterButton
+          isActive={ isOpen || Number(appliedFiltersNum) > 0 }
+          onClick={ onToggle }
+          appliedFiltersNum={ appliedFiltersNum }
+        />
+      </PopoverTrigger>
+      <PopoverContent w={{ md: '100%', lg: '438px' }}>
+        <PopoverBody px={ 4 } py={ 6 }>
+          <Text variant="secondary" fontWeight="600" fontSize="sm">Type</Text>
+          <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor={ borderColor }>
+            <CheckboxGroup size="lg" onChange={ onTypeFilterChange } defaultValue={ typeFilter }>
+              { TYPE_OPTIONS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
+            </CheckboxGroup>
+          </Grid>
+          <Text variant="secondary" fontWeight="600" fontSize="sm">Method</Text>
+          <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor={ borderColor }>
+            <CheckboxGroup size="lg" onChange={ onMethodFilterChange } defaultValue={ methodFilter }>
+              { METHOD_OPTIONS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
+            </CheckboxGroup>
+          </Grid>
+          <Flex alignItems="center" justifyContent="space-between">
+            <Link fontSize="sm" onClick={ onFilterReset }>Reset filters</Link>
+            <Button variant="outline" size="sm" onClick={ onFilterApply }>Apply</Button>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(TxsFilters);

ui/txs/TxsTab.tsx

 import React from 'react';
 
-import { QueryKeys } from 'types/client/queries';
-
 import TxsContent from './TxsContent';
 
 type Props = {
@@ -11,7 +9,6 @@ type Props = {
 const TxsTab = ({ tab }: Props) => {
   return (
     <TxsContent
-      queryName={ tab === 'validated' ? QueryKeys.transactionsValidated : QueryKeys.transactionsPending }
       showDescription={ tab === 'validated' }
       stateFilter={ tab }
     />

ui/txs/useQueryWithPages.ts

@@ -5,12 +5,14 @@ import React, { useCallback } from 'react';
 import { animateScroll } from 'react-scroll';
 
 import type { TransactionsResponse } from 'types/api/transaction';
+import type { TTxsFilters } from 'types/api/txsFilters';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 
 const PAGINATION_FIELDS = [ 'block_number', 'index', 'items_count' ];
 
-export default function useQueryWithPages(queryName: string, filter: string) {
+export default function useQueryWithPages(filters: TTxsFilters) {
   const queryClient = useQueryClient();
   const router = useRouter();
   const [ page, setPage ] = React.useState(1);
@@ -19,13 +21,19 @@ export default function useQueryWithPages(queryName: string, filter: string) {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, TransactionsResponse>(
-    [ queryName, { page } ],
+    [ QueryKeys.transactions, { page, filters } ],
     async() => {
       const params: Array<string> = [];
 
-      Object.entries(currPageParams).forEach(([ key, val ]) => params.push(`${ key }=${ val }`));
+      Object.entries({ ...filters, ...currPageParams }).forEach(([ key, val ]) => {
+        if (Array.isArray(val)) {
+          val.length && params.push(`${ key }=${ val.join(',') }`);
+        } else if (val) {
+          params.push(`${ key }=${ val }`);
+        }
+      });
 
-      return fetch(`/api/transactions?filter=${ filter }${ params.length ? '&' + params.join('&') : '' }`);
+      return fetch(`/api/transactions${ params.length ? '?' + params.join('&') : '' }`);
     },
     { staleTime: Infinity },
   );