Merge pull request #948 from blockscout/ad-changes

change ad config

.env.template

@@ -43,11 +43,10 @@ NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_PLA
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND__
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER__
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME__
-NEXT_PUBLIC_AD_DOMAIN_WITH_AD=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_DOMAIN_WITH_AD__
-NEXT_PUBLIC_AD_ADBUTLER_ON=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_ON__
 NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP__
 NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE__
-NEXT_PUBLIC_AD_SLISE_ON=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_SLISE_ON__
+NEXT_PUBLIC_AD_BANNER_PROVIDER=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_BANNER_PROVIDER__
+NEXT_PUBLIC_AD_TEXT_PROVIDER=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_TEXT_PROVIDER__
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=__PLACEHOLDER_FOR_NEXT_PUBLIC_GRAPHIQL_TRANSACTION__
 NEXT_PUBLIC_WEB3_DEFAULT_WALLET=__PLACEHOLDER_FOR_NEXT_PUBLIC_WEB3_DEFAULT_WALLET__
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=__PLACEHOLDER_FOR_NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET__

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
 import type { AdButlerConfig } from 'types/client/adButlerConfig';
+import type { AdBannerProviders, AdTextProviders } from 'types/client/adProviders';
 import type { NavItemExternal } from 'types/client/navigation-items';
 import type { WalletType } from 'types/client/wallets';
 import type { NetworkExplorer } from 'types/networks';
@@ -25,6 +26,20 @@ const getWeb3DefaultWallet = (): WalletType => {
   return (envValue && SUPPORTED_WALLETS.includes(envValue) ? envValue : 'metamask') as WalletType;
 };
 
+const getAdBannerProvider = (): AdBannerProviders => {
+  const envValue = getEnvValue(process.env.NEXT_PUBLIC_AD_BANNER_PROVIDER);
+  const SUPPORTED_AD_BANNER_PROVIDERS: Array<AdBannerProviders> = [ 'slise', 'adbutler', 'coinzilla', 'none' ];
+
+  return (envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'slise') as AdBannerProviders;
+};
+
+const getAdTextProvider = (): AdTextProviders => {
+  const envValue = getEnvValue(process.env.NEXT_PUBLIC_AD_TEXT_PROVIDER);
+  const SUPPORTED_AD_BANNER_PROVIDERS: Array<AdTextProviders> = [ 'coinzilla', 'none' ];
+
+  return (envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'slise') as AdTextProviders;
+};
+
 const env = process.env.NODE_ENV;
 const isDev = env === 'development';
 
@@ -113,11 +128,10 @@ const config = Object.freeze({
   authUrl,
   logoutUrl,
   ad: {
-    domainWithAd: getEnvValue(process.env.NEXT_PUBLIC_AD_DOMAIN_WITH_AD) || 'blockscout.com',
-    adButlerOn: getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_ON) === 'true',
+    adBannerProvider: getAdBannerProvider(),
+    adTextProvider: getAdTextProvider(),
     adButlerConfigDesktop: parseEnvJson<AdButlerConfig>(getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP)),
     adButlerConfigMobile: parseEnvJson<AdButlerConfig>(getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE)),
-    sliseOn: getEnvValue(process.env.NEXT_PUBLIC_AD_SLISE_ON) === 'true',
   },
   web3: {
     defaultWallet: getWeb3DefaultWallet(),

configs/envs/.env.pw

@@ -23,6 +23,7 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://localhost:1111
 NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_IS_L2_NETWORK=false
+NEXT_PUBLIC_AD_BANNER_PROVIDER=coinzilla
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=Blockscout

deploy/values/review/values.yaml.gotmpl

@@ -133,5 +133,3 @@ frontend:
       _default: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID:
       _default: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    NEXT_PUBLIC_AD_SLISE_ON:
-      _default: 'true'

docs/ENVS.md

@@ -44,11 +44,10 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND | `string` | Background css value for hero plate on the homepage (escape "#" symbol if you use HEX color codes) | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%)` \| `no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` |
-| NEXT_PUBLIC_AD_DOMAIN_WITH_AD | `string` | The domain on which we display ads | - | - | `blockscout.com` |
-| NEXT_PUBLIC_AD_ADBUTLER_ON | `boolean` | Set to true to show Adbutler banner instead of Coinzilla banner | - | `false` | `true` |
 | NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP | `{ id: string; width: string; height: string }` | Placement config for desktop Adbutler banner | - | - | `{'id':'123456','width':'728','height':'90'}` |
 | NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE | `{ id: string; width: number; height: number }` | Placement config for mobile Adbutler banner | - | - | `{'id':'654321','width':'300','height':'100'}` |
-| NEXT_PUBLIC_AD_SLISE_ON | `boolean` | Set to true to show Slise banner instead of Coinzilla banner | - | `false` | `true` |
+| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \| `none` | Banner ad provider. Set to `none` to disable ad banners  | - | `slise` | `coinzilla` |
+| NEXT_PUBLIC_AD_TEXT_PROVIDER | `coinzilla` \| `none` | Text ad provider. Set to `none` to disable text ad | - | `coinzilla` | `none` |
 | NEXT_PUBLIC_API_SPEC_URL | `string` | Spec to be displayed on api-docs page | - | - | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` |
 | NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` | Txn hash for default query at GraphQl playground page | - | - | `0x69e3923eef50eada197c3336d546936d0c994211492c9f947a24c02827568f9f` |
 | NEXT_PUBLIC_WEB3_DEFAULT_WALLET | `metamask` \| `coinbase`| Type of Web3 wallet which will be used by default to add tokens or chains to | - | `metamask` | `coinbase` |

lib/csp/policies/ad.ts

@@ -2,14 +2,9 @@ import Base64 from 'crypto-js/enc-base64';
 import sha256 from 'crypto-js/sha256';
 import type CspDev from 'csp-dev';
 
-import isSelfHosted from 'lib/isSelfHosted';
 import { connectAdbutler, placeAd } from 'ui/shared/ad/adbutlerScript';
 
 export function ad(): CspDev.DirectiveDescriptor {
-  if (!isSelfHosted()) {
-    return {};
-  }
-
   return {
     'connect-src': [
       'coinzilla.com',

lib/isSelfHosted.ts

-import appConfig from 'configs/app/config';
-
-export default function isSelfHosted() {
-  return appConfig.host?.endsWith(appConfig.ad.domainWithAd) || appConfig.host === 'localhost';
-}

types/client/adProviders.ts

+export type AdBannerProviders = 'slise' | 'adbutler' | 'coinzilla' | 'none';
+
+export type AdTextProviders = 'coinzilla' | 'none';

ui/shared/DetailsSponsoredItem.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import isSelfHosted from 'lib/isSelfHosted';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
@@ -15,7 +14,7 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
   const isMobile = useIsMobile();
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED);
 
-  if (!isSelfHosted() || hasAdblockCookie) {
+  if (hasAdblockCookie) {
     return null;
   }
 

ui/shared/ad/AdBanner.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import appConfig from 'configs/app/config';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
-import isSelfHosted from 'lib/isSelfHosted';
 
 import AdbutlerBanner from './AdbutlerBanner';
 import CoinzillaBanner from './CoinzillaBanner';
@@ -13,20 +12,19 @@ import SliseBanner from './SliseBanner';
 const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: boolean }) => {
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
 
-  if (!isSelfHosted() || hasAdblockCookie) {
+  if (appConfig.ad.adBannerProvider === 'none' || hasAdblockCookie) {
     return null;
   }
 
   const content = (() => {
-    if (appConfig.ad.adButlerOn) {
-      return <AdbutlerBanner/>;
+    switch (appConfig.ad.adBannerProvider) {
+      case 'adbutler':
+        return <AdbutlerBanner/>;
+      case 'coinzilla':
+        return <CoinzillaBanner/>;
+      case 'slise':
+        return <SliseBanner/>;
     }
-
-    if (appConfig.ad.sliseOn) {
-      return <SliseBanner/>;
-    }
-
-    return <CoinzillaBanner/>;
   })();
 
   return (
@@ -34,7 +32,7 @@ const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: bo
       className={ className }
       isLoaded={ !isLoading }
       borderRadius="none"
-      maxW={ appConfig.ad.adButlerOn ? appConfig.ad.adButlerConfigDesktop?.width : '728px' }
+      maxW={ appConfig.ad.adBannerProvider === 'adbutler' ? appConfig.ad.adButlerConfigDesktop?.width : '728px' }
       w="100%"
     >
       { content }

ui/shared/ad/CoinzillaTextAd.tsx

 import { Box, Image, Link, Text, chakra, Skeleton } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
-import { useAppContext } from 'lib/contexts/app';
-import * as cookies from 'lib/cookies';
 import { ndash } from 'lib/html-entities';
 import isBrowser from 'lib/isBrowser';
 
@@ -31,10 +29,8 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
   const [ adData, setAdData ] = React.useState<AdData | null>(null);
   const [ isLoading, setIsLoading ] = React.useState(true);
 
-  const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
-
   useEffect(() => {
-    if (!hasAdblockCookie && isBrowser()) {
+    if (isBrowser()) {
       fetch('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242')
         .then(res => res.status === 200 ? res.json() : null)
         .then((_data) => {
@@ -49,11 +45,7 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
           setIsLoading(false);
         });
     }
-  }, [ hasAdblockCookie ]);
-
-  if (hasAdblockCookie) {
-    return null;
-  }
+  }, [ ]);
 
   if (isLoading) {
     return (

ui/shared/ad/TextAd.tsx

 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import isSelfHosted from 'lib/isSelfHosted';
+import appConfig from 'configs/app/config';
+import { useAppContext } from 'lib/contexts/app';
+import * as cookies from 'lib/cookies';
 
 import CoinzillaTextAd from './CoinzillaTextAd';
 
 const TextAd = ({ className }: {className?: string}) => {
-  if (!isSelfHosted()) {
+  const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
+
+  if (appConfig.ad.adTextProvider === 'none' || hasAdblockCookie) {
     return null;
   }
+
   return <CoinzillaTextAd className={ className }/>;
 };