dex main, login, coins components, dex store

react/package.json

@@ -41,6 +41,7 @@
     "qrcode.react": "^0.7.1",
     "rc-tree": "^1.4.6",
     "react": "^15.3.1",
+    "react-cryptocoins": "^1.0.10",
     "react-dom": "^15.3.1",
     "react-hot-loader": "^1.3.0",
     "react-qr-reader": "^1.1.3",

react/src/actions/actionCreators.js

@@ -51,6 +51,7 @@ export * from './actions/interest';
 export * from './actions/nativeDashboardUpdate';
 export * from './actions/getTxDetails';
 export * from './actions/electrum';
+export * from './actions/mm';
 
 export function changeActiveAddress(address) {
   return {

react/src/actions/actions/mm.js

@@ -0,0 +1,130 @@
+import {
+  DEX_LOGIN,
+  DEX_RESET,
+  DEX_ASKS,
+  DEX_BIDS,
+  DEX_SWAPS,
+  DEX_ADD_COIN,
+  DEX_REMOVE_COIN,
+  DEX_INVENTORY,
+  DEX_UTXO,
+  DEX_CACHE_PRELOAD,
+  DEX_PRICES,
+} from '../storeType';
+import { translate } from '../../translate/translate';
+import Config from '../../config';
+import {
+  triggerToaster,
+} from '../actionCreators';
+
+export function shepherdMMCachePreloadState(isAuth, asks, bids, pair, coins, swaps, rates) {
+  return {
+    type: DEX_CACHE_PRELOAD,
+    isAuth,
+    asks,
+    bids,
+    pair,
+    coins,
+    swaps,
+    rates,
+  }
+}
+
+export function shepherdMMResetState() {
+  return {
+    type: DEX_RESET,
+  }
+}
+
+export function shepherdMMStart(passphrase) {
+  return new Promise((resolve, reject) => {
+    fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/mm/start?passphrase=${passphrase}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'shepherdMMStart',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      resolve(json);
+    });
+  });
+}
+
+export function shepherdMMStop() {
+  return new Promise((resolve, reject) => {
+    fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/mm/stop`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'shepherdMMStop',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      resolve(json);
+    });
+  });
+}
+
+export function shepherdMMRequest(payload) {
+  console.warn(payload);
+  return dispatch => {
+    return fetch(
+      `http://127.0.0.1:${Config.agamaPort}/shepherd/mm/request`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ payload, }),
+      },
+    )
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'shepherdMMRequest',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      dispatch(shepherdMMRequstState(payload.mapToProp, json));
+    });
+  }
+}
+
+export function shepherdMMRequstState(prop, json) {
+  if (prop === 'prices') {
+    return {
+      type: DEX_PRICES,
+      prices: json,
+    }
+  } else if (prop === 'statsdisp') {
+    return {
+      type: DEX_STATS,
+      prices: json,
+    }
+  }
+}

react/src/actions/storeType.js

@@ -58,4 +58,7 @@ export const DEX_ADD_COIN = 'DEX_ADD_COIN';
 export const DEX_REMOVE_COIN = 'DEX_REMOVE_COIN';
 export const DEX_INVENTORY = 'DEX_INVENTORY';
 export const DEX_UTXO = 'DEX_UTXO';
+export const DEX_PRICES = 'DEX_PRICES';
 export const DEX_RESET = 'DEX_RESET';
+export const DEX_STATS = 'DEX_STATS';
+export const DEX_CACHE_PRELOAD = 'DEX_CACHE_PRELOAD';

react/src/assets/dex/favicon-white.svg

@@ -0,0 +1,12 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
+  <defs>
+    <linearGradient id="gradient">
+      <stop offset="0%" stopColor="#9300FF"></stop>
+      <stop offset="49%" stopColor="#5272E2"></stop>
+      <stop offset="95%" stopColor="#4C84FF"></stop>
+    </linearGradient>
+  </defs>
+  <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
+    <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
+  </g>
+</svg>

react/src/assets/dex/favicon.svg

@@ -1,13 +1,6 @@
-
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  width="800px" height="600px" viewBox="0 0 800.000000 600.000000"
  preserveAspectRatio="xMidYMid meet">
-
-
-
  <defs>
    <linearGradient id="gradient">
        <stop offset="0%" stop-color="#9300FF" />
@@ -15,7 +8,6 @@
      <stop offset="95%" stop-color="#4C84FF" />
    </linearGradient>
  </defs>
-
 <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)"
 fill="url(#gradient)" stroke="none">
 <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359
@@ -25,6 +17,5 @@ fill="url(#gradient)" stroke="none">
 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100
 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30
 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"/>
-
 </g>
 </svg>

react/src/components/dashboard/claimInterestModal/claimInterestModal.js

@@ -252,7 +252,7 @@ class ClaimInterestModal extends React.Component {
                 'error'
               )
             );
-          } else if (json.result && !json.result.iswatchonly && json.result.ismine) {
+          } else if (json.result && !json.result.iswatchonly && json.result.ismine && json.result.isvalid && !json.result.isscript) {
             sendToAddressPromise(
               this.props.ActiveCoin.coin,
               this.state.selectedAddress,

react/src/components/dashboard/navbar/navbar.js

@@ -16,6 +16,7 @@ import {
 import Store from '../../../store';
 import Config from '../../../config';
 import { checkAC } from '../../addcoin/payload';
+import mainWindow from '../../../util/mainWindow';
 
 import NavbarRender from './navbar.render';
 
@@ -81,15 +82,11 @@ class Navbar extends React.Component {
       false
     );
 
-    let appConfig;
-
-    try {
-      appConfig = window.require('electron').remote.getCurrentWindow().appConfig;
-    } catch (e) {}
-
     this.setState({
-      isExperimentalOn: appConfig.experimentalFeatures,
+      isExperimentalOn: mainWindow.appConfig.experimentalFeatures,
     });
+
+    Store.dispatch(dashboardChangeSection(mainWindow.activeSection));
   }
 
   componentWillUnmount() {
@@ -127,6 +124,7 @@ class Navbar extends React.Component {
   }
 
   dashboardChangeSection(sectionName) {
+    mainWindow.activeSection = sectionName;
     Store.dispatch(dashboardChangeSection(sectionName));
   }
 

react/src/components/dashboard/navbar/navbar.render.js

@@ -52,7 +52,7 @@ const NavbarRender = function() {
                 <i className="site-menu-icon"></i> { translate('INDEX.WALLETS') }
               </a>
             </li>
-            <li className={ this.isSectionActive('dex') ? 'active nav-top-menu' : 'nav-top-menu' }>
+            <li className={ this.isSectionActive('dex') ? 'hide active nav-top-menu' : 'hide nav-top-menu' }>
               <a onClick={ () => this.dashboardChangeSection('dex') }>
                 <i className="site-menu-icon"></i> BarterDEX
               </a>

react/src/components/dex/dexCoins.js

@@ -1,12 +1,92 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import SVGFaviconBlack from './svg/faviconBlack';
+import SVGMNZ from './svg/mnz';
+import DexLoaderSmall from './dexLoaderSmall';
+import mainWindow from '../../util/mainWindow';
+import * as coinIcon from 'react-cryptocoins';
+import Store from '../../store';
+import {
+  shepherdMMRequest,
+} from '../../actions/actionCreators';
+import { connect } from 'react-redux';
 
 class DexCoins extends React.Component {
   constructor() {
     super();
     this.state = {
-      isNewPassphrase: false,
+      balance: {
+        kmd: 0,
+        btc: 0,
+      },
+      coinLoading: false,
     };
+    this.calcTotalBalance = this.calcTotalBalance.bind(this);
+  }
+
+  getPrices(props) {
+    const _dex = props.Dex;
+    let _prices = {};
+
+    if (_dex &&
+        _dex.prices &&
+        _dex.prices.length) {
+      for (let i = 0; i < _dex.prices.length; i++) {
+        for (let j = 0; j < _dex.prices[i].asks.length; j++) {
+          if (!_prices[_dex.prices[i].asks[j][0] + '/' + _dex.prices[i].asks[j][1]]) {
+            _prices[_dex.prices[i].asks[j][0] + '/' + _dex.prices[i].asks[j][1]] = _dex.prices[i].asks[j][2];
+          } else {
+            _prices[_dex.prices[i].asks[j][0] + '/' + _dex.prices[i].asks[j][1]] += _dex.prices[i].asks[j][2];
+          }
+        }
+      }
+    }
+
+    console.warn(_prices);
+  }
+
+  renderCoinsList() {
+
+  }
+
+  calcTotalBalance() {
+    mainWindow.getMMCacheData()
+    .then((res) => {
+      const { rates, coins } = res;
+      let _coins = {};
+      let _totalKMDValue = 0;
+
+      if (rates &&
+          rates.BTC &&
+          rates.USD) {
+        for (let i = 0; i < coins.length; i++) {
+          console.log(coins[i].coin + ' ' + coins[i].balance);
+          _coins[coins[i].coin] = coins[i];
+          if (Number(coins[i].balance) > 0) {
+            _totalKMDValue += Number(coins[i].KMDvalue);
+          }
+        }
+        console.log(_totalKMDValue);
+      }
+    });
+  }
+
+  getCoinSVG(coin) {
+    // todo add asset chains
+    if (coin !== 'MNZ') {
+      const SVGCryptoCoins = coinIcon.BtcAlt;
+      return <SVGCryptoCoins size={40} />;
+    } else {
+      return SVGMNZ;
+    }
+  }
+
+  componentWillMount() {
+    this.calcTotalBalance();
+  }
+
+  componentWillReceiveProps(props) {
+    this.getPrices(props);
   }
 
   render() {
@@ -15,28 +95,17 @@ class DexCoins extends React.Component {
         <section className="dashboard-wallets">
           <header className="dashboard-wallets-header component-header">
             <i className="dashboard-empty-logo">
-              <svg viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
-                <defs>
-                  <linearGradient id="gradient">
-                    <stop offset="0%" stopColor="#9300FF"></stop>
-                    <stop offset="49%" stopColor="#5272E2"></stop>
-                    <stop offset="95%" stopColor="#4C84FF"></stop>
-                  </linearGradient>
-                </defs>
-                <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
-                  <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
-                </g>
-              </svg>
+              <SVGFaviconBlack />
             </i>
             <div className="recharts-responsive-container dashboard-balances-pie" style={{ width: '250px', height: '450px' }}>
             { /* portfolio chart here */ }
             </div>
-            <h1>
+            <h1 style={{ color: '#9e9e9e' }}>
               <label>Estimated balance</label>
               <span>0.00345625 BTC</span>
-              <small>$32.21</small>
+              <small className="margin-top-10">$32.21</small>
             </h1>
-            <button className="action dark">
+            <button className="action dark margin-top-15">
               <span>swap history</span>
               <i>
                 <svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30">
@@ -47,19 +116,11 @@ class DexCoins extends React.Component {
             </button>
           </header>
           <ul className="dashboard-wallets-list">
-            <li className="coinList-coin MNZ">
-              <a className="MNZ" href="#/wallet/MNZ/false">
+            <li className="coinList-coin BTC">
+              <a className="BTC">
                 <div className="coinList-coin_icon coin-colorized">
-                  <i className="coin-icon-svg MNZ">
-                    <svg version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 50 50" style={{ enableBackground: 'new 0 0 148 50' }}>
-                      <g>
-                        <path className="st1" d="M15.9,17.9"></path>
-                        <path d="M39.9,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C39.6,35.1,40,34.9,39.9,34.5z"></path>
-                        <path d="M28.3,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C28,35.1,28.4,34.9,28.3,34.5z"></path>
-                        <path d="M19.1,30.7l-3.2-12.5h0c0-0.2-0.2-0.4-0.5-0.4c-0.2,0-0.4,0.2-0.5,0.4l0,0L10.7,34l0,0c0,0.1,0,0.2,0,0.2 c0,0.5,0.4,1,1,1H17c0.4,0,0.8-0.3,0.9-0.7l0,0L19.1,30.7z"></path>
-                        <path d="M30.9,30.4l-3.5-12.6h0c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.1-0.4,0.3h0l-0.7,2.5l3.5,12.2l0,0l0,0 c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3l0,0L30.9,30.4z"></path>
-                      </g>
-                    </svg>
+                  <i className="coin-icon-svg crypto-icons-pack BTC">
+                    { this.getCoinSVG() }
                   </i>
                 </div>
                 <div className="coinList-coin_balance MNZ">
@@ -74,21 +135,9 @@ class DexCoins extends React.Component {
                     <polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon>
                   </svg>
                 </span>
-                { /* toggle opacity */}
-                <span className="coinList-coin_action_loader">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}>
-                    <circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="54.6667" fill="#FFF" r="20">
-                      <animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate>
-                    </circle>
-                    <circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="45.3333" fill="#000" r="20">
-                      <animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate>
-                    </circle>
-                    <circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="54.6667" fill="#FFF" r="20">
-                      <animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate>
-                      <animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate>
-                    </circle>
-                  </svg>
-                </span>
+                { this.state.coinLoading &&
+                  <DexLoaderSmall />
+                }
               </a>
             </li>
           </ul>
@@ -98,4 +147,11 @@ class DexCoins extends React.Component {
   }
 }
 
-export default DexCoins;
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: state.Dashboard,
+    Dex: state.Dex,
+  };
+};
+
+export default connect(mapStateToProps)(DexCoins);

react/src/components/dex/dexLoaderSmall.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+class DexLoaderSmall extends React.Component {
+  render() {
+    return (
+      <span
+        className="coinList-coin_action_loader"
+        style={{ opacity: '1', width: '86px' }}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}>
+          <circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="54.6667" fill="#FFF" r="20">
+            <animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate>
+          </circle>
+          <circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="45.3333" fill="#000" r="20">
+            <animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate>
+          </circle>
+          <circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="54.6667" fill="#FFF" r="20">
+            <animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate>
+            <animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate>
+          </circle>
+        </svg>
+      </span>
+    );
+  }
+}
+
+export default DexLoaderSmall;

react/src/components/dex/dexLogin.js

@@ -1,12 +1,58 @@
 import React from 'react';
+import Store from '../../store';
 import { translate } from '../../translate/translate';
+import {
+  shepherdMMStart,
+  shepherdMMCachePreloadState,
+} from '../../actions/actionCreators';
+import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator';
+import mainWindow from '../../util/mainWindow';
+import SVGFaviconColor from './svg/faviconColor';
+import SVGCopy from './svg/copy';
+import SVGChevronRight from './svg/chevronRight';
+import SVGCheck from './svg/check';
 
 class DexLogin extends React.Component {
   constructor() {
     super();
     this.state = {
       isNewPassphrase: false,
+      passphrase: null,
     };
+    this.updateInput = this.updateInput.bind(this);
+    this.generateNewSeed = this.generateNewSeed.bind(this);
+    this.startMM = this.startMM.bind(this);
+  }
+
+  startMM() {
+    shepherdMMStart(this.state.passphrase)
+    .then((res) => {
+      this.setState({
+        isNewPassphrase: false,
+        passphrase: null,
+      });
+
+      mainWindow.getMMCacheData()
+      .then((res) => {
+        console.warn('mm cache', res);
+
+        const { rates, coins, isAuth } = res;
+        Store.dispatch(shepherdMMCachePreloadState(isAuth, null, null, null, coins, null, rates));
+      });
+    });
+  }
+
+  generateNewSeed() {
+    this.setState(Object.assign({}, this.state, {
+      isNewPassphrase: true,
+      passphrase: PassPhraseGenerator.generatePassPhrase(256),
+    }));
+  }
+
+  updateInput(e) {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
   }
 
   render() {
@@ -17,60 +63,50 @@ class DexLogin extends React.Component {
         </div>
         <section className="Placeholder-tagline">
           <i className="Placeholder-logo">
-            <svg version="1.0" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
-              <defs>
-                <linearGradient id="gradient">
-                  <stop offset="0%" stopColor="#9300FF"></stop>
-                  <stop offset="49%" stopColor="#5272E2"></stop>
-                  <stop offset="95%" stopColor="#4C84FF"></stop>
-                </linearGradient>
-              </defs>
-              <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
-                <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
-              </g>
-            </svg>
+            <SVGFaviconColor />
           </i>
           <h1 className="Placeholder-text">
             Barter <strong>DEX</strong>
           </h1>
           <section className="form">
             <div className="login-newpassphrase">
-              <button className="Clipboard action lefttext normaltext dark">
-                <span>Generate a new passphrase</span>
+              <button
+                onClick={ this.generateNewSeed }
+                className="Clipboard action lefttext normaltext dark">
+                <span>{ translate('DEX.GEN_NEW_PASSPHRASE') }</span>
                 <i className="Clipboard-icon">
-                  <svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512">
-                    <g>
-                      <polygon points="304,96 288,96 288,176 368,176 368,160 304,160"></polygon>
-                      <path d="M325.3,64H160v48h-48v336h240v-48h48V139L325.3,64z M336,432H128V128h32v272h176V432z M384,384H176V80h142.7l65.3,65.6V384 z"></path>
-                    </g>
-                  </svg>
+                  <SVGCopy />
                 </i>
               </button>
             </div>
-            <textarea name="form-field-name" placeholder="Enter here your passphrase" style={{ fontSize: '18px', minWidth: '260px' }}></textarea>
+            <textarea
+              name="passphrase"
+              onChange={ this.updateInput }
+              placeholder="Enter here your passphrase"
+              value={ this.state.passphrase }
+              style={{ fontSize: '18px', minWidth: '260px' }}></textarea>
             { !this.state.isNewPassphrase &&
-              <button disabled="" className="login-button withBorder action centered primary">
-                <span>Login</span>
+              <button
+                onClick={ this.startMM }
+                disabled={ !this.state.passphrase }
+                className="login-button withBorder action centered primary">
+                <span>{ translate('DEX.LOGIN') }</span>
                 <i>
-                  <svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512">
-                    <polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon>
-                  </svg>
+                  <SVGChevronRight />
                 </i>
               </button>
             }
             { this.state.isNewPassphrase &&
-              <button className="action align-left danger login-passphrase-notice">
+              <button
+                onClick={ this.startMM }
+                className="action align-left danger login-passphrase-notice">
                 <span>
                   <strong>
-                    Backup your passpharase, <br /><u>it can't be retrieved!</u>
+                    { translate('DEX.BACKUP_PASSPHRASE_P1') }, <br /><u>{ translate('DEX.BACKUP_PASSPHRASE_P2') }</u>
                   </strong>
                 </span>
                 <i>
-                  <svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512">
-                    <g>
-                      <path d="M223.9,329.7c-2.4,2.4-5.8,4.4-8.8,4.4s-6.4-2.1-8.9-4.5l-56-56l17.8-17.8l47.2,47.2l124.8-125.7l17.5,18.1L223.9,329.7z"></path>
-                    </g>
-                  </svg>
+                  <SVGCheck />
                 </i>
               </button>
             }

react/src/components/dex/dexMain.js

@@ -1,13 +1,24 @@
 import React from 'react';
+import Store from '../../store';
 import { translate } from '../../translate/translate';
 import { connect } from 'react-redux';
-
+import {
+  dashboardChangeSection,
+  shepherdMMCachePreloadState,
+  shepherdMMStop,
+  shepherdMMStart,
+  shepherdMMResetState,
+  shepherdMMRequest,
+} from '../../actions/actionCreators';
+import mainWindow from '../../util/mainWindow';
 import DexNotifier from './dexNotifier';
 import DexLogin from './dexLogin';
+import SVGFaviconWhite from './svg/faviconWhite';
+
 import DexCoins from './dexCoins';
-import DexSwapHistory from './dexSwapHistory';
-import DexLoading from './dexLoading';
-import DexExchange from './dexExchange';
+//import DexSwapHistory from './dexSwapHistory';
+//import DexLoading from './dexLoading';
+//import DexExchange from './dexExchange';
 
 // TODO: portfolio, charts, extended swaps history
 
@@ -15,10 +26,66 @@ class DexMain extends React.Component {
   constructor() {
     super();
     this.state = {
-      isNewPassphrase: false,
     };
   }
 
+  componentWillMount() {
+    mainWindow.getMMCacheData()
+    .then((res) => {
+      console.warn('mm cache', res);
+
+      const { rates, coins, isAuth, swaps, asks, bids, pair } = res;
+      Store.dispatch(shepherdMMCachePreloadState(isAuth, asks, bids, pair, coins, swaps, rates));
+    });
+  }
+
+  componentWillReceiveProps(props) {
+    if (this.props.Dashboard &&
+        this.props.Dashboard.activeSection !== 'dex' &&
+        props.Dashboard.activeSection === 'dex') {
+      console.warn('dashboard -> dex change');
+
+      Store.dispatch(shepherdMMRequest({
+        method: 'statsdisp',
+        mapToProp: 'stats',
+      }));
+      Store.dispatch(shepherdMMRequest({
+        method: 'getprices',
+        mapToProp: 'prices',
+      }));
+
+      mainWindow.getMMCacheData()
+      .then((res) => {
+        console.warn('mm cache', res);
+
+        const { rates, coins, isAuth, swaps, asks, bids, pair } = res;
+        Store.dispatch(shepherdMMCachePreloadState(isAuth, asks, bids, pair, coins, swaps, rates));
+      });
+    } else {
+      console.warn('dex');
+    }
+  }
+
+  startMM() {
+
+  }
+
+  stopMM() {
+    shepherdMMStop()
+    .then((res) => {
+      Store.dispatch(shepherdMMResetState());
+    });
+  }
+
+  restartMM() {
+
+  }
+
+  dashboardChangeSection(sectionName) {
+    mainWindow.activeSection = sectionName;
+    Store.dispatch(dashboardChangeSection(sectionName));
+  }
+
   render() {
     if (this.props.Dashboard &&
         this.props.Dashboard.activeSection === 'dex') {
@@ -29,27 +96,20 @@ class DexMain extends React.Component {
             <header className="window-header">
               <ul>
                 <li className="window__controls_left">
-                  <button className="action danger green">Back to wallets</button>
+                  <button
+                    onClick={ () => this.dashboardChangeSection('wallets') }
+                    className="action danger green">Back to wallets</button>
                 </li>
                 <li className="window__controls_left">
                   <button className="action dark">Start MM</button>
-                  <button className="action dark">Stop MM</button>
+                  <button
+                    onClick={ this.stopMM }
+                    className="action dark">Stop MM</button>
                   <button className="action dark">Restart MM</button>
                   </li>
                 <li className="window__title">
                   <i className="window-header-logo">
-                    <svg version="1.0" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
-                      <defs>
-                        <linearGradient id="gradient">
-                          <stop offset="0%" stopColor="#9300FF"></stop>
-                          <stop offset="49%" stopColor="#5272E2"></stop>
-                          <stop offset="95%" stopColor="#4C84FF"></stop>
-                        </linearGradient>
-                      </defs>
-                      <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
-                        <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
-                      </g>
-                    </svg>
+                    <SVGFaviconWhite />
                   </i>
                   <h1>
                     Barter <strong>DEX</strong>
@@ -62,7 +122,14 @@ class DexMain extends React.Component {
               </ul>
             </header>
             <section className="app-view">
-              <DexExchange />
+              { this.props.Dex &&
+                this.props.Dex.isAuth &&
+                <DexCoins />
+              }
+              { this.props.Dex &&
+                !this.props.Dex.isAuth &&
+                <DexLogin />
+              }
               <DexNotifier />
             </section>
             <footer className="window-footer window-footer__visible"></footer>
@@ -78,6 +145,7 @@ class DexMain extends React.Component {
 const mapStateToProps = (state) => {
   return {
     Dashboard: state.Dashboard,
+    Dex: state.Dex,
   };
 };
 

react/src/components/dex/svg/check.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+class SVGCheck extends React.Component {
+  render() {
+    return (
+      <svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512">
+        <g>
+          <path d="M223.9,329.7c-2.4,2.4-5.8,4.4-8.8,4.4s-6.4-2.1-8.9-4.5l-56-56l17.8-17.8l47.2,47.2l124.8-125.7l17.5,18.1L223.9,329.7z"></path>
+        </g>
+      </svg>
+    );
+  }
+}
+
+export default SVGCheck;

react/src/components/dex/svg/chevronRight.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class SVGChevronRight extends React.Component {
+  render() {
+    return (
+      <svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512">
+        <polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon>
+      </svg>
+    );
+  }
+}
+
+export default SVGChevronRight;

react/src/components/dex/svg/copy.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class SVGCopy extends React.Component {
+  render() {
+    return (
+      <svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512">
+        <g>
+          <polygon points="304,96 288,96 288,176 368,176 368,160 304,160"></polygon>
+          <path d="M325.3,64H160v48h-48v336h240v-48h48V139L325.3,64z M336,432H128V128h32v272h176V432z M384,384H176V80h142.7l65.3,65.6V384 z"></path>
+        </g>
+      </svg>
+    );
+  }
+}
+
+export default SVGCopy;

react/src/components/dex/svg/faviconBlack.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+class SVGFaviconBlack extends React.Component {
+  render() {
+    return (
+      <svg viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
+        <defs>
+          <linearGradient id="gradient">
+            <stop offset="0%" stopColor="#9300FF"></stop>
+            <stop offset="49%" stopColor="#5272E2"></stop>
+            <stop offset="95%" stopColor="#4C84FF"></stop>
+          </linearGradient>
+        </defs>
+        <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
+          <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
+        </g>
+      </svg>
+    );
+  }
+}
+
+export default SVGFaviconBlack;

react/src/components/dex/svg/faviconColor.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+class SVGFaviconColor extends React.Component {
+  render() {
+    return (
+      <svg version="1.0" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
+        <defs>
+          <linearGradient id="gradient">
+            <stop offset="0%" stopColor="#9300FF"></stop>
+            <stop offset="49%" stopColor="#5272E2"></stop>
+            <stop offset="95%" stopColor="#4C84FF"></stop>
+          </linearGradient>
+        </defs>
+        <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
+          <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
+        </g>
+      </svg>
+    );
+  }
+}
+
+export default SVGFaviconColor;

react/src/components/dex/svg/faviconWhite.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+class SVGFaviconWhite extends React.Component {
+  render() {
+    return (
+      <svg version="1.0" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet">
+        <defs>
+          <linearGradient id="gradient">
+            <stop offset="0%" stopColor="#9300FF"></stop>
+            <stop offset="49%" stopColor="#5272E2"></stop>
+            <stop offset="95%" stopColor="#4C84FF"></stop>
+          </linearGradient>
+        </defs>
+        <g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none">
+          <path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path>
+        </g>
+      </svg>
+    );
+  }
+}
+
+export default SVGFaviconWhite;

react/src/components/dex/svg/mnz.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+class SVGMNZ extends React.Component {
+  render() {
+    return (
+      <svg version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 50 50" style={{ enableBackground: 'new 0 0 148 50' }}>
+        <g>
+          <path className="st1" d="M15.9,17.9"></path>
+          <path d="M39.9,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C39.6,35.1,40,34.9,39.9,34.5z"></path>
+          <path d="M28.3,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C28,35.1,28.4,34.9,28.3,34.5z"></path>
+          <path d="M19.1,30.7l-3.2-12.5h0c0-0.2-0.2-0.4-0.5-0.4c-0.2,0-0.4,0.2-0.5,0.4l0,0L10.7,34l0,0c0,0.1,0,0.2,0,0.2 c0,0.5,0.4,1,1,1H17c0.4,0,0.8-0.3,0.9-0.7l0,0L19.1,30.7z"></path>
+          <path d="M30.9,30.4l-3.5-12.6h0c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.1-0.4,0.3h0l-0.7,2.5l3.5,12.2l0,0l0,0 c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3l0,0L30.9,30.4z"></path>
+        </g>
+      </svg>
+    );
+  }
+}
+
+export default SVGMNZ;

react/src/components/login/login.render.js

@@ -3,7 +3,7 @@ import { translate } from '../../translate/translate';
 import LoginSettingsModal from '../dashboard/loginSettingsModal/loginSettingsModal';
 import ZcparamsFetchModal from '../dashboard/zcparamsFetchModal/zcparamsFetchModal';
 
-const LoginRender = function () {
+const LoginRender = function() {
   return (
     <div>
       { this.props.Dashboard.displayZcparamsModal &&

react/src/config.js

@@ -1,3 +1,4 @@
+// obsolete(?)
 let Config;
 let _config = {
   iguanaCorePort: 7778,

react/src/reducers/dex.js

@@ -2,15 +2,17 @@
 
 import {
   DEX_LOGIN,
-  DEX_LOGOUT,
   DEX_ASKS,
   DEX_BIDS,
   DEX_SWAPS,
-  DEX_LOGOUT,
   DEX_ADD_COIN,
   DEX_REMOVE_COIN,
   DEX_INVENTORY,
   DEX_UTXO,
+  DEX_CACHE_PRELOAD,
+  DEX_RESET,
+  DEX_PRICES,
+  DEX_STATS,
 } from '../actions/storeType';
 
 export function Dex(state = {
@@ -24,8 +26,26 @@ export function Dex(state = {
   },
   coins: {},
   swaps: [],
+  rates: {},
+  prices: {},
+  utxo: {},
+  inventory: {},
+  stats: {}
 }, action) {
   switch (action.type) {
+    case DEX_CACHE_PRELOAD:
+      return {
+        isAuth: action.isAuth,
+        asks: action.asks,
+        bids: action.bids,
+        pair: action.pair,
+        coins: action.coins,
+        swaps: action.swaps,
+        rates: action.rates,
+        prices: action.prices,
+        utxo: action.utxo,
+        inventory: action.inventory,
+      };
     case DEX_RESET:
       return {
         display: false,
@@ -38,23 +58,25 @@ export function Dex(state = {
         },
         coins: {},
         swaps: [],
+        rates: {},
+        prices: {},
+        utxo: {},
+        inventory: {},
       };
     case DEX_LOGIN:
       return {
         ...state,
         isAuth: action.isAuth,
       };
-    case DEX_LOGOUT:
-      return {
-        ...state,
-      };
     case DEX_ASKS:
       return {
         ...state,
+        asks: action.asks,
       };
     case DEX_BIDS:
       return {
         ...state,
+        bids: action.bids,
       };
     case DEX_ADD_COIN:
       return {
@@ -67,14 +89,27 @@ export function Dex(state = {
     case DEX_SWAPS:
       return {
         ...state,
+        swaps: action.swaps,
       };
     case DEX_INVENTORY:
       return {
         ...state,
+        inventory: action.inventory,
       };
     case DEX_UTXO:
       return {
         ...state,
+        utxo: action.utxo,
+      };
+    case DEX_PRICES:
+      return {
+        ...state,
+        prices: action.prices,
+      };
+    case DEX_STATS:
+      return {
+        ...state,
+        stats: action.stats,
       };
     default:
       return state;

react/src/reducers/index.js

@@ -9,6 +9,7 @@ import { ActiveCoin } from './activeCoin';
 import { Settings } from './settings';
 import { Interval } from './interval';
 import { Login } from './login';
+import { Dex } from './dex';
 
 const appReducer = combineReducers({
   AddCoin,
@@ -19,6 +20,7 @@ const appReducer = combineReducers({
   Settings,
   Interval,
   Login,
+  Dex,
   routing: routerReducer,
 });
 

react/src/styles/dex/_base.scss

@@ -1,14 +1,81 @@
 @import '_variables.scss';
 
+/* hebrew */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Heebo Light'), local('Heebo-Light'), url('/assets/dex/fonts/3QgtgpUS0mVHLw8zEnTGBhTbgVql8nDJpwnrE27mub0.woff2') format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Heebo Light'), local('Heebo-Light'), url('/assets/dex/fonts/PBgOuZgb7GIoq5WdJf9cYPesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Heebo'), local('Heebo-Regular'), url('/assets/dex/fonts/q17xXvwvpCd8fBgEBABP9w.woff2') format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Heebo'), local('Heebo-Regular'), url('/assets/dex/fonts/Q66imbW5v9YuQMRLd0RXOA.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Heebo Medium'), local('Heebo-Medium'), url('/assets/dex/fonts/swuLRBhLR9p1N4Bt8XT6DBTbgVql8nDJpwnrE27mub0.woff2') format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Heebo Medium'), local('Heebo-Medium'), url('/assets/dex/fonts/vd_gpifGyUkVAMtANh8LkvesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Heebo Bold'), local('Heebo-Bold'), url('/assets/dex/fonts/NoTh4R7V5EDCexceot5ophTbgVql8nDJpwnrE27mub0.woff2') format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Heebo Bold'), local('Heebo-Bold'), url('/assets/dex/fonts/ci1Z5c9lWkHY3RNZSMtWUfesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
 /* Set base colour and font stack */
 .dex {
-  body {
-      font-family: 'Heebo', sans-serif;
-    overflow: hidden;
-    border-radius: 5px;
-    overflow: hidden;
-    font-size: 16px;
-    margin: 0;
+  font-family: 'Heebo', sans-serif !important;
+  overflow: hidden;
+  border-radius: 5px;
+  overflow: hidden;
+  font-size: 16px;
+  margin: 0;
+
+  * {
+    font-family: 'Heebo', sans-serif !important;
   }
 
   .container {
@@ -34,9 +101,27 @@
     position: relative;
   }
 
-  .grayed { filter: grayscale(100%); }
+  .grayed {
+    filter: grayscale(100%);
+  }
 
   a {
-      text-decoration: underline;
+    text-decoration: underline;
+  }
+
+  .crypto-icons-pack {
+    svg {
+      position: relative;
+      top: 9px;
+      left: 10px;
+    }
+  }
+
+  .dashboard-wallets-list {
+    .coinList-coin {
+      width: 32%;
+      float: left;
+      margin-right: 20px;
+    }
   }
 }

react/src/translate/en.js

@@ -749,5 +749,16 @@ export const _lang = {
       'SUPERNET': 'SUPERNET (SUPERNET)',
       'WLC': 'WIRELESS (WIRELESS)',
     },
+    'DEX': {
+      'GEN_NEW_PASSPHRASE': 'Generate a new passphrase',
+      'LOGIN': 'Login',
+      'BACKUP_PASSPHRASE_P1': 'Backup your passpharase',
+      'BACKUP_PASSPHRASE_P2': 'it can\'t be retrieved!',
+      'ESTIMATED_BALANCE': 'Estimated balance',
+      'TRADE_HISTORY_SM': 'trade history',
+      'ELECTRUM_MODE': 'Electrum mode',
+      'NATIVE_MODE': 'Native mode',
+
+    },
   },
 };

react/src/util/mainWindow.js

@@ -0,0 +1,2 @@
+const mainWindow = window.require('electron').remote.getCurrentWindow();
+export default mainWindow;