fix mobile layout

stubs/token.ts

@@ -12,7 +12,7 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   holders: '16026',
   name: 'Stub Token (goerli)',
   symbol: 'STUB',
-  total_supply: '6000000000000000',
+  total_supply: '6000000000000000000',
   type: 'ERC-20',
 };
 
@@ -33,7 +33,7 @@ export const TOKEN_COUNTERS: TokenCounters = {
 
 export const TOKEN_HOLDER: TokenHolder = {
   address: ADDRESS_PARAMS,
-  value: '1021378038331138520668',
+  value: '1021378038331138520',
 };
 
 export const TOKEN_HOLDERS: TokenHolders = { items: Array(50).fill(TOKEN_HOLDER), next_page_params: null };

ui/pages/Token.tsx

@@ -52,12 +52,18 @@ const TokenPageContent = () => {
 
   const tokenQuery = useApiQuery('token', {
     pathParams: { hash: hashString },
-    queryOptions: { enabled: Boolean(router.query.hash), placeholderData: tokenStubs.TOKEN_INFO_ERC_20 },
+    queryOptions: {
+      enabled: Boolean(router.query.hash),
+      placeholderData: tokenStubs.TOKEN_INFO_ERC_20,
+    },
   });
 
   const contractQuery = useApiQuery('address', {
     pathParams: { hash: hashString },
-    queryOptions: { enabled: isSocketOpen && Boolean(router.query.hash), placeholderData: addressStubs.ADDRESS_INFO },
+    queryOptions: {
+      enabled: isSocketOpen && Boolean(router.query.hash),
+      placeholderData: addressStubs.ADDRESS_INFO,
+    },
   });
 
   React.useEffect(() => {
@@ -94,7 +100,7 @@ const TokenPageContent = () => {
   });
 
   useEffect(() => {
-    if (tokenQuery.data) {
+    if (tokenQuery.data && !tokenQuery.isPlaceholderData) {
       const tokenSymbol = tokenQuery.data.symbol ? ` (${ tokenQuery.data.symbol })` : '';
       const tokenName = `${ tokenQuery.data.name || 'Unnamed' }${ tokenSymbol }`;
       const title = document.getElementsByTagName('title')[0];
@@ -106,14 +112,16 @@ const TokenPageContent = () => {
         description.content = description.content.replace(tokenQuery.data.address, tokenName) || description.content;
       }
     }
-  }, [ tokenQuery.data ]);
+  }, [ tokenQuery.data, tokenQuery.isPlaceholderData ]);
+
+  const hasData = (tokenQuery.data && !tokenQuery.isPlaceholderData) && (contractQuery.data && !contractQuery.isPlaceholderData);
 
   const transfersQuery = useQueryWithPages({
     resourceName: 'token_transfers',
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && (!router.query.tab || router.query.tab === 'token_transfers') && tokenQuery.data && contractQuery.data),
+      enabled: Boolean(hashString && (!router.query.tab || router.query.tab === 'token_transfers') && hasData),
       placeholderData: tokenStubs.getTokenTransfersStub(tokenQuery.data?.type),
     },
   });
@@ -123,7 +131,7 @@ const TokenPageContent = () => {
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && router.query.tab === 'holders' && tokenQuery.data && contractQuery.data),
+      enabled: Boolean(router.query.hash && router.query.tab === 'holders' && hasData),
       placeholderData: tokenStubs.TOKEN_HOLDERS,
     },
   });
@@ -133,7 +141,7 @@ const TokenPageContent = () => {
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && router.query.tab === 'inventory' && tokenQuery.data && contractQuery.data),
+      enabled: Boolean(router.query.hash && router.query.tab === 'inventory' && hasData),
       placeholderData: tokenStubs.TOKEN_INSTANCES,
     },
   });

ui/token/TokenHolders/TokenHolders.tsx

+import { Box } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -38,21 +39,21 @@ const TokenHoldersContent = ({ holdersQuery, tokenQuery }: Props) => {
 
   const content = items && tokenQuery.data ? (
     <>
-      { !isMobile && (
+      <Box display={{ base: 'none', lg: 'block' }}>
         <TokenHoldersTable
           data={ items }
           token={ tokenQuery.data }
           top={ holdersQuery.isPaginationVisible ? 80 : 0 }
           isLoading={ tokenQuery.isPlaceholderData || holdersQuery.isPlaceholderData }
         />
-      ) }
-      { isMobile && (
+      </Box>
+      <Box display={{ base: 'block', lg: 'none' }}>
         <TokenHoldersList
           data={ items }
           token={ tokenQuery.data }
           isLoading={ tokenQuery.isPlaceholderData || holdersQuery.isPlaceholderData }
         />
-      ) }
+      </Box>
     </>
   ) : null;
 

ui/token/TokenTransfer/TokenTransfer.tsx

-import { Hide, Show } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -63,7 +63,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
   const content = data?.items ? (
 
     <>
-      <Hide below="lg" ssr={ false }>
+      <Box display={{ base: 'none', lg: 'block' }}>
         <TokenTransferTable
           data={ data?.items }
           top={ isPaginationVisible ? 80 : 0 }
@@ -74,8 +74,8 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
           token={ token }
           isLoading={ isPlaceholderData }
         />
-      </Hide>
-      <Show below="lg" ssr={ false }>
+      </Box>
+      <Box display={{ base: 'block', lg: 'none' }}>
         { pagination.page === 1 && (
           <SocketNewItemsNotice
             url={ window.location.href }
@@ -87,7 +87,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
           />
         ) }
         <TokenTransferList data={ data?.items } tokenId={ tokenId } isLoading={ isPlaceholderData }/>
-      </Show>
+      </Box>
     </>
   ) : null;