move ad to sponsered group

ui/address/AddressDetails.tsx

-import { Box, Flex, Text, Icon, Grid } from '@chakra-ui/react';
+import { Box, Flex, Text, Icon, Grid, GridItem } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { route } from 'nextjs-routes';
@@ -10,8 +10,10 @@ import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
+import AdBanner from 'ui/shared/ad/AdBanner';
 import AddressLink from 'ui/shared/address/AddressLink';
 import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -32,6 +34,7 @@ interface Props {
 
 const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
   const router = useRouter();
+  const isMobile = useIsMobile();
 
   const addressHash = getQueryParamString(router.query.hash);
 
@@ -193,6 +196,20 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
             </LinkInternal>
           </DetailsInfoItem>
         ) }
+        { isMobile ?
+          (
+            <GridItem mt={ 5 }>
+              <AdBanner justifyContent="center"/>
+            </GridItem>
+          ) :
+          (
+            <DetailsInfoItem
+              title="Sponsored"
+              hint="Sponsored banner advertisement"
+            >
+              <AdBanner/>
+            </DetailsInfoItem>
+          ) }
       </Grid>
     </Box>
   );

ui/pages/Address.tsx

@@ -20,7 +20,6 @@ import AddressLogs from 'ui/address/AddressLogs';
 import AddressTokens from 'ui/address/AddressTokens';
 import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
-import AdBanner from 'ui/shared/ad/AdBanner';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -114,7 +113,6 @@ const AddressPageContent = () => {
         />
       ) }
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
-      <AdBanner mt={{ base: 6, lg: 8 }} justifyContent="center"/>
       { /* should stay before tabs to scroll up whith pagination */ }
       <Box ref={ tabsScrollRef }></Box>
       { addressQuery.isLoading ? <SkeletonTabs/> : content }

ui/pages/Token.tsx

@@ -13,7 +13,6 @@ import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import notEmpty from 'lib/notEmpty';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressContract from 'ui/address/AddressContract';
-import AdBanner from 'ui/shared/ad/AdBanner';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -164,7 +163,6 @@ const TokenPageContent = () => {
       ) }
       <TokenContractInfo tokenQuery={ tokenQuery }/>
       <TokenDetails tokenQuery={ tokenQuery }/>
-      <AdBanner mt={{ base: 6, lg: 8 }} justifyContent="center"/>
       { /* should stay before tabs to scroll up whith pagination */ }
       <Box ref={ scrollRef }></Box>
 

ui/token/TokenDetails.tsx

-import { Grid, Link, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Link, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
@@ -8,7 +8,9 @@ import type { TokenInfo } from 'types/api/token';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import type { TokenTabs } from 'ui/pages/Token';
+import AdBanner from 'ui/shared/ad/AdBanner';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
@@ -18,6 +20,7 @@ interface Props {
 
 const TokenDetails = ({ tokenQuery }: Props) => {
   const router = useRouter();
+  const isMobile = useIsMobile();
 
   const tokenCountersQuery = useApiQuery('token_counters', {
     pathParams: { hash: router.query.hash?.toString() },
@@ -135,6 +138,20 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           { decimals }
         </DetailsInfoItem>
       ) }
+      { isMobile ?
+        (
+          <GridItem mt={ 5 }>
+            <AdBanner justifyContent="center"/>
+          </GridItem>
+        ) :
+        (
+          <DetailsInfoItem
+            title="Sponsored"
+            hint="Sponsored banner advertisement"
+          >
+            <AdBanner/>
+          </DetailsInfoItem>
+        ) }
     </Grid>
   );
 };

ui/tx/TxDetails.tsx

@@ -179,9 +179,7 @@ const TxDetails = () => {
       ) }
       { isMobile ?
         (
-          <GridItem
-            colSpan={{ base: undefined, lg: 2 }}
-          >
+          <GridItem>
             <AdBanner justifyContent="center"/>
           </GridItem>
         ) :