Merge pull request #1320 from blockscout/nft-address

Nft address

icons/collection.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="currentColor" fill-opacity=".8" fill-rule="evenodd" d="M9.767 2.074a.7.7 0 0 1 .626 0l7.38 3.69a.7.7 0 0 1 0 1.252l-7.38 3.69a.7.7 0 0 1-.626 0l-7.38-3.69a.7.7 0 0 1 0-1.252l7.38-3.69ZM4.266 6.39l5.814 2.907 5.815-2.907-5.815-2.907L4.266 6.39Zm-2.192 7.067a.7.7 0 0 1 .94-.313l7.066 3.534 7.067-3.534a.7.7 0 0 1 .627 1.252l-7.38 3.69a.7.7 0 0 1-.627 0l-7.38-3.69a.7.7 0 0 1-.313-.939Zm.94-4.003a.7.7 0 0 0-.627 1.252l7.38 3.69a.7.7 0 0 0 .626 0l7.38-3.69a.7.7 0 1 0-.626-1.252l-7.067 3.534-7.067-3.534Z" clip-rule="evenodd"/>
+</svg>

lib/api/resources.ts

@@ -26,6 +26,9 @@ import type {
   AddressTokensFilter,
   AddressTokensResponse,
   AddressWithdrawalsResponse,
+  AddressNFTsResponse,
+  AddressCollectionsResponse,
+  AddressNFTTokensFilter,
 } from 'types/api/address';
 import type { AddressesResponse } from 'types/api/addresses';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
@@ -51,6 +54,7 @@ import type {
   TokenInstance,
   TokenInstanceTransfersCount,
   TokenVerifiedInfo,
+  TokenInventoryFilters,
 } from 'types/api/token';
 import type { TokensResponse, TokensFilters, TokensSorting, TokenInstanceTransferResponse, TokensBridgedFilters } from 'types/api/tokens';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
@@ -305,6 +309,16 @@ export const RESOURCES = {
     pathParams: [ 'hash' as const ],
     filterFields: [ 'type' as const ],
   },
+  address_nfts: {
+    path: '/api/v2/addresses/:hash/nft',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'type' as const ],
+  },
+  address_collections: {
+    path: '/api/v2/addresses/:hash/nft/collections',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'type' as const ],
+  },
   address_withdrawals: {
     path: '/api/v2/addresses/:hash/withdrawals',
     pathParams: [ 'hash' as const ],
@@ -384,7 +398,7 @@ export const RESOURCES = {
   token_inventory: {
     path: '/api/v2/tokens/:hash/instances',
     pathParams: [ 'hash' as const ],
-    filterFields: [],
+    filterFields: [ 'holder_address_hash' as const ],
   },
   tokens: {
     path: '/api/v2/tokens',
@@ -580,7 +594,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'addresses' |
 'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
 'search' |
-'address_logs' | 'address_tokens' |
+'address_logs' | 'address_tokens' | 'address_nfts' | 'address_collections' |
 'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' | 'tokens_bridged' |
 'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
@@ -642,6 +656,8 @@ Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
 Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
 Q extends 'address_logs' ? LogsResponseAddress :
 Q extends 'address_tokens' ? AddressTokensResponse :
+Q extends 'address_nfts' ? AddressNFTsResponse :
+Q extends 'address_collections' ? AddressCollectionsResponse :
 Q extends 'address_withdrawals' ? AddressWithdrawalsResponse :
 Q extends 'token' ? TokenInfo :
 Q extends 'token_verified_info' ? TokenVerifiedInfo :
@@ -695,7 +711,10 @@ Q extends 'token_transfers' ? TokenTransferFilters :
 Q extends 'address_txs' | 'address_internal_txs' ? AddressTxsFilters :
 Q extends 'address_token_transfers' ? AddressTokenTransferFilters :
 Q extends 'address_tokens' ? AddressTokensFilter :
+Q extends 'address_nfts' ? AddressNFTTokensFilter :
+Q extends 'address_collections' ? AddressNFTTokensFilter :
 Q extends 'search' ? SearchResultFilters :
+Q extends 'token_inventory' ? TokenInventoryFilters :
 Q extends 'tokens' ? TokensFilters :
 Q extends 'tokens_bridged' ? TokensBridgedFilters :
 Q extends 'verified_contracts' ? VerifiedContractsFilters :

lib/cookies.ts

@@ -12,6 +12,7 @@ export enum NAMES {
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
   MIXPANEL_DEBUG='_mixpanel_debug',
+  ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type'
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {

lib/token/tokenTypes.ts

-import type { TokenType } from 'types/api/token';
+import type { NFTTokenType, TokenType } from 'types/api/token';
 
-export const TOKEN_TYPES: Array<{ title: string; id: TokenType }> = [
-  { title: 'ERC-20', id: 'ERC-20' },
+export const NFT_TOKEN_TYPES: Array<{ title: string; id: NFTTokenType }> = [
   { title: 'ERC-721', id: 'ERC-721' },
   { title: 'ERC-1155', id: 'ERC-1155' },
 ];
 
+export const TOKEN_TYPES: Array<{ title: string; id: TokenType }> = [
+  { title: 'ERC-20', id: 'ERC-20' },
+  ...NFT_TOKEN_TYPES,
+];
+
+export const NFT_TOKEN_TYPE_IDS = NFT_TOKEN_TYPES.map(i => i.id);
 export const TOKEN_TYPE_IDS = TOKEN_TYPES.map(i => i.id);

mocks/address/tokens.ts

-import type { AddressTokenBalance } from 'types/api/address';
+import type { AddressCollectionsResponse, AddressNFTsResponse, AddressTokenBalance } from 'types/api/address';
 
 import * as tokens from 'mocks/tokens/tokenInfo';
 import * as tokenInstance from 'mocks/tokens/tokenInstance';
@@ -117,3 +117,51 @@ export const erc1155List = {
     erc1155b,
   ],
 };
+
+export const nfts: AddressNFTsResponse = {
+  items: [
+    {
+      ...tokenInstance.base,
+      token: tokens.tokenInfoERC1155a,
+      token_type: 'ERC-1155',
+      value: '11',
+    },
+    {
+      ...tokenInstance.unique,
+      token: tokens.tokenInfoERC721a,
+      token_type: 'ERC-721',
+      value: '1',
+    },
+  ],
+  next_page_params: null,
+};
+
+const nftInstance = {
+  ...tokenInstance.base,
+  token_type: 'ERC-1155',
+  value: '11',
+};
+
+export const collections: AddressCollectionsResponse = {
+  items: [
+    {
+      token: tokens.tokenInfoERC1155a,
+      amount: '100',
+      token_instances: Array(5).fill(nftInstance),
+    },
+    {
+      token: tokens.tokenInfoERC20LongSymbol,
+      amount: '100',
+      token_instances: Array(5).fill(nftInstance),
+    },
+    {
+      token: tokens.tokenInfoERC1155WithoutName,
+      amount: '1',
+      token_instances: [ nftInstance ],
+    },
+  ],
+  next_page_params: {
+    token_contract_address_hash: '123',
+    token_type: 'ERC-1155',
+  },
+};

stubs/address.ts

-import type { Address, AddressCoinBalanceHistoryItem, AddressCounters, AddressTabsCounters, AddressTokenBalance } from 'types/api/address';
+import type {
+  Address,
+  AddressCoinBalanceHistoryItem,
+  AddressCollection,
+  AddressCounters,
+  AddressNFT,
+  AddressTabsCounters,
+  AddressTokenBalance,
+} from 'types/api/address';
 import type { AddressesItem } from 'types/api/addresses';
 
 import { ADDRESS_HASH } from './addressParams';
@@ -80,16 +88,22 @@ export const ADDRESS_TOKEN_BALANCE_ERC_20: AddressTokenBalance = {
   value: '1000000000000000000000000',
 };
 
-export const ADDRESS_TOKEN_BALANCE_ERC_721: AddressTokenBalance = {
+export const ADDRESS_NFT_721: AddressNFT = {
+  token_type: 'ERC-721',
   token: TOKEN_INFO_ERC_721,
-  token_id: null,
-  token_instance: null,
-  value: '176',
+  value: '1',
+  ...TOKEN_INSTANCE,
+};
+
+export const ADDRESS_NFT_1155: AddressNFT = {
+  token_type: 'ERC-1155',
+  token: TOKEN_INFO_ERC_1155,
+  value: '10',
+  ...TOKEN_INSTANCE,
 };
 
-export const ADDRESS_TOKEN_BALANCE_ERC_1155: AddressTokenBalance = {
+export const ADDRESS_COLLECTION: AddressCollection = {
   token: TOKEN_INFO_ERC_1155,
-  token_id: '188882',
-  token_instance: TOKEN_INSTANCE,
-  value: '176',
+  amount: '4',
+  token_instances: Array(4).fill(TOKEN_INSTANCE),
 };

types/api/address.ts

@@ -3,7 +3,7 @@ import type { Transaction } from 'types/api/transaction';
 import type { UserTags } from './addressParams';
 import type { Block } from './block';
 import type { InternalTransaction } from './internalTransaction';
-import type { TokenInfo, TokenInstance, TokenType } from './token';
+import type { NFTTokenType, TokenInfo, TokenInstance, TokenType } from './token';
 import type { TokenTransfer, TokenTransferPagination } from './tokenTransfer';
 
 export interface Address extends UserTags {
@@ -49,17 +49,47 @@ export interface AddressTokenBalance {
   token_instance: TokenInstance | null;
 }
 
+export type AddressNFT = TokenInstance & {
+  token: TokenInfo;
+  token_type: Omit<TokenType, 'ERC-20'>;
+  value: string;
+}
+
+export type AddressCollection = {
+  token: TokenInfo;
+  amount: string;
+  token_instances: Array<Omit<AddressNFT, 'token'>>;
+}
+
 export interface AddressTokensResponse {
   items: Array<AddressTokenBalance>;
   next_page_params: {
     items_count: number;
-    token_name: 'string' | null;
+    token_name: string | null;
     token_type: TokenType;
     value: number;
     fiat_value: string | null;
   } | null;
 }
 
+export interface AddressNFTsResponse {
+  items: Array<AddressNFT>;
+  next_page_params: {
+    items_count: number;
+    token_id: string;
+    token_type: TokenType;
+    token_contract_address_hash: string;
+  } | null;
+}
+
+export interface AddressCollectionsResponse {
+  items: Array<AddressCollection>;
+  next_page_params: {
+    token_contract_address_hash: string;
+    token_type: TokenType;
+  } | null;
+}
+
 export interface AddressTokensBalancesSocketMessage {
   overflow: boolean;
   token_balances: Array<AddressTokenBalance>;
@@ -97,6 +127,10 @@ export type AddressTokensFilter = {
   type: TokenType;
 }
 
+export type AddressNFTTokensFilter = {
+  type: Array<NFTTokenType> | undefined;
+}
+
 export interface AddressCoinBalanceHistoryItem {
   block_number: number;
   block_timestamp: string;

types/api/token.ts

 import type { TokenInfoApplication } from './account';
 import type { AddressParam } from './addressParams';
 
-export type TokenType = 'ERC-20' | 'ERC-721' | 'ERC-1155';
+export type NFTTokenType = 'ERC-721' | 'ERC-1155';
+export type TokenType = 'ERC-20' | NFTTokenType;
 
 export interface TokenInfo<T extends TokenType = TokenType> {
   address: string;
@@ -77,3 +78,7 @@ export type TokenInventoryPagination = {
 }
 
 export type TokenVerifiedInfo = Omit<TokenInfoApplication, 'id' | 'status'>;
+
+export type TokenInventoryFilters = {
+  holder_address_hash?: string;
+}

ui/address/AddressTokenTransfers.tsx

-import { Flex, Hide, Icon, Show, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Hide, Show, Text } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -9,7 +9,6 @@ import type { AddressFromToFilter, AddressTokenTransferResponse } from 'types/ap
 import type { TokenType } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
-import crossIcon from 'icons/cross.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
@@ -26,6 +25,7 @@ import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import ResetIconButton from 'ui/shared/ResetIconButton';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
@@ -115,9 +115,6 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     onFilterChange({});
   }, [ onFilterChange ]);
 
-  const resetTokenIconColor = useColorModeValue('blue.600', 'blue.300');
-  const resetTokenIconHoverColor = useColorModeValue('blue.400', 'blue.200');
-
   const handleNewSocketMessage: SocketMessage.AddressTokenTransfer['handler'] = (payload) => {
     setSocketAlert('');
 
@@ -235,19 +232,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
       <Flex alignItems="center" py={ 1 }>
         <TokenEntity.Icon token={ tokenData } isLoading={ isPlaceholderData }/>
         { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
-        <Tooltip label="Reset filter">
-          <Flex>
-            <Icon
-              as={ crossIcon }
-              boxSize={ 5 }
-              ml={ 1 }
-              color={ resetTokenIconColor }
-              cursor="pointer"
-              _hover={{ color: resetTokenIconHoverColor }}
-              onClick={ resetTokenFilter }
-            />
-          </Flex>
-        </Tooltip>
+        <ResetIconButton onClick={ resetTokenFilter }/>
       </Flex>
     </Flex>
   );

ui/address/AddressTokens.pw.tsx

@@ -13,6 +13,8 @@ import AddressTokens from './AddressTokens';
 const ADDRESS_HASH = addressMock.withName.hash;
 const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
 const API_URL_TOKENS = buildApiUrl('address_tokens', { hash: ADDRESS_HASH });
+const API_URL_NFT = buildApiUrl('address_nfts', { hash: ADDRESS_HASH }) + '?type=';
+const API_URL_COLLECTIONS = buildApiUrl('address_collections', { hash: ADDRESS_HASH }) + '?type=';
 
 const nextPageParams = {
   items_count: 50,
@@ -52,6 +54,14 @@ const test = base.extend({
       status: 200,
       body: JSON.stringify(response1155),
     }));
+    await page.route(API_URL_NFT, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(tokensMock.nfts),
+    }));
+    await page.route(API_URL_COLLECTIONS, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(tokensMock.collections),
+    }));
 
     use(page);
   },
@@ -76,10 +86,10 @@ test('erc20 +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('erc721 +@dark-mode', async({ mount }) => {
+test('collections +@dark-mode', async({ mount }) => {
   const hooksConfig = {
     router: {
-      query: { hash: ADDRESS_HASH, tab: 'tokens_erc721' },
+      query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
       isReady: true,
     },
   };
@@ -95,10 +105,10 @@ test('erc721 +@dark-mode', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
-test('erc1155 +@dark-mode', async({ mount }) => {
+test('nfts +@dark-mode', async({ mount }) => {
   const hooksConfig = {
     router: {
-      query: { hash: ADDRESS_HASH, tab: 'tokens_erc1155' },
+      query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
       isReady: true,
     },
   };
@@ -111,6 +121,8 @@ test('erc1155 +@dark-mode', async({ mount }) => {
     { hooksConfig },
   );
 
+  await component.getByText('List').click();
+
   await expect(component).toHaveScreenshot();
 });
 
@@ -136,10 +148,10 @@ test.describe('mobile', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('erc721', async({ mount }) => {
+  test('nfts', async({ mount }) => {
     const hooksConfig = {
       router: {
-        query: { hash: ADDRESS_HASH, tab: 'tokens_erc721' },
+        query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
         isReady: true,
       },
     };
@@ -152,13 +164,15 @@ test.describe('mobile', () => {
       { hooksConfig },
     );
 
+    await component.getByLabel('list').click();
+
     await expect(component).toHaveScreenshot();
   });
 
-  test('erc1155', async({ mount }) => {
+  test('collections', async({ mount }) => {
     const hooksConfig = {
       router: {
-        query: { hash: ADDRESS_HASH, tab: 'tokens_erc1155' },
+        query: { hash: ADDRESS_HASH, tab: 'tokens_nfts' },
         isReady: true,
       },
     };

ui/address/AddressTokens.tsx

-import { Box } from '@chakra-ui/react';
-import { useQueryClient } from '@tanstack/react-query';
+import { Box, HStack } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { SocketMessage } from 'lib/socket/types';
-import type { AddressTokenBalance, AddressTokensBalancesSocketMessage, AddressTokensResponse } from 'types/api/address';
-import type { TokenType } from 'types/api/token';
+import type { NFTTokenType } from 'types/api/token';
 import type { PaginationParams } from 'ui/shared/pagination/types';
 
-import { getResourceKey } from 'lib/api/useApiQuery';
+import listIcon from 'icons/apps.svg';
+import collectionIcon from 'icons/collection.svg';
+import { useAppContext } from 'lib/contexts/app';
+import * as cookies from 'lib/cookies';
+import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
-import { ADDRESS_TOKEN_BALANCE_ERC_1155, ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_TOKEN_BALANCE_ERC_721 } from 'stubs/address';
+import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
+import { ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_NFT_1155, ADDRESS_COLLECTION } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
-import { tokenTabsByType } from 'ui/pages/Address';
+import PopoverFilter from 'ui/shared/filters/PopoverFilter';
+import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import RadioButtonGroup from 'ui/shared/radioButtonGroup/RadioButtonGroup';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
-import ERC1155Tokens from './tokens/ERC1155Tokens';
+import AddressCollections from './tokens/AddressCollections';
+import AddressNFTs from './tokens/AddressNFTs';
 import ERC20Tokens from './tokens/ERC20Tokens';
-import ERC721Tokens from './tokens/ERC721Tokens';
 import TokenBalances from './tokens/TokenBalances';
 
+type TNftDisplayType = 'collection' | 'list';
+
 const TAB_LIST_PROPS = {
-  marginBottom: 0,
+  my: 3,
   py: 5,
-  marginTop: 3,
   columnGap: 3,
 };
 
 const TAB_LIST_PROPS_MOBILE = {
-  mt: 8,
+  my: 8,
   columnGap: 3,
 };
 
-const tokenBalanceItemIdentityFactory = (match: AddressTokenBalance) => (item: AddressTokenBalance) => ((
-  match.token.address === item.token.address &&
-  match.token_id === item.token_id &&
-  match.token_instance?.id === item.token_instance?.id
-));
+const getTokenFilterValue = (getFilterValuesFromQuery<NFTTokenType>).bind(null, NFT_TOKEN_TYPE_IDS);
 
 const AddressTokens = () => {
   const router = useRouter();
@@ -49,6 +48,10 @@ const AddressTokens = () => {
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
+  const displayTypeCookie = cookies.get(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, useAppContext().cookies);
+  const [ nftDisplayType, setNftDisplayType ] = React.useState<TNftDisplayType>(displayTypeCookie === 'list' ? 'list' : 'collection');
+  const [ tokenTypes, setTokenTypes ] = React.useState<Array<NFTTokenType> | undefined>(getTokenFilterValue(router.query.type) || []);
+
   const tab = getQueryParamString(router.query.tab);
   const hash = getQueryParamString(router.query.hash);
 
@@ -58,111 +61,100 @@ const AddressTokens = () => {
     filters: { type: 'ERC-20' },
     scrollRef,
     options: {
+      enabled: !tab || tab === 'tokens_erc20',
       refetchOnMount: false,
       placeholderData: generateListStub<'address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_20, 10, { next_page_params: null }),
     },
   });
 
-  const erc721Query = useQueryWithPages({
-    resourceName: 'address_tokens',
+  const collectionsQuery = useQueryWithPages({
+    resourceName: 'address_collections',
     pathParams: { hash },
-    filters: { type: 'ERC-721' },
     scrollRef,
     options: {
-      refetchOnMount: false,
-      placeholderData: generateListStub<'address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_721, 10, { next_page_params: null }),
+      enabled: tab === 'tokens_nfts' && nftDisplayType === 'collection',
+      placeholderData: generateListStub<'address_collections'>(ADDRESS_COLLECTION, 10, { next_page_params: null }),
     },
+    filters: { type: tokenTypes },
   });
 
-  const erc1155Query = useQueryWithPages({
-    resourceName: 'address_tokens',
+  const nftsQuery = useQueryWithPages({
+    resourceName: 'address_nfts',
     pathParams: { hash },
-    filters: { type: 'ERC-1155' },
     scrollRef,
     options: {
-      refetchOnMount: false,
-      placeholderData: generateListStub<'address_tokens'>(ADDRESS_TOKEN_BALANCE_ERC_1155, 10, { next_page_params: null }),
+      enabled: tab === 'tokens_nfts' && nftDisplayType === 'list',
+      placeholderData: generateListStub<'address_nfts'>(ADDRESS_NFT_1155, 10, { next_page_params: null }),
     },
+    filters: { type: tokenTypes },
   });
 
-  const queryClient = useQueryClient();
-
-  const updateTokensData = React.useCallback((type: TokenType, payload: AddressTokensBalancesSocketMessage) => {
-    const queryKey = getResourceKey('address_tokens', { pathParams: { hash }, queryParams: { type } });
-
-    queryClient.setQueryData(queryKey, (prevData: AddressTokensResponse | undefined) => {
-      const items = prevData?.items.map((currentItem) => {
-        const updatedData = payload.token_balances.find(tokenBalanceItemIdentityFactory(currentItem));
-        return updatedData ?? currentItem;
-      }) || [];
-
-      const extraItems = prevData?.next_page_params ?
-        [] :
-        payload.token_balances.filter((socketItem) => !items.some(tokenBalanceItemIdentityFactory(socketItem)));
-
-      if (!prevData) {
-        return {
-          items: extraItems,
-          next_page_params: null,
-        };
-      }
-
-      return {
-        items: items.concat(extraItems),
-        next_page_params: prevData.next_page_params,
-      };
-    });
-  }, [ hash, queryClient ]);
-
-  const handleTokenBalancesErc20Message: SocketMessage.AddressTokenBalancesErc20['handler'] = React.useCallback((payload) => {
-    updateTokensData('ERC-20', payload);
-  }, [ updateTokensData ]);
-
-  const handleTokenBalancesErc721Message: SocketMessage.AddressTokenBalancesErc721['handler'] = React.useCallback((payload) => {
-    updateTokensData('ERC-721', payload);
-  }, [ updateTokensData ]);
-
-  const handleTokenBalancesErc1155Message: SocketMessage.AddressTokenBalancesErc1155['handler'] = React.useCallback((payload) => {
-    updateTokensData('ERC-1155', payload);
-  }, [ updateTokensData ]);
-
-  const channel = useSocketChannel({
-    topic: `addresses:${ hash.toLowerCase() }`,
-    isDisabled: erc20Query.isPlaceholderData || erc721Query.isPlaceholderData || erc1155Query.isPlaceholderData,
-  });
+  const handleNFTsDisplayTypeChange = React.useCallback((val: TNftDisplayType) => {
+    cookies.set(cookies.NAMES.ADDRESS_NFT_DISPLAY_TYPE, val);
+    setNftDisplayType(val);
+  }, []);
+
+  const handleTokenTypesChange = React.useCallback((value: Array<NFTTokenType>) => {
+    nftsQuery.onFilterChange({ type: value });
+    collectionsQuery.onFilterChange({ type: value });
+    setTokenTypes(value);
+  }, [ nftsQuery, collectionsQuery ]);
+
+  const nftTypeFilter = (
+    <PopoverFilter isActive={ tokenTypes && tokenTypes.length > 0 } contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
+      <TokenTypeFilter<NFTTokenType> nftOnly onChange={ handleTokenTypesChange } defaultValue={ tokenTypes }/>
+    </PopoverFilter>
+  );
 
-  useSocketMessage({
-    channel,
-    event: 'updated_token_balances_erc_20',
-    handler: handleTokenBalancesErc20Message,
-  });
-  useSocketMessage({
-    channel,
-    event: 'updated_token_balances_erc_721',
-    handler: handleTokenBalancesErc721Message,
-  });
-  useSocketMessage({
-    channel,
-    event: 'updated_token_balances_erc_1155',
-    handler: handleTokenBalancesErc1155Message,
-  });
+  const hasActiveFilters = Boolean(tokenTypes?.length);
 
   const tabs = [
-    { id: tokenTabsByType['ERC-20'], title: 'ERC-20', component: <ERC20Tokens tokensQuery={ erc20Query }/> },
-    { id: tokenTabsByType['ERC-721'], title: 'ERC-721', component: <ERC721Tokens tokensQuery={ erc721Query }/> },
-    { id: tokenTabsByType['ERC-1155'], title: 'ERC-1155', component: <ERC1155Tokens tokensQuery={ erc1155Query }/> },
+    { id: 'tokens_erc20', title: 'ERC-20', component: <ERC20Tokens tokensQuery={ erc20Query }/> },
+    {
+      id: 'tokens_nfts',
+      title: 'NFTs',
+      component: nftDisplayType === 'list' ?
+        <AddressNFTs tokensQuery={ nftsQuery } hasActiveFilters={ hasActiveFilters }/> :
+        <AddressCollections collectionsQuery={ collectionsQuery } address={ hash } hasActiveFilters={ hasActiveFilters }/>,
+    },
   ];
 
+  const nftDisplayTypeRadio = (
+    <RadioButtonGroup<TNftDisplayType>
+      onChange={ handleNFTsDisplayTypeChange }
+      defaultValue={ nftDisplayType }
+      name="type"
+      options={ [
+        { title: 'By collection', value: 'collection', icon: collectionIcon, onlyIcon: isMobile },
+        { title: 'List', value: 'list', icon: listIcon, onlyIcon: isMobile },
+      ] }
+    />
+  );
+
   let pagination: PaginationParams | undefined;
 
-  if (tab === tokenTabsByType['ERC-1155']) {
-    pagination = erc1155Query.pagination;
-  } else if (tab === tokenTabsByType['ERC-721']) {
-    pagination = erc721Query.pagination;
+  if (tab === 'tokens_nfts') {
+    pagination = nftDisplayType === 'list' ? nftsQuery.pagination : collectionsQuery.pagination;
   } else {
     pagination = erc20Query.pagination;
   }
 
+  const hasNftData =
+    (!nftsQuery.isPlaceholderData && nftsQuery.data?.items.length) ||
+    (!collectionsQuery.isPlaceholderData && collectionsQuery.data?.items.length);
+
+  const isNftTab = tab !== 'tokens' && tab !== 'tokens_erc20';
+
+  const rightSlot = (
+    <>
+      <HStack spacing={ 3 }>
+        { isNftTab && (hasNftData || hasActiveFilters) && nftDisplayTypeRadio }
+        { isNftTab && (hasNftData || hasActiveFilters) && nftTypeFilter }
+      </HStack>
+      { pagination.isVisible && !isMobile && <Pagination { ...pagination }/> }
+    </>
+  );
+
   return (
     <>
       <TokenBalances/>
@@ -174,7 +166,8 @@ const AddressTokens = () => {
         colorScheme="gray"
         size="sm"
         tabListProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
-        rightSlot={ pagination.isVisible && !isMobile ? <Pagination { ...pagination }/> : null }
+        rightSlot={ rightSlot }
+        rightSlotProps={ tab !== 'tokens_erc20' && !isMobile ? { flexGrow: 1, display: 'flex', justifyContent: 'space-between', ml: 8 } : {} }
         stickyEnabled={ !isMobile }
       />
     </>

ui/address/tokenSelect/TokenSelect.pw.tsx

@@ -2,10 +2,8 @@ import { Flex } from '@chakra-ui/react';
 import { test as base, expect, devices } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as coinBalanceMock from 'mocks/address/coinBalanceHistory';
 import * as tokensMock from 'mocks/address/tokens';
 import { tokenInfoERC20a } from 'mocks/tokens/tokenInfo';
-import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 import MockAddressPage from 'ui/address/testUtils/MockAddressPage';
@@ -175,76 +173,3 @@ base('long values', async({ mount, page }) => {
 
   await expect(page).toHaveScreenshot({ clip: CLIPPING_AREA });
 });
-
-test.describe('socket', () => {
-  const testWithSocket = test.extend<socketServer.SocketServerFixture>({
-    createSocket: socketServer.createSocket,
-  });
-  testWithSocket.describe.configure({ mode: 'serial' });
-
-  testWithSocket('new item after token balance update', async({ page, mount, createSocket }) => {
-    await mount(
-      <TestApp withSocket>
-        <MockAddressPage>
-          <Flex>
-            <TokenSelect/>
-          </Flex>
-        </MockAddressPage>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          ...tokensMock.erc20List.items,
-          tokensMock.erc20d,
-        ],
-      }),
-    }), { times: 1 });
-
-    const socket = await createSocket();
-    const channel = await socketServer.joinChannel(socket, 'addresses:1');
-    socketServer.sendMessage(socket, channel, 'token_balance', {
-      block_number: 1,
-    });
-
-    const button = page.getByRole('button', { name: /select/i });
-    const text = await button.innerText();
-    expect(text).toContain('10');
-  });
-
-  testWithSocket('new item after coin balance update', async({ page, mount, createSocket }) => {
-    await mount(
-      <TestApp withSocket>
-        <MockAddressPage>
-          <Flex>
-            <TokenSelect/>
-          </Flex>
-        </MockAddressPage>
-      </TestApp>,
-      { hooksConfig },
-    );
-
-    await page.route(TOKENS_ERC20_API_URL, async(route) => route.fulfill({
-      status: 200,
-      body: JSON.stringify({
-        items: [
-          ...tokensMock.erc20List.items,
-          tokensMock.erc20d,
-        ],
-      }),
-    }), { times: 1 });
-
-    const socket = await createSocket();
-    const channel = await socketServer.joinChannel(socket, 'addresses:1');
-    socketServer.sendMessage(socket, channel, 'coin_balance', {
-      coin_balance: coinBalanceMock.base,
-    });
-
-    const button = page.getByRole('button', { name: /select/i });
-    const text = await button.innerText();
-    expect(text).toContain('10');
-  });
-});

ui/address/tokenSelect/TokenSelect.tsx

@@ -5,7 +5,6 @@ import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { SocketMessage } from 'lib/socket/types';
 import type { Address } from 'types/api/address';
 
 import walletIcon from 'icons/wallet.svg';
@@ -13,8 +12,6 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import useSocketChannel from 'lib/socket/useSocketChannel';
-import useSocketMessage from 'lib/socket/useSocketMessage';
 
 import useFetchTokens from '../utils/useFetchTokens';
 import TokenSelectDesktop from './TokenSelectDesktop';
@@ -28,14 +25,13 @@ const TokenSelect = ({ onClick }: Props) => {
   const router = useRouter();
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
-  const [ blockNumber, setBlockNumber ] = React.useState<number>();
 
   const addressHash = getQueryParamString(router.query.hash);
   const addressResourceKey = getResourceKey('address', { pathParams: { hash: addressHash } });
 
   const addressQueryData = queryClient.getQueryData<Address>(addressResourceKey);
 
-  const { data, isError, isPending, refetch } = useFetchTokens({ hash: addressQueryData?.hash });
+  const { data, isError, isPending } = useFetchTokens({ hash: addressQueryData?.hash });
   const tokensResourceKey = getResourceKey('address_tokens', { pathParams: { hash: addressQueryData?.hash }, queryParams: { type: 'ERC-20' } });
   const tokensIsFetching = useIsFetching({ queryKey: tokensResourceKey });
 
@@ -44,34 +40,6 @@ const TokenSelect = ({ onClick }: Props) => {
     onClick?.();
   }, [ onClick ]);
 
-  const handleTokenBalanceMessage: SocketMessage.AddressTokenBalance['handler'] = React.useCallback((payload) => {
-    if (payload.block_number !== blockNumber) {
-      refetch();
-      setBlockNumber(payload.block_number);
-    }
-  }, [ blockNumber, refetch ]);
-  const handleCoinBalanceMessage: SocketMessage.AddressCoinBalance['handler'] = React.useCallback((payload) => {
-    if (payload.coin_balance.block_number !== blockNumber) {
-      refetch();
-      setBlockNumber(payload.coin_balance.block_number);
-    }
-  }, [ blockNumber, refetch ]);
-
-  const channel = useSocketChannel({
-    topic: `addresses:${ addressQueryData?.hash.toLowerCase() }`,
-    isDisabled: !addressQueryData,
-  });
-  useSocketMessage({
-    channel,
-    event: 'coin_balance',
-    handler: handleCoinBalanceMessage,
-  });
-  useSocketMessage({
-    channel,
-    event: 'token_balance',
-    handler: handleTokenBalanceMessage,
-  });
-
   if (isPending) {
     return (
       <Flex columnGap={ 3 }>

ui/address/tokens/AddressCollections.tsx

+import { Box, Flex, Text, Grid, HStack, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos } from 'lib/html-entities';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import LinkInternal from 'ui/shared/LinkInternal';
+import NftFallback from 'ui/shared/nft/NftFallback';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+
+import NFTItem from './NFTItem';
+import NFTItemContainer from './NFTItemContainer';
+
+type Props = {
+  collectionsQuery: QueryWithPagesResult<'address_collections'>;
+  address: string;
+  hasActiveFilters: boolean;
+}
+
+const AddressCollections = ({ collectionsQuery, address, hasActiveFilters }: Props) => {
+  const isMobile = useIsMobile();
+
+  const { isError, isPlaceholderData, data, pagination } = collectionsQuery;
+
+  const actionBar = isMobile && pagination.isVisible && (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? data?.items.map((item, index) => {
+    const collectionUrl = route({
+      pathname: '/token/[hash]',
+      query: {
+        hash: item.token.address,
+        tab: 'inventory',
+        holder_address_hash: address,
+        scroll_to_tabs: 'true',
+      },
+    });
+    const hasOverload = Number(item.amount) > item.token_instances.length;
+    return (
+      <Box key={ item.token.address + index } mb={ 6 }>
+        <Flex mb={ 3 } flexWrap="wrap" lineHeight="30px">
+          <TokenEntity
+            width="auto"
+            noSymbol
+            token={ item.token }
+            isLoading={ isPlaceholderData }
+            noCopy
+            fontWeight="600"
+          />
+          <Skeleton isLoaded={ !isPlaceholderData } mr={ 3 }>
+            <Text variant="secondary" whiteSpace="pre">{ ` - ${ Number(item.amount).toLocaleString() } item${ Number(item.amount) > 1 ? 's' : '' }` }</Text>
+          </Skeleton>
+          <LinkInternal href={ collectionUrl } isLoading={ isPlaceholderData }>
+            <Skeleton isLoaded={ !isPlaceholderData }>View in collection</Skeleton>
+          </LinkInternal>
+        </Flex>
+        <Grid
+          w="100%"
+          mb={ 7 }
+          columnGap={{ base: 3, lg: 6 }}
+          rowGap={{ base: 3, lg: 6 }}
+          gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
+        >
+          { item.token_instances.map((instance, index) => {
+            const key = item.token.address + '_' + (instance.id && !isPlaceholderData ? `id_${ instance.id }` : `index_${ index }`);
+
+            return (
+              <NFTItem
+                key={ key }
+                { ...instance }
+                token={ item.token }
+                isLoading={ isPlaceholderData }
+              />
+            );
+          }) }
+          { hasOverload && (
+            <LinkInternal display="flex" href={ collectionUrl }>
+              <NFTItemContainer display="flex" alignItems="center" justifyContent="center" flexDirection="column" minH="248px">
+                <HStack gap={ 2 } mb={ 3 }>
+                  <NftFallback bgColor="unset" w="30px" h="30px" boxSize="30px" p={ 0 }/>
+                  <NftFallback bgColor="unset" w="30px" h="30px" boxSize="30px" p={ 0 }/>
+                  <NftFallback bgColor="unset" w="30px" h="30px" boxSize="30px" p={ 0 }/>
+                </HStack>
+                View all NFTs
+              </NFTItemContainer>
+            </LinkInternal>
+          ) }
+        </Grid>
+      </Box>
+    );
+  }) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      items={ data?.items }
+      emptyText="There are no tokens of selected type."
+      content={ content }
+      actionBar={ actionBar }
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find any token that matches your query.`,
+        hasActiveFilters,
+      }}
+    />
+  );
+};
+
+export default AddressCollections;

ui/address/tokens/ERC1155Tokens.tsx → ui/address/tokens/AddressNFTs.tsx

@@ -2,6 +2,7 @@ import { Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import { apos } from 'lib/html-entities';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -10,10 +11,11 @@ import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPage
 import NFTItem from './NFTItem';
 
 type Props = {
-  tokensQuery: QueryWithPagesResult<'address_tokens'>;
+  tokensQuery: QueryWithPagesResult<'address_nfts'>;
+  hasActiveFilters: boolean;
 }
 
-const ERC1155Tokens = ({ tokensQuery }: Props) => {
+const AddressNFTs = ({ tokensQuery, hasActiveFilters }: Props) => {
   const isMobile = useIsMobile();
 
   const { isError, isPlaceholderData, data, pagination } = tokensQuery;
@@ -32,13 +34,14 @@ const ERC1155Tokens = ({ tokensQuery }: Props) => {
       gridTemplateColumns={{ base: 'repeat(2, calc((100% - 12px)/2))', lg: 'repeat(auto-fill, minmax(210px, 1fr))' }}
     >
       { data.items.map((item, index) => {
-        const key = item.token.address + '_' + (item.token_instance?.id && !isPlaceholderData ? `id_${ item.token_instance?.id }` : `index_${ index }`);
+        const key = item.token.address + '_' + (item.id && !isPlaceholderData ? `id_${ item.id }` : `index_${ index }`);
 
         return (
           <NFTItem
             key={ key }
             { ...item }
             isLoading={ isPlaceholderData }
+            withTokenLink
           />
         );
       }) }
@@ -52,8 +55,12 @@ const ERC1155Tokens = ({ tokensQuery }: Props) => {
       emptyText="There are no tokens of selected type."
       content={ content }
       actionBar={ actionBar }
+      filterProps={{
+        emptyFilteredText: `Couldn${ apos }t find any token that matches your query.`,
+        hasActiveFilters,
+      }}
     />
   );
 };
 
-export default ERC1155Tokens;
+export default AddressNFTs;

ui/address/tokens/ERC721Tokens.tsx

-import { Show, Hide } from '@chakra-ui/react';
-import React from 'react';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import ActionBar from 'ui/shared/ActionBar';
-import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/pagination/Pagination';
-import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
-
-import ERC721TokensListItem from './ERC721TokensListItem';
-import ERC721TokensTable from './ERC721TokensTable';
-
-type Props = {
-  tokensQuery: QueryWithPagesResult<'address_tokens'>;
-}
-
-const ERC721Tokens = ({ tokensQuery }: Props) => {
-  const isMobile = useIsMobile();
-
-  const { isError, isPlaceholderData, data, pagination } = tokensQuery;
-
-  const actionBar = isMobile && pagination.isVisible && (
-    <ActionBar mt={ -6 }>
-      <Pagination ml="auto" { ...pagination }/>
-    </ActionBar>
-  );
-
-  const content = data?.items ? (
-    <>
-      <Hide below="lg" ssr={ false }><ERC721TokensTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 72 : 0 }/></Hide>
-      <Show below="lg" ssr={ false }>{ data.items.map((item, index) => (
-        <ERC721TokensListItem
-          key={ item.token.address + (isPlaceholderData ? index : '') }
-          { ...item }
-          isLoading={ isPlaceholderData }
-        />
-      )) }</Show></>
-  ) : null;
-
-  return (
-    <DataListDisplay
-      isError={ isError }
-      items={ data?.items }
-      emptyText="There are no tokens of selected type."
-      content={ content }
-      actionBar={ actionBar }
-    />
-  );
-
-};
-
-export default ERC721Tokens;

ui/address/tokens/ERC721TokensListItem.tsx

-import { Flex, HStack, Skeleton } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import type { AddressTokenBalance } from 'types/api/address';
-
-import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenEntityWithAddressFilter from 'ui/shared/entities/token/TokenEntityWithAddressFilter';
-import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-
-type Props = AddressTokenBalance & { isLoading: boolean};
-
-const ERC721TokensListItem = ({ token, value, isLoading }: Props) => {
-  const router = useRouter();
-
-  const hash = router.query.hash?.toString() || '';
-
-  return (
-    <ListItemMobile rowGap={ 2 }>
-      <TokenEntityWithAddressFilter
-        token={ token }
-        isLoading={ isLoading }
-        addressHash={ hash }
-        noCopy
-        jointSymbol
-        fontWeight={ 700 }
-      />
-      <Flex alignItems="center" pl={ 8 }>
-        <AddressEntity
-          address={{ hash: token.address }}
-          isLoading={ isLoading }
-          truncation="constant"
-          noIcon
-        />
-        <AddressAddToWallet token={ token } ml={ 2 } isLoading={ isLoading }/>
-      </Flex>
-      <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Quantity</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
-          <span>{ value }</span>
-        </Skeleton>
-      </HStack>
-    </ListItemMobile>
-  );
-};
-
-export default ERC721TokensListItem;

ui/address/tokens/ERC721TokensTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
-import React from 'react';
-
-import type { AddressTokenBalance } from 'types/api/address';
-
-import { default as Thead } from 'ui/shared/TheadSticky';
-
-import ERC721TokensTableItem from './ERC721TokensTableItem';
-
-interface Props {
-  data: Array<AddressTokenBalance>;
-  top: number;
-  isLoading: boolean;
-}
-
-const ERC721TokensTable = ({ data, top, isLoading }: Props) => {
-  return (
-    <Table variant="simple" size="sm">
-      <Thead top={ top }>
-        <Tr>
-          <Th width="40%">Asset</Th>
-          <Th width="40%">Contract address</Th>
-          <Th width="20%" isNumeric>Quantity</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        { data.map((item, index) => (
-          <ERC721TokensTableItem key={ item.token.address + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
-        )) }
-      </Tbody>
-    </Table>
-  );
-};
-
-export default ERC721TokensTable;

ui/address/tokens/ERC721TokensTableItem.tsx

-import { Tr, Td, Flex, Skeleton } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import type { AddressTokenBalance } from 'types/api/address';
-
-import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import TokenEntityWithAddressFilter from 'ui/shared/entities/token/TokenEntityWithAddressFilter';
-
-type Props = AddressTokenBalance & { isLoading: boolean};
-
-const ERC721TokensTableItem = ({
-  token,
-  value,
-  isLoading,
-}: Props) => {
-  const router = useRouter();
-
-  const hash = router.query.hash?.toString() || '';
-
-  return (
-    <Tr>
-      <Td verticalAlign="middle">
-        <TokenEntityWithAddressFilter
-          token={ token }
-          addressHash={ hash }
-          isLoading={ isLoading }
-          noCopy
-          jointSymbol
-          fontWeight="700"
-        />
-      </Td>
-      <Td verticalAlign="middle">
-        <Flex alignItems="center" width="150px" justifyContent="space-between">
-          <AddressEntity
-            address={{ hash: token.address }}
-            isLoading={ isLoading }
-            noIcon
-          />
-          <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading }/>
-        </Flex>
-      </Td>
-      <Td isNumeric verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { value }
-        </Skeleton>
-      </Td>
-    </Tr>
-  );
-};
-
-export default React.memo(ERC721TokensTableItem);

ui/address/tokens/NFTItem.tsx

-import { Box, Flex, Text, Link, useColorModeValue } from '@chakra-ui/react';
+import { Tag, Flex, Text, Link, Skeleton, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
-import type { AddressTokenBalance } from 'types/api/address';
+import type { AddressNFT } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
@@ -9,22 +9,20 @@ import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
 
-type Props = AddressTokenBalance & { isLoading: boolean };
+import NFTItemContainer from './NFTItemContainer';
 
-const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLoading }: Props) => {
-  const tokenInstanceLink = tokenId ? route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenId } }) : undefined;
+type Props = AddressNFT & { isLoading: boolean; withTokenLink?: boolean };
+
+const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: Props) => {
+  const tokenInstanceLink = tokenInstance.id ?
+    route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenInstance.id } }) :
+    undefined;
 
   return (
-    <Box
-      w={{ base: '100%', lg: '210px' }}
-      border="1px solid"
-      borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
-      borderRadius="12px"
-      p="10px"
-      fontSize="sm"
-      fontWeight={ 500 }
-      lineHeight="20px"
-    >
+    <NFTItemContainer position="relative">
+      <Skeleton isLoaded={ !isLoading }>
+        <LightMode><Tag background="gray.50" zIndex={ 1 } position="absolute" top="18px" right="18px">{ token.type }</Tag></LightMode>
+      </Skeleton>
       <Link href={ isLoading ? undefined : tokenInstanceLink }>
         <NftMedia
           mb="18px"
@@ -32,19 +30,25 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLo
           isLoading={ isLoading }
         />
       </Link>
-      { tokenId && (
-        <Flex mb={ 2 } ml={ 1 }>
+      <Flex justifyContent="space-between" w="100%">
+        <Flex ml={ 1 } overflow="hidden">
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
-          <NftEntity hash={ token.address } id={ tokenId } isLoading={ isLoading } noIcon/>
+          <NftEntity hash={ token.address } id={ tokenInstance.id } isLoading={ isLoading } noIcon/>
         </Flex>
+        <Skeleton isLoaded={ !isLoading }>
+          { Number(value) > 1 && <Flex><Text variant="secondary" whiteSpace="pre">Qty </Text>{ value }</Flex> }
+        </Skeleton>
+      </Flex>
+      { withTokenLink && (
+        <TokenEntity
+          mt={ 2 }
+          token={ token }
+          isLoading={ isLoading }
+          noCopy
+          noSymbol
+        />
       ) }
-      <TokenEntity
-        token={ token }
-        isLoading={ isLoading }
-        noCopy
-        noSymbol
-      />
-    </Box>
+    </NFTItemContainer>
   );
 };
 

ui/address/tokens/NFTItemContainer.tsx

+import { Box, useColorModeValue, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const NFTItemContainer = ({ children, className }: Props) => {
+  return (
+    <Box
+      w={{ base: '100%', lg: '210px' }}
+      border="1px solid"
+      borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
+      borderRadius="12px"
+      p="10px"
+      fontSize="sm"
+      fontWeight={ 500 }
+      lineHeight="20px"
+      className={ className }
+    >
+      { children }
+    </Box>
+  );
+};
+
+export default chakra(NFTItemContainer);

ui/address/utils/useFetchTokens.ts

+import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
-import useApiQuery from 'lib/api/useApiQuery';
+import type { SocketMessage } from 'lib/socket/types';
+import type { AddressTokenBalance, AddressTokensBalancesSocketMessage, AddressTokensResponse } from 'types/api/address';
+import type { TokenType } from 'types/api/token';
 
-import { calculateUsdValue } from './tokenUtils';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
 
+import { calculateUsdValue } from './tokenUtils';
 interface Props {
   hash?: string;
 }
 
+const tokenBalanceItemIdentityFactory = (match: AddressTokenBalance) => (item: AddressTokenBalance) => ((
+  match.token.address === item.token.address &&
+  match.token_id === item.token_id &&
+  match.token_instance?.id === item.token_instance?.id
+));
+
 export default function useFetchTokens({ hash }: Props) {
   const erc20query = useApiQuery('address_tokens', {
     pathParams: { hash },
@@ -25,11 +37,67 @@ export default function useFetchTokens({ hash }: Props) {
     queryOptions: { enabled: Boolean(hash), refetchOnMount: false },
   });
 
-  const refetch = React.useCallback(() => {
-    erc20query.refetch();
-    erc721query.refetch();
-    erc1155query.refetch();
-  }, [ erc1155query, erc20query, erc721query ]);
+  const queryClient = useQueryClient();
+
+  const updateTokensData = React.useCallback((type: TokenType, payload: AddressTokensBalancesSocketMessage) => {
+    const queryKey = getResourceKey('address_tokens', { pathParams: { hash }, queryParams: { type } });
+
+    queryClient.setQueryData(queryKey, (prevData: AddressTokensResponse | undefined) => {
+      const items = prevData?.items.map((currentItem) => {
+        const updatedData = payload.token_balances.find(tokenBalanceItemIdentityFactory(currentItem));
+        return updatedData ?? currentItem;
+      }) || [];
+
+      const extraItems = prevData?.next_page_params ?
+        [] :
+        payload.token_balances.filter((socketItem) => !items.some(tokenBalanceItemIdentityFactory(socketItem)));
+
+      if (!prevData) {
+        return {
+          items: extraItems,
+          next_page_params: null,
+        };
+      }
+
+      return {
+        items: items.concat(extraItems),
+        next_page_params: prevData.next_page_params,
+      };
+    });
+  }, [ hash, queryClient ]);
+
+  const handleTokenBalancesErc20Message: SocketMessage.AddressTokenBalancesErc20['handler'] = React.useCallback((payload) => {
+    updateTokensData('ERC-20', payload);
+  }, [ updateTokensData ]);
+
+  const handleTokenBalancesErc721Message: SocketMessage.AddressTokenBalancesErc721['handler'] = React.useCallback((payload) => {
+    updateTokensData('ERC-721', payload);
+  }, [ updateTokensData ]);
+
+  const handleTokenBalancesErc1155Message: SocketMessage.AddressTokenBalancesErc1155['handler'] = React.useCallback((payload) => {
+    updateTokensData('ERC-1155', payload);
+  }, [ updateTokensData ]);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ hash?.toLowerCase() }`,
+    isDisabled: Boolean(hash) && (erc20query.isPlaceholderData || erc721query.isPlaceholderData || erc1155query.isPlaceholderData),
+  });
+
+  useSocketMessage({
+    channel,
+    event: 'updated_token_balances_erc_20',
+    handler: handleTokenBalancesErc20Message,
+  });
+  useSocketMessage({
+    channel,
+    event: 'updated_token_balances_erc_721',
+    handler: handleTokenBalancesErc721Message,
+  });
+  useSocketMessage({
+    channel,
+    event: 'updated_token_balances_erc_1155',
+    handler: handleTokenBalancesErc1155Message,
+  });
 
   const data = React.useMemo(() => {
     return {
@@ -52,6 +120,5 @@ export default function useFetchTokens({ hash }: Props) {
     isPending: erc20query.isPending || erc721query.isPending || erc1155query.isPending,
     isError: erc20query.isError || erc721query.isError || erc1155query.isError,
     data,
-    refetch,
   };
 }

ui/pages/Address.tsx

@@ -2,7 +2,6 @@ import { Box, Flex, HStack, Icon } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { TokenType } from 'types/api/token';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
@@ -36,13 +35,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 
-export const tokenTabsByType: Record<TokenType, string> = {
-  'ERC-20': 'tokens_erc20',
-  'ERC-721': 'tokens_erc721',
-  'ERC-1155': 'tokens_erc1155',
-} as const;
-
-const TOKEN_TABS = Object.values(tokenTabsByType);
+const TOKEN_TABS = [ 'tokens_erc20', 'tokens_nfts', 'tokens_nfts_collection', 'tokens_nfts_list' ];
 
 const AddressPageContent = () => {
   const router = useRouter();

ui/pages/Token.tsx

@@ -56,6 +56,7 @@ const TokenPageContent = () => {
 
   const hashString = getQueryParamString(router.query.hash);
   const tab = getQueryParamString(router.query.tab);
+  const ownerFilter = getQueryParamString(router.query.holder_address_hash) || undefined;
 
   const queryClient = useQueryClient();
 
@@ -140,6 +141,7 @@ const TokenPageContent = () => {
   const inventoryQuery = useQueryWithPages({
     resourceName: 'token_inventory',
     pathParams: { hash: hashString },
+    filters: ownerFilter ? { holder_address_hash: ownerFilter } : {},
     scrollRef,
     options: {
       enabled: Boolean(
@@ -150,7 +152,7 @@ const TokenPageContent = () => {
           tab === 'inventory'
         ),
       ),
-      placeholderData: generateListStub<'token_inventory'>(tokenStubs.TOKEN_INSTANCE, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'token_inventory'>(tokenStubs.TOKEN_INSTANCE, 50, { next_page_params: { unique_token: 1 } }),
     },
   });
 
@@ -173,9 +175,11 @@ const TokenPageContent = () => {
   const contractTabs = useContractTabs(contractQuery.data);
 
   const tabs: Array<RoutedTab> = [
-    (tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') ?
-      { id: 'inventory', title: 'Inventory', component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery }/> } :
-      undefined,
+    (tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') ? {
+      id: 'inventory',
+      title: 'Inventory',
+      component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery } ownerFilter={ ownerFilter }/>,
+    } : undefined,
     { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
     { id: 'holders', title: 'Holders', component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery }/> },
     contractQuery.data?.is_contract ? {

ui/pages/Tokens.tsx

@@ -105,7 +105,7 @@ const Tokens = () => {
     </PopoverFilter>
   ) : (
     <PopoverFilter isActive={ tokenTypes && tokenTypes.length > 0 } contentProps={{ w: '200px' }} appliedFiltersNum={ tokenTypes?.length }>
-      <TokenTypeFilter onChange={ handleTokenTypesChange } defaultValue={ tokenTypes }/>
+      <TokenTypeFilter<TokenType> onChange={ handleTokenTypesChange } defaultValue={ tokenTypes } nftOnly={ false }/>
     </PopoverFilter>
   );
 

ui/shared/ResetIconButton.tsx

+import { Tooltip, Flex, Icon, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import crossIcon from 'icons/cross.svg';
+
+type Props = {
+  onClick: () => void;
+}
+
+const ResetIconButton = ({ onClick }: Props) => {
+  const resetTokenIconColor = useColorModeValue('blue.600', 'blue.300');
+  const resetTokenIconHoverColor = useColorModeValue('blue.400', 'blue.200');
+
+  return (
+    <Tooltip label="Reset filter">
+      <Flex>
+        <Icon
+          as={ crossIcon }
+          boxSize={ 5 }
+          ml={ 1 }
+          color={ resetTokenIconColor }
+          cursor="pointer"
+          _hover={{ color: resetTokenIconHoverColor }}
+          onClick={ onClick }
+        />
+      </Flex>
+    </Tooltip>
+  );
+};
+
+export default ResetIconButton;

ui/shared/TokenTransfer/TokenTransferFilter.tsx

@@ -56,7 +56,7 @@ const TokenTransferFilter = ({
         </>
       ) }
       <Text variant="secondary" fontWeight={ 600 }>Type</Text>
-      <TokenTypeFilter onChange={ onTypeFilterChange } defaultValue={ defaultTypeFilters }/>
+      <TokenTypeFilter<TokenType> onChange={ onTypeFilterChange } defaultValue={ defaultTypeFilters } nftOnly={ false }/>
     </PopoverFilter>
   );
 };

ui/shared/filters/TokenTypeFilter.tsx

 import { CheckboxGroup, Checkbox, Text, Flex, Link, useCheckboxGroup } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TokenType } from 'types/api/token';
+import type { NFTTokenType, TokenType } from 'types/api/token';
 
-import { TOKEN_TYPES } from 'lib/token/tokenTypes';
+import { NFT_TOKEN_TYPES, TOKEN_TYPES } from 'lib/token/tokenTypes';
 
-type Props = {
-  onChange: (nextValue: Array<TokenType>) => void;
-  defaultValue?: Array<TokenType>;
+type Props<T extends TokenType | NFTTokenType> = {
+  onChange: (nextValue: Array<T>) => void;
+  defaultValue?: Array<T>;
+  nftOnly: T extends NFTTokenType ? true : false;
 }
-
-const TokenTypeFilter = ({ onChange, defaultValue }: Props) => {
+const TokenTypeFilter = <T extends TokenType | NFTTokenType>({ nftOnly, onChange, defaultValue }: Props<T>) => {
   const { value, setValue } = useCheckboxGroup({ defaultValue });
 
   const handleReset = React.useCallback(() => {
@@ -21,7 +21,7 @@ const TokenTypeFilter = ({ onChange, defaultValue }: Props) => {
     onChange([]);
   }, [ onChange, setValue, value.length ]);
 
-  const handleChange = React.useCallback((nextValue: Array<TokenType>) => {
+  const handleChange = React.useCallback((nextValue: Array<T>) => {
     setValue(nextValue);
     onChange(nextValue);
   }, [ onChange, setValue ]);
@@ -32,6 +32,7 @@ const TokenTypeFilter = ({ onChange, defaultValue }: Props) => {
         <Text fontWeight={ 600 } variant="secondary">Type</Text>
         <Link
           onClick={ handleReset }
+          cursor={ value.length > 0 ? 'pointer' : 'unset' }
           color={ value.length > 0 ? 'link' : 'text_secondary' }
           _hover={{
             color: value.length > 0 ? 'link_hovered' : 'text_secondary',
@@ -41,7 +42,7 @@ const TokenTypeFilter = ({ onChange, defaultValue }: Props) => {
         </Link>
       </Flex>
       <CheckboxGroup size="lg" onChange={ handleChange } value={ value }>
-        { TOKEN_TYPES.map(({ title, id }) => (
+        { (nftOnly ? NFT_TOKEN_TYPES : TOKEN_TYPES).map(({ title, id }) => (
           <Checkbox key={ id } value={ id }>
             <Text fontSize="md">{ title }</Text>
           </Checkbox>

ui/shared/radioButtonGroup/RadioButtonGroup.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import RadioButtonGroupTest from './specs/RadioButtonGroupTest';
+
+test('radio button group', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Box w="400px" p="10px">
+        <RadioButtonGroupTest/>
+      </Box>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/radioButtonGroup/RadioButtonGroup.tsx

+import { ButtonGroup, Button, Flex, Icon, useRadio, useRadioGroup, useColorModeValue } from '@chakra-ui/react';
+import type { UseRadioProps } from '@chakra-ui/react';
+import React from 'react';
+
+type RadioItemProps = {
+  title: string;
+  icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  onlyIcon: false | undefined;
+} | {
+  title: string;
+  icon: React.FC<React.SVGAttributes<SVGElement>>;
+  onlyIcon: true;
+}
+
+type RadioButtonProps = UseRadioProps & RadioItemProps;
+
+const RadioButton = (props: RadioButtonProps) => {
+  const { getInputProps, getRadioProps } = useRadio(props);
+  const buttonColor = useColorModeValue('blue.50', 'gray.800');
+  const checkedTextColor = useColorModeValue('blue.700', 'gray.50');
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+
+  const styleProps = {
+    flex: 1,
+    variant: 'outline',
+    fontWeight: 500,
+    cursor: props.isChecked ? 'initial' : 'pointer',
+    borderColor: buttonColor,
+    backgroundColor: props.isChecked ? buttonColor : 'none',
+    _hover: {
+      borderColor: buttonColor,
+      ...(props.isChecked ? {} : { color: 'link_hovered' }),
+    },
+    _active: {
+      backgroundColor: 'none',
+    },
+    ...(props.isChecked ? { color: checkedTextColor } : {}),
+  };
+
+  if (props.onlyIcon) {
+    return (
+      <Button
+        as="label"
+        aria-label={ props.title }
+        { ...styleProps }
+      >
+        <input { ...input }/>
+        <Flex
+          { ...checkbox }
+        >
+          <Icon as={ props.icon } boxSize={ 5 }/>
+        </Flex>
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      as="label"
+      leftIcon={ props.icon ? <Icon as={ props.icon } boxSize={ 5 } mr={ -1 }/> : undefined }
+      { ...styleProps }
+    >
+      <input { ...input }/>
+      <Flex
+        { ...checkbox }
+      >
+        { props.title }
+      </Flex>
+    </Button>
+  );
+};
+
+type RadioButtonGroupProps<T extends string> = {
+  onChange: (value: T) => void;
+  name: string;
+  defaultValue: string;
+  options: Array<{ value: T } & RadioItemProps>;
+}
+
+const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, options }: RadioButtonGroupProps<T>) => {
+  const { getRootProps, getRadioProps } = useRadioGroup({ name, defaultValue, onChange });
+
+  const group = getRootProps();
+
+  return (
+    <ButtonGroup { ...group } isAttached size="sm" display="grid" gridTemplateColumns={ `repeat(${ options.length }, 1fr)` }>
+      { options.map((option) => {
+        const props = getRadioProps({ value: option.value });
+        return <RadioButton { ...props } key={ option.value } { ...option }/>;
+      }) }
+    </ButtonGroup>
+  );
+};
+
+export default RadioButtonGroup;

ui/shared/radioButtonGroup/specs/RadioButtonGroupTest.tsx

+import React from 'react';
+
+import RadioButtonGroup from '../RadioButtonGroup';
+
+const TestIcon = ({ className }: {className?: string}) => {
+  return (
+    <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" className={ className }>
+      { /* eslint-disable-next-line max-len */ }
+      <path fillRule="evenodd" clipRule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="currentColor" stroke="transparent" strokeWidth=".6" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+};
+
+type Test = 'v1' | 'v2' | 'v3';
+
+const RadioButtonGroupTest = () => {
+  return (
+    <RadioButtonGroup<Test>
+      // eslint-disable-next-line react/jsx-no-bind
+      onChange={ () => {} }
+      defaultValue="v1"
+      name="test"
+      options={ [
+        { value: 'v1', title: 'test option 1', icon: TestIcon, onlyIcon: false },
+        { value: 'v2', title: 'test 2', onlyIcon: false },
+        { value: 'v2', title: 'test 2', icon: TestIcon, onlyIcon: true },
+      ] }
+    />
+  );
+};
+
+export default RadioButtonGroupTest;

ui/token/TokenInventory.tsx

-import { Grid } from '@chakra-ui/react';
+import { Flex, Grid, Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -8,23 +8,50 @@ import type { ResourceError } from 'lib/api/resources';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+import ResetIconButton from 'ui/shared/ResetIconButton';
 
 import TokenInventoryItem from './TokenInventoryItem';
 
 type Props = {
   inventoryQuery: QueryWithPagesResult<'token_inventory'>;
   tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
+  ownerFilter?: string;
 }
 
-const TokenInventory = ({ inventoryQuery, tokenQuery }: Props) => {
+const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => {
   const isMobile = useIsMobile();
 
-  const actionBar = isMobile && inventoryQuery.pagination.isVisible && (
-    <ActionBar mt={ -6 }>
-      <Pagination ml="auto" { ...inventoryQuery.pagination }/>
-    </ActionBar>
+  const resetOwnerFilter = React.useCallback(() => {
+    inventoryQuery.onFilterChange({});
+  }, [ inventoryQuery ]);
+
+  const isActionBarHidden = !ownerFilter && !inventoryQuery.data?.items.length;
+
+  const ownerFilterComponent = ownerFilter && (
+    <Flex
+      alignItems="center"
+      flexWrap="wrap"
+      mb={{ base: isActionBarHidden ? 3 : 6, lg: 3 }}
+      mr={ 4 }
+    >
+      <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by owner</Text>
+      <Flex alignItems="center" py={ 1 }>
+        <AddressEntity address={{ hash: ownerFilter }} truncation={ isMobile ? 'constant' : 'none' }/>
+        <ResetIconButton onClick={ resetOwnerFilter }/>
+      </Flex>
+    </Flex>
+  );
+
+  const actionBar = !isActionBarHidden && (
+    <>
+      { ownerFilterComponent }
+      <ActionBar mt={ -6 }>
+        { isMobile && <Pagination ml="auto" { ...inventoryQuery.pagination }/> }
+      </ActionBar>
+    </>
   );
 
   const items = inventoryQuery.data?.items;