Merge pull request #547 from blockscout/ad-fix

ad fix

playwright/utils/insertAdPlaceholder.ts

@@ -6,7 +6,7 @@ export default async function insertAdPlaceholder(page: Page) {
     const adContainer = document.getElementById('adBanner');
     const adReplacer = document.createElement('div');
     adReplacer.style.width = '200px';
-    adReplacer.style.height = '100px';
+    adReplacer.style.height = '100%';
     adReplacer.style.background = '#f00';
     adContainer?.replaceChildren(adReplacer);
   });

ui/pages/Address.tsx

@@ -22,6 +22,7 @@ import AddressTxs from 'ui/address/AddressTxs';
 import ContractCode from 'ui/address/contract/ContractCode';
 import ContractRead from 'ui/address/contract/ContractRead';
 import ContractWrite from 'ui/address/contract/ContractWrite';
+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';
@@ -138,6 +139,7 @@ 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.pw.tsx

@@ -5,6 +5,7 @@ import { token as contract } from 'mocks/address/address';
 import { tokenInfo, tokenCounters } from 'mocks/tokens/tokenInfo';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
 
 import Token from './Token';
 
@@ -51,5 +52,7 @@ test('base view +@dark-mode', async({ mount, page }) => {
     { hooksConfig },
   );
 
+  await insertAdPlaceholder(page);
+
   await expect(component.locator('main')).toHaveScreenshot();
 });

ui/pages/Token.tsx

@@ -9,6 +9,7 @@ import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import isBrowser from 'lib/isBrowser';
+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';
@@ -113,7 +114,7 @@ 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/shared/ad/AdbutlerBanner.tsx

@@ -22,7 +22,7 @@ var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
 
 const AdbutlerBanner = ({ className }: { className?: string }) => {
   return (
-    <Flex className={ className } id="adBanner">
+    <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>
       <div id="ad-banner"></div>
       <Script id="ad-butler-1">{ scriptText1 }</Script>
       <Script id="ad-butler-2">{ scriptText2 }</Script>

ui/shared/ad/CoinzillaBanner.tsx

@@ -32,7 +32,7 @@ const CoinzillaBanner = ({ className }: { className?: string }) => {
   }, [ isInBrowser ]);
 
   return (
-    <Flex className={ className } id="adBanner">
+    <Flex className={ className } id="adBanner" h={{ base: '100px', lg: '90px' }}>
       <Script src="https://coinzillatag.com/lib/display.js"/>
       <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
     </Flex>

ui/tx/details/TxDetailsSkeleton.tsx

@@ -15,13 +15,14 @@ const TxDetailsSkeleton = () => {
   );
 
   return (
-    <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
+    <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px" pt={{ base: 1, lg: 2 }}>
       <DetailsSkeletonRow/>
       <DetailsSkeletonRow w="20%"/>
       <DetailsSkeletonRow w="50%"/>
       <DetailsSkeletonRow/>
       <DetailsSkeletonRow w="70%"/>
       <DetailsSkeletonRow w="70%"/>
+      <GridItem h={{ base: '82px', lg: '38px' }}/>
       { sectionGap }
       <DetailsSkeletonRow w="40%"/>
       <DetailsSkeletonRow w="40%"/>