Merge pull request #1967 from blockscout/fe-1799

Add Ad banner to 404 page

ui/shared/AppError/AppError.pw.tsx

@@ -5,10 +5,13 @@ import * as pwConfig from 'playwright/utils/config';
 
 import AppError from './AppError';
 
-test('status code 404', async({ render }) => {
+test('status code 404', async({ render, page }) => {
   const error = { message: 'Not found', cause: { status: 404 } } as Error;
   const component = await render(<AppError error={ error }/>);
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });
 
 test('status code 422', async({ render }) => {
@@ -44,7 +47,6 @@ test('too many requests +@mobile', async({ render, page }) => {
     cause: { status: 429 },
   } as Error;
   const component = await render(<AppError error={ error }/>);
-  await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
   await expect(component).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
     maskColor: pwConfig.maskColor,

ui/shared/AppError/AppError.tsx

@@ -3,10 +3,12 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import getErrorCause from 'lib/errors/getErrorCause';
 import getErrorCauseStatusCode from 'lib/errors/getErrorCauseStatusCode';
 import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
 import getResourceErrorPayload from 'lib/errors/getResourceErrorPayload';
+import AdBannerContent from 'ui/shared/ad/AdBannerContent';
 
 import AppErrorIcon from './AppErrorIcon';
 import AppErrorTitle from './AppErrorTitle';
@@ -14,6 +16,8 @@ import AppErrorBlockConsensus from './custom/AppErrorBlockConsensus';
 import AppErrorTooManyRequests from './custom/AppErrorTooManyRequests';
 import AppErrorTxNotFound from './custom/AppErrorTxNotFound';
 
+const adBannerConfig = config.features.adsBanner;
+
 interface Props {
   className?: string;
   error: Error | undefined;
@@ -73,6 +77,8 @@ const AppError = ({ error, className }: Props) => {
       default: {
         const { title, text } = ERROR_TEXTS[String(statusCode)] ?? ERROR_TEXTS[500];
 
+        const adBannerProvider = adBannerConfig.isEnabled ? adBannerConfig.provider : null;
+
         return (
           <>
             <AppErrorIcon statusCode={ statusCode }/>
@@ -87,6 +93,7 @@ const AppError = ({ error, className }: Props) => {
             >
                 Back to home
             </Button>
+            { statusCode === 404 && adBannerProvider && <AdBannerContent mt={ 12 } provider={ adBannerProvider }/> }
           </>
         );
       }

ui/shared/ad/AdBanner.tsx

@@ -1,15 +1,11 @@
-import { chakra, Skeleton } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 
-import AdbutlerBanner from './AdbutlerBanner';
-import CoinzillaBanner from './CoinzillaBanner';
-import GetitBanner from './GetitBanner';
-import HypeBanner from './HypeBanner';
-import SliseBanner from './SliseBanner';
+import AdBannerContent from './AdBannerContent';
 
 const feature = config.features.adsBanner;
 
@@ -22,31 +18,12 @@ const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: bo
     return null;
   }
 
-  const content = (() => {
-    switch (provider) {
-      case 'adbutler':
-        return <AdbutlerBanner/>;
-      case 'coinzilla':
-        return <CoinzillaBanner/>;
-      case 'getit':
-        return <GetitBanner/>;
-      case 'hype':
-        return <HypeBanner/>;
-      case 'slise':
-        return <SliseBanner/>;
-    }
-  })();
-
   return (
-    <Skeleton
+    <AdBannerContent
       className={ className }
-      isLoaded={ !isLoading }
-      borderRadius="none"
-      maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
-      w="100%"
-    >
-      { content }
-    </Skeleton>
+      isLoading={ isLoading }
+      provider={ provider }
+    />
   );
 };
 

ui/shared/ad/AdBannerContent.tsx

@@ -0,0 +1,45 @@
+import { chakra, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AdBannerProviders } from 'types/client/adProviders';
+
+import config from 'configs/app';
+
+import AdbutlerBanner from './AdbutlerBanner';
+import CoinzillaBanner from './CoinzillaBanner';
+import GetitBanner from './GetitBanner';
+import HypeBanner from './HypeBanner';
+import SliseBanner from './SliseBanner';
+
+const feature = config.features.adsBanner;
+
+const AdBannerContent = ({ className, isLoading, provider }: { className?: string; isLoading?: boolean; provider: AdBannerProviders }) => {
+  const content = (() => {
+    switch (provider) {
+      case 'adbutler':
+        return <AdbutlerBanner/>;
+      case 'coinzilla':
+        return <CoinzillaBanner/>;
+      case 'getit':
+        return <GetitBanner/>;
+      case 'hype':
+        return <HypeBanner/>;
+      case 'slise':
+        return <SliseBanner/>;
+    }
+  })();
+
+  return (
+    <Skeleton
+      className={ className }
+      isLoaded={ !isLoading }
+      borderRadius="none"
+      maxW={ ('adButler' in feature && feature.adButler) ? feature.adButler.config.desktop.width : '728px' }
+      w="100%"
+    >
+      { content }
+    </Skeleton>
+  );
+};
+
+export default chakra(AdBannerContent);