diff --git a/react/package.json b/react/package.json index f50b05e..ed057b8 100644 --- a/react/package.json +++ b/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", diff --git a/react/src/components/addcoin/addcoin.js b/react/src/components/addcoin/addcoin.js index d44c4ff..3cd2a53 100644 --- a/react/src/components/addcoin/addcoin.js +++ b/react/src/components/addcoin/addcoin.js @@ -174,37 +174,53 @@ class AddCoin extends React.Component { } } + renderCoinOption(option) { + return ( +
+ { + { option.label } +
+ ); + } + 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, diff --git a/react/src/components/addcoin/addcoin.scss b/react/src/components/addcoin/addcoin.scss index 284e025..bab6c8c 100644 --- a/react/src/components/addcoin/addcoin.scss +++ b/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 { diff --git a/react/src/components/addcoin/addcoinOptionsAC.js b/react/src/components/addcoin/addcoinOptionsAC.js index bd46a00..a6d4525 100644 --- a/react/src/components/addcoin/addcoinOptionsAC.js +++ b/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( - - ); + if (mainWindow.arch !== 'x64') { + availableModes = 'spv'; } - return ( - - { _items } - - ); + _items.push({ + label: translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`), + icon: _assetChains[i], + value: `${_assetChains[i].toUpperCase()}|${availableModes}`, + }); } + + return _items; } -export default AddCoinOptionsAC; +export default addCoinOptionsAC; diff --git a/react/src/components/addcoin/addcoinOptionsACFiat.js b/react/src/components/addcoin/addcoinOptionsACFiat.js index b390546..a725d86 100644 --- a/react/src/components/addcoin/addcoinOptionsACFiat.js +++ b/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( - - ); - } - - return ( - - { _items } - - ); + 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; diff --git a/react/src/components/addcoin/addcoinOptionsCrypto.js b/react/src/components/addcoin/addcoinOptionsCrypto.js index fde4efc..b2c36a2 100644 --- a/react/src/components/addcoin/addcoinOptionsCrypto.js +++ b/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 ( - - - - - ); - } + return [{ + label: 'Komodo (KMD)', + icon: 'KMD', + value: `KMD|${availableKMDModes}`, + }, + { + label: 'Chips (CHIPS)', + icon: 'CHIPS', + value: `CHIPS|spv`, + }]; } -export default AddCoinOptionsCrypto; +export default addCoinOptionsCrypto; diff --git a/react/src/components/addcoin/coin-selectors.render.js b/react/src/components/addcoin/coin-selectors.render.js index 986573d..dc52714 100644 --- a/react/src/components/addcoin/coin-selectors.render.js +++ b/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) {
- + optionRenderer={ this.renderCoinOption } + valueRenderer={ this.renderCoinOption } + options={ addCoinOptionsCrypto().concat(addCoinOptionsAC()).concat(addCoinOptionsACFiat()) } />
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss index db36c10..c9f38b1 100644 --- a/react/src/styles/index.scss +++ b/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';