add coin selector icons

react/package.json

@@ -47,6 +47,7 @@
     "react-redux": "^5.0.3",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.4",
+    "react-select": "^1.1.0",
     "react-table": "~6.5.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",

react/src/components/addcoin/addcoin.js

@@ -174,18 +174,33 @@ class AddCoin extends React.Component {
     }
   }
 
+  renderCoinOption(option) {
+    return (
+      <div>
+        <img
+          src={ `/assets/images/cryptologo/${option.icon.toLowerCase()}.png` }
+          alt={ option.label }
+          width="30px"
+          height="30px"/>
+          <span className="margin-left-10">{ option.label }</span>
+      </div>
+    );
+  }
+
   updateSelectedCoin(e, index) {
-    const coin = e.target.value.split('|');
+    if (e.value &&
+        e.value.indexOf('|')) {
+      const coin = e.value.split('|');
       const defaultMode = coin[1];
       const modeToValue = { // TODO: move to utils
         'spv': 0,
         'native': -1,
       };
-    const _value = e.target.value;
+      const _value = e.value;
       let _coins = this.state.coins;
 
       _coins[index] = {
-      [e.target.name]: _value,
+        selectedCoin: _value,
         spvMode: {
           disabled: _value.indexOf('spv') > -1 ? false : true,
           checked: defaultMode === 'spv' ? true : false,
@@ -201,10 +216,11 @@ class AddCoin extends React.Component {
         coins: _coins,
       }));
     }
+  }
 
   updateSelectedMode(_value, index) {
-    let _coins = this.state.coins;
     const _selectedCoin = _coins[index].selectedCoin;
+    let _coins = this.state.coins;
 
     _coins[index] = {
       selectedCoin: _selectedCoin,

react/src/components/addcoin/addcoin.scss

@@ -38,6 +38,41 @@
       }
     }
   }
+
+  .Select {
+    cursor: pointer;
+
+    * { color: #757575 !important; }
+
+    .Select-clear {
+      display: none;
+    }
+    .Select-control {
+      height: 40px !important;
+
+      .Select-placeholder,
+      .Select-value {
+        line-height: 36px !important;
+      }
+    }
+  }
+  .Select-menu-outer {
+    max-height: 253px !important;
+  }
+  .Select-menu {
+    max-height: 250px !important;
+  }
+  .Select.is-open,
+  .Select.is-focused {
+    .Select-control {
+      border-color: #FF6600 !important;
+      box-shadow: none !important;
+    }
+    .Select-menu-outer {
+      border-color: #FF6600 !important;
+      border-top-color: #d9d9d9 !important;
+    }
+  }
 }
 
 .vertical-margin-20 {

react/src/components/addcoin/addcoinOptionsAC.js

@@ -1,9 +1,7 @@
-import React from 'react';
 import { translate } from '../../translate/translate';
 import mainWindow from '../../util/mainWindow';
 
-class AddCoinOptionsAC extends React.Component {
+const addCoinOptionsAC = () => {
-  render() {
   const _assetChains = [
     'bet',
     'bots',
@@ -32,19 +30,14 @@ class AddCoinOptionsAC extends React.Component {
       availableModes = 'spv';
     }
 
-      _items.push(
+    _items.push({
-        <option
+      label: translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`),
-          key={ _assetChains[i] }
+      icon: _assetChains[i],
-          value={ `${_assetChains[i].toUpperCase()}|${availableModes}` }>{ translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`) }</option>
+      value: `${_assetChains[i].toUpperCase()}|${availableModes}`,
-      );
+    });
   }
 
-    return (
+  return _items;
-      <optgroup label={ translate('ADD_COIN.ASSETCHAINS') }>
-      { _items }
-      </optgroup>
-    );
-  }
 }
 
-export default AddCoinOptionsAC;
+export default addCoinOptionsAC;

react/src/components/addcoin/addcoinOptionsACFiat.js

@@ -1,8 +1,6 @@
-import React from 'react';
 import { translate } from '../../translate/translate';
 
-class AddCoinOptionsACFiat extends React.Component {
+const addCoinOptionsACFiat = () => {
-  render() {
   const _fiat = [
     'aud',
     'brl',
@@ -40,19 +38,14 @@ class AddCoinOptionsACFiat extends React.Component {
   let _items = [];
 
   for (let i = 0; i < _fiat.length; i++) {
-      _items.push(
+    _items.push({
-        <option
+      label: translate(`FIAT_CURRENCIES.${_fiat[i].toUpperCase()}`),
-          key={ _fiat[i] }
+      icon: _fiat[i],
-          value={ `${_fiat[i].toUpperCase()}|native` }>{ translate(`FIAT_CURRENCIES.${_fiat[i].toUpperCase()}`) }</option>
+      value: `${_fiat[i].toUpperCase()}|native`,
-      );
+    });
   }
 
-    return (
+  return _items;
-      <optgroup label={ translate('ADD_COIN.FIAT_CURRENCIES') }>
-      { _items }
-      </optgroup>
-    );
-  }
 }
 
-export default AddCoinOptionsACFiat;
+export default addCoinOptionsACFiat;

react/src/components/addcoin/addcoinOptionsCrypto.js

@@ -1,24 +1,19 @@
-import React from 'react';
 import { translate } from '../../translate/translate';
 import mainWindow from '../../util/mainWindow';
 
-class AddCoinOptionsCrypto extends React.Component {
+const addCoinOptionsCrypto = () => {
-  constructor() {
+  const availableKMDModes = mainWindow.arch === 'x64' ? 'spv|native' : 'spv';
-    super();
-    this.state = {
-    };
-  }
 
-  render() {
+  return [{
-    let availableKMDModes = mainWindow.arch === 'x64' ? 'spv|native' : 'spv';
+    label: 'Komodo (KMD)',
-
+    icon: 'KMD',
-    return (
+    value: `KMD|${availableKMDModes}`,
-      <optgroup label={ translate('ADD_COIN.CRYPTO_CURRENCIES') }>
+  },
-        <option value={ `KMD|${availableKMDModes}` }>Komodo (KMD)</option>
+  {
-        <option value="CHIPS|spv">Chips (CHIPS)</option>
+    label: 'Chips (CHIPS)',
-      </optgroup>
+    icon: 'CHIPS',
-    );
+    value: `CHIPS|spv`,
-  }
+  }];
 }
 
-export default AddCoinOptionsCrypto;
+export default addCoinOptionsCrypto;

react/src/components/addcoin/coin-selectors.render.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
+import addCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
-import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
+import addCoinOptionsAC from '../addcoin/addcoinOptionsAC';
-import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+import addCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 import mainWindow from '../../util/mainWindow';
+import Select from 'react-select';
 
 const CoinSelectorsRender = function(item, coin, i) {
   return (
@@ -16,19 +17,13 @@ const CoinSelectorsRender = function(item, coin, i) {
         <div
           className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6 form-group' : 'form-group' }
           style={{ paddingLeft: this.hasMoreThanOneCoin() ? '0' : '15px' }}>
-          <select
+          <Select
-            className="form-control form-material"
             name="selectedCoin"
             value={ coin }
             onChange={ (event) => this.updateSelectedCoin(event, i) }
-            autoFocus>
+            optionRenderer={ this.renderCoinOption }
-            <option>{ translate('INDEX.SELECT') }</option>
+            valueRenderer={ this.renderCoinOption }
-            <AddCoinOptionsCrypto appSettings={ this.props.Settings } />
+            options={ addCoinOptionsCrypto().concat(addCoinOptionsAC()).concat(addCoinOptionsACFiat()) } />
-            <AddCoinOptionsAC appSettings={ this.props.Settings } />
-            { mainWindow.arch === 'x64' &&
-              <AddCoinOptionsACFiat appSettings={ this.props.Settings } />
-            }
-          </select>
         </div>
         <div className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6' : 'hide' }>
           <div className="toggle-box padding-bottom-10">

react/src/styles/index.scss

@@ -46,6 +46,7 @@
 @import '../components/dashboard/spinner/spinner.scss';
 @import '../components/toaster/toaster.scss';
 @import '~react-table/react-table.css';
+@import '~react-select/dist/react-select.css';
 
 /* dex */
 @import 'dex/main.scss';