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,37 +174,53 @@ 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('|');
-    const defaultMode = coin[1];
-    const modeToValue = { // TODO: move to utils
-      'spv': 0,
-      'native': -1,
-    };
-    const _value = e.target.value;
-    let _coins = this.state.coins;
+    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.value;
+      let _coins = this.state.coins;
+
+      _coins[index] = {
+        selectedCoin: _value,
+        spvMode: {
+          disabled: _value.indexOf('spv') > -1 ? false : true,
+          checked: defaultMode === 'spv' ? true : false,
+        },
+        nativeMode: {
+          disabled: _value.indexOf('native') > -1 ? false : true,
+          checked: defaultMode === 'native' ? true : false,
+        },
+        mode: modeToValue[defaultMode] !== undefined ? modeToValue[defaultMode] : -2,
+      }
 
-    _coins[index] = {
-      [e.target.name]: _value,
-      spvMode: {
-        disabled: _value.indexOf('spv') > -1 ? false : true,
-        checked: defaultMode === 'spv' ? true : false,
-      },
-      nativeMode: {
-        disabled: _value.indexOf('native') > -1 ? false : true,
-        checked: defaultMode === 'native' ? true : false,
-      },
-      mode: modeToValue[defaultMode] !== undefined ? modeToValue[defaultMode] : -2,
+      this.setState(Object.assign({}, this.state, {
+        coins: _coins,
+      }));
     }
-
-    this.setState(Object.assign({}, this.state, {
-      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,50 +1,43 @@
-import React from 'react';
 import { translate } from '../../translate/translate';
 import mainWindow from '../../util/mainWindow';
 
-class AddCoinOptionsAC extends React.Component {
-  render() {
-    const _assetChains = [
-      'bet',
-      'bots',
-      'ceal',
-      'coqui',
-      'crypto',
-      'hodl',
-      'dex',
-      'jumblr',
-      'kv',
-      'mgw',
-      //'mvp',
-      'mnz',
-      'pangea',
-      'revs',
-      'mshark',
-      'supernet',
-      'wlc',
-    ];
-    let _items = [];
+const addCoinOptionsAC = () => {
+  const _assetChains = [
+    'bet',
+    'bots',
+    'ceal',
+    'coqui',
+    'crypto',
+    'hodl',
+    'dex',
+    'jumblr',
+    'kv',
+    'mgw',
+    //'mvp',
+    'mnz',
+    'pangea',
+    'revs',
+    'mshark',
+    'supernet',
+    'wlc',
+  ];
+  let _items = [];
 
-    for (let i = 0; i < _assetChains.length; i++) {
-      let availableModes = _assetChains[i] !== 'kv' && _assetChains[i] !== 'mgw' ? 'spv|native' : 'native';
+  for (let i = 0; i < _assetChains.length; i++) {
+    let availableModes = _assetChains[i] !== 'kv' && _assetChains[i] !== 'mgw' ? 'spv|native' : 'native';
 
-      if (mainWindow.arch !== 'x64') {
-        availableModes = 'spv';
-      }
-
-      _items.push(
-        <option
-          key={ _assetChains[i] }
-          value={ `${_assetChains[i].toUpperCase()}|${availableModes}` }>{ translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`) }</option>
-      );
+    if (mainWindow.arch !== 'x64') {
+      availableModes = 'spv';
     }
 
-    return (
-      <optgroup label={ translate('ADD_COIN.ASSETCHAINS') }>
-      { _items }
-      </optgroup>
-    );
+    _items.push({
+      label: translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`),
+      icon: _assetChains[i],
+      value: `${_assetChains[i].toUpperCase()}|${availableModes}`,
+    });
   }
+
+  return _items;
 }
 
-export default AddCoinOptionsAC;
+export default addCoinOptionsAC;

react/src/components/addcoin/addcoinOptionsACFiat.js

@@ -1,58 +1,51 @@
-import React from 'react';
 import { translate } from '../../translate/translate';
 
-class AddCoinOptionsACFiat extends React.Component {
-  render() {
-    const _fiat = [
-      'aud',
-      'brl',
-      'gbp',
-      'bgn',
-      'cad',
-      'hrk',
-      'czk',
-      'cny',
-      'dkk',
-      'eur',
-      'hkd',
-      'huf',
-      'inr',
-      'idr',
-      'ils',
-      'jpy',
-      'krw',
-      'myr',
-      'mxn',
-      'nzd',
-      'nok',
-      'php',
-      'pln',
-      'ron',
-      'rub',
-      'sgd',
-      'zar',
-      'sek',
-      'chf',
-      'thb',
-      'try',
-      'usd'
-    ];
-    let _items = [];
+const addCoinOptionsACFiat = () => {
+  const _fiat = [
+    'aud',
+    'brl',
+    'gbp',
+    'bgn',
+    'cad',
+    'hrk',
+    'czk',
+    'cny',
+    'dkk',
+    'eur',
+    'hkd',
+    'huf',
+    'inr',
+    'idr',
+    'ils',
+    'jpy',
+    'krw',
+    'myr',
+    'mxn',
+    'nzd',
+    'nok',
+    'php',
+    'pln',
+    'ron',
+    'rub',
+    'sgd',
+    'zar',
+    'sek',
+    'chf',
+    'thb',
+    'try',
+    'usd'
+  ];
+  let _items = [];
 
-    for (let i = 0; i < _fiat.length; i++) {
-      _items.push(
-        <option
-          key={ _fiat[i] }
-          value={ `${_fiat[i].toUpperCase()}|native` }>{ translate(`FIAT_CURRENCIES.${_fiat[i].toUpperCase()}`) }</option>
-      );
-    }
-
-    return (
-      <optgroup label={ translate('ADD_COIN.FIAT_CURRENCIES') }>
-      { _items }
-      </optgroup>
-    );
+  for (let i = 0; i < _fiat.length; i++) {
+    _items.push({
+      label: translate(`FIAT_CURRENCIES.${_fiat[i].toUpperCase()}`),
+      icon: _fiat[i],
+      value: `${_fiat[i].toUpperCase()}|native`,
+    });
   }
+
+  return _items;
 }
 
-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 {
-  constructor() {
-    super();
-    this.state = {
-    };
-  }
+const addCoinOptionsCrypto = () => {
+  const availableKMDModes = mainWindow.arch === 'x64' ? 'spv|native' : 'spv';
 
-  render() {
-    let availableKMDModes = mainWindow.arch === 'x64' ? 'spv|native' : 'spv';
-
-    return (
-      <optgroup label={ translate('ADD_COIN.CRYPTO_CURRENCIES') }>
-        <option value={ `KMD|${availableKMDModes}` }>Komodo (KMD)</option>
-        <option value="CHIPS|spv">Chips (CHIPS)</option>
-      </optgroup>
-    );
-  }
+  return [{
+    label: 'Komodo (KMD)',
+    icon: 'KMD',
+    value: `KMD|${availableKMDModes}`,
+  },
+  {
+    label: 'Chips (CHIPS)',
+    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 AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
-import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+import addCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
+import addCoinOptionsAC from '../addcoin/addcoinOptionsAC';
+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
-            className="form-control form-material"
+          <Select
             name="selectedCoin"
             value={ coin }
             onChange={ (event) => this.updateSelectedCoin(event, i) }
-            autoFocus>
-            <option>{ translate('INDEX.SELECT') }</option>
-            <AddCoinOptionsCrypto appSettings={ this.props.Settings } />
-            <AddCoinOptionsAC appSettings={ this.props.Settings } />
-            { mainWindow.arch === 'x64' &&
-              <AddCoinOptionsACFiat appSettings={ this.props.Settings } />
-            }
-          </select>
+            optionRenderer={ this.renderCoinOption }
+            valueRenderer={ this.renderCoinOption }
+            options={ addCoinOptionsCrypto().concat(addCoinOptionsAC()).concat(addCoinOptionsACFiat()) } />
         </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';