new hype sdk

nextjs/csp/policies/ad.ts

@@ -3,6 +3,7 @@ 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 {
@@ -18,9 +19,6 @@ export function ad(): CspDev.DirectiveDescriptor {
       // hype
       'api.hypelab-staging.com',
       'api.hypelab.com',
-      'd1q98dzwj6s2rb.cloudfront.net',
-      '*.ixncdn.com',
-      'api.jxncdn.com',
     ],
     'frame-src': [
       // coinzilla
@@ -37,6 +35,11 @@ export function ad(): CspDev.DirectiveDescriptor {
 
       // slise
       '*.slise.xyz',
+
+      //hype
+      `'sha256-${ Base64.stringify(sha256(hypeInit ?? '')) }'`,
+      'https://api.hypelab.com',
+      'd1q98dzwj6s2rb.cloudfront.net',
     ],
     'img-src': [
       // coinzilla

package.json

@@ -36,6 +36,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",
@@ -69,7 +70,6 @@
     "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",

ui/shared/ad/HypeBanner.tsx

@@ -1,14 +1,20 @@
 import { Flex, chakra } from '@chakra-ui/react';
-import { Banner, useIdentity, Environment, HypeLab, HypeLabContext } from 'hypelab-react';
+import { Banner, setWalletAddresses } from '@hypelab/sdk-react';
+import Script from 'next/script';
 import React from 'react';
 import { useAccount } from 'wagmi';
 
-import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
+import Web3ModalProvider from '../Web3ModalProvider';
+import { hypeInit } from './hypeBannerScript';
 
 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="771e47c10c"/>
       </Flex>
@@ -21,33 +27,25 @@ const HypeBannerContent = ({ className }: { className?: string }) => {
 
 const HypeBannerWithWalletAddress = ({ className }: { className?: string }) => {
   const { address } = useAccount();
-  const { setWalletAddresses } = useIdentity();
-  if (address) {
-    setWalletAddresses([ address ]);
-  }
+  React.useEffect(() => {
+    if (address) {
+      setWalletAddresses([ address ]);
+    }
+  }, [ 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>
+    <Web3ModalProvider fallback={ fallback }>
+      <HypeBannerWithWalletAddress className={ className }/>
+    </Web3ModalProvider>
   );
 };
 

ui/shared/ad/hypeBannerScript.ts

@@ -0,0 +1,18 @@
+import config from 'configs/app';
+
+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: 'development' }), HypeLab.initialize(a);
+      }),
+      (b = document.getElementsByTagName(h)[0]).parentNode.insertBefore(l, b);
+  })('script', 'https://api.hypelab.com/v1/scripts/hp-sdk.js?v=0', 'https://api.hypelab-staging.com', 'baaded78c2');`;
+})();

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"
@@ -10980,11 +10985,6 @@ 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==
-
 [email protected], [email protected]:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"