Skip to content

Commit

Permalink
Merge pull request #1469 from blockscout/fe-1439
Browse files Browse the repository at this point in the history
add hype provider
  • Loading branch information
isstuev authored Feb 12, 2024
2 parents 3ecc9e5 + 058364e commit 7bf581b
Show file tree
Hide file tree
Showing 10 changed files with 113 additions and 5 deletions.
4 changes: 2 additions & 2 deletions configs/app/features/adsText.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
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';
Expand Down
1 change: 1 addition & 0 deletions configs/envs/.env.eth
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion docs/ENVS.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'}` |

Expand Down
24 changes: 23 additions & 1 deletion nextjs/csp/policies/ad.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion types/client/adProviders.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
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;
Expand Down
3 changes: 3 additions & 0 deletions ui/shared/ad/AdBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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/>;
}
Expand Down
55 changes: 55 additions & 0 deletions ui/shared/ad/HypeBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
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);
21 changes: 21 additions & 0 deletions ui/shared/ad/hypeBannerScript.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
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 }');`;
})();
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 7bf581b

Please sign in to comment.