add tangled advertisement

chrome/browser/resources/millix/millix_bar.css

@@ -406,19 +406,29 @@ input:focus {
 }
 
 .ads-slider {
-    height: 30px;
+    height: 50px;
+    padding-left: 50px;
+    max-width: 700px;
     overflow: hidden;
     position: relative;
 }
 
 .ads-slider span {
     font-size: 1.2em;
-    position: absolute;
     width: 100%;
-    height: 100%;
-    margin: 0;
-    line-height: 30px;
-    text-align: center;
+    height: 25px;
+    margin: 0 auto;
+    line-height: 25px;
+    text-align: left;
+    display: block;
+}
+
+#advertisement_target_phrase {
+    font-size: 0.85em;
+}
+
+#advertisement_headline {
+    font-weight: bold;
 }
 
 .loader {

chrome/browser/resources/millix/millix_bar.html

@@ -67,9 +67,19 @@
               <a class="hidden" id="btn-restart-icon-spinner">
                 <i>
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 1.1em;" class="rotating">
-                      <defs><style>.fa-secondary{opacity:.4}</style></defs>
-                      <path d="M478.71 364.58zm-22 6.11l-27.83-15.9a15.92 15.92 0 0 1-6.94-19.2A184 184 0 1 1 256 72c5.89 0 11.71.29 17.46.83-.74-.07-1.48-.15-2.23-.21-8.49-.69-15.23-7.31-15.23-15.83v-32a16 16 0 0 1 15.34-16C266.24 8.46 261.18 8 256 8 119 8 8 119 8 256s111 248 248 248c98 0 182.42-56.95 222.71-139.42-4.13 7.86-14.23 10.55-22 6.11z" class="fa-secondary"/>
-                      <path d="M271.23 72.62c-8.49-.69-15.23-7.31-15.23-15.83V24.73c0-9.11 7.67-16.78 16.77-16.17C401.92 17.18 504 124.67 504 256a246 246 0 0 1-25 108.24c-4 8.17-14.37 11-22.26 6.45l-27.84-15.9c-7.41-4.23-9.83-13.35-6.2-21.07A182.53 182.53 0 0 0 440 256c0-96.49-74.27-175.63-168.77-183.38z" class="fa-primary"/>
+                    <defs>
+                      <style>
+                        .fa-secondary {
+                          opacity: .4
+                        }
+                      </style>
+                    </defs>
+                    <path
+                      d="M478.71 364.58zm-22 6.11l-27.83-15.9a15.92 15.92 0 0 1-6.94-19.2A184 184 0 1 1 256 72c5.89 0 11.71.29 17.46.83-.74-.07-1.48-.15-2.23-.21-8.49-.69-15.23-7.31-15.23-15.83v-32a16 16 0 0 1 15.34-16C266.24 8.46 261.18 8 256 8 119 8 8 119 8 256s111 248 248 248c98 0 182.42-56.95 222.71-139.42-4.13 7.86-14.23 10.55-22 6.11z"
+                      class="fa-secondary" />
+                    <path
+                      d="M271.23 72.62c-8.49-.69-15.23-7.31-15.23-15.83V24.73c0-9.11 7.67-16.78 16.77-16.17C401.92 17.18 504 124.67 504 256a246 246 0 0 1-25 108.24c-4 8.17-14.37 11-22.26 6.45l-27.84-15.9c-7.41-4.23-9.83-13.35-6.2-21.07A182.53 182.53 0 0 0 440 256c0-96.49-74.27-175.63-168.77-183.38z"
+                      class="fa-primary" />
                   </svg>
                 </i>
               </a>
@@ -206,7 +216,8 @@
         </div>
       </div>
       <div id="ads_holder h-50 pt-7" class="col-8 m-0 ads-slider">
-        <span></span>
+          <span><a id="advertisement_headline"></a></span>
+          <span><a id="advertisement_target_phrase"></a></span>
       </div>
     </div>
   </div>

chrome/browser/resources/millix/millix_bar.js

@@ -12,6 +12,8 @@ cr.define('millix_bar', function () {
     let millixAPIFrame;
     let lastKnownTransaction = undefined;
     let reloadTimeout = undefined;
+    let fetchAdvertisementTimeout = undefined;
+    const ADVERTISEMENT_ROTATION_TIME = 10000;
     let walletLocked = true;
     let unlockFromBar = false;
     const audioDeposit = new Audio('/deposit.mp3');
@@ -59,6 +61,49 @@ cr.define('millix_bar', function () {
         chrome.send('showMillixWallet', ['refresh']);
     }
 
+    function showNewAdvertisement(advertisement) {
+        const $headline = $('#advertisement_headline');
+        const $targetPhrase = $('#advertisement_target_phrase');
+        if (!advertisement) {
+            $headline.text('');
+            $targetPhrase.text('');
+
+            $headline.prop("href", undefined);
+            $targetPhrase.prop("href", undefined);
+
+            $headline.off('click');
+            $targetPhrase.off('click');
+        } else {
+            advertisement.attributes.forEach(attribute => {
+                if (attribute.attribute_type === "advertisement_headline") {
+                    $headline.text(attribute.value);
+                } else if (attribute.attribute_type === "target_phrase") {
+                    $targetPhrase.text(`${attribute.value} - ${advertisement.advertisement_url}`);
+                }
+            });
+            $headline.prop("href", advertisement.advertisement_url);
+            $targetPhrase.prop("href", advertisement.advertisement_url);
+
+            $headline.off('click');
+            $targetPhrase.off('click');
+            $headline.on('click', () => chrome.send('showMillixWallet', ['new_tab', advertisement.advertisement_url]));
+            $targetPhrase.on('click', () => chrome.send('showMillixWallet', ['new_tab', advertisement.advertisement_url]));
+        }
+    }
+
+    function disableAdvertisementFetch() {
+        clearTimeout(fetchAdvertisementTimeout);
+        showNewAdvertisement(null);
+    }
+
+    function fetchAdvertisement() {
+        millixAPIFrame.contentWindow.postMessage({
+            type: 'get_next_tangled_advertisement'
+        }, 'chrome-untrusted://millix-ws/');
+
+        fetchAdvertisementTimeout = setTimeout(() => fetchAdvertisement(), ADVERTISEMENT_ROTATION_TIME);
+    }
+
     function activateWallet() {
         if (!walletLocked) {
             return;
@@ -81,6 +126,8 @@ cr.define('millix_bar', function () {
             type: 'read_stat_start'
         }, 'chrome-untrusted://millix-ws/');
         unlockFromBar = false;
+
+        setTimeout(() => fetchAdvertisement(), 2000);
     }
 
     function deactivateWallet() {
@@ -96,6 +143,8 @@ cr.define('millix_bar', function () {
         millixAPIFrame.contentWindow.postMessage({
             type: 'read_stat_stop'
         }, 'chrome-untrusted://millix-ws/');
+
+        disableAdvertisementFetch();
     }
 
     function doNodeRestart() {
@@ -264,7 +313,8 @@ cr.define('millix_bar', function () {
         onApiFrameReady,
         onLastTransactionUpdate,
         expandView,
-        onTransaction
+        onTransaction,
+        showNewAdvertisement
     };
 });
 
@@ -298,6 +348,11 @@ window.addEventListener('message', ({ data }) => {
         case 'initialize':
             chrome.send('initialize', []);
             break;
+        case 'next_tangled_advertisement':
+            const advertisement = data.data;
+            console.log('[advertisement] new advertisement found', advertisement);
+            millix_bar.showNewAdvertisement(advertisement);
+            break;
     }
 
 });

chrome/browser/resources/millix/millix_ws.js

 class _API {
     static HOST = 'https://localhost:5500';
     static NODE_API = `${_API.HOST}/api`;
+    static HOST_TANGLED = 'https://localhost:15555';
+    static TANGLED_API = `${_API.HOST_TANGLED}/api`;
 
     constructor() {
         this.nodeID = undefined;
@@ -23,6 +25,10 @@ class _API {
         return `${_API.NODE_API}/${this.nodeID}/${this.nodeSignature}`;
     }
 
+    getTangledURL() {
+        return `${_API.TANGLED_API}`;
+    }
+
     apiHealthCheck() {
         try {
             return fetch(`${_API.HOST}`)
@@ -154,6 +160,15 @@ class _API {
             return Promise.reject(e);
         }
     }
+
+    getNextAdvertisementToRender() {
+        try {
+            return fetch(this.getTangledURL() + '/LMCqwVXTLS7VRWPT')
+                .then(response => response.json());
+        }catch(e) {
+            return Promise.reject(e)
+        }
+    }
 }
 
 const API = new _API();
@@ -238,6 +253,10 @@ window.addEventListener('message', ({ data }) => {
                 readStatHandlerID = null;
             }
             break;
+            case 'get_next_tangled_advertisement':
+                API.getNextAdvertisementToRender()
+                .then(data => window.parent.postMessage({ type: 'next_tangled_advertisement', data }, 'tangled://millix-bar'));
+                break;
         case 'api_check':
             if (!apiCheckHandlerID) {
                 apiCheck();

chrome/browser/ui/webui/millix/millix_bar.cc

@@ -103,6 +103,11 @@ void MillixBarUI::MillixBarMessageHandler::ShowMillixWallet(
         webContents->GetMainFrame()->Reload();
       }
     }
+  } else if (page == "new_tab") {
+    std::string newTabURL = args->GetList()[1].GetString();
+    NavigateParams params(GetSingletonTabNavigateParams(browser, GURL(newTabURL)));
+    params.path_behavior = NavigateParams::IGNORE_AND_NAVIGATE;
+    ShowSingletonTabOverwritingNTP(browser, std::move(params));
   } else {
     std::string url = base::StringPrintf("%s#%s", chrome::kChromeUIMillixAppURL,
                                          page.c_str());

millix_node/index.js

 import console from './core/console';
 import db from './database/database';
-import wallet from './core/wallet/wallet';
+import eventBus from './core/event-bus';
 import config from './core/config/config';
 import configLoader from './core/config/config-loader';
 import genesisConfig from './core/genesis/genesis-config';
 import request from 'request';
 import services from './core/services/services';
 import logManager from './core/log-manager';
+const childProcess   = require('child_process');
+let tangledProcess;
 
 const argv = require('yargs')
     .options({
@@ -85,6 +87,14 @@ process.on('exit', async() => {
 });
 
 console.log('starting millix-core');
+
+eventBus.on('wallet_unlock', () => {
+    if(!tangledProcess) {
+        tangledProcess = childProcess.spawn(process.execPath, [`${__dirname}/tangled-advertisement.js`]);
+        tangledProcess.title = 'tangled-advertisement';
+    }
+});
+
 db.initialize()
   .then(() => configLoader.cleanConfigsFromDatabase())
   .then(() => configLoader.load(false))
@@ -109,3 +119,4 @@ db.initialize()
       }
   });
   //millix v1.11.6-tangled
+  
\ No newline at end of file