loading and error state

ui/pages/TokenInstance.tsx

-import { Skeleton, Box, Flex, SkeletonCircle, Tag } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import { useAppContext } from 'lib/appContext';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import AdBanner from 'ui/shared/ad/AdBanner';
-import TextAd from 'ui/shared/ad/TextAd';
-import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
-import PageTitle from 'ui/shared/Page/PageTitle';
-import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
-import TokenLogo from 'ui/shared/TokenLogo';
-import TokenInstanceDetails from 'ui/tokenInstance/TokenInstanceDetails';
+import TokenInstanceContent from 'ui/tokenInstance/TokenInstanceContent';
 
 export type TokenTabs = 'token_transfers' | 'holders'
 
 const TokenInstance = () => {
-  const router = useRouter();
-  const isMobile = useIsMobile();
-  const appProps = useAppContext();
-
-  const hash = router.query.hash?.toString();
-  const id = router.query.id?.toString();
-
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
-
-  const scrollRef = React.useRef<HTMLDivElement>(null);
-
-  const tokenInstanceQuery = useApiQuery('token_instance', {
-    pathParams: { hash, id },
-    queryOptions: { enabled: Boolean(hash && id) },
-  });
-
-  const tabs: Array<RoutedTab> = [
-    { id: 'token_transfers', title: 'Token transfers', component: <span>Token transfers</span> },
-    { id: 'holders', title: 'Holders', component: <span>Holders</span> },
-    { id: 'metadata', title: 'Metadata', component: <span>Metadata</span> },
-  ];
-
-  const content = (() => {
-    if (tokenInstanceQuery.isError) {
-      return <DataFetchAlert/>;
-    }
-
-    if (tokenInstanceQuery.isLoading) {
-      return (
-        <Flex alignItems="center" mb={ 6 }>
-          <SkeletonCircle w={ 6 } h={ 6 } mr={ 3 }/>
-          <Skeleton w="500px" h={ 10 }/>
-        </Flex>
-      );
-    }
-
-    const tokenLogo = <TokenLogo hash={ tokenInstanceQuery.data.token.address } name={ tokenInstanceQuery.data.token.name } boxSize={ 6 }/>;
-    const tokenTag = <Tag>{ tokenInstanceQuery.data.token.type }</Tag>;
-    const address = {
-      hash: hash || '',
-      is_contract: true,
-      implementation_name: null,
-      watchlist_names: [],
-    };
-
-    return (
-      <>
-        <TextAd mb={ 6 }/>
-        <PageTitle
-          text={ `${ tokenInstanceQuery.data.token.name } #${ tokenInstanceQuery.data.id }` }
-          backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-          backLinkLabel="Back to token page"
-          additionalsLeft={ tokenLogo }
-          additionalsRight={ tokenTag }
-        />
-
-        <AddressHeadingInfo address={ address } token={ tokenInstanceQuery.data.token }/>
-
-        <TokenInstanceDetails data={ tokenInstanceQuery.data } scrollRef={ scrollRef }/>
-
-        <AdBanner mt={{ base: 6, lg: 8 }} justifyContent="center"/>
-
-        { /* should stay before tabs to scroll up with pagination */ }
-        <Box ref={ scrollRef }></Box>
-
-        <RoutedTabs
-          tabs={ tabs }
-          tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
-        />
-      </>
-    );
-  })();
 
   return (
-    <Page>{ content }</Page>
+    <Page>
+      <TokenInstanceContent/>
+    </Page>
   );
 };
 

ui/shared/NftImage.tsx

@@ -33,6 +33,11 @@ const NftImage = ({ url, className, fallbackPadding }: Props) => {
       bgColor={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') }
       overflow="hidden"
       borderRadius="md"
+      sx={{
+        '&>img': {
+          objectFit: 'contain',
+        },
+      }}
     >
       <Image
         w="100%"

ui/shared/Page/PageTitle.tsx

@@ -21,6 +21,7 @@ const PageTitle = ({ text, additionalsLeft, additionalsRight, withTextAd, backLi
       as="h1"
       size="lg"
       flex="none"
+      wordBreak="break-all"
     >
       { text }
     </Heading>

ui/shared/skeletons/DetailsSkeletonRow.tsx

 import { GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
 import React from 'react';
 
-const DetailsSkeletonRow = ({ w = '100%' }: { w?: string }) => {
+const DetailsSkeletonRow = ({ w = '100%', maxW }: { w?: string; maxW?: string }) => {
   return (
     <>
       <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
@@ -9,7 +9,7 @@ const DetailsSkeletonRow = ({ w = '100%' }: { w?: string }) => {
         <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
       </GridItem>
       <GridItem pl={{ base: 7, lg: 0 }}>
-        <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }}/>
+        <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }} maxW={ maxW }/>
       </GridItem>
     </>
   );

ui/tokenInstance/TokenInstanceContent.tsx

+import { Box, Tag } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/appContext';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AdBanner from 'ui/shared/ad/AdBanner';
+import TextAd from 'ui/shared/ad/TextAd';
+import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
+import TokenLogo from 'ui/shared/TokenLogo';
+import TokenInstanceDetails from 'ui/tokenInstance/TokenInstanceDetails';
+import TokenInstanceSkeleton from 'ui/tokenInstance/TokenInstanceSkeleton';
+
+export type TokenTabs = 'token_transfers' | 'holders'
+
+const TokenInstanceContent = () => {
+  const router = useRouter();
+  const isMobile = useIsMobile();
+  const appProps = useAppContext();
+
+  const hash = router.query.hash?.toString();
+  const id = router.query.id?.toString();
+
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
+
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+
+  const tokenInstanceQuery = useApiQuery('token_instance', {
+    pathParams: { hash, id },
+    queryOptions: { enabled: Boolean(hash && id) },
+  });
+
+  const tabs: Array<RoutedTab> = [
+    { id: 'token_transfers', title: 'Token transfers', component: <span>Token transfers</span> },
+    { id: 'holders', title: 'Holders', component: <span>Holders</span> },
+    { id: 'metadata', title: 'Metadata', component: <span>Metadata</span> },
+  ];
+
+  if (tokenInstanceQuery.isError) {
+    throw Error('Token instance fetch failed', { cause: tokenInstanceQuery.error });
+  }
+
+  if (tokenInstanceQuery.isLoading) {
+    return <TokenInstanceSkeleton/>;
+  }
+
+  const tokenLogo = <TokenLogo hash={ tokenInstanceQuery.data.token.address } name={ tokenInstanceQuery.data.token.name } boxSize={ 6 }/>;
+  const tokenTag = <Tag>{ tokenInstanceQuery.data.token.type }</Tag>;
+  const address = {
+    hash: hash || '',
+    is_contract: true,
+    implementation_name: null,
+    watchlist_names: [],
+  };
+
+  return (
+    <>
+      <TextAd mb={ 6 }/>
+      <PageTitle
+        text={ `${ tokenInstanceQuery.data.token.name } #${ tokenInstanceQuery.data.id }` }
+        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
+        backLinkLabel="Back to token page"
+        additionalsLeft={ tokenLogo }
+        additionalsRight={ tokenTag }
+      />
+
+      <AddressHeadingInfo address={ address } token={ tokenInstanceQuery.data.token }/>
+
+      <TokenInstanceDetails data={ tokenInstanceQuery.data } scrollRef={ scrollRef }/>
+
+      <AdBanner mt={{ base: 6, lg: 8 }} justifyContent="center"/>
+
+      { /* should stay before tabs to scroll up with pagination */ }
+      <Box ref={ scrollRef }></Box>
+
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
+      />
+    </>
+  );
+};
+
+export default React.memo(TokenInstanceContent);

ui/tokenInstance/TokenInstanceDetails.tsx

-import { Flex, Grid } from '@chakra-ui/react';
+import { Box, 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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import NftImage from 'ui/shared/NftImage';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
@@ -28,7 +29,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
   }, [ scrollRef ]);
 
   return (
-    <Flex alignItems="flex-start" mt={ 8 } flexDir={{ base: 'column', lg: 'row' }} columnGap={ 6 } rowGap={ 6 }>
+    <Flex alignItems="flex-start" mt={ 8 } flexDir={{ base: 'column-reverse', lg: 'row' }} columnGap={ 6 } rowGap={ 6 }>
       <Grid
         flexGrow={ 1 }
         columnGap={ 8 }
@@ -56,8 +57,12 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
           title="Token ID"
           hint="This token instance unique token ID."
         >
-          { data.id }
-          <CopyToClipboard text={ data.id } ml={ 1 }/>
+          <Flex alignItems="center" overflow="hidden">
+            <Box overflow="hidden" display="inline-block" w="100%">
+              <HashStringShortenDynamic hash={ data.id }/>
+            </Box>
+            <CopyToClipboard text={ data.id } ml={ 1 }/>
+          </Flex>
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Quantity"
@@ -67,7 +72,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
         </DetailsInfoItem>
         <TokenInstanceTransfersCount hash={ data.token.address } id={ data.id } onClick={ handleCounterItemClick }/>
       </Grid>
-      <NftImage url={ data.image_url } w="250px" flexShrink={ 0 }/>
+      <NftImage url={ data.image_url } w="250px" flexShrink={ 0 } alignSelf={{ base: 'center', lg: 'flex-start' }}/>
     </Flex>
   );
 };

ui/tokenInstance/TokenInstanceSkeleton.tsx

+import { Box, Flex, Grid, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import React from 'react';
+
+import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
+import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
+
+const TokenInstanceSkeleton = () => {
+  return (
+    <Box>
+      <Skeleton h={ 10 } maxW="400px" w="100%" mb={ 6 }/>
+      <Flex align="center">
+        <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>
+        <Skeleton h={ 6 } w={{ base: '100px', lg: '420px' }} ml={ 2 } borderRadius="full"/>
+        <Skeleton h={ 8 } w="36px" ml={ 3 } flexShrink={ 0 }/>
+        <Skeleton h={ 8 } w="36px" ml={ 3 } flexShrink={ 0 }/>
+      </Flex>
+      <Flex columnGap={ 6 } rowGap={ 6 } alignItems="flex-start" flexDir={{ base: 'column-reverse', lg: 'row' }} mt={ 8 }>
+        <Grid
+          columnGap={ 8 }
+          rowGap={{ base: 5, lg: 7 }}
+          templateColumns={{ base: '1fr', lg: '200px 1fr' }}
+          flexGrow={ 1 }
+          w="100%"
+        >
+          <DetailsSkeletonRow w="30%"/>
+          <DetailsSkeletonRow w="100%" maxW="450px"/>
+          <DetailsSkeletonRow w="100%" maxW="450px"/>
+          <DetailsSkeletonRow w="10%"/>
+          <DetailsSkeletonRow w="10%"/>
+          <DetailsSkeletonRow w="10%"/>
+        </Grid>
+        <Skeleton h="250px" w="250px" flexShrink={ 0 } alignSelf="center"/>
+      </Flex>
+      <SkeletonTabs/>
+    </Box>
+  );
+};
+
+export default TokenInstanceSkeleton;