Merge pull request #4464 from blockscout/vb-custom-ad

In-house text ad

apps/block_scout_web/assets/js/lib/ad.js

@@ -1,13 +1,9 @@
 import $ from 'jquery'
 
-$(function () {
-  if (showAd()) {
-    fetchTextAdData()
-  }
-})
-
 function countImpressions (impressionUrl) {
-  $.get(impressionUrl)
+  if (impressionUrl) {
+    $.get(impressionUrl)
+  }
 }
 
 function showAd () {
@@ -27,11 +23,25 @@ function showAd () {
   }
 }
 
-function getTextAdData () {
+function getTextAdData (customAds) {
   return new Promise((resolve) => {
     if (showAd()) {
       $.get('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', function (data) {
-        resolve(data)
+        if (!data) {
+          if (customAds) {
+            try {
+              data = JSON.parse(customAds)
+              const ind = getRandomInt(0, data.length)
+              resolve(data[ind])
+            } catch (_e) {
+              resolve(null)
+            }
+          } else {
+            resolve(null)
+          }
+        } else {
+          resolve(data)
+        }
       })
     } else {
       resolve(null)
@@ -39,24 +49,32 @@ function getTextAdData () {
   })
 }
 
-function fetchTextAdData () {
+function fetchTextAdData (customAds) {
   if (showAd()) {
-    getTextAdData()
+    getTextAdData(customAds)
       .then(data => {
         if (data) {
           const { ad: { name, description_short: descriptionShort, thumbnail, url, cta_button: ctaButton, impressionUrl } } = data
-          $('.ad').removeClass('d-none')
           $('.ad-name').text(name)
           $('.ad-short-description').text(descriptionShort)
           $('.ad-cta-button').text(ctaButton)
           $('.ad-url').attr('href', url)
-          $('.ad-img-url').attr('src', thumbnail)
+          const urlObject = new URL(url)
+          if (urlObject.hostname === 'nifty.ink') {
+            $('.ad-img-url').replaceWith('🎨')
+          } else {
+            $('.ad-img-url').attr('src', thumbnail)
+          }
           countImpressions(impressionUrl)
-        } else {
-          $('.ad').addClass('d-none')
         }
       })
   }
 }
 
+function getRandomInt (min, max) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min)) + min
+}
+
 export { showAd, getTextAdData, fetchTextAdData }

apps/block_scout_web/assets/js/lib/autocomplete.js

@@ -2,6 +2,8 @@ import AutoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete.js'
 import { getTextAdData, fetchTextAdData } from './ad.js'
 import { DateTime } from 'luxon'
 
+const customAds = process.env.CUSTOM_ADS
+
 const placeHolder = 'Search by address, token symbol, name, transaction hash, or block number'
 const dataSrc = async (query, id) => {
   try {
@@ -28,7 +30,7 @@ const dataSrc = async (query, id) => {
 const resultsListElement = (list, data) => {
   const info = document.createElement('p')
   const adv = `
-  <div class="ad mb-3 d-none">
+  <div class="ad mb-3">
     Sponsored: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
   </div>`
   info.innerHTML = adv
@@ -40,7 +42,7 @@ const resultsListElement = (list, data) => {
 
   list.prepend(info)
 
-  fetchTextAdData()
+  fetchTextAdData(customAds)
 }
 const searchEngine = (query, record) => {
   if (record.name.toLowerCase().includes(query.toLowerCase()) ||
@@ -137,7 +139,7 @@ const openOnFocus = (event, type) => {
       autoCompleteJSMobile.start(query)
     }
   } else {
-    getTextAdData()
+    getTextAdData(customAds)
       .then(adData => {
         if (adData) {
           if (type === 'desktop') {

apps/block_scout_web/assets/js/lib/text_ad.js

@@ -0,0 +1,10 @@
+import $ from 'jquery'
+import { showAd, fetchTextAdData } from './ad.js'
+
+const customAds = process.env.CUSTOM_ADS
+
+$(function () {
+  if (showAd()) {
+    fetchTextAdData(customAds)
+  }
+})

apps/block_scout_web/assets/webpack.config.js

@@ -32,39 +32,6 @@ const jsOptimizationParams = {
   parallel: true
 }
 
-const autocompleteJs = {
-  entry: {
-    autocomplete: './js/lib/autocomplete.js',
-  },
-  output: {
-    filename: '[name].min.js',
-    path: path.resolve(__dirname, '../priv/static/js')
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-          }
-        ]
-      }
-    ]
-  },
-  optimization: {
-    minimizer: [
-      new TerserJSPlugin(jsOptimizationParams),
-    ]
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '../css/autocomplete.css'
-    })
-  ]
-}
-
 const dropzoneJs = {
   entry: {
     dropzone: './js/lib/dropzone.js',
@@ -126,7 +93,9 @@ const appJs =
       'main-page': './css/main-page.scss',
       'tokens': './js/pages/token/search.js',
       'ad': './js/lib/ad.js',
-      'banner': './js/lib/banner.js'
+      'text_ad': './js/lib/text_ad.js',
+      'banner': './js/lib/banner.js',
+      'autocomplete': './js/lib/autocomplete.js',
     },
     output: {
       filename: '[name].js',
@@ -202,7 +171,8 @@ const appJs =
       ),
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
       new webpack.DefinePlugin({
-        'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT)
+        'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT),
+        'process.env.CUSTOM_ADS': JSON.stringify(process.env.CUSTOM_ADS)
       }),
       new webpack.ProvidePlugin({
         process: 'process/browser',
@@ -213,4 +183,4 @@ const appJs =
 
 const viewScripts = glob.sync('./js/view_specific/**/*.js').map(transpileViewScript)
 
-module.exports = viewScripts.concat(appJs, autocompleteJs, dropzoneJs)
+module.exports = viewScripts.concat(appJs, dropzoneJs)

apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex

@@ -1,4 +1,4 @@
-<script defer data-cfasync="false" src="<%= static_path(@conn, "/js/ad.js") %>"></script>
-<div class="ad mb-3 d-none">
+<script defer data-cfasync="false" src="<%= static_path(@conn, "/js/text_ad.js") %>"></script>
+<div class="ad mb-3">
 Sponsored: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
-</div> 
+</div>

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -278,6 +278,6 @@
         }
       }
     </script>
-    <script defer src="<%= static_path(@conn, "/js/autocomplete.min.js") %>"></script>
+    <script defer src="<%= static_path(@conn, "/js/autocomplete.js") %>"></script>
   </body>
 </html>