add hype provider (dev config)

docs/ENVS.md

@@ -321,7 +321,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

@@ -7,26 +7,46 @@ import { connectAdbutler, placeAd } from 'ui/shared/ad/adbutlerScript';
 export function ad(): CspDev.DirectiveDescriptor {
   return {
     'connect-src': [
+      // coinzilla
       'coinzilla.com',
       '*.coinzilla.com',
       'https://request-global.czilladx.com',
+
+      // slise
       '*.slise.xyz',
+
+      // hype
+      'api.hypelab-staging.com',
+      'api.hypelab.com',
+      'd1q98dzwj6s2rb.cloudfront.net',
+      '*.ixncdn.com',
+      'api.jxncdn.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',
     ],
     'img-src': [
-      'servedbyadbutler.com',
+      // coinzilla
       'cdn.coinzilla.io',
+
+      // adbutler
+      'servedbyadbutler.com',
     ],
     'font-src': [
+      // coinzilla
       'https://request-global.czilladx.com',
     ],
   };

package.json

@@ -69,6 +69,7 @@
     "graphiql": "^2.2.0",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.11.3",
+    "hypelab-react": "^0.5.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
     "mixpanel-browser": "^2.47.0",

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, useIdentity, Environment, HypeLab, HypeLabContext } from 'hypelab-react';
+import React from 'react';
+import { useAccount } from 'wagmi';
+
+import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
+
+const HypeBannerContent = ({ className }: { className?: string }) => {
+
+  return (
+    <>
+      <Flex className={ className } h="90px" display={{ base: 'none', lg: 'flex' }}>
+        <Banner placement="771e47c10c"/>
+      </Flex>
+      <Flex className={ className } h="50px" display={{ base: 'flex', lg: 'none' }}>
+        <Banner placement="64412f33ad"/>
+      </Flex>
+    </>
+  );
+};
+
+const HypeBannerWithWalletAddress = ({ className }: { className?: string }) => {
+  const { address } = useAccount();
+  const { setWalletAddresses } = useIdentity();
+  if (address) {
+    setWalletAddresses([ address ]);
+  }
+
+  return <HypeBannerContent className={ className }/>;
+};
+
+const HypeBanner = ({ className }: { className?: string }) => {
+  const client = new HypeLab({
+    URL: 'https://api.hypelab-staging.com',
+    // URL: 'https://api.hypelab.com', /* Production URL */
+    propertySlug: 'baaded78c2',
+    environment: Environment.Development,
+    // environment: Environment.Production /* Production Environment */
+  });
+
+  const fallback = React.useCallback(() => {
+    return <HypeBannerContent className={ className }/>;
+  }, [ className ]);
+
+  return (
+    <HypeLabContext client={ client }>
+      <Web3ModalProvider fallback={ fallback }>
+        <HypeBannerWithWalletAddress className={ className }/>
+      </Web3ModalProvider>
+    </HypeLabContext>
+  );
+};
+
+export default chakra(HypeBanner);

yarn.lock

@@ -10980,6 +10980,11 @@ husky@^8.0.0:
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.1.tgz#511cb3e57de3e3190514ae49ed50f6bc3f50b3e9"
   integrity sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==
 
+hypelab-react@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/hypelab-react/-/hypelab-react-0.5.0.tgz#27fd56016f73cdac01fb3d0aac716842170ec383"
+  integrity sha512-5htdSf60gcn9MGUaffLjljd1GtSAFpIbHMo4Os9NXCAdID73u1R9M2ON44Wtf7+DAwfB2JfJoDAb395p9eQ9wg==
+
 iconv-lite@0.6, iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"