onfilterchange

lib/hooks/useQueryWithPages.ts

@@ -2,10 +2,10 @@ import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { pick, omit } from 'lodash';
 import { useRouter } from 'next/router';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { animateScroll, scroller } from 'react-scroll';
 
-import { PAGINATION_FIELDS } from 'types/api/pagination';
+import { PAGINATION_FIELDS, PAGINATION_FILTERS_FIELDS } from 'types/api/pagination';
 import type { PaginationParams, PaginatedResponse, PaginatedQueryKeys, PaginationFilters } from 'types/api/pagination';
 
 import useFetch from 'lib/hooks/useFetch';
@@ -43,20 +43,6 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     scroll ? scroller.scrollTo(scroll.elem, { offset: scroll.offset }) : animateScroll.scrollToTop({ duration: 0 });
   }, [ scroll ]);
 
-  const resetPage = useCallback(() => {
-    router.push({ pathname: router.pathname, query: omit(router.query, paginationFields, 'page') }, undefined, { shallow: true }).then(() => {
-      queryClient.removeQueries({ queryKey: [ queryName ] });
-      scrollToTop();
-      setPage(1);
-      setPageParams([ ]);
-      canGoBackwards.current = true;
-    });
-  }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
-
-  useEffect(() => {
-    !router.query.page && page !== 1 && resetPage();
-  }, [ router, page, resetPage, filters ]);
-
   const queryResult = useQuery<unknown, unknown, PaginatedResponse<QueryName>>(
     queryKey,
     async() => {
@@ -117,6 +103,39 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
       });
   }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop ]);
 
+  const resetPage = useCallback(() => {
+    router.push({ pathname: router.pathname, query: omit(router.query, paginationFields, 'page') }, undefined, { shallow: true }).then(() => {
+      queryClient.removeQueries({ queryKey: [ queryName ] });
+      scrollToTop();
+      setPage(1);
+      setPageParams([ ]);
+      canGoBackwards.current = true;
+    });
+  }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
+
+  const onFilterChange = useCallback((newFilters: PaginationFilters<QueryName> | undefined) => {
+    const newQuery = omit(router.query, PAGINATION_FIELDS[queryName], 'page', PAGINATION_FILTERS_FIELDS[queryName]);
+    if (newFilters) {
+      Object.entries(newFilters).forEach(([ key, value ]) => {
+        if (value) {
+          newQuery[key] = Array.isArray(value) ? value.join(',') : (value || '');
+        }
+      });
+    }
+    router.push(
+      {
+        pathname: router.pathname,
+        query: newQuery,
+      },
+      undefined,
+      { shallow: true },
+    ).then(() => {
+      setPage(1);
+      setPageParams([ ]);
+      scrollToTop();
+    });
+  }, [ queryName, router, scrollToTop, setPageParams, setPage ]);
+
   const hasPaginationParams = Object.keys(currPageParams).length > 0;
   const nextPageParams = data?.next_page_params;
 
@@ -145,5 +164,5 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     }, 0);
   }, []);
 
-  return { ...queryResult, pagination };
+  return { ...queryResult, pagination, onFilterChange };
 }

pages/api/addresses/[id]/token-transfers.ts

+import type { NextApiRequest } from 'next';
+
+import getSearchParams from 'lib/api/getSearchParams';
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  const searchParamsStr = getSearchParams(req);
+  return `/v2/addresses/${ req.query.id }/token-transfers${ searchParamsStr ? '?' + searchParamsStr : '' }`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/address.ts

 import type { Transaction } from 'types/api/transaction';
 
 import type { AddressTag, WatchlistName } from './addressParams';
-import type { TokenInfo } from './tokenInfo';
+import type { TokenInfo, TokenType } from './tokenInfo';
+import type { TokenTransfer, TokenTransferPagination } from './tokenTransfer';
 
 export interface Address {
   block_number_balance_updated_at: number | null;
@@ -43,6 +44,18 @@ export interface AddressTransactionsResponse {
   } | null;
 }
 
+type AddressFromToFilter = 'from' | 'to' | undefined;
+
 export type AddressTxsFilters = {
-  filter: 'from' | 'to' | undefined;
+  filter: AddressFromToFilter;
+}
+
+export interface AddressTokenTransferResponse {
+  items: Array<TokenTransfer>;
+  next_page_params: TokenTransferPagination | null;
+}
+
+export type AddressTokenTransferFilters = {
+  filter: AddressFromToFilter;
+  type: TokenType;
 }

types/api/pagination.ts

-import type { AddressTransactionsResponse, AddressTxsFilters } from 'types/api/address';
+import type { AddressTransactionsResponse, AddressTokenTransferResponse, AddressTxsFilters, AddressTokenTransferFilters } from 'types/api/address';
 import type { BlocksResponse, BlockTransactionsResponse, BlockFilters } from 'types/api/block';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponse } from 'types/api/log';
@@ -10,6 +10,7 @@ import type { KeysOfObjectOrNull } from 'types/utils/KeysOfObjectOrNull';
 
 export type PaginatedQueryKeys =
   QueryKeys.addressTxs |
+  QueryKeys.addressTokenTransfers |
   QueryKeys.blocks |
   QueryKeys.blocksReorgs |
   QueryKeys.blocksUncles |
@@ -22,22 +23,24 @@ export type PaginatedQueryKeys =
 
 export type PaginatedResponse<Q extends PaginatedQueryKeys> =
   Q extends QueryKeys.addressTxs ? AddressTransactionsResponse :
-    Q extends (QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles) ? BlocksResponse :
-      Q extends QueryKeys.blockTxs ? BlockTransactionsResponse :
-        Q extends QueryKeys.txsValidate ? TransactionsResponseValidated :
-          Q extends QueryKeys.txsPending ? TransactionsResponsePending :
-            Q extends QueryKeys.txInternals ? InternalTransactionsResponse :
-              Q extends QueryKeys.txLogs ? LogsResponse :
-                Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
-                  never
+    Q extends QueryKeys.addressTokenTransfers ? AddressTokenTransferResponse :
+      Q extends (QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles) ? BlocksResponse :
+        Q extends QueryKeys.blockTxs ? BlockTransactionsResponse :
+          Q extends QueryKeys.txsValidate ? TransactionsResponseValidated :
+            Q extends QueryKeys.txsPending ? TransactionsResponsePending :
+              Q extends QueryKeys.txInternals ? InternalTransactionsResponse :
+                Q extends QueryKeys.txLogs ? LogsResponse :
+                  Q extends QueryKeys.txTokenTransfers ? TokenTransferResponse :
+                    never
 
 export type PaginationFilters<Q extends PaginatedQueryKeys> =
   Q extends QueryKeys.addressTxs ? AddressTxsFilters :
-    Q extends QueryKeys.blocks ? BlockFilters :
-      Q extends QueryKeys.txsValidate ? TTxsFilters :
-        Q extends QueryKeys.txsPending ? TTxsFilters :
-          Q extends QueryKeys.txTokenTransfers ? TokenTransferFilters :
-            never
+    Q extends QueryKeys.addressTokenTransfers ? AddressTokenTransferFilters :
+      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'];
 
@@ -47,6 +50,7 @@ type PaginationFields = {
 
 export const PAGINATION_FIELDS: PaginationFields = {
   [QueryKeys.addressTxs]: [ 'block_number', 'items_count', 'index' ],
+  [QueryKeys.addressTokenTransfers]: [ 'block_number', 'items_count', 'index', 'transaction_hash' ],
   [QueryKeys.blocks]: [ 'block_number', 'items_count' ],
   [QueryKeys.blocksReorgs]: [ 'block_number', 'items_count' ],
   [QueryKeys.blocksUncles]: [ 'block_number', 'items_count' ],
@@ -57,3 +61,21 @@ export const PAGINATION_FIELDS: PaginationFields = {
   [QueryKeys.txTokenTransfers]: [ 'block_number', 'items_count', 'transaction_hash', 'index' ],
   [QueryKeys.txLogs]: [ 'items_count', 'transaction_hash', 'index' ],
 };
+
+type PaginationFiltersFields = {
+  [K in PaginatedQueryKeys]: Array<KeysOfObjectOrNull<PaginationFilters<K>>>
+}
+
+export const PAGINATION_FILTERS_FIELDS: PaginationFiltersFields = {
+  [QueryKeys.addressTxs]: [ 'filter' ],
+  [QueryKeys.addressTokenTransfers]: [ 'filter', 'type' ],
+  [QueryKeys.blocks]: [ 'type' ],
+  [QueryKeys.txsValidate]: [ 'filter', 'type', 'method' ],
+  [QueryKeys.txsPending]: [ 'filter', 'type', 'method' ],
+  [QueryKeys.txTokenTransfers]: [ 'type' ],
+  [QueryKeys.blocksReorgs]: [],
+  [QueryKeys.blocksUncles]: [],
+  [QueryKeys.blockTxs]: [],
+  [QueryKeys.txInternals]: [],
+  [QueryKeys.txLogs]: [],
+};

types/api/tokenTransfer.ts

@@ -38,14 +38,16 @@ interface TokenTransferBase {
   to: AddressParam;
 }
 
+export type TokenTransferPagination = {
+  block_number: number;
+  index: number;
+  items_count: number;
+  transaction_hash: string;
+}
+
 export interface TokenTransferResponse {
   items: Array<TokenTransfer>;
-  next_page_params: {
-    block_number: number;
-    index: number;
-    items_count: number;
-    transaction_hash: string;
-  } | null;
+  next_page_params: TokenTransferPagination | null;
 }
 
 export interface TokenTransferFilters {

types/client/queries.ts

@@ -25,4 +25,5 @@ export enum QueryKeys {
   addressCounters='address-counters',
   addressTokenBalances='address-token-balances',
   addressTxs='addressTxs',
+  addressTokenTransfers='addressTokenTransfers',
 }

ui/address/AddressTxs.tsx

-import { omit } from 'lodash';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { scroller, Element } from 'react-scroll';
+import { Element } from 'react-scroll';
 
-import { PAGINATION_FIELDS } from 'types/api/pagination';
 import { QueryKeys } from 'types/client/queries';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -45,21 +43,8 @@ const AddressTxs = () => {
 
     const newVal = getFilterValue(val);
     setFilterValue(newVal);
-    const newQuery = omit(router.query, PAGINATION_FIELDS[QueryKeys.addressTxs], 'page', 'filter');
-    if (newVal) {
-      newQuery.filter = newVal;
-    }
-    router.push(
-      {
-        pathname: router.pathname,
-        query: newQuery,
-      },
-      undefined,
-      { shallow: true },
-    ).then(() => {
-      scroller.scrollTo(SCROLL_ELEM, { offset: SCROLL_OFFSET });
-    });
-  }, [ router ]);
+    addressTxsQuery.onFilterChange({ filter: newVal });
+  }, [ addressTxsQuery ]);
 
   const isPaginatorHidden =
       !addressTxsQuery.isLoading &&
@@ -82,7 +67,7 @@ const AddressTxs = () => {
           <AddressTxsFilter
             defaultFilter={ filterValue }
             onFilterChange={ handleFilterChange }
-            appliedFiltersNum={ filterValue ? 1 : 0 }
+            isActive={ Boolean(filterValue) }
           />
           { !isPaginatorHidden && <Pagination { ...addressTxsQuery.pagination }/> }
         </ActionBar>