remove token info from instance

mocks/tokens/tokenInstance.ts

@@ -2,7 +2,6 @@
 import type { TokenInstance } from 'types/api/token';
 
 import * as addressMock from '../address/address';
-import { tokenInfoERC721a } from './tokenInfo';
 
 export const base: TokenInstance = {
   animation_url: null,
@@ -74,7 +73,6 @@ export const base: TokenInstance = {
     name: 'GENESIS #188848, 22a5f8bbb1602995. Blockchain pixel PFP NFT + "on music video" trait inspired by God',
   },
   owner: addressMock.withName,
-  token: tokenInfoERC721a,
 };
 
 export const withRichMetadata: TokenInstance = {

stubs/token.ts

@@ -108,6 +108,5 @@ export const TOKEN_INSTANCE: TokenInstance = {
     name: 'GENESIS #188882, 8a77ca1bcaa4036f. Blockchain pixel PFP NFT + "on music video" trait inspired by God',
   },
   owner: ADDRESS_PARAMS,
-  token: TOKEN_INFO_ERC_1155,
   holder_address_hash: ADDRESS_HASH,
 };

types/api/token.ts

@@ -61,7 +61,6 @@ export interface TokenInstance {
   external_app_url: string | null;
   metadata: Record<string, unknown> | null;
   owner: AddressParam | null;
-  token: TokenInfo;
 }
 
 export interface TokenInstanceTransfersCount {

ui/pages/Token.tsx

@@ -174,7 +174,7 @@ const TokenPageContent = () => {
 
   const tabs: Array<RoutedTab> = [
     (tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') ?
-      { id: 'inventory', title: 'Inventory', component: <TokenInventory inventoryQuery={ inventoryQuery }/> } :
+      { id: 'inventory', title: 'Inventory', component: <TokenInventory inventoryQuery={ inventoryQuery } tokenQuery={ tokenQuery }/> } :
       undefined,
     { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
     { id: 'holders', title: 'Holders', component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery }/> },

ui/pages/TokenInstance.tsx

@@ -10,7 +10,7 @@ import { useAppContext } from 'lib/contexts/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as metadata from 'lib/metadata';
 import * as regexp from 'lib/regexp';
-import { TOKEN_INSTANCE } from 'stubs/token';
+import { TOKEN_INSTANCE, TOKEN_INFO_ERC_1155 } from 'stubs/token';
 import * as tokenStubs from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
@@ -43,6 +43,14 @@ const TokenInstanceContent = () => {
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
+  const tokenQuery = useApiQuery('token', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash && id),
+      placeholderData: TOKEN_INFO_ERC_1155,
+    },
+  });
+
   const tokenInstanceQuery = useApiQuery('token_instance', {
     pathParams: { hash, id },
     queryOptions: {
@@ -58,14 +66,18 @@ const TokenInstanceContent = () => {
     options: {
       enabled: Boolean(hash && id && (!tab || tab === 'token_transfers') && !tokenInstanceQuery.isPlaceholderData && tokenInstanceQuery.data),
       placeholderData: generateListStub<'token_instance_transfers'>(
-        tokenInstanceQuery.data?.token.type === 'ERC-1155' ? tokenStubs.TOKEN_TRANSFER_ERC_1155 : tokenStubs.TOKEN_TRANSFER_ERC_721,
+        tokenQuery.data?.type === 'ERC-1155' ? tokenStubs.TOKEN_TRANSFER_ERC_1155 : tokenStubs.TOKEN_TRANSFER_ERC_721,
         10,
         { next_page_params: null },
       ),
     },
   });
 
-  const shouldFetchHolders = !tokenInstanceQuery.isPlaceholderData && tokenInstanceQuery.data && !tokenInstanceQuery.data.is_unique;
+  const shouldFetchHolders =
+    !tokenQuery.isPlaceholderData &&
+    !tokenInstanceQuery.isPlaceholderData &&
+    tokenInstanceQuery.data &&
+    !tokenInstanceQuery.data.is_unique;
 
   const holdersQuery = useQueryWithPages({
     resourceName: 'token_instance_holders',
@@ -74,18 +86,18 @@ const TokenInstanceContent = () => {
     options: {
       enabled: Boolean(hash && tab === 'holders' && shouldFetchHolders),
       placeholderData: generateListStub<'token_instance_holders'>(
-        tokenInstanceQuery.data?.token.type === 'ERC-1155' ? tokenStubs.TOKEN_HOLDER_ERC_1155 : tokenStubs.TOKEN_HOLDER_ERC_20, 10, { next_page_params: null }),
+        tokenQuery.data?.type === 'ERC-1155' ? tokenStubs.TOKEN_HOLDER_ERC_1155 : tokenStubs.TOKEN_HOLDER_ERC_20, 10, { next_page_params: null }),
     },
   });
 
   React.useEffect(() => {
-    if (tokenInstanceQuery.data && !tokenInstanceQuery.isPlaceholderData) {
+    if (tokenInstanceQuery.data && !tokenInstanceQuery.isPlaceholderData && tokenQuery.data && !tokenQuery.isPlaceholderData) {
       metadata.update(
-        { pathname: '/token/[hash]/instance/[id]', query: { hash: tokenInstanceQuery.data.token.address, id: tokenInstanceQuery.data.id } },
-        { symbol: tokenInstanceQuery.data.token.symbol ?? '' },
+        { pathname: '/token/[hash]/instance/[id]', query: { hash: tokenQuery.data.address, id: tokenInstanceQuery.data.id } },
+        { symbol: tokenQuery.data.symbol ?? '' },
       );
     }
-  }, [ tokenInstanceQuery.data, tokenInstanceQuery.isPlaceholderData ]);
+  }, [ tokenInstanceQuery.data, tokenInstanceQuery.isPlaceholderData, tokenQuery.data, tokenQuery.isPlaceholderData ]);
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
@@ -104,10 +116,10 @@ const TokenInstanceContent = () => {
     {
       id: 'token_transfers',
       title: 'Token transfers',
-      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenInstanceQuery.data?.token }/>,
+      component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id } token={ tokenQuery.data }/>,
     },
     shouldFetchHolders ?
-      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenInstanceQuery.data?.token }/> } :
+      { id: 'holders', title: 'Holders', component: <TokenHolders holdersQuery={ holdersQuery } token={ tokenQuery.data }/> } :
       undefined,
     { id: 'metadata', title: 'Metadata', component: (
       <TokenInstanceMetadata
@@ -121,7 +133,7 @@ const TokenInstanceContent = () => {
     throw Error('Token instance fetch failed', { cause: tokenInstanceQuery.error });
   }
 
-  const tokenTag = <Tag isLoading={ tokenInstanceQuery.isPlaceholderData }>{ tokenInstanceQuery.data?.token.type }</Tag>;
+  const tokenTag = <Tag isLoading={ tokenInstanceQuery.isPlaceholderData }>{ tokenQuery.data?.type }</Tag>;
 
   const address = {
     hash: hash || '',
@@ -131,7 +143,7 @@ const TokenInstanceContent = () => {
     watchlist_address_id: null,
   };
 
-  const isLoading = tokenInstanceQuery.isPlaceholderData;
+  const isLoading = tokenInstanceQuery.isPlaceholderData || tokenQuery.isPlaceholderData;
 
   const appLink = (() => {
     if (!tokenInstanceQuery.data?.external_app_url) {
@@ -168,7 +180,7 @@ const TokenInstanceContent = () => {
   const titleSecondRow = (
     <Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
       <TokenEntity
-        token={ tokenInstanceQuery.data?.token }
+        token={ tokenQuery.data }
         isLoading={ isLoading }
         noSymbol
         noCopy
@@ -179,7 +191,7 @@ const TokenInstanceContent = () => {
         w="auto"
         maxW="700px"
       />
-      { !isLoading && tokenInstanceQuery.data && <AddressAddToWallet token={ tokenInstanceQuery.data.token } variant="button"/> }
+      { !isLoading && tokenInstanceQuery.data && <AddressAddToWallet token={ tokenQuery.data } variant="button"/> }
       <AddressQrCode address={ address } isLoading={ isLoading }/>
       <AccountActionsMenu isLoading={ isLoading }/>
       { appLink }
@@ -197,7 +209,7 @@ const TokenInstanceContent = () => {
         isLoading={ isLoading }
       />
 
-      <TokenInstanceDetails data={ tokenInstanceQuery?.data } isLoading={ isLoading } scrollRef={ scrollRef }/>
+      <TokenInstanceDetails data={ tokenInstanceQuery?.data } isLoading={ isLoading } scrollRef={ scrollRef } token={ tokenQuery.data }/>
 
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>

ui/token/TokenInventory.pw.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
 import { base as tokenInstanse } from 'mocks/tokens/tokenInstance';
 import TestApp from 'playwright/TestApp';
 
@@ -23,6 +24,11 @@ test('base view +@mobile', async({ mount }) => {
           // @ts-ignore:
           pagination: { page: 1, isVisible: true },
         }}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore:
+        tokenQuery={{
+          data: tokenInfoERC721a,
+        }}
       />
     </TestApp>,
   );

ui/token/TokenInventory.tsx

 import { Grid } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
+import type { TokenInfo } from 'types/api/token';
+
+import type { ResourceError } from 'lib/api/resources';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -11,9 +15,10 @@ import TokenInventoryItem from './TokenInventoryItem';
 
 type Props = {
   inventoryQuery: QueryWithPagesResult<'token_inventory'>;
+  tokenQuery: UseQueryResult<TokenInfo, ResourceError<unknown>>;
 }
 
-const TokenInventory = ({ inventoryQuery }: Props) => {
+const TokenInventory = ({ inventoryQuery, tokenQuery }: Props) => {
   const isMobile = useIsMobile();
 
   const actionBar = isMobile && inventoryQuery.pagination.isVisible && (
@@ -23,8 +28,9 @@ const TokenInventory = ({ inventoryQuery }: Props) => {
   );
 
   const items = inventoryQuery.data?.items;
+  const token = tokenQuery.data;
 
-  const content = items ? (
+  const content = items && token ? (
     <Grid
       w="100%"
       columnGap={{ base: 3, lg: 6 }}
@@ -33,9 +39,10 @@ const TokenInventory = ({ inventoryQuery }: Props) => {
     >
       { items.map((item, index) => (
         <TokenInventoryItem
-          key={ item.token.address + '_' + item.id + (inventoryQuery.isPlaceholderData ? '_' + index : '') }
+          key={ token.address + '_' + item.id + (inventoryQuery.isPlaceholderData ? '_' + index : '') }
           item={ item }
-          isLoading={ inventoryQuery.isPlaceholderData }
+          isLoading={ inventoryQuery.isPlaceholderData || tokenQuery.isPlaceholderData }
+          token={ token }
         />
       )) }
     </Grid>

ui/token/TokenInventoryItem.tsx

 import { Box, Flex, Text, Link, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TokenInstance } from 'types/api/token';
+import type { TokenInfo, TokenInstance } from 'types/api/token';
 
 import { route } from 'nextjs-routes';
 
@@ -11,9 +11,9 @@ import LinkInternal from 'ui/shared/LinkInternal';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
-type Props = { item: TokenInstance; isLoading: boolean };
+type Props = { item: TokenInstance; token: TokenInfo; isLoading: boolean };
 
-const NFTItem = ({ item, isLoading }: Props) => {
+const TokenInventoryItem = ({ item, token, isLoading }: Props) => {
 
   const isMobile = useIsMobile();
 
@@ -25,7 +25,7 @@ const NFTItem = ({ item, isLoading }: Props) => {
     />
   );
 
-  const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: item.token.address, id: item.id } });
+  const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: item.id } });
 
   return (
     <Box
@@ -76,4 +76,4 @@ const NFTItem = ({ item, isLoading }: Props) => {
   );
 };
 
-export default NFTItem;
+export default TokenInventoryItem;

ui/tokenInstance/TokenInstanceDetails.pw.tsx

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as addressMock from 'mocks/address/address';
+import { tokenInfoERC721a } from 'mocks/tokens/tokenInfo';
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
@@ -9,10 +10,12 @@ import * as configs from 'playwright/utils/configs';
 
 import TokenInstanceDetails from './TokenInstanceDetails';
 
-const API_URL_ADDRESS = buildApiUrl('address', { hash: tokenInstanceMock.base.token.address });
+const hash = tokenInfoERC721a.address;
+
+const API_URL_ADDRESS = buildApiUrl('address', { hash });
 const API_URL_TOKEN_TRANSFERS_COUNT = buildApiUrl('token_instance_transfers_count', {
   id: tokenInstanceMock.unique.id,
-  hash: tokenInstanceMock.unique.token.address,
+  hash,
 });
 
 test('base view +@dark-mode +@mobile', async({ mount, page }) => {
@@ -31,7 +34,7 @@ test('base view +@dark-mode +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <TokenInstanceDetails data={ tokenInstanceMock.unique }/>
+      <TokenInstanceDetails data={ tokenInstanceMock.unique } token={ tokenInfoERC721a }/>
     </TestApp>,
   );
 

ui/tokenInstance/TokenInstanceDetails.tsx

 import { Flex, Grid, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TokenInstance } from 'types/api/token';
+import type { TokenInfo, TokenInstance } from 'types/api/token';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
@@ -18,11 +18,12 @@ import TokenInstanceTransfersCount from './details/TokenInstanceTransfersCount';
 
 interface Props {
   data?: TokenInstance;
+  token?: TokenInfo;
   isLoading?: boolean;
   scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
-const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {
+const TokenInstanceDetails = ({ data, token, scrollRef, isLoading }: Props) => {
   const handleCounterItemClick = React.useCallback(() => {
     window.setTimeout(() => {
       // cannot do scroll instantly, have to wait a little
@@ -30,7 +31,7 @@ const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {
     }, 500);
   }, [ scrollRef ]);
 
-  if (!data) {
+  if (!data || !token) {
     return null;
   }
 
@@ -56,7 +57,7 @@ const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {
               />
             </DetailsInfoItem>
           ) }
-          <TokenInstanceCreatorAddress hash={ isLoading ? '' : data.token.address }/>
+          <TokenInstanceCreatorAddress hash={ isLoading ? '' : token.address }/>
           <DetailsInfoItem
             title="Token ID"
             hint="This token instance unique token ID"
@@ -69,8 +70,8 @@ const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {
               <CopyToClipboard text={ data.id } isLoading={ isLoading }/>
             </Flex>
           </DetailsInfoItem>
-          <TokenInstanceTransfersCount hash={ isLoading ? '' : data.token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/>
-          <TokenNftMarketplaces isLoading={ isLoading } hash={ data.token.address } id={ data.id }/>
+          <TokenInstanceTransfersCount hash={ isLoading ? '' : token.address } id={ isLoading ? '' : data.id } onClick={ handleCounterItemClick }/>
+          <TokenNftMarketplaces isLoading={ isLoading } hash={ token.address } id={ data.id }/>
         </Grid>
         <NftMedia
           url={ data.animation_url || data.image_url }