From e958e775e192d1309ea438ca60402394841ec08a Mon Sep 17 00:00:00 2001 From: isstuev Date: Tue, 23 Jan 2024 16:51:39 +0100 Subject: [PATCH] new hype sdk --- nextjs/csp/policies/ad.ts | 9 ++++++--- package.json | 2 +- ui/shared/ad/HypeBanner.tsx | 34 +++++++++++++++----------------- ui/shared/ad/hypeBannerScript.ts | 18 +++++++++++++++++ yarn.lock | 10 +++++----- 5 files changed, 46 insertions(+), 27 deletions(-) create mode 100644 ui/shared/ad/hypeBannerScript.ts diff --git a/nextjs/csp/policies/ad.ts b/nextjs/csp/policies/ad.ts index 23a70f06ca..76465e0a87 100644 --- a/nextjs/csp/policies/ad.ts +++ b/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 diff --git a/package.json b/package.json index 1bf967dafb..4087c5404a 100644 --- a/package.json +++ b/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", diff --git a/ui/shared/ad/HypeBanner.tsx b/ui/shared/ad/HypeBanner.tsx index 9b9ebe0dca..c05dd63dab 100644 --- a/ui/shared/ad/HypeBanner.tsx +++ b/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 ( <> + @@ -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 ; }; 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 ; }, [ className ]); return ( - - - - - + + + ); }; diff --git a/ui/shared/ad/hypeBannerScript.ts b/ui/shared/ad/hypeBannerScript.ts new file mode 100644 index 0000000000..771be1d739 --- /dev/null +++ b/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');`; +})(); diff --git a/yarn.lock b/yarn.lock index 5322e31631..3f2e834e81 100644 --- a/yarn.lock +++ b/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== - 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"