token type filter

lib/api/resources.ts

@@ -217,7 +217,7 @@ export const RESOURCES = {
   tokens: {
     path: '/api/v2/tokens',
     paginationFields: [ 'holder_count' as const, 'items_count' as const, 'name' as const ],
-    filterFields: [ 'filter' as const ],
+    filterFields: [ 'filter' as const, 'type' as const ],
   },
 
   // HOMEPAGE

lib/token/tokenTypes.ts

+import type { TokenType } from 'types/api/tokenInfo';
+
+const TOKEN_TYPE: Array<{ title: string; id: TokenType }> = [
+  { title: 'ERC-20', id: 'ERC-20' },
+  { title: 'ERC-721', id: 'ERC-721' },
+  { title: 'ERC-1155', id: 'ERC-1155' },
+];
+
+export default TOKEN_TYPE;

types/api/tokens.ts

-import type { TokenInfo } from './tokenInfo';
+import type { TokenInfo, TokenType } from './tokenInfo';
 
 export type TokensResponse = {
   items: Array<TokenInfo>;
@@ -9,4 +9,4 @@ export type TokensResponse = {
   };
 }
 
-export type TokensFilters = { filter: string };
+export type TokensFilters = { filter: string; type: Array<TokenType> | undefined };

ui/address/AddressTxsFilter.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 
 import type { AddressFromToFilter } from 'types/api/address';
 
-import FilterButton from 'ui/shared/FilterButton';
+import FilterButton from 'ui/shared/filters/FilterButton';
 
 interface Props {
   isActive: boolean;

ui/pages/Apps.tsx

@@ -6,7 +6,7 @@ import PlusIcon from 'icons/plus.svg';
 import AppList from 'ui/apps/AppList';
 import AppListSkeleton from 'ui/apps/AppListSkeleton';
 import CategoriesMenu from 'ui/apps/CategoriesMenu';
-import FilterInput from 'ui/shared/FilterInput';
+import FilterInput from 'ui/shared/filters/FilterInput';
 
 import useMarketplaceApps from '../apps/useMarketplaceApps';
 

ui/shared/TokenTransfer/TokenTransferFilter.tsx

 import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  CheckboxGroup,
-  Checkbox,
   Text,
-  useDisclosure,
   Radio,
   RadioGroup,
   Stack,
@@ -17,9 +10,8 @@ import React from 'react';
 import type { AddressFromToFilter } from 'types/api/address';
 import type { TokenType } from 'types/api/tokenInfo';
 
-import FilterButton from 'ui/shared/FilterButton';
-
-import { TOKEN_TYPE } from './helpers';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
 
 interface Props {
   appliedFiltersNum?: number;
@@ -38,47 +30,32 @@ const TokenTransferFilter = ({
   onAddressFilterChange,
   defaultAddressFilter,
 }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
   const borderColor = useColorModeValue('blackAlpha.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="200px">
-        <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
-          { withAddressFilter && (
-            <>
-              <Text variant="secondary" fontWeight={ 600 }>Address</Text>
-              <RadioGroup
-                size="lg"
-                onChange={ onAddressFilterChange }
-                defaultValue={ defaultAddressFilter || 'all' }
-                paddingBottom={ 4 }
-                borderBottom="1px solid"
-                borderColor={ borderColor }
-              >
-                <Stack spacing={ 4 }>
-                  <Radio value="all"><Text fontSize="md">All</Text></Radio>
-                  <Radio value="from"><Text fontSize="md">From</Text></Radio>
-                  <Radio value="to"><Text fontSize="md">To</Text></Radio>
-                </Stack>
-              </RadioGroup>
-            </>
-          ) }
-          <Text variant="secondary" fontWeight={ 600 }>Type</Text>
-          <CheckboxGroup size="lg" onChange={ onTypeFilterChange } defaultValue={ defaultTypeFilters }>
-            { TOKEN_TYPE.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
-          </CheckboxGroup>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '200px' }}>
+      { withAddressFilter && (
+        <>
+          <Text variant="secondary" fontWeight={ 600 }>Address</Text>
+          <RadioGroup
+            size="lg"
+            onChange={ onAddressFilterChange }
+            defaultValue={ defaultAddressFilter || 'all' }
+            paddingBottom={ 4 }
+            borderBottom="1px solid"
+            borderColor={ borderColor }
+          >
+            <Stack spacing={ 4 }>
+              <Radio value="all"><Text fontSize="md">All</Text></Radio>
+              <Radio value="from"><Text fontSize="md">From</Text></Radio>
+              <Radio value="to"><Text fontSize="md">To</Text></Radio>
+            </Stack>
+          </RadioGroup>
+        </>
+      ) }
+      <Text variant="secondary" fontWeight={ 600 }>Type</Text>
+      <TokenTypeFilter onChange={ onTypeFilterChange } defaultValue={ defaultTypeFilters }/>
+    </PopoverFilter>
   );
 };
 

ui/shared/TokenTransfer/helpers.ts

-import type { TokenType } from 'types/api/tokenInfo';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 export const flattenTotal = (result: Array<TokenTransfer>, item: TokenTransfer): Array<TokenTransfer> => {
@@ -25,9 +24,3 @@ export const getTokenTransferTypeText = (type: TokenTransfer['type']) => {
       return 'Token transfer';
   }
 };
-
-export const TOKEN_TYPE: Array<{ title: string; id: TokenType }> = [
-  { title: 'ERC-20', id: 'ERC-20' },
-  { title: 'ERC-721', id: 'ERC-721' },
-  { title: 'ERC-1155', id: 'ERC-1155' },
-];

ui/shared/filters/PopoverFilter.tsx

+import type { PopoverContentProps } from '@chakra-ui/react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import FilterButton from 'ui/shared/filters/FilterButton';
+
+interface Props {
+  appliedFiltersNum?: number;
+  isActive?: boolean;
+  children: React.ReactNode;
+  contentProps?: PopoverContentProps;
+}
+
+const PopoverFilter = ({ appliedFiltersNum, children, contentProps, isActive }: Props) => {
+  const { isOpen, onToggle, onClose } = useDisclosure();
+
+  return (
+    <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
+      <PopoverTrigger>
+        <FilterButton
+          isActive={ isOpen || isActive || Number(appliedFiltersNum) > 0 }
+          onClick={ onToggle }
+          appliedFiltersNum={ appliedFiltersNum }
+        />
+      </PopoverTrigger>
+      <PopoverContent { ...contentProps }>
+        <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
+          { children }
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(PopoverFilter);

ui/shared/filters/TokenTypeFilter.tsx

+import { CheckboxGroup, Checkbox, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenType } from 'types/api/tokenInfo';
+
+import TOKEN_TYPE from 'lib/token/tokenTypes';
+
+type Props = {
+  onChange: (nextValue: Array<TokenType>) => void;
+  defaultValue?: Array<TokenType>;
+}
+
+const TokenTypeFilter = ({ onChange, defaultValue }: Props) => {
+  return (
+    <CheckboxGroup size="lg" onChange={ onChange } defaultValue={ defaultValue }>
+      { TOKEN_TYPE.map(({ title, id }) => (
+        <Checkbox key={ id } value={ id }>
+          <Text fontSize="md">{ title }</Text>
+        </Checkbox>
+      )) }
+    </CheckboxGroup>
+  );
+};
+
+export default TokenTypeFilter;

ui/stats/StatsFilters.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { StatsChartsSection } from 'types/api/stats';
 import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
 
-import FilterInput from 'ui/shared/FilterInput';
+import FilterInput from 'ui/shared/filters/FilterInput';
 
 import { STATS_INTERVALS } from './constants';
 import StatsDropdownMenu from './StatsDropdownMenu';

ui/tokens/Tokens.tsx

-import { Hide, Show, Text } from '@chakra-ui/react';
-import React from 'react';
+import { Hide, HStack, Show, Text } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React, { useCallback } from 'react';
 
+import type { TokenType } from 'types/api/tokenInfo';
+
+import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useDebounce from 'lib/hooks/useDebounce';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
+import TOKEN_TYPE from 'lib/token/tokenTypes';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import FilterInput from 'ui/shared/FilterInput';
+import FilterInput from 'ui/shared/filters/FilterInput';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
@@ -15,39 +22,57 @@ import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import TokensListItem from './TokensListItem';
 import TokensTable from './TokensTable';
 
+const TOKEN_TYPES = TOKEN_TYPE.map(i => i.id);
+const getTokenFilterValue = (getFilterValuesFromQuery<TokenType>).bind(null, TOKEN_TYPES);
+
 const Tokens = () => {
+  const router = useRouter();
   const [ filter, setFilter ] = React.useState<string>('');
+  const [ type, setType ] = React.useState<Array<TokenType> | undefined>(getTokenFilterValue(router.query.type));
 
   const debouncedFilter = useDebounce(filter, 300);
 
-  const { isError, isLoading, data, isPaginationVisible, pagination } = useQueryWithPages({
+  const { isError, isLoading, data, isPaginationVisible, pagination, onFilterChange } = useQueryWithPages({
     resourceName: 'tokens',
-    filters: { filter: debouncedFilter },
+    filters: { filter: debouncedFilter, type },
   });
 
+  const onSearchChange = useCallback((value: string) => {
+    onFilterChange({ filter: value, type });
+    setFilter(value);
+  }, [ type, onFilterChange ]);
+
+  const onTypeChange = useCallback((value: Array<TokenType>) => {
+    onFilterChange({ filter: debouncedFilter, type: value });
+    setType(value);
+  }, [ debouncedFilter, onFilterChange ]);
+
   if (isError) {
     return <DataFetchAlert/>;
   }
 
+  const typeFilter = (
+    <PopoverFilter isActive={ type && type.length > 0 } contentProps={{ w: '200px' }}>
+      <TokenTypeFilter onChange={ onTypeChange } defaultValue={ type }/>
+    </PopoverFilter>
+  );
+
+  const filterInput = <FilterInput w="100%" size="xs" onChange={ onSearchChange } placeholder="Token name or symbol"/>;
+
   const bar = (
     <>
       <Show below="lg">
-        <FilterInput
-          w="100%"
-          size="xs"
-          onChange={ setFilter }
-          placeholder="Token name or symbol"
-          mb={ 6 }
-        />
+        <HStack spacing={ 3 } mb={ 6 }>
+          { typeFilter }
+          { filterInput }
+        </HStack>
       </Show>
-      <ActionBar mt={ -6 } flexDirection={{ base: 'column', lg: 'row' }} rowGap={ 6 }>
+      <ActionBar mt={ -6 }>
         <Hide below="lg">
-          <FilterInput
-            w="362px"
-            size="xs"
-            onChange={ setFilter }
-            placeholder="Token name or symbol"
-          />
+          <HStack spacing={ 3 }>
+            { typeFilter }
+            { filterInput }
+          </HStack>
         </Hide>
         { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>

ui/tx/TxInternals.tsx

@@ -10,7 +10,7 @@ import { apos } from 'lib/html-entities';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-// import FilterInput from 'ui/shared/FilterInput';
+// import FilterInput from 'ui/shared/filters/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonList from 'ui/shared/skeletons/SkeletonList';

ui/tx/internals/TxInternalsFilter.tsx

-import { Popover, PopoverTrigger, PopoverContent, PopoverBody, CheckboxGroup, Checkbox, Text, useDisclosure } from '@chakra-ui/react';
+import { CheckboxGroup, Checkbox, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxInternalsType } from 'types/api/internalTransaction';
 
-import FilterButton from 'ui/shared/FilterButton';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 interface Props {
@@ -13,25 +13,12 @@ interface Props {
 }
 
 const TxInternalsFilter = ({ onFilterChange, defaultFilters, appliedFiltersNum }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
   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 } display="grid" gridTemplateColumns="1fr 1fr" rowGap={ 5 }>
-          <CheckboxGroup size="lg" onChange={ onFilterChange } defaultValue={ defaultFilters }>
-            { TX_INTERNALS_ITEMS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
-          </CheckboxGroup>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: { md: '100%', lg: '438px' } }}>
+      <CheckboxGroup size="lg" onChange={ onFilterChange } defaultValue={ defaultFilters }>
+        { TX_INTERNALS_ITEMS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
+      </CheckboxGroup>
+    </PopoverFilter>
   );
 };
 

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';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 
 interface Props {
   appliedFiltersNum?: number;
@@ -41,13 +33,7 @@ const METHOD_OPTIONS = [
   { title: 'Commit', id: 'commit' },
 ];
 
-// TODO: i think we need to reload page after applying filters,
-// because we need to reset pagination, clear query caches, reconnect websocket...
-
-// also mobile version of filters is not implemented
-
-const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
+const TxsFilters = ({ filters, appliedFiltersNum }: Props) => {
 
   const [ typeFilter, setTypeFilter ] = useState<Array<TypeFilter>>(filters.type || []);
   const [ methodFilter, setMethodFilter ] = useState<Array<MethodFilter>>(filters.method || []);
@@ -60,50 +46,23 @@ const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
     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('blackAlpha.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>
+    <PopoverFilter contentProps={{ w: { md: '100%', lg: '438px' } }} appliedFiltersNum={ appliedFiltersNum }>
+      <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>
+    </PopoverFilter>
   );
 };
 

ui/txs/TxsHeaderMobile.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
-// import FilterInput from 'ui/shared/FilterInput';
+// import FilterInput from 'ui/shared/filters/FilterInput';
 import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';