about section href new window

react/src/components/dashboard/about/about.js

@@ -2,6 +2,29 @@ import React from 'react';
 import { translate } from '../../../translate/translate';
 
 class About extends React.Component {
+  constructor() {
+    super();
+  }
+
+  openExternalWindow(url) {
+    const remote = window.require('electron').remote;
+    const BrowserWindow = remote.BrowserWindow;
+
+    const externalWindow = new BrowserWindow({
+      width: 1280,
+      height: 800,
+      title: `${translate('INDEX.LOADING')}...`,
+      icon: remote.getCurrentWindow().iguanaIcon,
+    });
+
+    externalWindow.loadURL(url);
+    externalWindow.webContents.on('did-finish-load', function() {
+      setTimeout(function() {
+        externalWindow.show();
+      }, 40);
+    });
+  }
+
   render() {
     return (
       <div className="page margin-left-0">
@@ -20,7 +43,7 @@ class About extends React.Component {
             <li>
               <span className="font-weight-600">BarterDEX</span>:&nbsp;
               { translate('ABOUT.BARTER_DEX_DESC') }&nbsp;
-              <a href="https://supernet.org/en/technology/whitepapers/easydex-a-practical-native-dex" target="_blank">
+              <a className="link" onClick={ () => this.openExternalWindow('https://supernet.org/en/technology/whitepapers/easydex-a-practical-native-dex') }>
                 (BarterDEX – A Practical Native DEX)
               </a>
             </li>
@@ -31,8 +54,8 @@ class About extends React.Component {
           <br /><br />
 
           <div className="font-weight-600">{ translate('ABOUT.TESTERS') }</div>
-          { translate('ABOUT.TESTERS_P1') } <a target="_blank" href="https://supernet.org/en/products/agama-wallet">{ translate('ABOUT.TESTERS_P2') }</a>.
-          { translate('ABOUT.TESTERS_P3') } <a target="_blank" href="https://sprnt.slack.com/messages/C0HT9MH96/">#testing-agama</a> Slack channel. <a target="_blank" href="http://slackinvite.supernet.org/">Get an invite</a> to our slack if you're not registered yet.
+          { translate('ABOUT.TESTERS_P1') } <a className="link" onClick={ () => this.openExternalWindow('https://supernet.org/en/products/agama-wallet') }>{ translate('ABOUT.TESTERS_P2') }</a>.
+          { translate('ABOUT.TESTERS_P3') } <a className="link" onClick={ () => this.openExternalWindow('https://sprnt.slack.com/messages/C0HT9MH96/') }>#testing-agama</a> Slack channel. <a className="link" onClick={ () => this.openExternalWindow('http://slackinvite.supernet.org/') }>Get an invite</a> to our slack if you're not registered yet.
           { translate('ABOUT.TESTERS_P4') }
 
           <br /><br />

react/src/components/overrides.scss

@@ -457,4 +457,9 @@ select{
 
 .color-warning {
   color: #FF6600;
+}
+
+.link {
+  cursor: hand;
+  cursor: pointer;
 }