Advanced filters: add button to token transfers of Token page (#2757)

* Advanced filters: add button to token transfers of Token page

* fix

ui/pages/Token.tsx

@@ -29,6 +29,7 @@ import TextAd from 'ui/shared/ad/TextAd';
 import IconSvg from 'ui/shared/IconSvg';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import TokenAdvancedFilterLink from 'ui/token/TokenAdvancedFilterLink';
 import TokenDetails from 'ui/token/TokenDetails';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenInventory from 'ui/token/TokenInventory';
@@ -232,6 +233,9 @@ const TokenPageContent = () => {
 
     return (
       <>
+        { (tab === 'token_transfers' || tab === '') && (
+          <TokenAdvancedFilterLink token={ tokenQuery.data }/>
+        ) }
         { tab === 'holders' && (
           <AddressCsvExportLink
             address={ hashString }
@@ -242,7 +246,7 @@ const TokenPageContent = () => {
         { pagination?.isVisible && <Pagination { ...pagination }/> }
       </>
     );
-  }, [ hashString, isMobile, pagination, tab ]);
+  }, [ hashString, isMobile, pagination, tab, tokenQuery.data ]);
 
   return (
     <>

ui/token/TokenAdvancedFilterLink.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenInfo } from 'types/api/token';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import useIsInitialLoading from 'lib/hooks/useIsInitialLoading';
+import { Link } from 'toolkit/chakra/link';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+  isLoading?: boolean;
+  token?: TokenInfo;
+}
+
+const TokenAdvancedFilterLink = ({ isLoading, token }: Props) => {
+  const isInitialLoading = useIsInitialLoading(isLoading);
+
+  if (!token || !config.features.advancedFilter.isEnabled) {
+    return null;
+  }
+
+  const queryParams = {
+    token_contract_address_hashes_to_include: [ token.address_hash ],
+  };
+
+  return (
+    <Link
+      whiteSpace="nowrap"
+      href={ route({ pathname: '/advanced-filter', query: queryParams }) }
+      flexShrink={ 0 }
+      loading={ isInitialLoading }
+      minW={ 8 }
+      justifyContent="center"
+    >
+      <IconSvg name="filter" boxSize={ 6 }/>
+      <chakra.span ml={ 1 } hideBelow="lg">Advanced filter</chakra.span>
+    </Link>
+  );
+};
+
+export default React.memo(TokenAdvancedFilterLink);

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -17,6 +17,7 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TokenAdvancedFilterLink from 'ui/token/TokenAdvancedFilterLink';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
@@ -102,6 +103,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, tokenQuery, tabsHeight = TABS_
 
   const actionBar = isMobile && pagination.isVisible ? (
     <ActionBar mt={ -6 }>
+      <TokenAdvancedFilterLink token={ token }/>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
   ) : null;