fixes

ui/address/AddressTokens.tsx

@@ -14,6 +14,18 @@ import TokenBalances from './tokens/TokenBalances';
 import TokensWithIds from './tokens/TokensWithIds';
 import TokensWithoutIds from './tokens/TokensWithoutIds';
 
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: 3,
+  columnGap: 3,
+};
+
+const TAB_LIST_PROPS_MOBILE = {
+  mt: 8,
+  columnGap: 3,
+};
+
 const AddressTokens = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
@@ -35,13 +47,6 @@ const AddressTokens = () => {
     { id: tokenTabsByType['ERC-1155'], title: 'ERC-1155', component: <TokensWithIds tokensQuery={ tokensQuery }/> },
   ];
 
-  const TAB_LIST_PROPS = {
-    marginBottom: 0,
-    py: 5,
-    marginTop: 3,
-    columnGap: 3,
-  };
-
   return (
     <>
       <TokenBalances/>
@@ -52,7 +57,7 @@ const AddressTokens = () => {
         variant="outline"
         colorScheme="gray"
         size="sm"
-        tabListProps={ isMobile ? { mt: 8, columnGap: 3 } : TAB_LIST_PROPS }
+        tabListProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
         rightSlot={ tokensQuery.isPaginationVisible && !isMobile ? <Pagination { ...tokensQuery.pagination }/> : null }
         stickyEnabled={ !isMobile }
       />

ui/address/tokens/NFTItem.tsx

-import { Box, Center, Flex, Icon, Link, Text, useColorModeValue } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import { Center, Flex, Icon, Link, Text, LinkBox, LinkOverlay, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
@@ -13,16 +12,11 @@ type Props = AddressTokenBalance;
 
 const NFTItem = ({ token, token_id: tokenId }: Props) => {
   const tokenLink = link('token_index', { hash: token.address });
-  const router = useRouter();
-
-  const onItemClick = React.useCallback(() => {
-    router.push(tokenLink);
-  }, [ router, tokenLink ]);
 
   return (
-    <Box
-      w="210px"
-      h="272px"
+    <LinkBox
+      w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }}
+      h={{ base: 'auto', lg: '272px' }}
       border="1px solid"
       borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
       borderRadius="12px"
@@ -31,16 +25,30 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
       fontSize="sm"
       fontWeight={ 500 }
       lineHeight="20px"
-      onClick={ onItemClick }
-      cursor="pointer"
     >
-      <Center w="182px" h="182px" bg={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') } mb="18px" borderRadius="12px">
+      <LinkOverlay href={ tokenLink }/>
+      <Center
+        w={{ base: '100%', lg: '182px' }}
+        h={{ base: 'calc((100vw - 36px)/2 - 12px)', lg: '182px' }}
+        bg={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') }
+        mb="18px"
+        borderRadius="12px"
+      >
         <Icon as={ NFTIcon } boxSize="112px" color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }/>
       </Center>
       { tokenId && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
-          <Link href={ link('token_instance_item', { hash: token.address, id: tokenId }) }>{ tokenId }</Link>
+          <TruncatedTextTooltip label={ tokenId }>
+            <Link
+              overflow="hidden"
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+              href={ link('token_instance_item', { hash: token.address, id: tokenId }) }
+            >
+              { tokenId }
+            </Link>
+          </TruncatedTextTooltip>
         </Flex>
       ) }
       { token.name && (
@@ -51,7 +59,7 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
           </TruncatedTextTooltip>
         </Flex>
       ) }
-    </Box>
+    </LinkBox>
   );
 };
 

ui/address/tokens/TokenBalances.tsx

-import { Box, Flex, Icon, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
-import walletIcon from 'icons/wallet.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import { getTokenBalanceTotal, calculateUsdValue } from '../utils/tokenUtils';
+import TokenBalancesItem from './TokenBalancesItem';
 
 const TokenBalances = () => {
   const router = useRouter();
@@ -24,8 +24,6 @@ const TokenBalances = () => {
     queryOptions: { enabled: Boolean(addressQuery.data) },
   });
 
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
   if (addressQuery.isError || balancesQuery.isError) {
     return <DataFetchAlert/>;
   }
@@ -54,39 +52,20 @@ const TokenBalances = () => {
 
   const totalUsd = nativeUsd ? BigNumber(nativeUsd).toNumber() + BigNumber(tokenBalanceBn).toNumber() : undefined;
 
-  const itemProps = {
-    p: 5,
-    bgColor,
-    borderRadius: '16px',
-    alignItems: 'center',
-  };
-
   return (
     <Flex columnGap={ 3 } rowGap={ 3 } mt={{ base: '6px', lg: 0 }} flexDirection={{ base: 'column', lg: 'row' }}>
-      <Flex { ...itemProps }>
-        <Icon as={ walletIcon } boxSize="30px" mr={ 3 }/>
-        <Box>
-          <Text variant="secondary" fontSize="xs">Net Worth</Text>
-          <Text fontWeight="500">{ totalUsd ? `$${ totalUsd } USD` : 'N/A' }</Text>
-        </Box>
-      </Flex>
-      <Flex { ...itemProps }>
-        <Icon as={ walletIcon } boxSize="30px" mr={ 3 }/>
-        <Box>
-          <Text variant="secondary" fontSize="xs">{ `${ appConfig.network.currency.symbol } Balance` }</Text>
-          <Text fontWeight="500">{ nativeUsd && `$${ nativeUsd } USD | ` } { `${ nativeValue } ${ appConfig.network.currency.symbol }` }</Text>
-        </Box>
-      </Flex>
-      <Flex { ...itemProps }>
-        <Icon as={ walletIcon } boxSize="30px" mr={ 3 }/>
-        <Box>
-          <Text variant="secondary" fontSize="xs">Tokens</Text>
-          <Text fontWeight="500">
-            { `$${ tokenBalanceBn } USD ` }
-            { Boolean(balancesQuery.data.length) && ` | ${ balancesQuery.data.length } ${ balancesQuery.data.length === 1 ? 'token' : 'tokens' }` }
-          </Text>
-        </Box>
-      </Flex>
+      <TokenBalancesItem name="Net Worth" value={ totalUsd ? `$${ totalUsd } USD` : 'N/A' }/>
+      <TokenBalancesItem
+        name={ `${ appConfig.network.currency.symbol } Balance` }
+        value={ (nativeUsd ? `$${ nativeUsd } USD | ` : '') + `${ nativeValue } ${ appConfig.network.currency.symbol }` }
+      />
+      <TokenBalancesItem
+        name="Tokens"
+        value={
+          `$${ tokenBalanceBn } USD ` +
+          (balancesQuery.data.length ? ` | ${ balancesQuery.data.length } ${ balancesQuery.data.length === 1 ? 'token' : 'tokens' }` : '')
+        }
+      />
     </Flex>
   );
 };

ui/address/tokens/TokenBalancesItem.tsx

+import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import walletIcon from 'icons/wallet.svg';
+
+const TokenBalancesItem = ({ name, value }: {name: string; value: string }) => {
+
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
+  return (
+    <Flex p={ 5 } bgColor={ bgColor } borderRadius="16px" alignItems="center">
+      <Icon as={ walletIcon } boxSize="30px" mr={ 3 }/>
+      <Box>
+        <Text variant="secondary" fontSize="xs">{ name }</Text>
+        <Text fontWeight="500">{ value }</Text>
+      </Box>
+    </Flex>
+  );
+};
+
+export default React.memo(TokenBalancesItem);

ui/address/tokens/TokensListItem.tsx

@@ -9,6 +9,8 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile';
 import TokenLogo from 'ui/shared/TokenLogo';
 
+import AddressAddToMetaMask from '../details/AddressAddToMetaMask';
+
 type Props = AddressTokenBalance;
 
 const TokensListItem = ({ token, value }: Props) => {
@@ -22,13 +24,14 @@ const TokensListItem = ({ token, value }: Props) => {
 
   return (
     <ListItemMobile rowGap={ 2 }>
-      <Flex alignItems="center">
+      <Flex alignItems="center" width="100%">
         <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
         <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
       </Flex>
-      <Flex alignItems="center">
+      <Flex alignItems="center" pl={ 8 }>
         <AddressLink hash={ token.address } type="address" truncation="constant"/>
         <CopyToClipboard text={ token.address } ml={ 1 }/>
+        <AddressAddToMetaMask token={ token } ml={ 2 }/>
       </Flex>
       { token.exchange_rate !== undefined && token.exchange_rate !== null && (
         <HStack spacing={ 3 }>

ui/address/tokens/TokensWithIds.tsx

@@ -50,10 +50,11 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
   if (!data.items.length) {
     return <Text as="span">There are no tokens of selected type.</Text>;
   }
+
   return (
     <>
       { bar }
-      <Flex columnGap={ 6 } rowGap={ 6 } flexWrap="wrap">
+      <Flex columnGap={{ base: 3, lg: 6 }} rowGap={{ base: 3, lg: 6 }} flexWrap="wrap">
         { data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) }
       </Flex>
     </>

ui/txs/TxsTable.tsx

@@ -32,9 +32,9 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, curr
           <Th width="160px">Type</Th>
           <Th width="20%">Method</Th>
           { showBlockInfo && <Th width="18%">Block</Th> }
-          <Th width={{ xl: '128px', base: '66px' }}>From</Th>
+          <Th width={{ xl: '132px', base: '66px' }}>From</Th>
           <Th width={{ xl: currentAddress ? '48px' : '36px', base: '0' }}></Th>
-          <Th width={{ xl: '128px', base: '66px' }}>To</Th>
+          <Th width={{ xl: '132px', base: '66px' }}>To</Th>
           <Th width="20%" isNumeric>
             <Link onClick={ sort('val') } display="flex" justifyContent="end">
               { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }