tmp

ui/pages/Address.tsx

@@ -40,16 +40,15 @@ const AddressPageContent = () => {
     { id: 'blocks_validated', title: 'Blocks validated', component: <AddressBlocksValidated addressQuery={ addressQuery }/> },
   ];
 
+  const tagsNode = tags.length > 0 ? <Flex columnGap={ 2 }>{ tags }</Flex> : null;
+
   return (
     <Page>
-      <Flex alignItems="center" columnGap={ 3 }>
-        <PageTitle text={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }/>
-        { tags.length > 0 && (
-          <Flex mb={ 6 } columnGap={ 2 }>
-            { tags }
-          </Flex>
-        ) }
-      </Flex>
+      <PageTitle
+        text={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
+        additionals={ tagsNode }
+        withTextAd
+      />
       <AddressDetails addressQuery={ addressQuery }/>
       <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>
     </Page>

ui/pages/Block.tsx

-import { Flex, Icon, Link, Tooltip } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
-import eastArrowIcon from 'icons/arrows/east.svg';
 import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
@@ -52,16 +50,12 @@ const BlockPageContent = () => {
 
   return (
     <Page>
-      <Flex alignItems="center" columnGap={ 3 }>
-        { hasGoBackLink && (
-          <Tooltip label="Back to blocks list">
-            <Link mb={ 6 } display="inline-flex" href={ referrer }>
-              <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
-            </Link>
-          </Tooltip>
-        ) }
-        <PageTitle text={ `Block #${ router.query.id }` }/>
-      </Flex>
+      <PageTitle
+        text={ `Block #${ router.query.id }` }
+        backLinkUrl={ hasGoBackLink ? referrer : undefined }
+        backLinkLabel="Back to blocks list"
+        withTextAd
+      />
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }

ui/pages/Blocks.tsx

@@ -42,7 +42,7 @@ const BlocksPageContent = () => {
 
   return (
     <Page>
-      <PageTitle text="Blocks"/>
+      <PageTitle text="Blocks" withTextAd/>
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }

ui/pages/Transaction.tsx

@@ -52,34 +52,31 @@ const TransactionPageContent = () => {
       return <ExternalLink key={ explorer.baseUrl } title={ `Open in ${ explorer.title }` } href={ url.toString() }/>;
     });
 
+  const tag = data?.tx_tag ? <Tag my={ 2 }>{ data.tx_tag }</Tag> : undefined;
+
   return (
     <Page>
-      <Flex alignItems="flex-start" flexDir={{ base: 'column', lg: 'row' }}>
-        <Flex alignItems="center" columnGap={ 3 }>
-          { hasGoBackLink && (
-            <Tooltip label="Back to transactions list">
-              <Link display="inline-flex" href={ referrer } mb={ 6 }>
-                <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
-              </Link>
-            </Tooltip>
-          ) }
-          <PageTitle text="Transaction details"/>
+      <PageTitle
+        text="Transaction details"
+        additionals={ tag }
+        backLinkUrl={ hasGoBackLink ? referrer : undefined }
+        backLinkLabel="Back to transactions list"
+        withTextAd
+      />
+      { explorersLinks.length > 0 && (
+        <Flex
+          alignItems="center"
+          flexWrap="wrap"
+          columnGap={ 6 }
+          rowGap={ 3 }
+          ml={{ base: 'initial', lg: 'auto' }}
+          mb={ 6 }
+          py={ 2.5 }
+          mt="-16px"
+        >
+          { explorersLinks }
         </Flex>
-        { data?.tx_tag && <Tag my={ 2 } ml={ 3 }>{ data.tx_tag }</Tag> }
-        { explorersLinks.length > 0 && (
-          <Flex
-            alignItems="center"
-            flexWrap="wrap"
-            columnGap={ 6 }
-            rowGap={ 3 }
-            ml={{ base: 'initial', lg: 'auto' }}
-            mb={{ base: 6, lg: 'initial' }}
-            py={ 2.5 }
-          >
-            { explorersLinks }
-          </Flex>
-        ) }
-      </Flex>
+      ) }
       <RoutedTabs tabs={ TABS }/>
       <AdBanner mt={ 6 } justifyContent={{ base: 'center', lg: 'start' }}/>
     </Page>

ui/pages/Transactions.tsx

@@ -37,7 +37,7 @@ const Transactions = () => {
   return (
     <Page hideMobileHeaderOnScrollDown>
       <Box h="100%">
-        <PageTitle text="Transactions"/>
+        <PageTitle text="Transactions" withTextAd/>
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }

ui/shared/Page/PageTitle.tsx

-import { Heading, chakra } from '@chakra-ui/react';
+import { Heading, Flex, Tooltip, Link, Icon, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-const PageTitle = ({ text, className }: {text: string; className?: string}) => {
+import eastArrowIcon from 'icons/arrows/east.svg';
+import TextAd from 'ui/shared/ad/TextAd';
+
+type Props = {
+  text: string;
+  additionals?: React.ReactNode;
+  withTextAd?: boolean;
+  className?: string;
+  backLinkLabel?: string;
+  backLinkUrl?: string;
+}
+
+const PageTitle = ({ text, additionals, withTextAd, backLinkUrl, backLinkLabel, className }: Props) => {
+  const title = <Heading as="h1" size="lg" flex="none">{ text }</Heading>;
+
   return (
-    <Heading as="h1" size="lg" marginBottom={ 6 } className={ className }>{ text }</Heading>
+    <Flex
+      columnGap={ 3 }
+      rowGap={ 3 }
+      alignItems={{ base: 'start', lg: 'center' }}
+      flexDirection={{ base: 'column', lg: 'row' }}
+      mb={ 6 }
+      justifyContent="space-between"
+      className={ className }
+    >
+      <Flex flexWrap="wrap" columnGap={ 3 } alignItems="center">
+        { backLinkUrl && (
+          <Tooltip label={ backLinkLabel }>
+            <Link display="inline-flex" href={ backLinkUrl }>
+              <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
+            </Link>
+          </Tooltip>
+        ) }
+        { title }
+        { additionals }
+      </Flex>
+      { withTextAd && <TextAd flexShrink={ 100 }/> }
+    </Flex>
   );
 };
 

ui/shared/ad/CoinzillaTextAd.tsx

+import { Box, Image, Link, Text, chakra } from '@chakra-ui/react';
+import React, { useEffect } from 'react';
+
+import { ndash } from 'lib/html-entities';
+
+type AdData = {
+  ad: {
+    name: string;
+    description_short: string;
+    thumbnail: string;
+    url: string;
+    cta_button: string;
+    impressionUrl: string;
+  };
+}
+
+const CoinzillaTextAd = ({ className }: {className?: string}) => {
+  const [ adData, setAdData ] = React.useState<AdData | null>(null);
+  useEffect(() => {
+    fetch('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242')
+      .then(res => res.status === 200 ? res.json() : null)
+      .then((data) => {
+        setAdData(data);
+        if (data?.ad?.impressionUrl) {
+          fetch(data.ad.impressionUrl);
+        }
+      });
+  }, []);
+
+  if (!adData) {
+    return null;
+  }
+
+  const urlObject = new URL(adData.ad.url);
+
+  return (
+    <Box className={ className }>
+      <Text
+        as="span"
+        whiteSpace="pre-wrap"
+        fontWeight={ 700 }
+        mr={ 3 }
+        display={{ base: 'none', lg: 'inline' }}
+      >
+        ADs:
+      </Text>
+      { urlObject.hostname === 'nifty.ink' ?
+        <Text as="span" mr={ 1 }>🎨</Text> :
+        <Image src={ adData.ad.thumbnail } width="20px" height="20px" mb="-4px" mr={ 1 } display="inline" alt=""/>
+      }
+      <Text as="span" whiteSpace="pre-wrap">{ `${ adData.ad.name } ${ ndash } ${ adData.ad.description_short } ` }</Text>
+      <Link href={ adData.ad.url }>{ adData.ad.cta_button }</Link>
+    </Box>
+  );
+};
+
+export default chakra(CoinzillaTextAd);

ui/shared/ad/TextAd.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import isSelfHosted from 'lib/isSelfHosted';
+
+import CoinzillaTextAd from './CoinzillaTextAd';
+
+const TextAd = ({ className }: {className?: string}) => {
+  if (!isSelfHosted()) {
+    return null;
+  }
+  return <CoinzillaTextAd className={ className }/>;
+};
+
+export default chakra(TextAd);