Merge pull request #1647 from blockscout/getit

Getit ad banner

configs/envs/.env.sepolia

@@ -56,6 +56,7 @@ NEXT_PUBLIC_WEB3_WALLETS=['token_pocket','metamask']
 NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
 NEXT_PUBLIC_HAS_BEACON_CHAIN=true
 NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_AD_BANNER_PROVIDER=getit
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/sepolia-testnet.png

deploy/values/review/values.yaml.gotmpl

@@ -81,6 +81,7 @@ frontend:
     NEXT_PUBLIC_CONTRACT_CODE_IDES: "[{'title':'Remix IDE','url':'https://remix.blockscout.com/?address={hash}&blockscout=eth-goerli.blockscout.com','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]"
     NEXT_PUBLIC_SWAP_BUTTON_URL: uniswap
     NEXT_PUBLIC_HAS_CONTRACT_AUDIT_REPORTS: true
+    NEXT_PUBLIC_AD_BANNER_PROVIDER: getit
   envFromSecret:
     NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN
     SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI

docs/ENVS.md

@@ -351,7 +351,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` \|  `hype` \| `none` | Ads provider  | - | `slise` | `coinzilla` |
+| NEXT_PUBLIC_AD_BANNER_PROVIDER | `slise` \| `adbutler` \| `coinzilla` \|  `hype` \| `getit` \| `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

@@ -19,6 +19,10 @@ export function ad(): CspDev.DirectiveDescriptor {
       // hype
       'api.hypelab.com',
       '*.ixncdn.com',
+
+      //getit
+      'v1.getittech.io',
+      'ipapi.co',
     ],
     'frame-src': [
       // coinzilla

package.json

@@ -68,6 +68,7 @@
     "dom-to-image": "^2.6.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^6.5.1",
+    "getit-sdk": "^1.0.4",
     "gradient-avatar": "^1.0.2",
     "graphiql": "^2.2.0",
     "graphql": "^16.8.1",

types/client/adProviders.ts

 import type { ArrayElement } from 'types/utils';
 
-export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'hype', 'none' ] as const;
+export const SUPPORTED_AD_BANNER_PROVIDERS = [ 'slise', 'adbutler', 'coinzilla', 'hype', 'getit', '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 GetitBanner from './GetitBanner';
 import HypeBanner from './HypeBanner';
 import SliseBanner from './SliseBanner';
 
@@ -25,6 +26,8 @@ const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: bo
         return <AdbutlerBanner/>;
       case 'coinzilla':
         return <CoinzillaBanner/>;
+      case 'getit':
+        return <GetitBanner/>;
       case 'hype':
         return <HypeBanner/>;
       case 'slise':

ui/shared/ad/GetitBanner.tsx

+import { Flex, chakra } from '@chakra-ui/react';
+import dynamic from 'next/dynamic';
+import React from 'react';
+import { useAccount } from 'wagmi';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+import Web3ModalProvider from '../Web3ModalProvider';
+
+const GetitAdPlugin = dynamic(() => import('getit-sdk').then(module => module.GetitAdPlugin), { ssr: false });
+
+const GETIT_API_KEY = 'ZmGXVvwYUAW4yXL8RzWQHNKmpSyQmt3TDXsXUxqFqXPdoaiSSFyca3BOyunDcWdyOwTkX3UVVQel28qbjoOoWPxYVpPdNzbUNkAHyFyJX7Lk9TVcPDZKTQmwHlSMzO3a';
+
+const GetitBannerContent = ({ address, className }: { address?: string; className?: string }) => {
+  const isMobile = Boolean(useIsMobile());
+
+  return (
+    <Flex className={ className } h="90px">
+      <GetitAdPlugin
+        key={ isMobile.toString() }
+        apiKey={ GETIT_API_KEY }
+        walletConnected={ address ? address : '' }
+        isMobile={ isMobile }
+        slotId="0"
+      />
+    </Flex>
+  );
+};
+
+const GetitBannerWithWalletAddress = ({ className }: { className?: string }) => {
+  const { address } = useAccount();
+
+  return <GetitBannerContent address={ address } className={ className }/>;
+};
+
+const GetitBanner = ({ className }: { className?: string }) => {
+  const fallback = React.useCallback(() => {
+    return <GetitBannerContent className={ className }/>;
+  }, [ className ]);
+
+  return (
+    <Web3ModalProvider fallback={ fallback }>
+      <GetitBannerWithWalletAddress className={ className }/>
+    </Web3ModalProvider>
+  );
+};
+
+export default chakra(GetitBanner);