Merge pull request #814 from blockscout/instance-info

address tokens: token instance info

mocks/address/tokens.ts

 import type { AddressTokenBalance } from 'types/api/address';
 
 import * as tokens from 'mocks/tokens/tokenInfo';
+import * as tokenInstance from 'mocks/tokens/tokenInstance';
 
 export const erc20a: AddressTokenBalance = {
   token: tokens.tokenInfoERC20a,
@@ -59,24 +60,28 @@ export const erc721LongSymbol: AddressTokenBalance = {
 export const erc1155a: AddressTokenBalance = {
   token: tokens.tokenInfoERC1155a,
   token_id: '42',
+  token_instance: tokenInstance.base,
   value: '24',
 };
 
 export const erc1155b: AddressTokenBalance = {
   token: tokens.tokenInfoERC1155b,
   token_id: '100010000000001',
+  token_instance: tokenInstance.base,
   value: '11',
 };
 
 export const erc1155withoutName: AddressTokenBalance = {
   token: tokens.tokenInfoERC1155WithoutName,
   token_id: '64532245',
+  token_instance: tokenInstance.base,
   value: '42',
 };
 
 export const erc1155LongId: AddressTokenBalance = {
   token: tokens.tokenInfoERC1155b,
   token_id: '483200961027732618117991942553110860267520',
+  token_instance: tokenInstance.base,
   value: '42',
 };
 

types/api/address.ts

@@ -3,7 +3,7 @@ import type { Transaction } from 'types/api/transaction';
 import type { AddressTag, WatchlistName } from './addressParams';
 import type { Block } from './block';
 import type { InternalTransaction } from './internalTransaction';
-import type { TokenInfo, TokenType } from './token';
+import type { TokenInfo, TokenInstance, TokenType } from './token';
 import type { TokenTransfer, TokenTransferPagination } from './tokenTransfer';
 
 export interface Address {
@@ -48,6 +48,7 @@ export interface AddressTokenBalance {
   token: TokenInfo;
   token_id: string | null;
   value: string;
+  token_instance?: TokenInstance;
 }
 
 export interface AddressTokensResponse {

ui/address/tokens/NFTItem.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
 
-import NftImage from 'ui/shared/nft/NftImage';
+import NftMedia from 'ui/shared/nft/NftMedia';
 import TokenLogo from 'ui/shared/TokenLogo';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 type Props = AddressTokenBalance;
 
-const NFTItem = ({ token, token_id: tokenId }: Props) => {
+const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance }: Props) => {
   const tokenLink = route({ pathname: '/token/[hash]', query: { hash: token.address } });
 
   return (
@@ -26,11 +26,10 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
       lineHeight="20px"
     >
       <LinkOverlay href={ tokenLink }>
-        <NftImage
+        <NftMedia
           mb="18px"
-          url={ null }
-          fallbackPadding="30px"
-          cursor="pointer"
+          imageUrl={ tokenInstance?.image_url || null }
+          animationUrl={ tokenInstance?.animation_url || null }
         />
       </LinkOverlay>
       { tokenId && (