layout and tests

lib/api/resources.ts

@@ -24,7 +24,7 @@ import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchResult, SearchResultFilters } from 'types/api/search';
 import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats';
-import type { TokenCounters, TokenInfo, TokenHolders, TokenInventory, TokenInstance, TokenInstanceTransfersCount } from 'types/api/token';
+import type { TokenCounters, TokenInfo, TokenHolders, TokenInventoryResponse, TokenInstance, TokenInstanceTransfersCount } from 'types/api/token';
 import type { TokensResponse, TokensFilters } from 'types/api/tokens';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
 import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction } from 'types/api/transaction';
@@ -372,7 +372,7 @@ Q extends 'token_transfers' ? TokenTransferResponse :
 Q extends 'token_holders' ? TokenHolders :
 Q extends 'token_instance' ? TokenInstance :
 Q extends 'token_instance_transfers_count' ? TokenInstanceTransfersCount :
-Q extends 'token_inventory' ? TokenInventory :
+Q extends 'token_inventory' ? TokenInventoryResponse :
 Q extends 'tokens' ? TokensResponse :
 Q extends 'search' ? SearchResult :
 Q extends 'contract' ? SmartContract :

types/api/token.ts

@@ -51,7 +51,7 @@ export interface TokenInstanceTransfersCount {
   transfers_count: number;
 }
 
-export interface TokenInventory {
+export interface TokenInventoryResponse {
   items: Array<TokenInstance>;
   next_page_params: TokenInventoryPagination;
 }

ui/address/tokens/NFTItem.tsx

@@ -15,7 +15,7 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
 
   return (
     <LinkBox
-      w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }}
+      w={{ base: '100%', lg: '210px' }}
       border="1px solid"
       borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
       borderRadius="12px"
@@ -25,13 +25,14 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
       fontWeight={ 500 }
       lineHeight="20px"
     >
-      <LinkOverlay href={ tokenLink }/>
-      <NftImage
-        mb="18px"
-        url={ null }
-        fallbackPadding="30px"
-        cursor="pointer"
-      />
+      <LinkOverlay href={ tokenLink }>
+        <NftImage
+          mb="18px"
+          url={ null }
+          fallbackPadding="30px"
+          cursor="pointer"
+        />
+      </LinkOverlay>
       { tokenId && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>

ui/address/tokens/TokensWithIds.tsx

-import { Flex, Skeleton, Text } from '@chakra-ui/react';
+import { Grid, Skeleton, Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -38,11 +38,18 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
     return (
       <>
         { bar }
-        <Flex columnGap={ 6 } rowGap={ 6 } flexWrap="wrap">
-          <Skeleton w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }} h="272px"/>
-        </Flex>
+        <Grid
+          w="100%"
+          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))' }}
+        >
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+        </Grid>
       </>
     );
   }
@@ -54,9 +61,14 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
   return (
     <>
       { bar }
-      <Flex columnGap={{ base: 3, lg: 6 }} rowGap={{ base: 3, lg: 6 }} flexWrap="wrap" justifyContent="space-between">
+      <Grid
+        w="100%"
+        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))' }}
+      >
         { data.items.map(item => <NFTItem key={ item.token.address } { ...item }/>) }
-      </Flex>
+      </Grid>
     </>
   );
 };

ui/token/TokenInventory.pw.tsx

+import { Box } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { base as tokenInstanse } from 'mocks/tokens/tokenInstance';
+import TestApp from 'playwright/TestApp';
+
+import TokenInventory from './TokenInventory';
+
+test('base view +@mobile', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <Box h={{ base: '134px', lg: 0 }}/>
+      <TokenInventory
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore:
+        inventoryQuery={{
+          data: {
+            items: [ tokenInstanse, tokenInstanse, tokenInstanse ],
+            next_page_params: { unique_token: 1 },
+          },
+          isPaginationVisible: true,
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore:
+          pagination: { page: 1 },
+        }}
+      />
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/token/TokenInventory.tsx

-import { Flex, Text, Skeleton } from '@chakra-ui/react';
+import { Grid, Text, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import { TokenInventory } from 'types/api/token';
+import type { TokenInventoryResponse } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
@@ -13,7 +13,7 @@ import Pagination from 'ui/shared/Pagination';
 import TokenInventoryItem from './TokenInventoryItem';
 
 type Props = {
-  inventoryQuery: UseQueryResult<TokenInventory> & {
+  inventoryQuery: UseQueryResult<TokenInventoryResponse> & {
     pagination: PaginationProps;
     isPaginationVisible: boolean;
   };
@@ -35,11 +35,18 @@ const TokenInventory = ({ inventoryQuery }: Props) => {
     return (
       <>
         { bar }
-        <Flex columnGap={{ base: 3, lg: 6 }} rowGap={{ base: 3, lg: 6 }} flexWrap="wrap">
-          <Skeleton w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }} h="272px"/>
-          <Skeleton w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }} h="272px"/>
-        </Flex>
+        <Grid
+          w="100%"
+          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))' }}
+        >
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+          <Skeleton w={{ base: '100%', lg: '210px' }} h="272px"/>
+        </Grid>
       </>
     );
   }
@@ -51,9 +58,16 @@ const TokenInventory = ({ inventoryQuery }: Props) => {
   }
 
   return (
-    <Flex columnGap={{ base: 3, lg: 6 }} rowGap={{ base: 3, lg: 6 }} flexWrap="wrap" justifyContent="space-between">
-      { items.map((item) => <TokenInventoryItem key={ item.token.address } item={ item }/>) }
-    </Flex>
+    <>
+      { bar }
+      <Grid
+        w="100%"
+        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))' }}
+      >
+        { items.map((item) => <TokenInventoryItem key={ item.token.address } item={ item }/>) }
+      </Grid></>
   );
 };
 

ui/token/TokenInventoryItem.tsx

@@ -17,7 +17,7 @@ const NFTItem = ({ item }: Props) => {
 
   return (
     <LinkBox
-      w={{ base: 'calc((100% - 12px)/2)', lg: '210px' }}
+      w={{ base: '100%', lg: '210px' }}
       border="1px solid"
       borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
       borderRadius="12px"
@@ -27,12 +27,13 @@ const NFTItem = ({ item }: Props) => {
       fontWeight={ 500 }
       lineHeight="20px"
     >
-      <LinkOverlay href={ tokenLink }/>
-      <NftMedia
-        mb="18px"
-        imageUrl={ item.image_url }
-        animationUrl={ item.animation_url }
-      />
+      <LinkOverlay href={ tokenLink }>
+        <NftMedia
+          mb="18px"
+          imageUrl={ item.image_url }
+          animationUrl={ item.animation_url }
+        />
+      </LinkOverlay>
       { item.id && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
@@ -49,7 +50,7 @@ const NFTItem = ({ item }: Props) => {
       ) }
       { item.owner && (
         <Flex mb={ 2 } ml={ 1 }>
-          <Text whiteSpace="pre" variant="secondary" mr={ 2 }>Owner</Text>
+          <Text whiteSpace="pre" variant="secondary" mr={ 2 } lineHeight="24px">Owner</Text>
           <Address>
             <Hide below="lg" ssr={ false }><AddressIcon address={ item.owner } mr={ 1 }/></Hide>
             <AddressLink hash={ item.owner.hash } alias={ item.owner.name } type="address" truncation="constant"/>