fixes and tests

ui/address/AddressTokenTransfers.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { erc1155 } from 'mocks/tokens/tokenTransfer';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+
+import AddressTokenTransfers from './AddressTokenTransfers';
+
+const API_URL = buildApiUrl('address_token_transfers', { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859' }) +
+ '?token=0x1189a607CEac2f0E14867de4EB15b15C9FFB5859';
+
+const hooksConfig = {
+  router: {
+    query: { id: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', token: '0x1189a607CEac2f0E14867de4EB15b15C9FFB5859' },
+  },
+};
+
+test('with token filter and pagination +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ items: [ erc1155 ], next_page_params: { block_number: 1 } }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 6 }}/>
+      <AddressTokenTransfers/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('with token filter and no pagination +@mobile', async({ mount, page }) => {
+  await page.route(API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ items: [ erc1155 ] }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 6 }}/>
+      <AddressTokenTransfers/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/address/AddressTokenTransfers.tsx

@@ -13,6 +13,7 @@ import crossIcon from 'icons/cross.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
@@ -64,6 +65,7 @@ const matchFilters = (filters: Filters, tokenTransfer: TokenTransfer, address?:
 const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const isMobile = useIsMobile();
 
   const currentAddress = router.query.id?.toString();
 
@@ -220,31 +222,33 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
     );
   })();
 
+  const tokenFilterComponent = tokenFilter && (
+    <Flex alignItems="center" py={ 1 } flexWrap="wrap" mb={{ base: isPaginationVisible ? 6 : 3, lg: 0 }}>
+      Filtered by token
+      <TokenLogo hash={ tokenFilter } boxSize={ 6 } mx={ 2 }/>
+      { isMobile ? tokenFilter.slice(0, 4) + '...' + tokenFilter.slice(-4) : tokenFilter }
+      <Tooltip label="Reset filter">
+        <Flex>
+          <Icon
+            as={ crossIcon }
+            boxSize={ 6 }
+            ml={ 1 }
+            color={ resetTokenIconColor }
+            cursor="pointer"
+            _hover={{ color: resetTokenIconHoverColor }}
+            onClick={ resetTokenFilter }
+          />
+        </Flex>
+      </Tooltip>
+    </Flex>
+  );
+
   return (
     <>
+      { isMobile && tokenFilterComponent }
       { !isActionBarHidden && (
         <ActionBar mt={ -6 }>
-          { tokenFilter && (
-            <Flex alignItems="center" py={ 1 }>
-              Filtered by token
-              <TokenLogo hash={ tokenFilter } boxSize={ 6 } mx={ 2 }/>
-              { tokenFilter }
-              { data?.items?.[0].token.name && ` (${ data?.items?.[0].token.name }) ` }
-              <Tooltip label="Reset filter">
-                <Flex>
-                  <Icon
-                    as={ crossIcon }
-                    boxSize={ 6 }
-                    ml={ 1 }
-                    color={ resetTokenIconColor }
-                    cursor="pointer"
-                    _hover={{ color: resetTokenIconHoverColor }}
-                    onClick={ resetTokenFilter }
-                  />
-                </Flex>
-              </Tooltip>
-            </Flex>
-          ) }
+          { !isMobile && tokenFilterComponent }
           { !tokenFilter && (
             <TokenTransferFilter
               defaultTypeFilters={ filters.type }

ui/shared/ActionBar.tsx

@@ -18,6 +18,10 @@ const ActionBar = ({ children, className }: Props) => {
   const isSticky = useIsSticky(ref, TOP_UP + 5);
   const bgColor = useColorModeValue('white', 'black');
 
+  if (!React.Children.toArray(children).filter(Boolean).length) {
+    return null;
+  }
+
   return (
     <Flex
       className={ className }