sponsored item

ui/address/AddressDetails.tsx

-import { Box, Flex, Text, Icon, Grid, GridItem } from '@chakra-ui/react';
+import { Box, Flex, Text, Icon, Grid } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { route } from 'nextjs-routes';
@@ -10,14 +10,13 @@ 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';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -34,7 +33,6 @@ interface Props {
 
 const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
   const router = useRouter();
-  const isMobile = useIsMobile();
 
   const addressHash = getQueryParamString(router.query.hash);
 
@@ -196,20 +194,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
             </LinkInternal>
           </DetailsInfoItem>
         ) }
-        { isMobile ?
-          (
-            <GridItem mt={ 5 }>
-              <AdBanner justifyContent="center"/>
-            </GridItem>
-          ) :
-          (
-            <DetailsInfoItem
-              title="Sponsored"
-              hint="Sponsored banner advertisement"
-            >
-              <AdBanner/>
-            </DetailsInfoItem>
-          ) }
+        <DetailsSponsoredItem/>
       </Grid>
     </Box>
   );

ui/shared/DetailsSponsoredItem.tsx

+import { GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import AdBanner from 'ui/shared/ad/AdBanner';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+const DetailsSponsoredItem = () => {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <GridItem mt={ 5 }>
+        <AdBanner justifyContent="center"/>
+      </GridItem>
+    );
+  }
+
+  return (
+    <DetailsInfoItem
+      title="Sponsored"
+      hint="Sponsored banner advertisement"
+    >
+      <AdBanner/>
+    </DetailsInfoItem>
+  );
+};
+
+export default React.memo(DetailsSponsoredItem);

ui/token/TokenDetails.tsx

-import { Grid, GridItem, Link, Skeleton } from '@chakra-ui/react';
+import { Grid, Link, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
@@ -8,10 +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 DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 interface Props {
@@ -20,7 +19,6 @@ interface Props {
 
 const TokenDetails = ({ tokenQuery }: Props) => {
   const router = useRouter();
-  const isMobile = useIsMobile();
 
   const tokenCountersQuery = useApiQuery('token_counters', {
     pathParams: { hash: router.query.hash?.toString() },
@@ -138,20 +136,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           { decimals }
         </DetailsInfoItem>
       ) }
-      { isMobile ?
-        (
-          <GridItem mt={ 5 }>
-            <AdBanner justifyContent="center"/>
-          </GridItem>
-        ) :
-        (
-          <DetailsInfoItem
-            title="Sponsored"
-            hint="Sponsored banner advertisement"
-          >
-            <AdBanner/>
-          </DetailsInfoItem>
-        ) }
+      <DetailsSponsoredItem/>
     </Grid>
   );
 };

ui/tokenInstance/TokenInstanceContent.tsx

@@ -8,7 +8,6 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-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';
@@ -89,8 +88,6 @@ const TokenInstanceContent = () => {
 
       <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>
 

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -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 DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
@@ -65,6 +66,7 @@ const TokenInstanceDetails = ({ data, scrollRef }: Props) => {
           </Flex>
         </DetailsInfoItem>
         <TokenInstanceTransfersCount hash={ data.token.address } id={ data.id } onClick={ handleCounterItemClick }/>
+        <DetailsSponsoredItem/>
       </Grid>
       <NftMedia
         imageUrl={ data.image_url }

ui/tx/TxDetails.tsx

@@ -22,9 +22,7 @@ import errorIcon from 'icons/status/error.svg';
 import successIcon from 'icons/status/success.svg';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
-import AdBanner from 'ui/shared/ad/AdBanner';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -32,6 +30,7 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 // import PrevNext from 'ui/shared/PrevNext';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
@@ -49,8 +48,6 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 const TxDetails = () => {
   const { data, isLoading, isError, socketStatus, error } = useFetchTxInfo();
 
-  const isMobile = useIsMobile();
-
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
   const handleCutClick = React.useCallback(() => {
@@ -177,20 +174,7 @@ const TxDetails = () => {
           <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
         </DetailsInfoItem>
       ) }
-      { isMobile ?
-        (
-          <GridItem>
-            <AdBanner justifyContent="center"/>
-          </GridItem>
-        ) :
-        (
-          <DetailsInfoItem
-            title="Sponsored"
-            hint="Sponsored banner advertisement"
-          >
-            <AdBanner/>
-          </DetailsInfoItem>
-        ) }
+      <DetailsSponsoredItem/>
 
       { divider }