filters for token transfers

lib/hooks/useQueryWithPages.ts

@@ -5,10 +5,8 @@ import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 import { animateScroll } from 'react-scroll';
 
-import type { BlockFilters } from 'types/api/block';
 import { PAGINATION_FIELDS } from 'types/api/pagination';
-import type { PaginationParams, PaginatedResponse, PaginatedQueryKeys } from 'types/api/pagination';
-import type { TTxsFilters } from 'types/api/txsFilters';
+import type { PaginationParams, PaginatedResponse, PaginatedQueryKeys, PaginationFilters } from 'types/api/pagination';
 
 import useFetch from 'lib/hooks/useFetch';
 
@@ -16,7 +14,7 @@ interface Params<QueryName extends PaginatedQueryKeys> {
   apiPath: string;
   queryName: QueryName;
   queryIds?: Array<string>;
-  filters?: TTxsFilters | BlockFilters;
+  filters?: PaginationFilters<QueryName>;
   options?: Omit<UseQueryOptions<unknown, unknown, PaginatedResponse<QueryName>>, 'queryKey' | 'queryFn'>;
 }
 

types/api/pagination.ts

-import type { BlocksResponse, BlockTransactionsResponse } from 'types/api/block';
+import type { BlocksResponse, BlockTransactionsResponse, BlockFilters } from 'types/api/block';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponse } from 'types/api/log';
-import type { TokenTransferResponse } from 'types/api/tokenTransfer';
+import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
 import type { TransactionsResponseValidated, TransactionsResponsePending } from 'types/api/transaction';
+import type { TTxsFilters } from 'types/api/txsFilters';
 import { QueryKeys } from 'types/client/queries';
 import type { KeysOfObjectOrNull } from 'types/utils/KeysOfObjectOrNull';
 
@@ -25,6 +26,13 @@ export type PaginatedResponse<Q extends PaginatedQueryKeys> =
               Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
                 never
 
+export type PaginationFilters<Q extends PaginatedQueryKeys> =
+  Q extends QueryKeys.blocks ? BlockFilters :
+    Q extends QueryKeys.txsValidate ? TTxsFilters :
+      Q extends QueryKeys.txsPending ? TTxsFilters :
+        Q extends QueryKeys.txTokenTransfers ? TokenTransferFilters :
+          never
+
 export type PaginationParams<Q extends PaginatedQueryKeys> = PaginatedResponse<Q>['next_page_params'];
 
 type PaginationFields = {

types/api/tokenTransfer.ts

 import type { AddressParam } from './addressParams';
-import type { TokenInfoGeneric } from './tokenInfo';
+import type { TokenInfoGeneric, TokenType } from './tokenInfo';
 
 export type Erc20TotalPayload = {
   decimals: string | null;
@@ -47,3 +47,7 @@ export interface TokenTransferResponse {
     transaction_hash: string;
   } | null;
 }
+
+export interface TokenTransferFilters {
+  type: Array<TokenType>;
+}

ui/shared/FilterButton.tsx

@@ -6,7 +6,7 @@ import filterIcon from 'icons/filter.svg';
 const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
 
 interface Props {
-  isActive: boolean;
+  isActive?: boolean;
   appliedFiltersNum?: number;
   onClick: () => void;
 }

ui/shared/TokenTransfer/TokenTransfer.tsx

-import { Hide, Show, Text, Flex, Skeleton } from '@chakra-ui/react';
+import { Hide, Show, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TokenType } from 'types/api/tokenInfo';
 import type { QueryKeys } from 'types/client/queries';
 
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+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 HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
+import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferSkeletonMobile from 'ui/shared/TokenTransfer/TokenTransferSkeletonMobile';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
@@ -25,29 +28,34 @@ interface Props {
   txHash?: string;
 }
 
-const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryIds, path, baseAddress, showTxInfo = true, txHash }: Props) => {
+const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryIds, path, baseAddress, showTxInfo = true }: Props) => {
+  const [ filters, setFilters ] = React.useState<Array<TokenType>>([]);
   const { isError, isLoading, data, pagination } = useQueryWithPages({
     apiPath: path,
     queryName,
     queryIds,
     options: { enabled: !isDisabled },
+    filters: filters.length ? { type: filters } : undefined,
   });
 
-  const isPaginatorHidden = pagination.page === 1 && !pagination.hasNextPage;
+  const handleFilterChange = React.useCallback((nextValue: Array<TokenType>) => {
+    setFilters(nextValue);
+  }, []);
+
+  const isActionBarHidden = filters.length === 0 && !data?.items.length;
 
   const content = (() => {
     if (isLoading || isLoadingProp) {
       return (
         <>
           <Hide below="lg">
-            { txHash !== undefined && <Skeleton mb={ 6 } h={ 6 } w="340px"/> }
             <SkeletonTable columns={ showTxInfo ?
               [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] :
               [ '185px', '25%', '25%', '25%', '25%' ] }
             />
           </Hide>
           <Show below="lg">
-            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo } txHash={ txHash }/>
+            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo }/>
           </Show>
         </>
       );
@@ -57,15 +65,19 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
       return <DataFetchAlert/>;
     }
 
-    if (!data.items?.length) {
+    if (!data.items?.length && filters.length === 0) {
       return <Text as="span">There are no token transfers</Text>;
     }
 
+    if (!data.items?.length) {
+      return <EmptySearchResult text={ `Couldn${ apos }t find any token transfer that matches your query.` }/>;
+    }
+
     const items = data.items.reduce(flattenTotal, []);
     return (
       <>
         <Hide below="lg">
-          <TokenTransferTable data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo } top={ isPaginatorHidden ? 0 : 80 }/>
+          <TokenTransferTable data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo } top={ 80 }/>
         </Hide>
         <Show below="lg">
           <TokenTransferList data={ items } baseAddress={ baseAddress } showTxInfo={ showTxInfo }/>
@@ -76,14 +88,9 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
 
   return (
     <>
-      { txHash && (data?.items.length || 0 > 0) && (
-        <Flex mb={ isPaginatorHidden ? 6 : 0 } w="100%">
-          <Text as="span" fontWeight={ 600 } whiteSpace="pre">Token transfers for by txn hash: </Text>
-          <HashStringShorten hash={ txHash }/>
-        </Flex>
-      ) }
-      { isPaginatorHidden ? null : (
-        <ActionBar>
+      { !isActionBarHidden && (
+        <ActionBar mt={ -6 }>
+          <TokenTransferFilter defaultFilters={ filters } onFilterChange={ handleFilterChange } appliedFiltersNum={ filters.length }/>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }

ui/shared/TokenTransfer/TokenTransferFilter.tsx

+import { Popover, PopoverTrigger, PopoverContent, PopoverBody, CheckboxGroup, Checkbox, Text, useDisclosure } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenType } from 'types/api/tokenInfo';
+
+import FilterButton from 'ui/shared/FilterButton';
+
+import { TOKEN_TYPE } from './helpers';
+
+interface Props {
+  appliedFiltersNum?: number;
+  defaultFilters: Array<TokenType>;
+  onFilterChange: (nextValue: Array<TokenType>) => void;
+}
+
+const TokenTransfer = ({ 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="200px">
+        <PopoverBody px={ 4 } py={ 6 } display="flex" flexDir="column" rowGap={ 5 }>
+          <Text variant="secondary" fontWeight={ 600 }>Type</Text>
+          <CheckboxGroup size="lg" onChange={ onFilterChange } defaultValue={ defaultFilters }>
+            { TOKEN_TYPE.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
+          </CheckboxGroup>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default React.memo(TokenTransfer);

ui/shared/TokenTransfer/TokenTransferSkeletonMobile.tsx

 import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TokenTransferSkeletonMobile = ({ showTxInfo, txHash }: { showTxInfo?: boolean; txHash?: string }) => {
+const TokenTransferSkeletonMobile = ({ showTxInfo }: { showTxInfo?: boolean }) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
-    <>
-      { txHash !== undefined && <Skeleton mb={ 6 } h={ 6 } w="100%"/> }
-      <Box>
-        { Array.from(Array(2)).map((item, index) => (
-          <Flex
-            key={ index }
-            rowGap={ 3 }
-            flexDirection="column"
-            paddingY={ 6 }
-            borderTopWidth="1px"
-            borderColor={ borderColor }
-            _last={{
-              borderBottomWidth: '1px',
-            }}
-          >
-            <Flex h={ 6 }>
-              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-              <Skeleton w="100px" mr={ 2 }/>
-              <Skeleton w="50px"/>
-              { showTxInfo && <Skeleton w="24px" ml="auto"/> }
-            </Flex>
-            <Flex h={ 6 } columnGap={ 2 }>
-              <Skeleton w="70px"/>
-              <Skeleton w="24px"/>
-              <Skeleton w="90px"/>
-            </Flex>
-            { showTxInfo && (
-              <Flex h={ 6 } columnGap={ 2 }>
-                <Skeleton w="70px" flexShrink={ 0 }/>
-                <Skeleton w="100%"/>
-              </Flex>
-            ) }
-            <Flex h={ 6 }>
-              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-              <Skeleton flexGrow={ 1 } mr={ 3 }/>
-              <Skeleton w="50px" mr={ 3 }/>
-              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-              <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            </Flex>
+    <Box>
+      { Array.from(Array(2)).map((item, index) => (
+        <Flex
+          key={ index }
+          rowGap={ 3 }
+          flexDirection="column"
+          paddingY={ 6 }
+          borderTopWidth="1px"
+          borderColor={ borderColor }
+          _last={{
+            borderBottomWidth: '1px',
+          }}
+        >
+          <Flex h={ 6 }>
+            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton w="100px" mr={ 2 }/>
+            <Skeleton w="50px"/>
+            { showTxInfo && <Skeleton w="24px" ml="auto"/> }
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="70px"/>
+            <Skeleton w="24px"/>
+            <Skeleton w="90px"/>
+          </Flex>
+          { showTxInfo && (
             <Flex h={ 6 } columnGap={ 2 }>
-              <Skeleton w="45px"/>
-              <Skeleton w="90px"/>
+              <Skeleton w="70px" flexShrink={ 0 }/>
+              <Skeleton w="100%"/>
             </Flex>
+          ) }
+          <Flex h={ 6 }>
+            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 }/>
+            <Skeleton w="50px" mr={ 3 }/>
+            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 }/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="45px"/>
+            <Skeleton w="90px"/>
           </Flex>
-        )) }
-      </Box>
-    </>
+        </Flex>
+      )) }
+    </Box>
   );
 };
 

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> => {
@@ -24,3 +25,9 @@ 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' },
+];