Merge pull request #1469 from blockscout/fe-1439

add hype provider

configs/app/features/adsText.ts

 import type { Feature } from './types';
-import { SUPPORTED_AD_BANNER_PROVIDERS } from 'types/client/adProviders';
+import { SUPPORTED_AD_TEXT_PROVIDERS } from 'types/client/adProviders';
 import type { AdTextProviders } from 'types/client/adProviders';
 
 import { getEnvValue } from '../utils';
 
 const provider: AdTextProviders = (() => {
   const envValue = getEnvValue('NEXT_PUBLIC_AD_TEXT_PROVIDER') as AdTextProviders;
-  return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'coinzilla';
+  return envValue && SUPPORTED_AD_TEXT_PROVIDERS.includes(envValue) ? envValue : 'coinzilla';
 })();
 
 const title = 'Text ads';

configs/envs/.env.eth

@@ -43,6 +43,7 @@ NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_AD_BANNER_PROVIDER=hype
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true

docs/ENVS.md

@@ -331,7 +331,7 @@ This feature is **enabled by default** with the `slise` ads provider. To switch
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \| `none` | Ads provider  | - | `slise` | `coinzilla` |
+| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \|  `hype` \| `none` | Ads provider  | - | `slise` | `coinzilla` |
 | 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'}` |
 

nextjs/csp/policies/ad.ts

@@ -3,30 +3,52 @@ import sha256 from 'crypto-js/sha256';
 import type CspDev from 'csp-dev';
 
 import { connectAdbutler, placeAd } from 'ui/shared/ad/adbutlerScript';
+import { hypeInit } from 'ui/shared/ad/hypeBannerScript';
 
 export function ad(): CspDev.DirectiveDescriptor {
   return {
     'connect-src': [
+      // coinzilla
       'coinzilla.com',
       '*.coinzilla.com',
       'https://request-global.czilladx.com',
+
+      // slise
       '*.slise.xyz',
+
+      // hype
+      'api.hypelab.com',
     ],
     'frame-src': [
+      // coinzilla
       'https://request-global.czilladx.com',
     ],
     'script-src': [
+      // coinzilla
       'coinzillatag.com',
+
+      // adbutler
       'servedbyadbutler.com',
       `'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`,
       `'sha256-${ Base64.stringify(sha256(placeAd ?? '')) }'`,
+
+      // slise
       '*.slise.xyz',
+
+      //hype
+      `'sha256-${ Base64.stringify(sha256(hypeInit ?? '')) }'`,
+      'https://api.hypelab.com',
+      'd1q98dzwj6s2rb.cloudfront.net',
     ],
     'img-src': [
-      'servedbyadbutler.com',
+      // coinzilla
       'cdn.coinzilla.io',
+
+      // adbutler
+      'servedbyadbutler.com',
     ],
     'font-src': [
+      // coinzilla
       'https://request-global.czilladx.com',
     ],
   };

package.json

@@ -37,6 +37,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@growthbook/growthbook-react": "0.21.0",
+    "@hypelab/sdk-react": "^1.0.0",
     "@metamask/post-message-stream": "^7.0.0",
     "@metamask/providers": "^10.2.1",
     "@monaco-editor/react": "^4.4.6",

types/client/adProviders.ts

 import type { ArrayElement } from 'types/utils';
 
-export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'none' ] as const;
+export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'hype', 'none' ] as const;
 export type AdBannerProviders = ArrayElement<typeof SUPPORTED_AD_BANNER_PROVIDERS>;
 
 export const SUPPORTED_AD_TEXT_PROVIDERS = [ 'coinzilla', 'none' ] as const;

ui/shared/ad/AdBanner.tsx

@@ -7,6 +7,7 @@ import * as cookies from 'lib/cookies';
 
 import AdbutlerBanner from './AdbutlerBanner';
 import CoinzillaBanner from './CoinzillaBanner';
+import HypeBanner from './HypeBanner';
 import SliseBanner from './SliseBanner';
 
 const feature = config.features.adsBanner;
@@ -24,6 +25,8 @@ const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: bo
         return <AdbutlerBanner/>;
       case 'coinzilla':
         return <CoinzillaBanner/>;
+      case 'hype':
+        return <HypeBanner/>;
       case 'slise':
         return <SliseBanner/>;
     }

ui/shared/ad/HypeBanner.tsx

+import { Flex, chakra } from '@chakra-ui/react';
+import { Banner, setWalletAddresses } from '@hypelab/sdk-react';
+import Script from 'next/script';
+import React from 'react';
+import { useAccount } from 'wagmi';
+
+import Web3ModalProvider from '../Web3ModalProvider';
+import { hypeInit } from './hypeBannerScript';
+
+const DESKTOP_BANNER_SLUG = 'b1559fc3e7';
+const MOBILE_BANNER_SLUG = '668ed80a9e';
+
+const HypeBannerContent = ({ className }: { className?: string }) => {
+
+  return (
+    <>
+      <Script
+        id="hypelab"
+        strategy="afterInteractive"
+      >{ hypeInit }</Script>
+      <Flex className={ className } h="90px" display={{ base: 'none', lg: 'flex' }}>
+        <Banner placement={ DESKTOP_BANNER_SLUG }/>
+      </Flex>
+      <Flex className={ className } h="50px" display={{ base: 'flex', lg: 'none' }}>
+        <Banner placement={ MOBILE_BANNER_SLUG }/>
+      </Flex>
+    </>
+  );
+};
+
+const HypeBannerWithWalletAddress = ({ className }: { className?: string }) => {
+  const { address } = useAccount();
+  React.useEffect(() => {
+    if (address) {
+      setWalletAddresses([ address ]);
+    }
+  }, [ address ]);
+
+  return <HypeBannerContent className={ className }/>;
+};
+
+const HypeBanner = ({ className }: { className?: string }) => {
+
+  const fallback = React.useCallback(() => {
+    return <HypeBannerContent className={ className }/>;
+  }, [ className ]);
+
+  return (
+    <Web3ModalProvider fallback={ fallback }>
+      <HypeBannerWithWalletAddress className={ className }/>
+    </Web3ModalProvider>
+  );
+};
+
+export default chakra(HypeBanner);

ui/shared/ad/hypeBannerScript.ts

+import config from 'configs/app';
+
+const PRODUCTION_PROPERTY_SLUG = '127fddd522';
+const HYPE_API_URL = 'https://api.hypelab.com';
+
+export const hypeInit = (() => {
+  const feature = config.features.adsBanner;
+
+  if (!feature.isEnabled || feature.provider !== 'hype') {
+    return;
+  }
+
+  return `!(function (h, y, p, e, l, a, b) {
+    ((l = document.createElement(h)).async = !0),
+      (l.src = y),
+      (l.onload = function () {
+        (a = { URL: p, propertySlug: e, environment: 'production' }), HypeLab.initialize(a);
+      }),
+      (b = document.getElementsByTagName(h)[0]).parentNode.insertBefore(l, b);
+  })('script', 'https://api.hypelab.com/v1/scripts/hp-sdk.js?v=0', '${ HYPE_API_URL }', '${ PRODUCTION_PROPERTY_SLUG }');`;
+})();

yarn.lock

@@ -2981,6 +2981,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@hypelab/sdk-react@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@hypelab/sdk-react/-/sdk-react-1.0.0.tgz#399058576422a7a715edfd6c55b946950a26ba39"
+  integrity sha512-d8eJOqgocXvfMae/JbFXZdK/Q79oYYXScto1wJ7uTDHxrPZTIpgVNhuJM7UKmVJAKRSHnniRcZCjh2+pZCW5ww==
+
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"