NftImage

ui/address/tokens/NFTItem.tsx

-import { Center, Flex, Icon, Link, Text, LinkBox, LinkOverlay, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Link, Text, LinkBox, LinkOverlay, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
 
-import NFTIcon from 'icons/nft_shield.svg';
 import link from 'lib/link/link';
+import NftImage from 'ui/shared/NftImage';
 import TokenLogo from 'ui/shared/TokenLogo';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
@@ -16,7 +16,6 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
   return (
     <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"
@@ -27,15 +26,11 @@ const NFTItem = ({ token, token_id: tokenId }: Props) => {
       lineHeight="20px"
     >
       <LinkOverlay href={ tokenLink }/>
-      <Center
-        w={{ base: '100%', lg: '182px' }}
-        h={{ base: 'calc((100vw - 36px)/2 - 12px)', lg: '182px' }}
-        bg={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') }
+      <NftImage
         mb="18px"
-        borderRadius="12px"
-      >
-        <Icon as={ NFTIcon } boxSize="112px" color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }/>
-      </Center>
+        url={ null }
+        fallbackPadding="30px"
+      />
       { tokenId && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>

ui/pages/TokenInstance.tsx

@@ -27,7 +27,7 @@ const TokenInstance = () => {
   const hash = router.query.hash?.toString();
   const id = router.query.id?.toString();
 
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`);
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 

ui/shared/NftImage.tsx

+import { AspectRatio, chakra, Icon, Image, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import nftIcon from 'icons/nft_shield.svg';
+
+interface Props {
+  url: string | null;
+  className?: string;
+  fallbackPadding?: string;
+}
+
+interface FallbackProps {
+  className?: string;
+  padding?: string;
+}
+
+const Fallback = ({ className, padding }: FallbackProps) => {
+  return (
+    <Icon
+      className={ className }
+      as={ nftIcon }
+      p={ padding ?? '50px' }
+      color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }
+    />
+  );
+};
+
+const NftImage = ({ url, className, fallbackPadding }: Props) => {
+  return (
+    <AspectRatio
+      className={ className }
+      ratio={ 1 / 1 }
+      bgColor={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') }
+      overflow="hidden"
+      borderRadius="md"
+    >
+      <Image
+        w="100%"
+        h="100%"
+        objectFit="contain"
+        src={ url || undefined }
+        alt="Token instance image"
+        fallback={ <Fallback className={ className } padding={ fallbackPadding }/> }
+      />
+    </AspectRatio>
+  );
+};
+
+export default chakra(NftImage);

ui/tokenInstance/TokenInstanceDetails.tsx

-import { Box, Flex, Grid } from '@chakra-ui/react';
+import { Flex, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/tokens';
@@ -8,6 +8,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import NftImage from 'ui/shared/NftImage';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
 import TokenInstanceCreatorAddress from './details/TokenInstanceCreatorAddress';
@@ -66,7 +67,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
         </DetailsInfoItem>
         <TokenInstanceTransfersCount hash={ data.token.address } id={ data.id } onClick={ handleCounterItemClick }/>
       </Grid>
-      <Box boxSize="250px" bgColor="lightpink" flexShrink={ 0 }/>
+      <NftImage url={ data.image_url } w="250px" flexShrink={ 0 }/>
     </Flex>
   );
 };