Merge pull request #609 from blockscout/token-filter-fix

address token transfers fix

ui/address/AddressCsvExportLink.tsx

@@ -20,6 +20,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
         className={ className }
         display="inline-flex"
         alignItems="center"
+        whiteSpace="nowrap"
         href={ link('csv_export', undefined, { type, address }) }
       >
         <Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/>

ui/address/AddressTokenTransfers.tsx

@@ -22,6 +22,7 @@ import TOKEN_TYPE from 'lib/token/tokenTypes';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
@@ -160,7 +161,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
   });
 
   const numActiveFilters = (filters.type?.length || 0) + (filters.filter ? 1 : 0);
-  const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length;
+  const isActionBarHidden = !tokenFilter && !numActiveFilters && !data?.items.length && !currentAddress;
 
   const content = (() => {
     if (isLoading) {
@@ -225,10 +226,11 @@ 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 }
+    <Flex alignItems="center" flexWrap="wrap" mb={{ base: isActionBarHidden ? 3 : 6, lg: 0 }} mr={ 4 }>
+      <Text whiteSpace="nowrap" mr={ 2 } py={ 1 }>Filtered by token</Text>
+      <Flex alignItems="center" py={ 1 }>
+        <TokenLogo hash={ tokenFilter } boxSize={ 6 } mr={ 2 }/>
+        { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
         <Tooltip label="Reset filter">
           <Flex>
             <Icon
@@ -243,6 +245,7 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
           </Flex>
         </Tooltip>
       </Flex>
+    </Flex>
   );
 
   return (

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -30,7 +30,7 @@ const TokenTransferTable = ({
 }: Props) => {
 
   return (
-    <Table variant="simple" size="sm">
+    <Table variant="simple" size="sm" minW="950px">
       <Thead top={ top }>
         <Tr>
           { showTxInfo && <Th width="44px"></Th> }