adv filters stage 3

configs/envs/.env.eth_sepolia

@@ -14,7 +14,7 @@ NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "632019", "width": "728", "height
 NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "632018", "width": "320", "height": "100" }
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_API_HOST=eth-sepolia.blockscout.com
+NEXT_PUBLIC_API_HOST=eth-sepolia.k8s-dev.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com

lib/api/resources.ts

@@ -41,6 +41,7 @@ import type {
 } from 'types/api/address';
 import type { AddressesResponse } from 'types/api/addresses';
 import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata';
+import type { AdvancedFilterParams, AdvancedFilterResponse, AdvancedFilterMethodsResponse } from 'types/api/advancedFilter';
 import type {
   ArbitrumL2MessagesResponse,
   ArbitrumL2MessagesItem,
@@ -50,7 +51,6 @@ import type {
   ArbitrumL2BatchBlocks,
   ArbitrumL2TxnBatchesItem,
 } from 'types/api/arbitrumL2';
-import type { AdvancedFilterParams, AdvancedFilterResponse, AdvancedFilterMethodsResponse } from 'types/api/advancedFilter';
 import type { TxBlobs, Blob } from 'types/api/blobs';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse, BlockCountdownResponse } from 'types/api/block';
 import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';

lib/getFilterValuesFromQuery.ts

@@ -1,14 +1,10 @@
+import getValuesArrayFromQuery from './getValuesArrayFromQuery';
+
 export default function getFilterValue<FilterType>(filterValues: ReadonlyArray<FilterType>, val: string | Array<string> | undefined) {
-  if (val === undefined) {
-    return;
-  }
+  const valArray = getValuesArrayFromQuery(val);
 
-  const valArray = [];
-  if (typeof val === 'string') {
-    valArray.push(...val.split(','));
-  }
-  if (Array.isArray(val)) {
-    val.forEach(el => valArray.push(...el.split(',')));
+  if (!valArray) {
+    return;
   }
 
   return valArray.filter(el => filterValues.includes(el as unknown as FilterType)) as unknown as Array<FilterType>;

lib/getValuesArrayFromQuery.ts

@@ -0,0 +1,18 @@
+export default function getValuesArrayFromQuery(val: string | Array<string> | undefined) {
+  if (val === undefined) {
+    return;
+  }
+
+  const valArray = [];
+  if (typeof val === 'string') {
+    valArray.push(...val.split(','));
+  }
+  if (Array.isArray(val)) {
+    if (!val.length) {
+      return;
+    }
+    val.forEach(el => valArray.push(...el.split(',')));
+  }
+
+  return valArray;
+}

nextjs/nextjs-routes.d.ts

@@ -15,8 +15,8 @@ declare module "nextjs-routes" {
     | StaticRoute<"/accounts">
     | DynamicRoute<"/address/[hash]/contract-verification", { "hash": string }>
     | DynamicRoute<"/address/[hash]", { "hash": string }>
-    | StaticRoute<"/api/config">
     | StaticRoute<"/advanced-filter">
+    | StaticRoute<"/api/config">
     | StaticRoute<"/api/csrf">
     | StaticRoute<"/api/healthz">
     | StaticRoute<"/api/log">

public/icons/name.d.ts

@@ -33,6 +33,7 @@
 	| "clock"
 	| "coins/bitcoin"
 	| "collection"
+	| "columns"
 	| "contracts/proxy"
 	| "contracts/regular_many"
 	| "contracts/regular"

types/api/advancedFilter.ts

@@ -4,6 +4,7 @@ import type { TokenInfo } from './token';
 export type AdvancedFilterParams = {
   tx_types?: Array<AdvancedFilterType>;
   methods?: Array<string>;
+  methods_names?: Array<string>; /* frontend only */
   age_from?: string;
   age_to?: string;
   age?: AdvancedFilterAge; /* frontend only */
@@ -16,6 +17,8 @@ export type AdvancedFilterParams = {
   amount_to?: string;
   token_contract_address_hashes_to_include?: Array<string>;
   token_contract_address_hashes_to_exclude?: Array<string>;
+  token_contract_symbols_to_include?: Array<string>;
+  token_contract_symbols_to_exclude?: Array<string>;
 };
 
 export const ADVANCED_FILTER_TYPES = [ 'coin_transfer', 'ERC-20', 'ERC-404', 'ERC-721', 'ERC-1155' ] as const;
@@ -42,7 +45,7 @@ export type AdvancedFilterResponseItem = {
 }
 
 export type AdvancedFiltersSearchParams = {
-  methods: Record<string, AdvancedFilterMethodInfo>;
+  methods: Record<string, string>;
   tokens: Record<string, TokenInfo>;
 }
 

ui/address/mud/AddressMudRecordsKeyFilter.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import FilterInput from 'ui/shared/filters/FilterInput';
-import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+import TableColumnFilterWrapper from 'ui/shared/filters/TableColumnFilterWrapper';
+
+import AddressMudRecordsKeyFilterContent from './AddressMudRecordsKeyFilterContent';
 
 type Props = {
   value?: string;
@@ -12,29 +13,20 @@ type Props = {
 }
 
 const AddressMudRecordsKeyFilter = ({ value = '', handleFilterChange, columnName, title, isLoading }: Props) => {
-  const [ filterValue, setFilterValue ] = React.useState<string>(value);
-
-  const onFilter = React.useCallback(() => {
-    handleFilterChange(filterValue);
-  }, [ handleFilterChange, filterValue ]);
-
   return (
-    <TableColumnFilter
+    <TableColumnFilterWrapper
       columnName={ columnName }
-      title={ title }
       isActive={ Boolean(value) }
-      isFilled={ filterValue !== value }
-      onFilter={ onFilter }
       isLoading={ isLoading }
       w="350px"
     >
-      <FilterInput
-        initialValue={ value }
-        size="xs"
-        onChange={ setFilterValue }
-        placeholder={ columnName }
+      <AddressMudRecordsKeyFilterContent
+        value={ value }
+        handleFilterChange={ handleFilterChange }
+        title={ title }
+        columnName={ columnName }
       />
-    </TableColumnFilter>
+    </TableColumnFilterWrapper>
   );
 };
 

ui/address/mud/AddressMudRecordsKeyFilterContent.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import FilterInput from 'ui/shared/filters/FilterInput';
+import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
+
+type Props = {
+  value?: string;
+  handleFilterChange: (val: string) => void;
+  title: string;
+  columnName: string;
+  onClose?: () => void;
+}
+
+const AddressMudRecordsKeyFilter = ({ value = '', handleFilterChange, columnName, title, onClose }: Props) => {
+  const [ filterValue, setFilterValue ] = React.useState<string>(value);
+
+  const onFilter = React.useCallback(() => {
+    handleFilterChange(filterValue);
+  }, [ handleFilterChange, filterValue ]);
+
+  return (
+    <TableColumnFilter
+      title={ title }
+      isFilled={ filterValue !== value }
+      onFilter={ onFilter }
+      onClose={ onClose }
+    >
+      <FilterInput
+        initialValue={ value }
+        size="xs"
+        onChange={ setFilterValue }
+        placeholder={ columnName }
+      />
+    </TableColumnFilter>
+  );
+};
+
+export default AddressMudRecordsKeyFilter;

ui/advancedFilter/ColumnFilterWrapper.tsx

@@ -1,5 +1,4 @@
 import {
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -9,6 +8,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import Popover from 'ui/shared/chakra/Popover';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {

ui/advancedFilter/ColumnsButton.tsx

@@ -1,7 +1,6 @@
 import {
   Button,
   Grid,
-  Popover,
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
@@ -13,6 +12,8 @@ import type { ChangeEvent } from 'react';
 
 import type { ColumnsIds } from 'ui/pages/AdvancedFilter';
 import { TABLE_COLUMNS } from 'ui/pages/AdvancedFilter';
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   columns: Record<ColumnsIds, boolean>;
@@ -36,8 +37,11 @@ const ColumnsButton = ({ columns, onChange }: Props) => {
           onClick={ onToggle }
           variant="outline"
           colorScheme="gray"
+          size="sm"
+          leftIcon={ <IconSvg name="columns" boxSize={ 5 } color="inherit"/> }
           // isLoading={ isLoading }
         >
+          { /* <IconSvg name='columns' boxSize={ 5 }/> */ }
           Columns
         </Button>
       </PopoverTrigger>