adblock detect

lib/cookies.ts

@@ -8,6 +8,7 @@ export enum NAMES {
   TXS_SORT='txs_sort',
   COLOR_MODE='chakra-ui-color-mode',
   INDEXING_ALERT='indexing_alert',
+  ADBLOCK_DETECTED='adblock_detected',
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {

lib/hooks/useAdblockDetect.tsx

+import { useEffect } from 'react';
+
+import { useAppContext } from 'lib/appContext';
+import * as cookies from 'lib/cookies';
+import isBrowser from 'lib/isBrowser';
+
+export default function useAdblockDetect() {
+  const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
+
+  useEffect(() => {
+    if (isBrowser() && !hasAdblockCookie) {
+      const url = 'https://request-global.czilladx.com';
+      fetch(url, {
+        method: 'HEAD',
+        mode: 'no-cors',
+        cache: 'no-store',
+      }).catch(() => {
+        cookies.set(cookies.NAMES.ADBLOCK_DETECTED, 'true', { expires: 1 });
+      });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

ui/shared/DetailsSponsoredItem.tsx

 import { GridItem } from '@chakra-ui/react';
 import React from 'react';
 
+import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
 const DetailsSponsoredItem = () => {
   const isMobile = useIsMobile();
+  const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED);
+
+  if (hasAdblockCookie) {
+    return null;
+  }
 
   if (isMobile) {
     return (

ui/shared/Page/Page.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import getErrorStatusCode from 'lib/errors/getErrorStatusCode';
+import useAdblockDetect from 'lib/hooks/useAdblockDetect';
 import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
@@ -26,6 +27,8 @@ const Page = ({
 
   useGetCsrfToken();
 
+  useAdblockDetect();
+
   const renderErrorScreen = React.useCallback((error?: Error) => {
     const statusCode = getErrorStatusCode(error) || 500;
     const isInvalidTxHash = error?.message.includes('Invalid tx hash');

ui/shared/ad/AdBanner.tsx

@@ -2,13 +2,17 @@ import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
+import { useAppContext } from 'lib/appContext';
+import * as cookies from 'lib/cookies';
 import isSelfHosted from 'lib/isSelfHosted';
 
 import AdbutlerBanner from './AdbutlerBanner';
 import CoinzillaBanner from './CoinzillaBanner';
 
 const AdBanner = ({ className }: { className?: string }) => {
-  if (!isSelfHosted()) {
+  const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
+
+  if (!isSelfHosted() || hasAdblockCookie) {
     return null;
   }
 

ui/shared/ad/CoinzillaTextAd.tsx

 import { Box, Image, Link, Text, chakra } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
+import { useAppContext } from 'lib/appContext';
+import * as cookies from 'lib/cookies';
 import { ndash } from 'lib/html-entities';
+import isBrowser from 'lib/isBrowser';
 
 type AdData = {
   ad: {
@@ -28,20 +31,28 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
   const [ adData, setAdData ] = React.useState<AdData | null>(null);
   const [ isLoading, setIsLoading ] = React.useState(true);
 
+  const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
+
   useEffect(() => {
-    fetch('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242')
-      .then(res => res.status === 200 ? res.json() : null)
-      .then((_data) => {
-        const data = _data as AdData;
-        setAdData(data);
-        if (data?.ad?.impressionUrl) {
-          fetch(data.ad.impressionUrl);
-        }
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, []);
+    if (!hasAdblockCookie && isBrowser()) {
+      fetch('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242')
+        .then(res => res.status === 200 ? res.json() : null)
+        .then((_data) => {
+          const data = _data as AdData;
+          setAdData(data);
+          if (data?.ad?.impressionUrl) {
+            fetch(data.ad.impressionUrl);
+          }
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [ hasAdblockCookie ]);
+
+  if (hasAdblockCookie) {
+    return null;
+  }
 
   if (isLoading) {
     return <Box className={ className } h={{ base: 12, lg: 6 }}/>;

ui/tx/details/TxDetailsSkeleton.tsx

@@ -22,7 +22,6 @@ const TxDetailsSkeleton = () => {
       <DetailsSkeletonRow/>
       <DetailsSkeletonRow w="70%"/>
       <DetailsSkeletonRow w="70%"/>
-      <GridItem h={{ base: '82px', lg: '38px' }}/>
       { sectionGap }
       <DetailsSkeletonRow w="40%"/>
       <DetailsSkeletonRow w="40%"/>