Merge pull request #796 from blockscout/address-tokens-fix

address tokens fix

ui/address/AddressTokens.tsx

@@ -8,11 +8,13 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { tokenTabsByType } from 'ui/pages/Address';
 import Pagination from 'ui/shared/Pagination';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
+import ERC1155Tokens from './tokens/ERC1155Tokens';
+import ERC20Tokens from './tokens/ERC20Tokens';
+import ERC721Tokens from './tokens/ERC721Tokens';
 import TokenBalances from './tokens/TokenBalances';
-import TokensWithIds from './tokens/TokensWithIds';
-import TokensWithoutIds from './tokens/TokensWithoutIds';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
@@ -32,21 +34,59 @@ const AddressTokens = () => {
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
-  const tokenType: TokenType = (Object.keys(tokenTabsByType) as Array<TokenType>).find(key => tokenTabsByType[key] === router.query.tab) || 'ERC-20';
+  const tab = router.query.tab?.toString();
+  const tokenType: TokenType = (Object.keys(tokenTabsByType) as Array<TokenType>).find(key => tokenTabsByType[key] === tab) || 'ERC-20';
 
-  const tokensQuery = useQueryWithPages({
+  const erc20Query = useQueryWithPages({
     resourceName: 'address_tokens',
     pathParams: { hash: router.query.hash?.toString() },
-    filters: { type: tokenType },
+    filters: { type: 'ERC-20' },
     scrollRef,
+    options: {
+      enabled: tokenType === 'ERC-20',
+    },
+  });
+
+  const erc721Query = useQueryWithPages({
+    resourceName: 'address_tokens',
+    pathParams: { hash: router.query.hash?.toString() },
+    filters: { type: 'ERC-721' },
+    scrollRef,
+    options: {
+      enabled: tokenType === 'ERC-721',
+    },
+  });
+
+  const erc1155Query = useQueryWithPages({
+    resourceName: 'address_tokens',
+    pathParams: { hash: router.query.hash?.toString() },
+    filters: { type: 'ERC-1155' },
+    scrollRef,
+    options: {
+      enabled: tokenType === 'ERC-1155',
+    },
   });
 
   const tabs = [
-    { id: tokenTabsByType['ERC-20'], title: 'ERC-20', component: <TokensWithoutIds tokensQuery={ tokensQuery }/> },
-    { id: tokenTabsByType['ERC-721'], title: 'ERC-721', component: <TokensWithoutIds tokensQuery={ tokensQuery }/> },
-    { id: tokenTabsByType['ERC-1155'], title: 'ERC-1155', component: <TokensWithIds tokensQuery={ tokensQuery }/> },
+    { 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 }/> },
   ];
 
+  let isPaginationVisible;
+  let pagination: PaginationProps | undefined;
+
+  if (tab === tokenTabsByType['ERC-1155']) {
+    isPaginationVisible = erc1155Query.isPaginationVisible;
+    pagination = erc1155Query.pagination;
+  } else if (tab === tokenTabsByType['ERC-721']) {
+    isPaginationVisible = erc721Query.isPaginationVisible;
+    pagination = erc721Query.pagination;
+  } else {
+    isPaginationVisible = erc20Query.isPaginationVisible;
+    pagination = erc20Query.pagination;
+  }
+
   return (
     <>
       <TokenBalances/>
@@ -58,7 +98,7 @@ const AddressTokens = () => {
         colorScheme="gray"
         size="sm"
         tabListProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
-        rightSlot={ tokensQuery.isPaginationVisible && !isMobile ? <Pagination { ...tokensQuery.pagination }/> : null }
+        rightSlot={ isPaginationVisible && !isMobile ? <Pagination { ...pagination }/> : null }
         stickyEnabled={ !isMobile }
       />
     </>

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

@@ -19,7 +19,7 @@ type Props = {
   };
 }
 
-const TokensWithIds = ({ tokensQuery }: Props) => {
+const ERC1155Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
   const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
@@ -69,4 +69,4 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
   );
 };
 
-export default TokensWithIds;
+export default ERC1155Tokens;

ui/address/tokens/TokensWithoutIds.tsx → ui/address/tokens/ERC20Tokens.tsx

@@ -10,8 +10,8 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 
-import TokensListItem from './TokensListItem';
-import TokensTable from './TokensTable';
+import ERC20TokensListItem from './ERC20TokensListItem';
+import ERC20TokensTable from './ERC20TokensTable';
 
 type Props = {
   tokensQuery: UseQueryResult<AddressTokensResponse> & {
@@ -20,7 +20,7 @@ type Props = {
   };
 }
 
-const TokensWithoutIds = ({ tokensQuery }: Props) => {
+const ERC20Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
   const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
@@ -33,8 +33,8 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
 
   const content = data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }><TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
-      <Show below="lg" ssr={ false }>{ data.items.map(item => <TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
+      <Hide below="lg" ssr={ false }><ERC20TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
+      <Show below="lg" ssr={ false }>{ data.items.map(item => <ERC20TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
   ) : null;
 
   return (
@@ -54,4 +54,4 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
 
 };
 
-export default TokensWithoutIds;
+export default ERC20Tokens;

ui/address/tokens/TokensListItem.tsx → ui/address/tokens/ERC20TokensListItem.tsx

@@ -12,7 +12,7 @@ import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = AddressTokenBalance;
 
-const TokensListItem = ({ token, value }: Props) => {
+const ERC20TokensListItem = ({ token, value }: Props) => {
 
   const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
 
@@ -52,4 +52,4 @@ const TokensListItem = ({ token, value }: Props) => {
   );
 };
 
-export default TokensListItem;
+export default ERC20TokensListItem;

ui/address/tokens/TokensTable.tsx → ui/address/tokens/ERC20TokensTable.tsx

@@ -5,14 +5,14 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 
-import TokensTableItem from './TokensTableItem';
+import ERC20TokensTableItem from './ERC20TokensTableItem';
 
 interface Props {
   data: Array<AddressTokenBalance>;
   top: number;
 }
 
-const TokensTable = ({ data, top }: Props) => {
+const ERC20TokensTable = ({ data, top }: Props) => {
   return (
     <Table variant="simple" size="sm">
       <Thead top={ top }>
@@ -26,11 +26,11 @@ const TokensTable = ({ data, top }: Props) => {
       </Thead>
       <Tbody>
         { data.map((item) => (
-          <TokensTableItem key={ item.token.address } { ...item }/>
+          <ERC20TokensTableItem key={ item.token.address } { ...item }/>
         )) }
       </Tbody>
     </Table>
   );
 };
 
-export default TokensTable;
+export default ERC20TokensTable;

ui/address/tokens/TokensTableItem.tsx → ui/address/tokens/ERC20TokensTableItem.tsx

@@ -11,7 +11,7 @@ import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = AddressTokenBalance;
 
-const TokensTableItem = ({
+const ERC20TokensTableItem = ({
   token,
   value,
 }: Props) => {
@@ -53,4 +53,4 @@ const TokensTableItem = ({
   );
 };
 
-export default React.memo(TokensTableItem);
+export default React.memo(ERC20TokensTableItem);

ui/address/tokens/ERC721Tokens.tsx

+import { Show, Hide } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { AddressTokensResponse } from 'types/api/address';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/Pagination';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
+
+import ERC721TokensListItem from './ERC721TokensListItem';
+import ERC721TokensTable from './ERC721TokensTable';
+
+type Props = {
+  tokensQuery: UseQueryResult<AddressTokensResponse> & {
+    pagination: PaginationProps;
+    isPaginationVisible: boolean;
+  };
+}
+
+const ERC721Tokens = ({ tokensQuery }: Props) => {
+  const isMobile = useIsMobile();
+
+  const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
+
+  const actionBar = isMobile && isPaginationVisible && (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }><ERC721TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
+      <Show below="lg" ssr={ false }>{ data.items.map(item => <ERC721TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      isLoading={ isLoading }
+      items={ data?.items }
+      skeletonProps={{
+        isLongSkeleton: true,
+        skeletonDesktopColumns: [ '40%', '40%', '20%' ],
+      }}
+      emptyText="There are no tokens of selected type."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+
+};
+
+export default ERC721Tokens;

ui/address/tokens/ERC721TokensListItem.tsx

+import { Flex, HStack, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+type Props = AddressTokenBalance;
+
+const ERC721TokensListItem = ({ token, value }: Props) => {
+
+  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
+
+  return (
+    <ListItemMobile rowGap={ 2 }>
+      <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" pl={ 8 }>
+        <AddressLink hash={ token.address } type="address" truncation="constant"/>
+        <CopyToClipboard text={ token.address } ml={ 1 }/>
+        <AddressAddToWallet token={ token } ml={ 2 }/>
+      </Flex>
+      <HStack spacing={ 3 }>
+        <Text fontSize="sm" fontWeight={ 500 }>Quantity</Text>
+        <Text fontSize="sm" variant="secondary">{ value }</Text>
+      </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;
+}
+
+const ERC721TokensTable = ({ data, top }: 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) => (
+          <ERC721TokensTableItem key={ item.token.address } { ...item }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ERC721TokensTable;

ui/address/tokens/ERC721TokensTableItem.tsx

+import { Tr, Td, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+type Props = AddressTokenBalance;
+
+const ERC721TokensTableItem = ({
+  token,
+  value,
+}: Props) => {
+
+  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Flex alignItems="center">
+          <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+          <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex alignItems="center" width="150px" justifyContent="space-between">
+          <Flex alignItems="center">
+            <AddressLink hash={ token.address } type="address" truncation="dynamic"/>
+            <CopyToClipboard text={ token.address } ml={ 1 }/>
+          </Flex>
+          <AddressAddToWallet token={ token } ml={ 4 }/>
+        </Flex>
+      </Td>
+      <Td isNumeric verticalAlign="middle">
+        { value }
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(ERC721TokensTableItem);