txn ad banner

ui/pages/Transaction.tsx

@@ -9,7 +9,6 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
 import isBrowser from 'lib/isBrowser';
 import networkExplorers from 'lib/networks/networkExplorers';
-import AdBanner from 'ui/shared/ad/AdBanner';
 import ExternalLink from 'ui/shared/ExternalLink';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -78,7 +77,6 @@ const TransactionPageContent = () => {
         </Flex>
       ) }
       <RoutedTabs tabs={ TABS }/>
-      <AdBanner mt={ 6 } justifyContent={{ base: 'center', lg: 'start' }}/>
     </Page>
   );
 };

ui/shared/ad/AdbutlerBanner.tsx

 /* eslint-disable max-len */
 import { Flex, chakra } from '@chakra-ui/react';
+import Script from 'next/script';
 import React from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-// const adbutlerHTML = require('ui/shared/ad/adbutler.html');
-
-// didn't find a way to raw-load html that works both for webpack (app build) and vite (playwright build)
-const adbutlerHTML = `
-  <div id="ad-banner"></div>
-  <script type="text/javascript">if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}</script>
-  <script type="text/javascript">
-  var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
+const scriptText1 = `if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}`;
+const scriptText2 = `
+var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
   var abkw = window.abkw || '';
   const isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
   if (isMobile) {
@@ -23,12 +18,15 @@ const adbutlerHTML = `
       document.getElementById('ad-banner').innerHTML += '<'+'div id="placement_523705_'+plc523705+'"></'+'div>';
       AdButler.ads.push({handler: function(opt){ AdButler.register(182226, 523705, [728,90], 'placement_523705_'+opt.place, opt); }, opt: { place: plc523705++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
   }
-  </script>
 `;
 
 const AdbutlerBanner = ({ className }: { className?: string }) => {
   return (
-    <Flex className={ className } dangerouslySetInnerHTML={{ __html: adbutlerHTML }}/>
+    <Flex className={ className }>
+      <div id="ad-banner"></div>
+      <Script id="ad-butler-1">{ scriptText1 }</Script>
+      <Script id="ad-butler-2">{ scriptText2 }</Script>
+    </Flex>
   );
 };
 

ui/shared/ad/CoinzillaBanner.tsx

 import { Flex, chakra } from '@chakra-ui/react';
+import Script from 'next/script';
 import React from 'react';
 
 import isBrowser from 'lib/isBrowser';
@@ -18,18 +19,21 @@ type CPreferences = {
 
 const CoinzillaBanner = ({ className }: { className?: string }) => {
   const isInBrowser = isBrowser();
-  if (isInBrowser) {
-    window.coinzilla_display = window.coinzilla_display || [];
-    const cDisplayPreferences = {} as CPreferences;
-    cDisplayPreferences.zone = '26660bf627543e46851';
-    cDisplayPreferences.width = '728';
-    cDisplayPreferences.height = '90';
-    window.coinzilla_display.push(cDisplayPreferences);
-  }
+
+  React.useEffect(() => {
+    if (isInBrowser) {
+      window.coinzilla_display = window.coinzilla_display || [];
+      const cDisplayPreferences = {} as CPreferences;
+      cDisplayPreferences.zone = '26660bf627543e46851';
+      cDisplayPreferences.width = '728';
+      cDisplayPreferences.height = '90';
+      window.coinzilla_display.push(cDisplayPreferences);
+    }
+  }, [ isInBrowser ]);
 
   return (
-    <Flex className={ className }>
-      <script async src="https://coinzillatag.com/lib/display.js"></script>
+    <Flex className={ className } id="adBanner">
+      <Script src="https://coinzillatag.com/lib/display.js"/>
       <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
     </Flex>
   );

ui/shared/ad/adbutler.html

-<div id="ad-banner"></div>
-<script type="text/javascript">if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}</script>
-<script type="text/javascript">
-var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
-var abkw = window.abkw || '';
-const isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
-if (isMobile) {
-    var plc539876 = window.plc539876 || 0;
-    document.getElementById('ad-banner').innerHTML += '<'+'div id="placement_539876_'+plc539876+'"></'+'div>';
-    document.getElementById("ad-banner").className = "ad-container mb-3";
-    AdButler.ads.push({handler: function(opt){ AdButler.register(182226, 539876, [320,100], 'placement_539876_'+opt.place, opt); }, opt: { place: plc539876++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
-} else {
-    var plc523705 = window.plc523705 || 0;
-    document.getElementById('ad-banner').innerHTML += '<'+'div id="placement_523705_'+plc523705+'"></'+'div>';
-    AdButler.ads.push({handler: function(opt){ AdButler.register(182226, 523705, [728,90], 'placement_523705_'+opt.place, opt); }, opt: { place: plc523705++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
-}
-</script>
\ No newline at end of file

ui/tx/TxDetails.tsx

-import { Grid, GridItem, Text, Box, Icon, Link, Spinner, Tag, Flex, Tooltip, chakra } from '@chakra-ui/react';
+import {
+  Grid,
+  GridItem,
+  Text,
+  Box,
+  Icon,
+  Link,
+  Spinner,
+  Tag,
+  Flex,
+  Tooltip,
+  chakra,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -11,6 +24,7 @@ import successIcon from 'icons/status/success.svg';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
+import AdBanner from 'ui/shared/ad/AdBanner';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -34,6 +48,8 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 const TxDetails = () => {
   const { data, isLoading, isError, socketStatus } = useFetchTxInfo();
 
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
   const handleCutClick = React.useCallback(() => {
@@ -140,7 +156,19 @@ const TxDetails = () => {
           <Text variant="secondary">{ getConfirmationDuration(data.confirmation_duration) }</Text>
         </DetailsInfoItem>
       ) }
-      <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
+      <DetailsInfoItem
+        title="Sponsored"
+        hint="Sponsored banner advertisement"
+      >
+        <AdBanner/>
+      </DetailsInfoItem>
+      <GridItem
+        colSpan={{ base: undefined, lg: 2 }}
+        mt={{ base: 2, lg: 3 }}
+        mb={{ base: 0, lg: 3 }}
+        borderBottom="1px solid"
+        borderColor={ borderColor }
+      />
       <DetailsInfoItem
         title="From"
         hint="Address (external or contract) sending the transaction."
@@ -191,7 +219,13 @@ const TxDetails = () => {
       </DetailsInfoItem>
       { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash }/> }
 
-      <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 3, lg: 8 }}/>
+      <GridItem
+        colSpan={{ base: undefined, lg: 2 }}
+        mt={{ base: 2, lg: 3 }}
+        mb={{ base: 0, lg: 3 }}
+        borderBottom="1px solid"
+        borderColor={ borderColor }
+      />
       <DetailsInfoItem
         title="Value"
         hint="Value sent in the native token (and USD) if applicable."